OpenSea 网站预览
OpenSea 网站预览

OpenSea

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

页面以近黑色为基底,搭配白色文字。字体采用 gtAmerica、gtAmericaMono。视觉特点包括网格布局、圆角卡片。适合参考的场景:区块链项目介绍页、生态网站首页。

查看原始网站

使用规范

建议采用

  • 仅使用 #83c3ff 用于带描边的交互元素和信息性链接——绝不可作为填充按钮背景或大面积装饰色。
  • 为每个卡片边缘定义 1px 内嵌白色透明环 (rgba(255,255,255,0.08)),而非使用阴影;仅在最高层级表面保留 0.03 黑色阴影以实现极细微的浮起感。
  • 几乎全部 UI 文字保持在 12–16px 的 gtAmerica 范围内;仅将 20px 和 32px 保留给页面首屏和节标题。
  • 任何需要对齐列表的数值——如价格、计数、地址、时间戳——均使用 gtAmericaMono,并保持在 12–14px 范围内。
  • 按钮、图标和胶囊控件使用 4px 半径,卡片和面板使用 8px 半径;主 UI 中任何容器的半径均不可超过 8px。
  • 将表面分层置于固定 5 步色调阶梯 (#080809 → #141415 → #1b1d1f → #26272d → #3c3d40) 上,使层级关系通过色调变化呈现,而非依赖阴影或边框。
  • 元素间距保持在 8–12px 范围,区块间距设定为 48px,以维持密集的终端式信息密度。

建议避免

  • 不要引入第二个色彩强调——系统为单色,仅有一个冰信号蓝;任何额外色彩都会与验证和链接语义产生冲突。
  • 不要使用填充色按钮、渐变或发光效果;带描边的蓝色操作是系统中允许的唯一色彩元素。
  • 不要应用比单层 1px 2px 黑色透明阴影更重的阴影——OpenSea 的整体视觉为平面,而非拟物化。
  • 不要在主要语义内容中使用 Fog (#acadae) 作为正文或链接文字——Fog 仅用于占位符、副标题和时间戳。
  • 任何容器的角落半径均不可超过 8px——更大的半径会破坏密集、实用的视觉感受。
  • 节标题高度不可超过 32px 或低于 20px;20–32px 的范围是系统在层级表达中的字体基调。
  • 不要将纸白文字置于纸白背景或最浅表面 (#3c3d40) 上,除非有边框——正文对比度必须始终达到 12:1。