Wispr Flow 网站预览
Wispr Flow 网站预览

Wispr Flow

暖白色基底、分屏构图与居中构图。

页面以暖白色为基底,搭配近黑色文字。字体采用 Eb Garamond、Figtree。视觉特点包括分屏构图、居中构图、满幅色块、衬线字形。适合参考的场景:AI 服务首页、产品演示介绍页。

查看原始网站

使用规范

建议采用

  • 将薰衣草轻语(#f0d7ff)作为唯一主要操作色——禁止用蓝色、绿色或其他任何色调替代CTA
  • 展示标题使用 Eb Garamond 400(非粗体)——权威来自64–120px的尺寸,而非字重
  • 为所有交互元素应用2px实线#1a1a1a边框——厚边框是标志,非可选
  • 页面内交替使用奶油(#ffffeb)和深色(#1a1a1a)区块——每个深色房间都应以奶油区块作为首尾
  • 标准卡片使用32px圆角,深色区块卡片使用40–80px圆角——禁止在内容块上使用4px或8px圆角
  • 将 Figtree 400 作为正文默认字重;仅在导航项、徽章和按钮标签中使用600–700字重
  • 搭配 #f0d7ff(激活/强调)与 #034f46(次要)——这两个品牌色是互补关系,而非替代关系

建议避免

  • 禁止在展示标题中使用粗体或700字重——衬线字体在400字重下通过体量本身主导
  • 禁止使用阴影来实现卡片层级——此设计以边框为核心;阴影破坏了编辑风格的平面感
  • 禁止引入蓝色、绿色或任何非配色方案的辅助色用于操作、链接或高亮
  • 禁止在按钮上使用小于12px的圆角,或在卡片上使用小于32px的圆角——小圆角与宏大房间几何结构冲突
  • 禁止使用渐变填充——配色为平面;渐变削弱了编辑风格的严谨性
  • 禁止居中正文——正文与副标题应左对齐或遵循严格行距,而非居中块
  • 禁止在奶油内容置于奶油底图上时未添加边框或背景变化——配色需要对比分隔