pampam.city
暖白色基底、胶囊形控件与圆角卡片。
Granola
近白色基底、细线分隔与衬线字形。
页面以近白色为基底，搭配近黑色文字。字体采用 Melange、Quadrant。视觉特点包括细线分隔、衬线字形、胶囊形控件、圆角卡片。适合参考的场景：效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 所有首屏和区块标题（48px 及以上）使用 Quadrant 400 字重，-0.015em 字间距；所有 UI 控件、标签和正文文本使用 Melange。
- 所有填充式主要操作按钮仅使用 #5b6f00（森林 CTA）作为背景色——其他任何 UI 元素均不得以此深橄榄绿作为背景填充。
- 所有胶囊形按钮、公告标签和标签芯片使用 9999px 圆角；卡片容器、输入框和矩形控件使用 8px 圆角。
- 保持 0.5px 实线 #d5d5d2 或 1px 实线 #e3e3e3 作为主要边框粗细——仅限细分隔线，UI 中绝不出现 2px 及以上边框。
- 页面背景设为 #f7f7f2（羊皮纸画布），而非纯白色 #ffffff——白色仅保留用于卡片表面和需要与画布形成对比的提升组件。
- 采用橄榄绿色系（#b2c248 表面，#5b6f00 文本/CTA，#788c15 边框，#e5eacd 色调）作为家族——绝不与其他无关色彩点缀混合，除社交嵌入场景外，仅允许使用 Twitter Blue（#1d9bf0）作为例外。
- 保持区块垂直节奏为 64px 间距；特征卡片使用 24px 内边距，紧凑笔记或列表卡片使用 16px。
建议避免
- 不要将 Quadrant 用于 UI 标签、按钮或正文文本——它仅适用于标题和大尺寸编辑场景。
- 不要在卡片上添加除单个社交证明卡片外的阴影（rgba(0,0,0,0.15) 0px 8px 48px）——细线边框的扁平卡片是默认表面处理。
- 不要将 #b2c248（橄榄压印）用作按钮背景或文本颜色——它仅作为产品草图中的装饰性高亮表面，绝不能作为交互元素的填充色。
- 不要为全页面区块添加色彩背景——页面仅在白色与羊皮纸（#f7f7f2）之间交替；色彩背景仅作为小卡片级别的点缀存在。
- 不要对 Quadrant 标题进行正向字间距调整——仅允许负向字间距（-0.015em）或在较小尺寸下略微正向的 0.01em；过宽的字间距会破坏编辑内容的紧凑性。
- 不要使用彩虹渐变（琥珀→粉红→薰衣草→天空→翠绿）作为 UI 元素背景——它仅存在于 AI 增强文本/图标指示器中的动态装饰中。
- 不要在导航或按钮标签中用系统字体（San Francisco、Segoe UI）替代 Melange——该定制字体在小尺寸下 0.01em 字间距是品牌 UI 与普通系统界面区分的关键。
