Craftwork 网站预览
Craftwork 网站预览

Craftwork

只有一盏酸绿灯的设计师工作室。明亮、如纸面般干净的工作空间,唯一鲜亮青柠强调标记高级货架,其余一切是审慎、画廊般安静的中性色。

Craftwork是一套干净浅色画布的市场语言,建立在近单色中性色上:#f9f9f9纸面上的白色卡片、深黑文字、灰色极细边框,以及唯一酸绿色(#cafc00)强调,作为高级内容和品牌展示场景的视觉荧光标记。几何人文主义无衬线Euclid Circular A承担排版,从低语般紧凑的72px展示标题(字间距约-0.069em)到紧凑的14–16px正文,形成编辑式而非疏朗的密度。组件轻放于表面:10px圆角卡片、9999px胶囊导航按钮,以及微弱到像纸面纹理而非高度效果的阴影。其余两种强调色,朱红#f54911与洋红#c42df9,只在图标、标签和插画中作为装饰标点出现,从不与绿色争夺注意力。整体节奏紧凑且以内容为先,优先目录密度而非宽裕留白。

查看原始网站

使用规范

建议采用

  • #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覆盖从说明文字到展示的一切职责。