Supabase 网站预览
Supabase 网站预览

Supabase

近黑色基底、胶囊形控件与细线分隔。

页面以近黑色为基底,搭配近白色文字。局部操作控件以绿色强调。字体采用 Circular、Source Code Pro。视觉特点包括胶囊形控件、细线分隔、分屏构图、网格布局。适合参考的场景:技术产品首页、开发工具说明页。

查看原始网站

使用规范

建议采用

  • 使用 #3ecf8(磷光绿)专用于主要 CTA、强调的标题关键词、标志和激活的导航指示器——将绿色限制为每个视觉区域仅一个元素
  • 所有按钮圆角设为 9999px(胶囊形),所有卡片圆角设为 16px——胶囊与卡片的双重形态定义了系统
  • 标题使用 Circular 400 字重,强调和按钮标签使用 500 字重——绝不使用粗体字重;500 是系统中最强的声音
  • 在 #121212 背景上,使用 1px 实线 #2e2e2 边框分隔不同表面——绝不依赖阴影来定义层级
  • 所有字号下保持 -0.007em 的字间距——负值字间距是让 Circular 产生定制感和紧凑感的关键
  • 在输入框上使用 #3ecf8 作为聚焦边框颜色(1px,无光晕环)——色彩边框替代了传统聚焦阴影
  • 保持页面画布为 #121212,不作任何替代——单一深色表面是系统的锚点

建议避免

  • 不要引入任何超出四种绿色之外的色彩——单色纪律是品牌核心
  • 不要在 Circular 中使用 600 或 700 字重——字体系统最高仅到 500;若需更多强调,应增大字号或使用磷光绿
  • 不要为卡片、弹出框或模态框添加阴影——设计刻意保持扁平,使用 #2e2e2 边框替代
  • 不要使用除 9999px(按钮/标签)、16px(卡片)或 8px(输入框)之外的圆角值——有限的圆角词汇是刻意为之
  • 不要将磷光绿用于大面积背景——它应仅作为小范围的功能性点缀,而非作为区块背景
  • 不要在浅色背景或非 #121212 画布上使用浅色文字——Snow(#fafafa)是唯一的文字颜色
  • 不要使用渐变——系统严格保持扁平、终端原生、无渐变