RainbowKit 网站预览
RainbowKit 网站预览

RainbowKit

近黑色基底、圆角卡片与网格布局。

页面以近黑色为基底，搭配白色文字。局部操作控件以蓝色强调。字体采用 SFRounded、SFMono。视觉特点包括圆角卡片、网格布局、渐变展示、居中构图。适合参考的场景：技术项目官网、区块链产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮、标签和胶囊控件均使用 9999px 圆角——圆角是品牌的亲和信号
  • 在 Obsidian 表面的所有抬升交互元素上应用 1px 内嵌白色边框（rgba(255,255,255,0.12)）
  • 仅将极光渐变（linear-gradient(to right, #3898ff, #7a70ff)）用于主要首屏区域 CTA 和品牌标识——保留它使其显得高端
  • 所有次要操作按钮和链接强调默认使用 #0e76fd
  • 正文使用 16px SFRounded 字重 400，字间距 0.27px；标题使用 40-52px 字重 700，字间距 0.88-1.3px
  • 产品卡片以 rgba(0, 0, 0, 0.4) 0px 8px 24px 0px 悬浮——厚重的阴影是让弹窗像产品窗口般感知的关键
  • 画布保持真正的 #000000 ——永远不要用偏黑调色，虚无才是重点

建议避免

  • 不要将色彩变体（Hyper Pink, Ember Red, Solar Orange, Toxic Green）用作语义 UI 状态——它们是演示选项，而非成功/错误/警告令牌
  • 不要对文字或画布本身应用阴影——阴影只属于悬浮卡片，背景是无阴影的
  • 不要使用负字间距——SFRounded 为正字间距设计；收紧字间距会破坏圆润的字母形态
  • 不要引入第二套正文字体；SFRounded 负责从 11px 图注到 52px 展示文字的全部角色，衬线字体或系统回退字体会破坏统一性。
  • 不要在画布上放置白色或浅色卡片——所有表面必须保持在 Obsidian/Graphite 范围内以维持虚无感
  • 不要使用 #25292 作为文字——它是边框颜色，其对比度不足以支撑可读文本
  • 不要对手机或产品截图图像使用小圆角——它们应为 24px 以上或完全继承设备边框

相似设计语言