Superlist 网站预览
Superlist 网站预览

Superlist

带有珊瑚余烬的午夜工作区:安静茄紫应用表面上,唯一暖橙火花提示每个操作。

Superlist 采用午夜紫罗兰效率工具语言:深茄紫画布上,暖珊瑚色是唯一点火色,超大无衬线标题承担全部情绪。界面像专注的深夜工作区,安静、分层、自信;颜色只作为 CTA、激活状态和关键高亮的功能标点。表面通过带细微紫色调的深色 #181824 → #26253b 叠放,避开纯黑,让纵深温暖而非临床化。组件采用宽大圆角,包括 20px 卡片与胶囊按钮,配柔和阴影,通过舒适的 10–16px 空隙呼吸,而非紧密网格。标题声音就是全部,70–88px 的字重 600 配 -0.02em 紧密字间距,将文案视为文字艺术而非界面文本,更接近编辑设计而不是 SaaS。

查看原始网站

使用规范

建议采用

  • #ff4a36 少量使用,每个视口最多出现在一个元素上,例如 CTA、标题强调词或激活状态指示,以保留信号强度。
  • 标题采用 Haffer XH SemiBold 600,字号为 70–88px,字间距为 -0.02em。这种超大编辑声音是品牌标志。
  • 所有卡片、产品框架和大型容器使用 20px 圆角;所有按钮、标签和胶囊输入框使用 100px。这些角色绝不混入 12px 或 16px 等中间值。
  • 表面使用深色叠层 #181824 画布 → #26253b 抬升 → #000000 下沉。主要画布使用细微暖紫底调,而非纯黑。
  • 14px 及以上的所有文字都采用 -0.01em 至 -0.02em 字间距。紧密间距对于编辑气质不可缺少。
  • 正文使用 Inter 400、16px、1.4 行高,以及 #696f81 或 #8e8da0。段落绝不用纯白,#ffffff 只留给标题。
  • 首屏内容和标题居中,让布局像杂志跨页,而非仪表盘网格。

建议避免

  • 不要引入其他强调色。系统采用茄紫与珊瑚双色,任何第二种彩色都会稀释品牌信号。
  • 交互元素不要采用 0–4px 的锐利圆角。胶囊与 20px 圆角语言必须坚持,以保持品牌辨识。
  • 正文段落不要使用 #ffffff,否则深底上会产生眩光;正文采用 #696f81,次要叙述采用 #8e8da0。
  • 标题不要使用字重 400。展示声音需要 600,才能在 70px+ 尺度上保持表现力。
  • 卡片与画布之间不要添加可见边框。#181824 对 #26253b 的表面叠层,无需描边就能区分。
  • 页面画布不要使用纯 #000000。暖茄紫 #181824 才让深色模式拥有独特氛围。
  • 不要为每个标题都拆分颜色。只有第二行或一个关键短语应采用珊瑚色,以保持模式的效果。