Tailark Pro 网站预览
Tailark Pro 网站预览

Tailark Pro

白色基底、细线分隔与网格布局。

页面以白色为基底。字体采用 Geist Mono、Mulish。视觉特点包括细线分隔、网格布局、产品图像展示。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮、输入框和标签都使用 6px 圆角。小圆角是系统的结构性标志。
  • 标志、链接文字和激活导航状态将 #615fff Violet 与白色配对,让它成为界面框架上唯一的彩色元素。
  • 插画中任何突出的数字都使用 Geist Mono,字号为 30px,字重为 600。这是主角级数据的呈现方式。
  • 卡片采用 1px 的 Hairline #e4e4e7 边框,加上3级阴影叠层,即边框与 4px/2px 的柔和投影。边框承担主要分量,阴影只轻声辅助。
  • 页面画布保持 #ffffff。颜色由插画模型内部引入,而不是来自彩色区块背景。
  • 彩色标签配色 Mint、Amber、Crimson、Sunburst、Ultraviolet、Iris,只作为卡片上的小型 24–32px 徽章叠层使用,绝不做成通栏元素。
  • 页面最大宽度设为 1280px,画廊网格保持从 4 列到 2 列的变化,卡片之间留出 8–12px 间距。

建议避免

  • 不要使用彩色区块背景。画布必须保持白色,颜色只存在于组件卡片内部。
  • 不要使用重投影或发光效果。悬浮感是轻微的3级处理,而不是 10–20px 的大幅投影。
  • 标题不要超过 30px。这套系统通过紧凑层级,而非字号尺度来传达信息。
  • 按钮、输入框和标签不要使用 32px+ 的大圆角;这种圆角仅留给功能级卡片。
  • 单个界面框架元素上不要出现超过一种彩色强调。紫罗兰色独立使用,标签颜色也独立使用。
  • #ec003f Crimson、#fe9a00 Amber 或 #ffb900 Sunburst 不要用于正文或大面积填充。它们仅用于标签和徽章。
  • 正文或长描述不要居中。采用左对齐并限制最大宽度,以保持画廊节奏。