---
title: "Caldera design system"
variant: extended
source: https://caldera.xyz/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/caldera-xyz)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Caldera · Design System

> A restrained canvas for bold, modular blockchain storytelling.

**Theme:** light · **Industry:** crypto · **Source:** https://caldera.xyz/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Caldera pairs a quiet warm-gray canvas with oversized black typography and vivid orange and violet feature cards. Spacious hero composition gives way to rounded, illustration-led ecosystem and use-case modules.

## North star

Keep the canvas quiet and the typography bold; reserve saturated color for clear actions and focused content modules.

## Overview

The visual strategy is built around a persistent warm-gray canvas (#e2e2df), which keeps the page calm while oversized, heavy display lettering supplies impact. Near-black (#070607) anchors headings, navigation, and body copy. Off-white (#f7f6f2) creates readable card surfaces, while bright orange (#fc5000) marks primary actions and selected feature panels; saturated violet (#524ae9) appears as a secondary feature-card color. The first screen is deliberately sparse: navigation sits in a pale rounded capsule, the headline occupies the upper left, and explanatory copy with paired actions anchors the lower right. Farther down, the page becomes more modular, combining rounded text cards with bold technical illustrations and use-case panels. Keep typography compact and assertive in headings, with DM Sans for supporting copy and controls. Generous blank intervals let each content cluster feel distinct without changing the underlying canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Ink | `#070607` | `--color-carbon-ink` | brand | Primary headings, navigation labels, body copy, and dark details. |
| Warm Concrete | `#e2e2df` | `--color-warm-concrete` | neutral | Continuous page canvas and the dominant background across sections. |
| Porcelain Cream | `#f7f6f2` | `--color-porcelain-cream` | surface | Light content cards and the navigation capsule against the gray canvas. |
| Signal Orange | `#fc5000` | `--color-signal-orange` | accent | Primary pill-shaped CTA and selected feature cards; a prominent action color. |
| Clean White | `#ffffff` | `--color-clean-white` | semantic | Measured dotted input border; not a defining page-wide brand color. |
| Electric Violet | `#524ae9` | `--color-electric-violet` | accent | Secondary feature-card background, often behind technical illustration or use-case content. |

### Semantic aliases

`--color-canvas` → `#e2e2df` (Warm Concrete) · `--color-surface` → `#f7f6f2` (Porcelain Cream) · `--color-text` → `#070607` (Carbon Ink) · `--color-text-muted` → `#f7f6f2` (Porcelain Cream) · `--color-border` → `#ffffff` (Clean White) · `--color-accent` → `#fc5000` (Signal Orange) · `--color-accent-2` → `#524ae9` (Electric Violet) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#070607` | `#e2e2df` | 15.58:1 | AAA |
| `#070607` | `#f7f6f2` | 18.71:1 | AAA |
| `#f7f6f2` | `#e2e2df` | 1.2:1 | fail |
| `#fc5000` | `#e2e2df` | 2.57:1 | fail |
| `#fc5000` | `#f7f6f2` | 3.09:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 500 | Body copy, captions, navigation, and links. | DM Sans |
| PP Neue Corp Compact Ultrabold | `--font-display` | webfont | 400 | Display titles and section headings. | Roboto Condensed |

- **DM Sans:** Medium measured weight; clean, compact supporting text with no measured tracking or uppercase treatment.
- **PP Neue Corp Compact Ultrabold:** Use a very heavy condensed display feel; large headings are sentence case, tightly stacked, and untracked.

### Type scale — Golden Ratio (ratio ≈ 1.639, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 189px | 400 | 0.94 | 0 | — | PP Neue Corp Compact Ultrabold | Oversized hero or campaign display headline. |
| h1 | 96px | 400 | 0.95 | 0 | — | PP Neue Corp Compact Ultrabold | Main hero heading, split across compact lines. |
| h2 | 80px | 400 | 1.1 | 0 | — | PP Neue Corp Compact Ultrabold | Major section headings such as ecosystem and use-case titles. |
| h3 | 64px | 400 | 1 | 0 | — | PP Neue Corp Compact Ultrabold | Feature or card headings within content modules. |
| h4 | 56px | 400 | 1 | 0 | — | PP Neue Corp Compact Ultrabold | Smaller card titles and supporting section headings. |
| body | 16px | 500 | 1.55 | 0 | — | DM Sans | Descriptions, explanatory copy, and navigation text. |
| caption | 14px | 500 | 1.2 | 0 | — | DM Sans | Dates, small labels, and compact metadata. |
| link | 16px | 500 | 1.55 | 0 | — | DM Sans | Text links and secondary navigation actions. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11", "ss06", "ss10"`, `"ss06", "ss10"`, `"ss06"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 8, 9, 10, 12, 16, 20, 24, 32, 40, 56, 64, 80 px.
- Section rhythm 56px · element gap 10px · card padding 40px · max content width 1328px.

The measured page uses a 1328px maximum content width, a comfortable density, and a 4px base spacing unit. The hero spans the viewport with a left-aligned title and lower-right copy/actions. Later content shifts into centered headings, multi-column cards, and split feature areas; the news feed is left-aligned. Sections share the same canvas, with substantial blank intervals creating rhythm rather than alternating background bands.

## Shape & elevation

- Radius: button `50%` · input `9999px` · card `40px` · link `40px` · xs `16px` · sm `20px` · md `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page reads mostly flat: there are no measured shadows or gradients. Separate content with large areas of canvas, rounded card silhouettes, and fine dotted or hairline outlines on selected controls. Keep media and card colors visually distinct without adding artificial depth.

## Imagery

The hero includes full-bleed video, leaving much of the first viewport visually quiet. Lower sections use technical, high-contrast illustrations inside rounded cards, including vivid orange and violet backgrounds. Use imagery as a contained feature accent rather than a photographic wash over the page; the measured screenshot palette is primarily defined by the canvas and typography, not the illustration colors.

## Components

### Capsule navigation

A centered pale rounded bar with compact dark links, dotted vertical separators, social icons, and an orange pill CTA.

### Primary action

Bright orange pill button with a contrasting blue label in the measured CSS; keep the CTA compact and high visibility.

### Outlined secondary action

Canvas-colored pill with a fine dotted outline and dark label, paired with the primary hero action.

### Feature cards

Large rounded modules alternate cream text-led cards with orange or violet illustration-led cards.

### Use-case panel

A cream category card and compact pill selectors sit beside a saturated violet content panel with white copy.

### News feed

A two-column content area pairs a prominent News heading with image-led story links and small category/date metadata.

### Measured component styles

- **Primary button** (“Get Started”): background #fc5000 · text #0000ee · radius 800px · padding 12px 24px · 400 12px sans-serif
- **Link** (“Integration Caldera Partners with Bitcoi”): background #f7f6f2 · text #0000ee · radius 40px · padding 16px · 400 12px sans-serif
- **Input**: transparent background · text #ffffff · border 1px dotted #ffffff · radius 100px · padding 24px 64px 24px 32px · 500 18px DM Sans
- **Card** (“Total Value Locked 1B+”): background #fc5000 · text #000000 · radius 40px · padding 40px · 400 12px sans-serif

## Do

- Keep the warm-gray canvas continuous across sections.
- Use condensed, heavy display typography for large headings.
- Anchor primary actions with Signal Orange (#fc5000).
- Pair cream text cards with vivid illustration cards.
- Preserve generous empty space around major content groups.
- Use rounded capsule controls and rounded card containers.

## Don't

- Do not introduce alternating colored section bands.
- Do not fill the hero with dense copy or controls.
- Do not use shadows or gradients to manufacture depth.
- Do not use saturated accents as the page-wide background.
- Do not replace the bold display hierarchy with generic light-weight headings.
- Do not treat illustration-only colors as core interface colors.

## Agent prompt

Build a new Caldera-style page on a continuous Warm Concrete canvas (#e2e2df). Use Carbon Ink (#070607) for concise navigation, copy, and oversized condensed display headings; use DM Sans for supporting text. Keep the top navigation in a Porcelain Cream (#f7f6f2) capsule with subtle dividers and a Signal Orange (#fc5000) pill CTA. Compose the hero with a large left-aligned headline and a compact copy-and-actions group toward the lower right, leaving broad open space. Organize later content into rounded cream text cards and illustration-led modules, using orange and Electric Violet (#524ae9) selectively. Favor flat surfaces, fine outlines, generous section breathing room, and clear modular alignment. Do not add unmeasured colors, shadows, or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero with a capsule navigation, upper-left headline, and lower-right copy with paired actions. | primary and secondary actions, social navigation | oversized display title, pill navigation, orange CTA |
| 2 | feature-grid | Centered section title above a multi-column set of rounded text and illustration cards. | ecosystem overview, metric highlights | alternating cream and vivid cards, rounded card corners, technical illustrations |
| 3 | product-showcase | A broad single-column interval in the measured section sequence. | visual product storytelling | open canvas, full-width presentation area |
| 4 | feature-split | Centered title over a two-column use-case card and adjacent content panel. | use-case selection, carousel navigation | cream category card, violet content panel, pill selectors |
| 5 | content-feed | Left-aligned heading and a two-column, image-led news list. | story browsing, category and date scanning | linked article cards, thumbnail imagery, compact metadata |
| 6 | footer | A final long single-column interval on the shared canvas. | continued page navigation | minimal canvas treatment |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/caldera-xyz