Little Amps 网站预览
Little Amps 网站预览

Little Amps

暖白色基底、衬线字形与等宽文字标注。

页面以暖白色为基底，搭配深红色文字。局部操作控件以红色强调。字体采用 Little Amps、Inclusive Sans。视觉特点包括衬线字形、等宽文字标注、扁平表面、居中构图。适合参考的场景：品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有展示标题采用Little Amps衬线、20–51px和-0.10em字间距；它是唯一提示品牌身份的语气。
  • 所有UI标签、导航、按钮、日期和价格都采用Necto Mono全大写与0.05em字间距；等宽语气本身就是结构系统。
  • 页面背景默认Cream Paper（#fff9f2），提高一级的表面使用Linen Beige（#f6ede3），绝不用纯白。
  • Burnt Orange（#c03001）是唯一填充操作色，所有主要CTA保持3px圆角，呈现印刷标签感。
  • 所有边框都设为1px的Taupe Hairline（#e6dad4）细线，绝不用厚重阴影或粗边框。
  • 任何弱化、次级或辅助文字都使用Coffee Dust（#977e77），绝不采用普通灰色。
  • 满幅纪实摄影配左上角Hero Brand Block，让图像承担氛围。

建议避免

  • 不要使用纯黑、纯白或蓝灰系统中性色；整套调色板温暖且与咖啡有关。
  • 不要采用胶囊、16px+或完整圆形等大border-radius，系统保持3–8px小圆角的清晰边缘。
  • 不要采用厚重投影或抬升效果，深度来自表面色变化，而非阴影。
  • 正文或段落不要采用展示衬线或等宽字体，Inclusive Sans是唯一正文字体。
  • 不要引入额外强调色；系统有明确纪律，唯一鲜亮橘、唯一琥珀、唯一金盏花和唯一灰蒙蓝。
  • 状态语义不要使用明亮纯红、绿或蓝，暖调色板将它们改写为Espresso和Burnt Orange。
  • 品牌展示场景不要使用Inter、Helvetica或system-ui；定制展示衬线与等宽配对不可更改。

相似设计语言