Caldera

浅灰色基底、胶囊形控件与扁平表面。
页面以浅灰色为基底,搭配近黑色文字。字体采用 PP Neue Corp Compact、DM Sans。视觉特点包括胶囊形控件、扁平表面、渐变展示。适合参考的场景:技术项目官网、区块链产品介绍页。
查看原始网站使用规范
建议采用
- 任何需要体现结构感的标题均使用PP Neue Corp Compact字体,字号48px或更大;当字号低于40px时,超粗体重量会过度突出并丧失工业风格特征
- 所有卡片、内容区块及非胶囊按钮默认使用40px圆角半径作为表面圆角
- 所有按钮、标签、导航容器及小型交互元素均使用800px圆角半径(完整胶囊形态)
- 主行动号召(CTA)使用Ember(#fc5000)配Obsidian(#070607)文字,字号为12px/24px内边距——绝不采用矩形,始终为胶囊形
- 正文保持使用 DM Sans 500(Medium,中等字重);不要降为 Regular 常规字重,否则在超粗大标题的衬托下会显得单薄。
- 使用半调点阵(橙色点位于紫色背景上)作为首屏/标志性视觉处理——它是系统中最易识别的视觉元素
- 通过色彩对比(沙岩画布 → 石灰岩卡片 → Ember元素)叠加表面,而非使用阴影或边框
建议避免
- 任何元素均不得添加阴影——该系统刻意保持扁平化;阴影会削弱纸质感的温暖
- 不得使用矩形(低圆角)按钮——胶囊/40px圆角是强制要求
- 不得引入除Ember、Plasma Violet和Sulfur之外的额外强调色——色彩调性被刻意限制为三种色调
- 正文不要使用 DM Sans 的 Regular 常规字重或 Bold 粗体字重;唯一正确的字重是 Medium(500,中等字重)。
- 标题字号不得低于26px或高于189px——该展示字体仅在建筑级尺寸下有效
- 按钮或控件不得使用Plasma Violet——该色仅用于首屏半调和单个强调卡片
- PP Neue Corp Compact字体不得使用负字间距——在展示尺寸下+0.02em的正字间距是故意设计,以防止笔画重叠