第一章 · 缘起 2019

一盏灯,
照见山那边的课堂

「萤火纪」从一间只有九个孩子的山村教室开始。我们相信,好的故事不该只被讲述,更该被走完——这一页,就是我们一步步走过的路。

类别落地页 Landing Page 年代2020s Modern 复杂度中 Medium 最适合品牌故事 · 使命型产品 · 生活方式品牌 指纹分区配色 · 600ms 滚动揭示 · 区块转场

第二章 · 旅程

三幕结构,把品牌讲成一场旅程

第一幕 · 山谷里的第一盏灯

一次家访、一间漏风的教室。故事从具体的人开始,配色也从破晓的暖橙开始,情绪随章节推进而变化。

第二幕 · 一间教室长成一片林

情节进入生长段落,画面转入舒展的青绿。滚动至此,卡片以 600ms 依次浮现,节奏与叙事同步。

第三幕 · 星光落进孩子眼里

抵达与回望,由暮空蓝紫收束全篇。每一幕拥有自己的情绪色板,区块之间以渐变完成转场。

  1. 2019 · 一盏灯

    第一间教室亮起,九个孩子有了晚自习。

  2. 2022 · 一片林

    三十七所乡村学校加入,志愿者数量破千。

  3. 2026 · 一条河

    故事漂向更远的山谷,等你执笔续写。

第三章 · 互动

按钮与控件

章节徽章 · 第 3 幕已解锁

悬停按钮可见上浮与投影,按下有回弹,禁用态降低不透明度并锁定指针。

终章 · 与你有关

故事的下一段,由你写下

附录 A · 分区配色

章节配色板

晨曦橙#C2410C
林间青#0F766E
暮空紫#5B21B6
炬火金#D97706
晨雾白#FFF7ED
碳墨#292524

附录 B · 叙事字体

字体级阶

山与灯火

显示级 · Noto Serif SC 900 · clamp(40–64px)

章节标题的呼吸感

标题 · Noto Serif SC 600 · 28px

正文以无衬线呈现,字号 16px、行高 1.7,让一个很长的故事也能被安静地读完。

正文 · Noto Sans SC 400 · 16px

章节标签 · Chapter Label

标签 · Noto Sans SC 500 · 13px · 字距 0.12em