pampam.city
暖白色基底、胶囊形控件与圆角卡片。
Relief
暖白色基底、胶囊形控件与单栏阅读排版。
页面以暖白色为基底。字体采用 Gilroy。视觉特点包括胶囊形控件、单栏阅读排版、满幅色块、网格布局。适合参考的场景：支付服务首页、金融科技产品介绍页。
查看原始网站使用规范
建议采用
- 使用 #f9f7f0 奶油色作为页面画布——正文背景永远不要使用纯白色。奶油色是品牌亲和风格的标志性特征。
- 为所有主要行动号召（CTA）按钮应用 7px 实体天空蓝突出阴影：rgba(154,207,246,0.5) 0px 7px 0px 0px。按钮抬升绝不使用 CSS 模糊效果。
- 所有按钮和徽章的圆角半径统一设为 40-70px。交互元素绝不使用方形或锐角。
- 将深海军绿（#13426f）内容卡片直接放置于奶油画布上。海军绿与奶油色的对比是主要的视觉区块模式——跳过白色卡片置于奶油色背景的方案。
- 在 Gilroy 所有尺寸上统一设置字间距为 -0.018em。从 12px 图注到 58px 大标题，字间距始终紧密。
- 仅使用天空蓝（#2e96ff）作为唯一的色彩强调。仅用于行动号召、激活状态以及统计数据标题中的关键词——绝不用于大面积背景填充或超出首屏场景的装饰性图形。
- 特征卡和用户证言卡的间距设为 28px，圆角半径为 18-26px。搭配 14-18px 的标题到正文间距。
建议避免
- 任何地方都不要使用柔和的模糊外扩阴影——系统仅使用扁平实心偏移阴影，或完全不使用阴影。
- 不要在天空蓝/深海军绿/奶油/墨色调色板之外引入新的品牌色彩。绿色、粉色、紫色仅用于插画场景。
- 不要在按钮或卡片上使用 0-8px 的圆角。系统始终保持柔和且圆润的形态——锐角会破坏玩具般的亲切感。
- 不要在奶油画布上使用深海军绿文字作为正文。正文使用 #333333，仅将 #13426f 用于标题和卡片表面。
- 不要将正文背景渲染为 #ffffff。奶油色 #f9f7f0 是画布；#ffffff 仅用于浮于其上的卡片表面。
- Gilroy 的图注和小号正文（body-sm）不要使用 600+ 字重。正文保持 400-500；700+ 仅用于标题、按钮和强调。
- 不要添加非胶囊形的次级或三级按钮。方形或轻微圆角的按钮会读作不同的系统。
