pampam.city 网站预览
pampam.city 网站预览

pampam.city

暖白色基底、胶囊形控件与圆角卡片。

页面以暖白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 Nineties、Inter。视觉特点包括胶囊形控件、圆角卡片、细线分隔、扁平表面。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 首屏区域标题使用 Nineties 400 字重、80px 字号,区块标题使用 48px 字号——衬线字体是品牌声音,绝不应被大字号的 Inter 替代
  • 以 #faf2ec(羊皮奶油)作为页面画布,让白色卡片漂浮其上,而非反向呈现
  • 将 #4b72f3(薰衣草蓝)严格保留用于每屏一个主要操作;所有其他操作应使用 Carbon、透明描边 或纯文本样式
  • 卡片使用 12px 圆角,按钮使用 16px 圆角——两档尺度设计保持表面统一,避免过度圆润变成纯胶囊形
  • 在渲染 Inter 时启用 OpenType 特性 cv02、cv03、cv04、cv06、cv11,以保留品牌调校的字符集
  • 由 Slate Lavender(#9894a8)承担所有链接与边框的色彩任务——它是唯一中性色彩,应出现在每个交互状态的细线中
  • 保持 1px 边框 + 4px 软落影的阴影模式;禁止叠加多个落影或添加彩色光晕

建议避免

  • Nineties 字体字号不得低于 28px——低于此尺寸将难以阅读;小字号文本应切换为 Inter
  • 禁止引入额外的饱和品牌色;系统为单色系加一种蓝色,增加更多颜色会削弱薰衣草蓝的影响力
  • 禁止将深色卡片置于深色背景,或白色卡片置于白色背景——奶油/白色/碳灰三元组依赖每个表面与父级背景形成对比
  • 禁止在奶油背景下使用纯黑色(#000000)作为正文——应使用 #1b1917(暖墨)以使文字与羊皮质感和谐融合,而非突兀刺出
  • 禁止将薰衣草蓝用于大尺寸装饰填充、背景或插图点缀——它仅是 40–200px 按钮的配色,非区块级配色
  • 禁止为 Nineties 添加字间距——紧致的 1.08 行高和默认字间距是杂志风格的核心要素
  • 禁止使用重级叠加(大模糊、偏移或彩色阴影)——一旦卡片看起来像漂浮在空中,便破坏了纸张的隐喻