Qatchup 网站预览
Qatchup 网站预览

Qatchup

近白色基底、手绘图形与胶囊形控件。

页面以近白色为基底,搭配近黑色文字。字体采用 Aspekta、Fasthand。视觉特点包括手绘图形、胶囊形控件、网格布局、紧密字距。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有交互元素都使用 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 或正值。紧密字间距是标志性特征。