Craftwork 网站预览
Craftwork 网站预览

Craftwork

近白色基底、胶囊形控件与圆角卡片。

页面以近白色为基底,搭配近黑色文字。字体采用 Euclid Circular A。视觉特点包括胶囊形控件、圆角卡片、细线分隔、宽松留白。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • #cafc00只作为单一品牌强调,每个视口区块应只有一个元素使用它,绝不让两个元素争夺注意力。
  • 展示标题采用62-72px,字间距在-0.050em与-0.069em之间,以匹配网站紧凑的编辑式节奏。
  • 所有卡片、按钮和输入框采用10px圆角,9999px仅用于胶囊、头像和Pro Access按钮。
  • 页面画布保持#f9f9f9,卡片浮在#ffffff上,绝不用#ffffff作为页面背景。
  • 所有抬高表面采用标志性阴影模式,即内嵌极细线+rgba(47,43,67,0.1)下的3px投影,形成纸层叠加深度。
  • 正文设为16px、-0.007em字间距及1.5行高,随字号增大逐步收紧。
  • 酸绿主要按钮与同尺寸的透明描边次要按钮配对,形成平衡的CTA组合。

建议避免

  • 不要使用#cafc0。 不要将#f54911或#c42df9用作大尺度背景填充,它们是装饰强调,而非表面颜色。
  • 不要使用比rgba(0,0,0,0.04)、8px/40px更浓的阴影,系统依靠纸面般安静的高度感,绝不戏剧性浮起。
  • 不要使用10px矩形、16-20px大型面板或9999px胶囊以外的圆角,不使用4px、6px或8px中间值。
  • 展示标题不要采用48-56px,尺度从42px跃至62px,因此50px会像错误。
  • 大型背景或卡片不要使用纯黑(#000000),它仅用于文字和小图标描边;深色表面使用#0d0d0d或#1e1e1。
  • 小文字(14px及以下)不要增加字间距,负字间距仅从16px起有效。
  • 不要引入第二种字体,Euclid Circular A覆盖从说明文字到展示的一切职责。