Discover 网站预览
Discover 网站预览

Discover

浅色基底、宽松留白与网格布局。

页面以浅色为基底,搭配近黑色文字。字体采用 Aeonik。视觉特点包括宽松留白、网格布局、大字排版。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • Signal Coral(#ee585a)只用于填充CTA、行内文字链接、通知圆点和悬浮筛选胶囊,绝不作为背景色洗,也绝不用在大面积表面。
  • 所有文字都使用Aeonik,或Inter/Satoshi替代字体,无论字号大小都采用-0.011em letter-spacing;一致的紧密字间距是品牌语气的一部分。
  • 所有卡片、按钮和容器都采用32px border-radius;大圆角是标志性特征,定义了柔和现代的感受。
  • 所有文字和边框都采用Ink(#121212),而非纯#000000;暖意使近乎单色的调色板不显生硬。
  • 阴影限定为单一设计变量rgba(72,72,74,0.16) 0px 2px 32px 0px,只用于卡片和悬浮元素。
  • 基础节奏保持10px元素间隙和24px卡片内边距;分区分隔则跳至48px。
  • 让文字标志或展示标题承担视觉分量,辅助UI保持安静和单色。

建议避免

  • 不要引入额外强调色;1%色彩丰富度是刻意的,Signal Coral是唯一允许的彩色音符。
  • 任何容器都不要采用0-4px的锐利圆角;32px圆角定义了系统。
  • 文字、导航或行内元素不要使用投影;阴影只保留给卡片和悬浮胶囊。
  • 正文不要采用纯#000000,始终使用#121212,以保持柔和对比度(18.7:1)。
  • 展示文字不要采用宽松或正常字间距;紧密的-0.011em字间距是不可更改的要求。
  • 不要用Signal Coral填充大面积背景;大尺度使用会失去冲击力,它应保持为小型功能强调。
  • 不要添加渐变、纹理或装饰图像;系统刻意保持平面,并以排版为主。