Qatchup 网站预览
Qatchup 网站预览

Qatchup

暖纸上的墨迹,安静低语。

Qatchup 使用近乎无彩色的画布,唯一的颜色用于情感表达:暖白上是淡化的灰色墨迹网格,产品几乎完全通过文字、间距和一处手写强调来传达。系统由克制定义,定制展示无衬线字体 Aspekta 采用紧密负字间距,搭配胶囊控件;卡片通过多层细线阴影漂浮,而非使用彩色表面。结构由边框分量与垂直节奏建立,不依赖填充或渐变。手写字体 Fasthand 偶尔出现,像一个人留下的签名,例如首屏上方的 'Listen!'(听听看!) 和 'Open Letter'(公开信) 引导语,为原本建筑式网格注入情感温度。组件精简且轻淡:深色胶囊按钮用于主要操作,浅色胶囊用于次要操作,带边框卡片用于内容区块,细分隔线则承担布局结构。彩色手绘插画只是装饰氛围,不是界面 Token 系统;界面本身始终安静、单色。

查看原始网站

使用规范

建议采用

  • 所有交互元素都使用 100px 或 999px 圆角,仅采用胶囊按钮和完全圆润的标签。
  • 所有展示标题都使用 48-56px 的 Aspekta,字间距为 -0.030em 至 -0.035em。
  • 卡片、分隔线和结构线的默认边框颜色使用 #696969(Steel)。
  • 阴影叠层先放置 0px 0px 0px 1px 的细线环,再添加柔和投影。绝不使用单一生硬阴影。
  • 每个区块最多使用一次 Fasthand 情感引导语,例如 'Listen!'(听听看!) 或 'Open Letter'(公开信)。
  • 所有界面元素都保持中性配色,颜色只出现在装饰性插画中。
  • 区块之间保持 80-120px 的垂直节奏。留白是品牌的一部分。

建议避免

  • 按钮、链接或文字不要引入彩色强调。这套系统没有此类颜色。
  • 卡片不要采用方角或 4-8px 圆角。32px 圆角是品牌的结构性特征。
  • 不要将装饰性的彩虹插画风格应用于图标、控件或功能图形。
  • 正文不要使用 Aspekta 字重 500;该字重只留给按钮标签和单词强调。
  • 不要为区块添加背景色。系统依靠留白和暖白画布区分区块。
  • 界面元素不要使用渐变。系统平面且哑光,悬浮感只来自阴影。
  • 展示字号的字间距不要设为 0 或正值。紧密字间距是标志性特征。