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

pampam.city

老探险家的笔记本,搭配温暖的奶油色背景

PamPam 被设计成一种温暖的编辑式旅行杂志风格,转化为现代应用:柔和的羊皮奶油色画布(#faf2ec)承载界面,搭配定制的衬线字体('Nineties')为标题赋予复古杂志的语感,而正文则采用简洁实用的 Inter 字体。配色几乎为单色系,以一种柔和的淡薰衣草灰(#9894a8)作为边框、链接和细线,仅保留一种鲜明的薰衣草蓝(#4b72f3)用于唯一需要强烈反馈的交互操作。界面表面保持扁平和纸张质感——白色卡片漂浮在奶油色背景上,从不反向呈现,阴影极轻,以便地图与插图能承担情感表达。组件设计简洁自信:按钮采用16px圆角,卡片为12px圆角,内部间距控制在12–16px之间。色彩与字重,而非层级叠加,决定信息优先级。

查看原始网站

使用规范

建议采用

  • 首屏区域标题使用 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 行高和默认字间距是杂志风格的核心要素
  • 禁止使用重级叠加(大模糊、偏移或彩色阴影)——一旦卡片看起来像漂浮在空中,便破坏了纸张的隐喻