Composer 网站预览
Composer 网站预览

Composer

如同混凝土上的Bauhaus彩纸。

Composer采用编辑式交易宣言的语言:浅灰画布上散落Bauhaus彩纸,鲜亮蓝、绿、粉和黄色矩形像信息形状,而非装饰。Neue Haas Grotesk Display文字拉大到244px,让标题像杂志封面一样占主导,Inter则处理下方安静紧凑的UI附属元素。系统在营销表面上自信且极繁,在产品工作中却收缩为干净实用的仪表盘,锐利2px图标边缘与9999px胶囊按钮并存而不矛盾,因为二者都优先清晰,而非柔软。颜色作为功能标点部署,近白表面上的黑色文字、随处可见的灰色细线边框,以及饱和彩色区块,在其余单色网格中标记重点、分组信息并建立视觉节奏。

查看原始网站

使用规范

建议采用

  • 按钮、标签和导航项等所有交互元素都采用9999px border-radius;胶囊形是不可更改的要求。
  • 展示标题需要拥有整个页面时,可以达到244px;不要将编辑式时刻限制在48-64px。
  • 将彩纸色块用作几何构图元素:零圆角、实色填充,采用Signal Blue、Pulse Green、Hot Pink、Solar Yellow和Cotton Candy,散布在灰色画布上。
  • 聚焦环和带品牌气质的抬升采用蓝调阴影rgba(24, 113, 218, 0.25);蓝调可用时,绝不要使用中性灰阴影。
  • 正文和标题采用Paper(#ffffff)或Concrete(#e5e7eb)上的Obsidian(#000000);21:1对比度是系统的安全下限。
  • 正文内的强调词采用Cotton Candy(#ffb4ed)背景,提高编辑式扫读性,而不改变文字颜色。
  • 所有字号,包括展示文字,都保持0.01em至0.057em的正letter-spacing;轻盈字间距使系统区别于紧缩编辑式字体。

建议避免

  • 不要创建彩色填充CTA按钮;唯一填充按钮是Obsidian(#000000),彩色用于装饰,而非操作。
  • 平面分区不要使用阴影;Concrete画布上的卡片依靠1px的Concrete边框,而非抬升,以保持瑞士编辑式平面感。
  • 正文字号不要低于14px或高于16px;14-16px范围是次级Inter接替Neue Haas Grotesk的区域。
  • 卡片或容器的border-radius不要大于6px;2px图标与6px卡片构成系统,9999px只留给按钮和标签。
  • 单个构图不要采用超过三种彩色强调;彩纸效果成立是因为每种颜色独立,而非混合。
  • 交互元素上不要用中性阴影替代蓝调阴影;rgba(24, 113, 218, 0.25)品牌色调使聚焦状态具有系统感。
  • 展示标题不要低于56px,任何字号也不要采用负letter-spacing;至少0.01em的正字间距保留编辑式呼吸空间。