Expo 网站预览
Expo 网站预览

Expo

白色基底、文字主导与细线分隔。

页面以白色为基底。字体采用 Inter。视觉特点包括文字主导、细线分隔、扁平表面、单栏阅读排版。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 所有按钮、导航项和交互小标签都采用36px border-radius,以维持圆润胶囊的标志性特征。
  • Inter统一采用-0.012em letter-spacing,不要按元素单独覆盖字间距。
  • Signal Blue(#0090ff)保留给装饰点缀、代码强调和品牌图标,绝不要作为填充按钮背景。
  • 高强调CTA采用Ink(#1c2024)作为主要操作填充,并配Canvas White文字。
  • 分区以1px的Mist(#d9d9e0)细线分隔,而非卡片或阴影。
  • 文档和阅读内容限制在720px max-width的单栏内,以获得最佳行宽。
  • 先让字重(400 → 500 → 600 → 700)承担排版层级,再考虑字号或颜色。

建议避免

  • 不要引入投影、辉光效果或模糊背景;系统刻意保持平面。
  • 不要将Signal Blue作为CTA填充;唯一的彩色强调应起标点作用,而非主导画面。
  • 不要添加超过一种字体;Inter处理从微型标签到标题的所有语境。
  • 文档语境中,正文或标题字号不要超过20px;尺度刻意保持紧凑。
  • 任何交互元素都不要使用0-4px的锐利圆角;圆润小标签形状是不可更改的要求。
  • 不要叠用多个彩色强调;系统由单色加唯一蓝色组成。
  • 不要采用渐变;系统全部使用平面颜色,并依靠色调对比。