Krepling 网站预览
Krepling 网站预览

Krepling

安静的白色工坊中仅有一处紫罗兰色的亮点

Krepling的设计系统是一张近单色调画布:黑色文字与白色表面承载界面,唯一鲜明的紫罗兰色Bolt Violet负责操作、链接和交互状态的彩色表达。布局能够呼吸,留白宽裕、密度舒适,区块节奏来自字号的大幅跃升(16px → 80px),而非彩色横带。表面平坦,边框与细微的背景淡染(#f1f1f1)定义层次,基本没有阴影。圆角几何保持一致,卡片和按钮为8px,较大容器为14px,强化柔和亲切的感受。饱和色的活泼3D渲染装饰物与这一体系形成平衡;它们纯粹用于营造氛围,绝不作为UI设计变量。

查看原始网站

使用规范

建议采用

  • 仅使用 #b154f9 用于填充型CTA、描边型CTA以及激活的标签/链接状态——它是系统中唯一的色彩表达
  • 通过字号和字间距(16→80px,展示文字采用-0.01em)建立层级,绝不用粗字重;该字体仅提供400字重。
  • 所有按钮、卡片和小容器使用8px圆角;较大面板使用14px;仅在首屏级表面使用30px圆角
  • 通过Ink Black或Fog Gray的1px边框,或Mist Gray(#f1f1f1)替代表面来传达层级——绝不用阴影
  • 让3D装饰元素在首屏/区块组合中承载全部色彩;周围UI必须保持无色,以使装饰元素突出
  • 将页面画布设为#ffffff,页面最大宽度设为1200px并居中;用垂直节奏(80px区块间距)来营造节奏感
  • 仅在页脚处转为#171717背景并使用#ffffff文字——其他所有表面保持明亮

建议避免

  • 不要在UI色彩体系中引入第二个品牌色——紫罗兰色必须是唯一的色彩点缀
  • 不要使用600或700字重——系统中无粗体;层级必须通过尺寸体现
  • 不要在卡片、按钮或弹窗上应用阴影——该系统刻意保持扁平
  • 不要在卡片或按钮上使用4px或12px圆角——坚持使用8px / 14px / 30px
  • 不要将正文文字设置在16px以下或行高1.3以上——该尺寸是明确的规范
  • 不要将UI文字置于任何装饰插画的色彩中(如珊瑚、薄荷绿、黄色等)——这些色彩仅用于艺术作品
  • 不要在页面中交替使用深色与浅色区块——整个页面保持明亮,仅页脚为唯一深色反差