ElevenReader

近白色基底、胶囊形控件与细线分隔。
页面以近白色为基底。字体采用 WaldenburgHF、Inter。视觉特点包括胶囊形控件、细线分隔、网格布局、渐变展示。适合参考的场景:AI 服务首页、产品演示介绍页。
查看原始网站使用规范
建议采用
- 每个标题都使用 WaldenburgHF,或替代字体 Bricolage Grotesque 800,字号为 28/32/48px,lineHeight 为 1.10。展示字号绝不使用 Inter。
- 每个按钮、导航项和胶囊控件都使用 9999px 圆角;16px 留给卡片,8px 留给小型行内容器。
- 正文使用 Inter 400/16px,行高为 1.40,字间距为 0.16px。16px 文字的行高绝不低于 1.40。
- FAQ 行和叠放列表之间使用 1px 的 #e5e5e5 边框分隔,而不是背景着色或空隙。
- 页面画布使用 #f2f2f2,所有卡片及抬升表面使用 #ffffff。这两个值承担整个表面系统。
- 每页恰好使用一次首屏氛围渐变,采用径向、森林绿至薰衣草色的过渡;绝不在正文区块中重复。
- 实心黑色胶囊按钮搭配白色幽灵胶囊按钮,作为标准的主要与次要 CTA 组合。
建议避免
- CTA 或交互状态不要引入彩色强调。系统没有专门的操作色,所有操作通过黑白胶囊组合来表达。
- WaldenburgHF 不要使用 700 之外的任何字重。坚持单一字重是标志性特征。
- 除实心 CTA 上唯一的 1px 0 1 2 rgba(16,24,40,0.05) 外,任何地方都不要添加投影。悬浮效果是有意缺席的。
- #c8d5f4 不要作为功能性界面颜色。它是氛围色调,而不是 Token。
- Inter 不要使用字重 500 或 600。系统只有 400 和 700。
- FAQ 折叠面板各行之间不要增加空隙。1px 边框本身就是分隔。
- 区块间距不要小于 48px。设计依靠宽裕的垂直留白来形成编辑设计感。