Pastel 网站预览
Pastel 网站预览

Pastel

一本安静纸笔记本,盖着唯一鲜亮墨印。

Pastel 是安静、纸暖的画布,被唯一鲜蓝印章打断。界面近单色,石白背景上的深近黑文字,冷灰蓝边框承担其他设计中阴影的结构工作。唯一钴蓝强调只在决策点出现:主要行动按钮、激活链接、少数品牌标记。特别的 8.8px 圆角是标志,比 6px 科技感柔和,比 12px 消费感紧密,传达“严肃工具,足够友好”。Figtree 在每种字号上使用负字间距,将标题拉成紧凑自信形状,不让其散开。密度宽裕,留白作为结构元素,而非奢侈。组件平面、细边框,绝不通过阴影浮起。

查看原始网站

使用规范

建议采用

  • Cobalt Stamp #165dfb 只用于填充式主要按钮、激活链接与品牌标志圆点,绝不用在标题、图标或装饰色层上。
  • 每个卡片、按钮和容纳式图片圆角 8.8px,15px 留给更大装饰表面,120px 只用于品牌标记。
  • 正文 Figtree 16–18px、字重 400、Ink Black #111111;Fog Gray #78716b 专供辅助元数据和小图标提示。
  • 应用负字间距:58px 时 -0.016em,45px 时 -0.014em,缩小到 18px 及以下时为 normal。
  • 区块通过 Paper Stone 与 Chalk 的背景色变化分隔,而非边框、分割线或阴影。
  • 行动按钮保持平面,无投影、渐变或悬停抬升,Cobalt Stamp 填充就是全部浮起信号。
  • 默认页面画布 Paper Stone #f5f5f4,Pure White #ffffff 只用于画布上的卡片内部,绝不作为页面背景。

建议避免

  • 不要引入额外强调色,系统刻意只有 1% 彩色,第二色相会破坏唯一印章身份。
  • 不要用纯 #000000,Ink Black 是 #111111,Graphite 是 #222222,Charcoal Block 是 #45403c,始终保留暖底调。
  • 卡片或按钮不要添加 box-shadow,设计用细边框的平面表面作为浮起语言。
  • 卡片或按钮不要圆成 12px、16px、9999px,8.8px 是刻意选择的非标准值,定义系统。
  • 标题字间距不要设为 0 或正值,35px 及以上的负字间距是系统标志。
  • Cobalt Stamp 不要用于大文字块、区块背景或插画填充,大尺度使用会失去紧迫感。
  • 展示或正文不要用 Inter,Figtree 是唯一可见品牌声音,Inter 只是功能回退。