
Caldera
在温暖的石灰岩上锻造火焰。画布是未经处理的温暖石膏,每一个橙色元素都像是压入表面的闷烧余烬。
Caldera 的界面以温暖的石灰岩为底,浸润在炽热的橙色之中。扁平无阴影的界面设计,使得超粗、紧凑的字体(最大可达 189 像素)能够承载整个结构重量。鲜艳的橙色 (#fc5000) 是唯一醒目的色彩点缀,与单色暖灰色背景形成鲜明对比;主半色调图像使用等离子紫,标签则使用硫磺黄。视觉语言充满火山气息:紧凑粗犷的字体、半色调点阵图案、卡片和按钮 40 像素的圆角,以及 800 像素的药丸形控件——温暖的气息包裹在柔和如纸的表面上。
视觉风格简约而富有巧思。主窗口采用抽象的半色调点阵图案(紫色渐变背景上的橙色圆点),而非照片——它并非装饰,而是品牌艺术表达。产品信息和公告卡片使用纯色 Ember 色块或半色调 Plasma Violet 色块作为图像填充,从而形成统一的视觉系统。合作伙伴/集成标识以单色图标的形式出现在浅色背景上。整个设计中没有照片、3D 渲染图或生活方式图片。图标小巧、单色且极简——Discord、X 和Telegram图标以简单的图形符号出现在导航栏中。视觉语言偏向图形化和编辑化,而非摄影化:它更像是海报设计,而非素材图片。
调色板
品牌
- Ember
#fc5000— 主要操作按钮、状态卡和关键视觉元素是唯一采用醒目色彩的元素;其鲜艳的色彩与温暖的灰色调形成对比,营造出一种紧迫感,而无需额外的装饰元素。 - Plasma Violet
#524ae9— 主半色调渐变底色,一个附加卡片表面 - 几乎完全用于主点图案和一张专用卡片;从不用于控制。
中性的
- Sulfur
#f5f28e— 标签和类别图标(小高亮部分)的背景色是柔和的黄色,用于指示博客文章类别和节目公告。 - Limestone
#f7f6f2— 卡片表面、内容块背景和额外的按钮填充采用更浅、更暖的白色,使这些元素在页面画布上更加突出。 - Pumice
#e2e2df— 页面的主要背景是温暖的中灰色,作为每个部分的基础;它比卡纸表面略深,可以在没有阴影的情况下微妙地将人物和背景分开。 - Obsidian
#070607— 正文、标题、链接文本和按钮边框几乎都是黑色,只有一丝不易察觉的暖色调,与画布的暖色调相匹配。 - Chalk
#ffffff— 深色区域中的文本、深色背景上的输入文本、高对比度叠加层——纯白色仅在需要与深色表面形成最大对比度时使用。
排版
从 12 像素到 189 像素 · 10 步
- PP Neue Corp Compact — 替代品: Bebas Neue · 轮廓 400 (Ultrabold cut) · 所有标题和正文均采用定制设计的超粗体窄体字体,赋予标题一种工业风的醒目感。主标题的字号为 189 像素,体现了品牌的标志性风格:紧凑,更偏向结构化而非排版化。“ss06”和“ss10”设置启用了替代字形和间距,营造出更具冲击力、更紧凑的节奏感。正间距(+0.02em)在显示尺寸中较为少见,避免了 80-189 像素字号下文本的拥挤感。
- DM Sans — 替代品: Inter · 轮廓 500 (Medium only — never Regular or Bold) · 正文、导航链接、按钮标签和二级标题的字号均不超过 30 像素。我们特意选择了中等字重——常规字重在特粗标题字体面前会显得太细,而粗体字又会与之冲突。DM Sans 字体与工业风的标题字体形成了一种人性化且略带几何感的对比。
- System sans-serif — 替代品: Inter · 轮廓 400 · 图片说明、元文本、日期、微标签。仅在 12px 尺寸下使用,因为在这种尺寸下,尺寸大小和品牌识别度比尺寸本身更重要。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 16px |
| 按钮半径 | 40px |
| 卡片半径 | 40px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 80px |
| 页面宽度 | 1280px |
AI 将按照Caldera风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- teenage engineering — 工业摄影棚照明产品目录——产品是页面上唯一的主要元素,其他所有内容都围绕它展开。
- basement — 凌晨 3 点,一台空荡荡的印刷机——巨大的、压缩的字体散布在漆黑的背景上,导航栏上闪烁着一丝橙色的光芒,其他一切都是白色或幽灵般的灰色。
- amra — 白色背景上的一个彩虹色球体——淡紫色点缀是几乎完全无色页面上唯一的色彩亮点,而这个单一的渐变球体则完成了通常由主插图完成的工作。
- Stink Studios — 午夜时分的电影制片厂——放映机嗡嗡作响,房间一片漆黑,只有胶片在发光。
- Andrei Rybin — 单色素描本是一种设计师笔记本,它将手机屏幕像底片一样贴在白墙上。
- Uniswap Cup — 电子竞技比赛的直播是在一个模拟网站上进行的——粉色的标记勾勒出一个由白色方块和细线组成的网格。
- Freytag Anderson — 电影开场,屏幕上只出现一个词。巨大的动态影像占据了整个银幕,品牌名称像片名一样出现在角落里,除此之外,没有任何其他元素分散观众的注意力。
- Integrated Biosciences — 午夜生物发光实验室
- Vercel — 终端信息印在白纸上
- Mintlify — 玻璃桌上方是一片云花园。手绘的天空与纪录片画面交相辉映——这是色彩与概念碰撞的唯一一处,之后画面便会褪成一片肃穆的白色。
- Gleap — 工作室以温暖的奶油色调装饰,并点缀以石墨色——哑光黑色墨点仿佛漂浮在亚麻布建筑之上。
- ClickUp — 一个功能强大的白色大理石面板仪表盘。该页面是某款效率工具的产品宣传册,因此其视觉语言借鉴了产品本身:密集的列表、状态指示器、头像组以及醒目的文字说明,宛如一份产品规格展示。