Tableland 网站预览
Tableland 网站预览

Tableland

近黑色基底、圆角卡片与分屏构图。

页面以近黑色为基底,搭配白色文字。局部操作控件以青绿色强调。字体采用 Poppins。视觉特点包括圆角卡片、分屏构图、胶囊形控件、网格布局。适合参考的场景:区块链项目介绍页、生态网站首页。

查看原始网站

使用规范

建议采用

  • 所有展示与区块标题均使用 Poppins 300——轻盈字重是品牌标志性语调
  • 将 #0be291(薄荷绿)专用于强调性区块标题;绝不应用于正文、链接或背景
  • 使用 #75b6b5(青绿)承载所有交互语感——导航链接、图标线条、了解更多提示
  • 通过四步层级叠加表面:#101e1(页面)→ #162929(中层)→ #3b4949(提升状态卡片)→ #1a1a1a(终端)
  • 按钮和代码块使用 4px 圆角,内容卡片使用 8px,提升状态测试卡片使用 16px,仅标签和图标容器使用 9999px
  • 区块标题居中对齐,并为每个区块提供至少 128px 的垂直留白空间
  • 保持薰衣草色首屏作为唯一手绘时刻——在黑暗内部禁止引入渐变或插图

建议避免

  • 绝不使用字重600以上的展示标题——轻盈克制才是品牌声音
  • 绝不将 #0be291 应用于链接、图标或背景——分散使用会破坏层级感
  • 绝不使用胶囊形圆角(9999px)于按钮或卡片——胶囊形仅限于标签和图标容器
  • 绝不引入阴影或立体效果——设计依赖表面色彩阶梯,而非深度
  • 绝不使用纯黑色(#000000)——所有深色均带有轻微绿调(#101e1、#1a1a1a、#162929)
  • 绝不引入超出现有四种色彩(青绿、薄荷、珊瑚、薰衣草)的强调色——色彩体系刻意保持狭窄
  • 每个UI区域最多使用一种色彩——青绿用于交互,薄荷用于强调,珊瑚仅用于首屏插图