行业: 游戏与娱乐Website

Caldera

Caldera 构建了一个像素化的赛博游乐场，以高对比数字街机美学、鲜明渐变形态和超粗排版，形成充满能量与游戏感的视觉体验。

Light UIDesign System

设计系统

品牌色彩 · 7

Basalt Canvas

#E2E2DF

--color-basalt-canvas

Ash White

#F7F6F2

--color-ash-white

Abyssal Ink

#070607

--color-abyssal-ink

Pure White

#FFFFFF

--color-pure-white

Digital Orange

#FC5000

--color-digital-orange

Cyber Violet

#524AE9

--color-cyber-violet

Pixel Glare

#F5F28E

--color-pixel-glare

字体系统

字体家族

sans-serif — sans-serif — detected in extracted data but not described by AI / PP Neue Corp Compact Ultrabold — Display and heading text. Its ultrabold weight and compact form define the brand's assertive, almost shouting voice. Tight letter-spacing reinforces the density. / DM Sans — Body text, navigation links, and input labels. Provides readability and a modern, slightly geometric counterpoint to the display font.

字重

400500

备注

3 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签

Light UIDesign System

设计文档

品牌设计系统的完整 Markdown 文档

Caldera — Style Reference

> Pixelated Cyber-Playground

**Theme:** light

Caldera embraces a high-contrast digital arcade aesthetic: a muted grey canvas acts as a stark backdrop for vivid, pixelated gradient forms and ultra-bold, tightly tracked typography. Components like cards and buttons feature generous 40px rounded corners, creating a friendly, almost toy-like solidity. The overall atmosphere is playful yet authoritative, using color sparingly for impact and interaction.

> **Source website:** [Caldera](https://caldera.xyz/) — Compare this extracted reference with the live official website, which remains authoritative.

Tokens — Colors

|------|-------|-------|------|

Tokens — Typography

sans-serif — sans-serif — detected in extracted data but not described by AI · `--font-sans-serif`

**Weights:** 400

**Sizes:** 12px

**Line height:** 1.2

**Role:** sans-serif — detected in extracted data but not described by AI

PP Neue Corp Compact Ultrabold — Display and heading text. Its ultrabold weight and compact form define the brand's assertive, almost shouting voice. Tight letter-spacing reinforces the density. · `--font-pp-neue-corp-compact-ultrabold`

**Substitute:** Bebas Neue

**Weights:** 400

**Sizes:** 26px, 32px, 40px, 48px, 56px, 64px, 80px, 96px, 189px

**Line height:** 0.94, 0.95, 1.00, 1.10, 1.20

**Letter spacing:** 0.0200em

**OpenType features:** `"ss06", "ss10"`

**Role:** Display and heading text. Its ultrabold weight and compact form define the brand's assertive, almost shouting voice. Tight letter-spacing reinforces the density.

DM Sans — Body text, navigation links, and input labels. Provides readability and a modern, slightly geometric counterpoint to the display font. · `--font-dm-sans`

**Substitute:** Inter

**Weights:** 500

**Sizes:** 14px, 16px, 18px, 30px

**Line height:** 1.11, 1.20, 1.25, 1.50, 1.55

**Letter spacing:** normal

**Role:** Body text, navigation links, and input labels. Provides readability and a modern, slightly geometric counterpoint to the display font.

Type Scale

|------|------|-------------|----------------|-------|

| body-sm | 14px | 1.25 | — | `--text-body-sm` |

| body | 16px | 1.55 | — | `--text-body` |

| subheading | 30px | 1.11 | — | `--text-subheading` |

| heading-sm | 32px | 0.95 | 0.02px | `--text-heading-sm` |

| heading | 56px | 0.94 | 0.02px | `--text-heading` |

| display | 96px | 0.94 | 0.02px | `--text-display` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|------|-------|-------|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 9 | 9px | `--spacing-9` |

| 10 | 10px | `--spacing-10` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 18 | 18px | `--spacing-18` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 56 | 56px | `--spacing-56` |

| 64 | 64px | `--spacing-64` |

| 80 | 80px | `--spacing-80` |

| 92 | 92px | `--spacing-92` |

Border Radius

| Element | Value |

|---------|-------|

| cards | 40px |

| inputs | 100px |

| buttons | 800px |

| default | 40px |

Layout

**Page max-width:** 1200px

**Section gap:** 40px

**Card padding:** 40px

**Element gap:** 10px

Components

Primary Action Button

**Role:** Call-to-action

Filled button with `Digital Orange (#fc5000)` background, `Pure White (#ffffff)` text (DM Sans 500), `800px` border-radius for pill shape, 12px vertical and 24px horizontal padding.

Ghost Button

**Role:** Secondary action

Transparent background with `Abyssal Ink (#070607)` border and text (DM Sans 500), `800px` border-radius, 0px vertical and 12px horizontal padding for a minimal pill outline. The browser default blue text of rgb(0,0,238) from the data is a browser artifact, not a design choice for ghost buttons.

Navigation Link Button

**Role:** Navigation, internal links

Minimalist button with `Ash White (#f7f6f2)` background, `000000` text (DM Sans 500), `40px` border-radius. 16px padding on all sides.

Stats Card - Orange

**Role:** Informational display

Dedicated information card with `Digital Orange (#fc5000)` background, `40px` border-radius, 40px padding on all sides. Text inside should be `Pure White (#ffffff)` using PP Neue Corp Compact Ultrabold for numbers and DM Sans for labels.

Stats Card - Ash White

**Role:** Informational display

Dedicated information card with `Ash White (#f7f6f2)` background, `40px` border-radius, 40px padding on all sides. Text inside should be `Abyssal Ink (#070607)` using PP Neue Corp Compact Ultrabold for numbers and DM Sans for labels.

Basic Content Card

**Role:** Content container

Generic content card with `Ash White (#f7f6f2)` background, `40px` border-radius, 40px padding on all sides. Can contain headings and body text in `Abyssal Ink (#070607)`.

Auth Input Field

**Role:** User input

Transparent input field with `Pure White (#ffffff)` border and placeholder text, `100px` border-radius for a pill shape, 24px vertical and 32px left padding, 64px right padding. Focus state should highlight the border prominently.

Do's and Don'ts

Do

Prioritize `PP Neue Corp Compact Ultrabold` for all headlines and display text, applying its 'ss06', 'ss10' font feature settings and 0.0200em letter-spacing for consistent brand delivery.

Use `Digital Orange (#fc5000)` as the exclusive background color for all primary calls-to-action and key informational cards to ensure immediate visual prominence.

Apply a generous `40px` `border-radius` to all cards, content blocks, and navigation buttons to maintain the inviting, rounded brand aesthetic.

Employ `Basalt Canvas (#e2e2df)` as the primary page background, creating a muted base that allows the vivid accent colors to pop.

Ensure pill-shaped elements like primary buttons and input fields consistently use an `800px` or `100px` `border-radius` respectively for a distinct form.

Maintain a clear visual hierarchy by rendering primary text in `Abyssal Ink (#070607)` on `Ash White (#f7f6f2)` or `Basalt Canvas (#e2e2df)` surfaces.

Use `40px` padding on all sides of `Ash White (#f7f6f2)` and `Digital Orange (#fc5000)` cards to provide ample breathing room for content.

Don't

Avoid using `Pure White (#ffffff)` as a solid background color; reserve it for text fields or text on dark backgrounds to preserve the overall muted canvas.

Do not deviate from the `40px` card `border-radius` for main content blocks or feature cards; inconsistency will undermine the brand's friendly solidity.

Refrain from using `Cyber Violet (#524ae9)` as a text color or primary UI element; its role is purely decorative for large background shapes and graphic accents.

Do not introduce gradients or shadows for elevation on most components; the design relies on flat, solid color blocks and distinct shapes for visual hierarchy.

Avoid tight spacing (e.g., less than `10px` `elementGap`) between interactive elements to prevent visual clutter and ensure comfortable interaction.

Do not use generic sans-serif fonts for headlines; `PP Neue Corp Compact Ultrabold`'s distinct character is crucial for brand recognition.

Do not use the browser default blue link color (rgb(0,0,238)); all links and ghost buttons should use `Abyssal Ink (#070607)` for their text and border.

Surfaces

|-------|------|-------|---------|

| 2 | Ash White | `#f7f6f2` | Primary card backgrounds, navigation containers |

| 3 | Digital Orange Accent | `#fc5000` | Prominent feature cards, primary button fills |

Imagery

Imagery is functional and abstract: often large, bold, two-tone pixelated graphics featuring `Digital Orange` and `Cyber Violet` in fluid, rounded, non-rectangular shapes. These graphics act as hero background elements or contained visual modules. Product screenshots or logos are typically monochrome `Abyssal Ink` outlines or `Pure White` fills, contained within `Ash White` cards, for a clean, understated product showcase. Icons are simple, outlined `Abyssal Ink` or `Pure White` glyphs, keeping a flat, sharp style.

Layout

The page adheres to a `1200px` max-width contained layout, centered on a `Basalt Canvas` background. The hero section features a full-width background graphic with a large, centered `PP Neue Corp Compact Ultrabold` headline. Following sections employ consistent vertical `sectionGap` of `40px` and alternate between centered stacked content and two-column layouts with text and image-like graphics side-by-side. Feature blocks and statistics often use `Digital Orange` and `Ash White` cards arranged in a 4-column grid, maintaining a comfortable, open density.

Agent Prompt Guide

Quick Color Reference:

text: #070607

background: #e2e2df

border: #070607 (for ghost buttons)

accent: #524ae9

primary action: #fc5000 (filled action)

Example Component Prompts:

Create a Primary Action Button: #fc5000 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.

Create a feature card grid: `Ash White (#f7f6f2)` background, `40px` radius, 40px all-around padding. Feature headline in `Abyssal Ink (#070607)` using `PP Neue Corp Compact Ultrabold` at 32px weight 400, letter-spacing 0.02em. Body text in `Abyssal Ink (#070607)` using `DM Sans` at 16px weight 500, normal letter-spacing.

Create a stats display block: `Digital Orange (#fc5000)` cards, `40px` radius, 40px all-around padding. Numbers in `Pure White (#ffffff)` using `PP Neue Corp Compact Ultrabold` at 56px weight 400, letter-spacing 0.02em. Labels in `Pure White (#ffffff)` using `DM Sans` at 18px weight 500, normal letter-spacing.

Similar Brands

**Optimism** — Shares a vibrant color palette against a light neutral background and uses simplified, bold graphic shapes.

**Arbitrum** — Similar focus on blockchain infrastructure with clean, modern typography and distinct accent colors for key elements.

**Celestia** — Adopts a spacious, minimalist layout combined with strong, geometric typography and a vibrant accent color to highlight product features.

**StarkWare** — Employs an architectural, block-based UI with specific accent colors and a focus on bold, contemporary typography for a tech-forward feel.

Quick Start

CSS Custom Properties

```css

:root {

/* Colors */

--color-basalt-canvas: #e2e2df;

--color-ash-white: #f7f6f2;

--color-abyssal-ink: #070607;

--color-pure-white: #ffffff;

--color-digital-orange: #fc5000;

--color-cyber-violet: #524ae9;

--color-pixel-glare: #f5f28e;

/* Typography — Font Families */

--font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--font-pp-neue-corp-compact-ultrabold: 'PP Neue Corp Compact Ultrabold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

--font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

/* Typography — Scale */

--text-body-sm: 14px;

--leading-body-sm: 1.25;

--text-body: 16px;

--leading-body: 1.55;

--text-subheading: 30px;

--leading-subheading: 1.11;

--text-heading-sm: 32px;

--leading-heading-sm: 0.95;

--tracking-heading-sm: 0.02px;

--text-heading: 56px;

--leading-heading: 0.94;

--tracking-heading: 0.02px;

--text-display: 96px;

--leading-display: 0.94;

--tracking-display: 0.02px;

/* Typography — Weights */

--font-weight-regular: 400;

--font-weight-medium: 500;

/* Spacing */

--spacing-4: 4px;

--spacing-8: 8px;

--spacing-9: 9px;

--spacing-10: 10px;

--spacing-12: 12px;

--spacing-16: 16px;

--spacing-18: 18px;

--spacing-20: 20px;

--spacing-24: 24px;

--spacing-32: 32px;

--spacing-40: 40px;

--spacing-48: 48px;

--spacing-56: 56px;

--spacing-64: 64px;

--spacing-80: 80px;

--spacing-92: 92px;

/* Layout */

--page-max-width: 1200px;

--section-gap: 40px;

--card-padding: 40px;

--element-gap: 10px;

/* Border Radius */

--radius-2xl: 16px;

--radius-2xl-2: 20px;

--radius-3xl: 24px;

--radius-3xl-2: 32px;

--radius-3xl-3: 40px;

--radius-full: 100px;

--radius-full-2: 800px;

/* Named Radii */

--radius-cards: 40px;

--radius-inputs: 100px;

--radius-buttons: 800px;

--radius-default: 40px;

/* Surfaces */

--surface-basalt-canvas: #e2e2df;

--surface-ash-white: #f7f6f2;

--surface-digital-orange-accent: #fc5000;

}

```

Tailwind v4