pampam.city
暖白色基底、胶囊形控件与圆角卡片。
Riverside
浅色基底、胶囊形控件与圆角卡片。
页面以浅色为基底，搭配近黑色文字。字体采用 Inter、IBM Plex Sans。视觉特点包括胶囊形控件、圆角卡片、大字排版、紧密字距。适合参考的场景：SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 所有展示和区块标题使用 Inter 800 字重，字间距 -0.0060em —— 紧凑的字间距防止大字号 Inter 产生松散感，营造出定义品牌的压缩型粗体风格
- 所有按钮和标签的边框半径设为 300px —— 胶囊形状是该系统中最易识别的 UI 元素
- 每视口使用 #9671ff（Studio Violet）仅一个填充型 CTA —— 严格控制该主色的使用，使其发挥视觉开关的作用
- 在满幅深色区域（#111111）与白色内容区块之间交替 —— 开/关节奏营造出电影级节奏，而非连续的平面布局
- 标题字号设为 56–80px，行高 1.04–1.08 —— 紧凑的行距使大字号显得具有建筑感，而非空旷
- 在深色展示区块中，功能列标签仅使用 IBM Plex Sans 600 —— 几何对比将功能类别与描述性正文区分开来
- 所有信任与合作伙伴标志以灰度（Carbon 或 Smoke）呈现 —— 色彩标志破坏了单色系统的纪律，使紫罗兰色点缀更突出
建议避免
- 禁止引入额外的强调色 —— 该系统为单色系统，引入第二色会削弱 Studio Violet 的信号强度
- 禁止将纯黑色（#000000）用于正文 —— 使用 #1d1d1d（Carbon）；纯黑与白的对比过于刺眼，破坏了系统略带温暖的中性调性
- 禁止使用厚重的盒阴影来表现层级 —— 卡片阴影 rgba(0,0,0,0.25) 0px 4px 15px 为罕见例外；优先使用边框和表面色调来体现层级
- 禁止正文行高超过 1.65 —— 紧凑的行高（1.50–1.57）是该系统自信、紧凑语气的一部分
- 禁止将紫罗兰色 CTA 相邻放置 —— 每视口仅一个，之间需用白色空间或不同区块分隔
- 禁止使用超过 8px 半径的圆角图片 —— 内容卡片上的 4px 锐角边框营造出摄影质感；过度圆润会显得幼稚
- 禁止使用 IBM Plex Sans 用于正文或大标题 —— 它仅作为标签字体；在大尺寸下使用会破坏以 Inter 为主导的系统
