Loops 网站预览
Loops 网站预览

Loops

如同衬线标题后方的温暖羊皮纸,像下午阳光照亮的文具印刷校样。

Loops采用温暖的编辑式浅色界面:奶油纸色(#faf9f7)代替冷白,衬线展示字体Newsreader赋予营销屏幕杂志封面般的庄重,唯一的橘色(#f97316)几乎不出现,像信封上的蜡封。产品本身几乎完全无彩色,深色胶囊按钮、石色细线边框和平面表面,没有装饰渐变。组件像印刷的编辑式文具,行高宽松,展示字间距紧密,小标签采用999px胶囊,抬升被精简为单一细线内嵌阴影。AI agent应把橘色视为信号,而非界面装饰,它只应出现在标志、状态圆点和小图标强调上;主要操作始终为深炭灰胶囊,即#1c1917填充和白色文字。

查看原始网站

使用规范

建议采用

  • 页面画布采用#faf9f7,绝不要在body层级替换为纯#ffffff。
  • 展示标题采用Newsreader 600、80px和-3.2px字间距;这是编辑式的标志性特征。
  • 每个按钮、标签和徽章都采用999px胶囊圆角;这个系统没有圆角矩形按钮。
  • #f97316保留给标志、状态圆点和单字符图标强调;绝不要用于按钮或大面积填充。
  • 抬升通过1px的Stone-200边框,以及可选的不透明度≤0.05的细线阴影表达;避免多层投影。
  • 首屏内容以1200px max-width居中,功能区块之间保持80px分区间距。
  • 任何操作组中,Warm Ink填充按钮旁都严格放置一个Ghost胶囊。

建议避免

  • 不要将亮橘色#f97316作为CTA或链接色;填充操作始终采用Warm Ink #1c1917。
  • 不要引入渐变、辉光或模糊效果;调色板保持平面和印刷感。
  • 首屏标题不要采用无衬线字体;Newsreader承载品牌,移除它会使编辑式身份消失。
  • 卡片圆角不要小于8px,输入框圆角不要大于8px;8px / 999px的两种圆角系统就是全部几何。
  • 同一卡片不要叠用多个阴影;一条细线边框就是最大深度。
  • 正文不要采用纯#000;Warm Ink #1c1917使文字与温暖画布协调。
  • 客户信任条带中不要放置标志或装饰图像;纯排版的一行是有意的克制。