Switch-Lit

近白色基底、细线分隔与网格布局。
页面以近白色为基底,搭配近黑色文字。字体采用 ABCArizonaSans、ABCArizonaFlare。视觉特点包括细线分隔、网格布局、文字主导、摄影展示。适合参考的场景:内容网站首页、编辑专题页。
查看原始网站使用规范
建议采用
- 所有结构元素都以1px的Press Black(#000000)边框绘制;让油墨定义形状,而不是填充或阴影。
- Highlighter Lime(#edfe5e)、Cornflower(#bed4fb)和Spring Green(#31e992)只作为卡片、标签和色样上的小面积强调填充;绝不要作为满幅页面背景。
- 正文采用ABCArizonaSans 15–18px,正字间距保持0.04em至0.067em,使文案像经过排版,而非普通打字。
- ABCCameraHeavy 64–68px、0.74行高只保留给首屏展示文字块;极紧行距是系统最响亮的语气,过度使用会失去冲击力。
- 分区标题采用ABCArizonaFlare 300–400字重、57px;轻得如低语的衬线与厚重展示字体并置,通过克制建立权威感。
- 卡片采用12px圆角,按钮采用6px;这套两级圆角是系统中唯一的几何曲线语言。
- 页面背景始终保持Manuscript Cream(#f9f9f7),绝不要反转为深色模式;奶油色是定义系统的表面。
建议避免
- 不要使用box-shadow表现抬升;唯一允许的阴影是仅用于按钮的rgba(0,0,0,0.2) 0px 2px 6px 0px,卡片只通过边框定义。
- 不要将ABCArizonaSans与第二种无衬线正文字体配对;Arizona Sans是唯一的grotesque字体,混入Inter或Helvetica会破坏排版语气。
- 展示文字或标题不要采用ABCArizonaSans 700字重;系统将grotesque留给UI和正文,展示文字与标题分别由Camera Heavy和Flare承担。
- 不要将青柠色、矢车菊蓝和春绿强调色用于白色背景上的文字;它们对比度不足,无法通过可读性检查,只能作为黑色文字后面的填充色。
- 不要引入渐变;系统刻意保持平面,任何渐变都会削弱纸上油墨的比喻。
- 长段正文不要居中;正文应左对齐并限制最大行宽,居中只留给简短标签和首屏标题。
- 卡片圆角不要超过12px,按钮圆角不要超过24px;几何词汇保持克制,更柔软的圆角会破坏编辑式气质。