Base

白色基底、等宽文字标注与圆角卡片。
页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Doto、Coinbase Sans。视觉特点包括等宽文字标注、圆角卡片、大字排版、宽松留白。适合参考的场景:技术项目官网、区块链产品介绍页。
查看原始网站使用规范
建议采用
- 首屏标题使用80px、110px或115px,字间距收紧至-0.025em至-0.05em——极端的尺寸与紧密的字间距是该系统的标志性特征。
- 所有类别标签、区块标签和元数据均使用 Coinbase Mono 12px,字间距0.073em,大写呈现。
- 仅在三个场景中使用 #0000ff:标志区块、主要填充按钮和地图数据点。切勿用于正文、图标或装饰。
- 保持以4px为基准的间距网格:4、8、12、16、24、32、48px 用于间距和内边距。
- 所有卡片、按钮和面板的圆角均设为8px——确保表面系统的统一性。
- 每个区块配一个位于内容块上方16px处的 Coinbase Mono 类别标签。
- 所有区块的背景色统一为 #ffffff;仅在提升状态的面板和透明描边按钮中使用 #f2f2f2。
建议避免
- 除标志、主要操作按钮或地图数据点外,切勿使用 #0000ff——过度使用会破坏有限强调系统的平衡。
- 不要使用阴影或投影来实现层级感——结构来自间距和边框,而非阴影。
- 正文文本大小不得低于14px或高于18px——字体层级从18px跃升至32px。
- 不要使用渐变、照片背景或3D渲染——该系统为扁平且示意性的。
- 除8px(卡片/按钮/面板)或2px(小标签)外,切勿使用其他圆角值——不同圆角会破坏表面系统的连贯性。
- 不要破坏侧边栏与流式内容布局——固定左侧栏是结构性的,非可选。
- 不要通过颜色传递信息层级——应使用字体粗细、尺寸以及 Slate/Carbon 对比度来实现。