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

# Axiom · Design System

> A near-black canvas for clear, technical storytelling.

**Theme:** dark · **Industry:** devtools · **Source:** https://axiom.co/ · **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._

Axiom’s homepage pairs a near-black canvas with crisp typography and restrained orange calls to action. Product interfaces and data-focused sections carry the story, with generous vertical breathing room and subtle borders.

## North star

Keep the canvas nearly black and let restrained orange, precise type, and authentic product UI carry the story.

## Overview

The visual system is anchored by a nearly black canvas, #090909, used continuously from hero through footer. White headings create strong contrast, while muted grays carry supporting copy and navigation without competing with the message. Signal orange is reserved for primary actions and inline links; brighter orange and blue appear sparingly in product visualization details. Geist provides the clean, compact interface voice, with Berkeley Mono distinguishing code, data labels, and technical captions. The layout uses a wide centered content area, left-aligned feature storytelling, and occasional split or multi-column arrangements. Large gaps between long-form sections keep the page calm despite its length. Product screenshots and interface mockups are dark, tightly framed, and integrated into the canvas rather than presented as bright standalone images. Fine borders and low-contrast surfaces define cards and controls; depth comes from layering rather than conspicuous shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Axiom Black | `#090909` | `--color-axiom-black` | brand | Page canvas across the hero, content sections, and footer. |
| Signal Ember | `#da5c2b` | `--color-signal-ember` | accent | Primary Start free buttons and inline Learn more links. |
| Soft Alloy | `#a4a4a4` | `--color-soft-alloy` | neutral | Muted supporting copy and secondary navigation text. |
| Quiet Graphite | `#7b7b7b` | `--color-quiet-graphite` | neutral | Low-emphasis labels, badges, and footer text. |
| Shadow Panel | `#151515` | `--color-shadow-panel` | surface | Subtle dark panel and gradient transition detail. |
| Rule Charcoal | `#222222` | `--color-rule-charcoal` | semantic | Fine borders separating cards, sections, and interface controls. |
| Raised Coal | `#111111` | `--color-raised-coal` | surface | Slightly raised card and section surfaces against the canvas. |
| Screen White | `#eeeeee` | `--color-screen-white` | neutral | Primary body text and high-contrast product interface text. |
| Dark Slate | `#1b1b1b` | `--color-dark-slate` | surface | Subtle badge and interface fills; minor supporting surface color. |
| Pale Alloy | `#b4b4b4` | `--color-pale-alloy` | neutral | Secondary text and supporting interface labels. |
| Bright Chalk | `#fafafa` | `--color-bright-chalk` | neutral | Headings, navigation, and brighter text within product cards. |
| Warm Flare | `#ffa057` | `--color-warm-flare` | accent | Occasional highlighted text and small warm details. |
| Muted Steel | `#757575` | `--color-muted-steel` | neutral | Low-priority navigation text. |
| Dim Steel | `#6e6e6e` | `--color-dim-steel` | neutral | Subtle secondary labels and badges. |
| Data Blue | `#70b8ff` | `--color-data-blue` | semantic | Sparse blue text accents in technical interface details. |
| Faded Graphite | `#606060` | `--color-faded-graphite` | neutral | Low-contrast code and supporting text. |

### Semantic aliases

`--color-canvas` → `#090909` (Axiom Black) · `--color-surface` → `#111111` (Raised Coal) · `--color-text` → `#eeeeee` (Screen White) · `--color-text-muted` → `#a4a4a4` (Soft Alloy) · `--color-text-subtle` → `#7b7b7b` (Quiet Graphite) · `--color-border` → `#222222` (Rule Charcoal) · `--color-accent` → `#da5c2b` (Signal Ember) · `--color-accent-2` → `#ffa057` (Warm Flare) · `--color-accent-3` → `#70b8ff` (Data Blue) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeee` | `#090909` | 17.16:1 | AAA |
| `#eeeeee` | `#111111` | 16.28:1 | AAA |
| `#a4a4a4` | `#090909` | 7.99:1 | AAA |
| `#a4a4a4` | `#111111` | 7.58:1 | AAA |
| `#7b7b7b` | `#090909` | 4.7:1 | AA |
| `#7b7b7b` | `#111111` | 4.46:1 | AA-large |
| `#da5c2b` | `#090909` | 5.26:1 | AA |
| `#da5c2b` | `#111111` | 4.99:1 | AA |

### Gradients

- `linear-gradient(to top, lab(2.47865 0 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, lab(2.47865 0 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, lab(4.4379 0 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, lab(5.06335 0 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 450 | Headings, body copy, navigation, buttons, and links. | Inter |
| berkeleyMono | `--font-mono` | webfont | 400, 500 | Code, technical captions, and compact data labels. | IBM Plex Mono |

- **Geist:** Use clean mixed-case sans; medium headings with slightly tight tracking, regular body, and restrained button weight.
- **berkeleyMono:** Use for query snippets and terse technical metadata; keep labels compact and avoid decorative styling.

### Type scale — Golden Ratio (ratio ≈ 1.633, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.1 | -0.025em | — | Geist | Hero headline; large, medium-weight, tightly tracked sans. |
| h2 | 36px | 500 | 1.35 | -0.025em | — | Geist | Feature section headings and key comparison or CTA headings. |
| body | 15px | 400 | 1.6 | 0 | — | Geist | Feature descriptions, testimonials, and supporting explanatory copy. |
| caption | 13px | 400 | 1.5 | 0 | — | berkeleyMono | Compact technical captions and data-oriented labels. |
| button | 14px | 400 | 1.43 | 0 | — | Geist | Primary and secondary action labels. |
| nav | 13px | 400 | 1.38 | 0 | — | Geist | Header navigation and compact menu items. |
| link | 14px | 500 | 1.43 | 0 | — | Geist | Inline calls to action such as Learn more. |
| code | 13px | 400 | 1.5 | 0 | — | berkeleyMono | Query editor content and technical examples. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 24 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1208px.

Use a centered content frame capped at the measured 1208px maximum width. The long page is built from spacious, mostly left-aligned feature sections, alternating split text-and-product compositions with occasional three- or four-column grids. Keep the hero headline and description aligned to the left, with product UI occupying the opposing visual area. Preserve large vertical gaps between major sections; the measured section rhythm is 96px. Keep dense data confined to product panels so surrounding marketing content stays calm.

## Shape & elevation

- Radius: button `4px` · card `6px` · badge `2px` · nav `5px` · link `6px` · xs `1px` · sm `2px` · md `3px` · lg `4px` · xl `5px` · 2xl `6px` · pill `9999px`
- Shadow `lg` (card, other, section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.05) 0px 0px 40px 20px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(2.47865 0 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px `
- Shadow `lg-2` (card, section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.14 -0.00000137836 0.00000326335) 0px 0px 40px 20px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.5) 0px 0.5px 0px 0px inset`
- Shadow `sm` (other): `color(srgb -0.000793195 0.564744 0.999998 / 0.25) 0px 0px 6px 2px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat against the dark canvas. Use thin charcoal borders and slightly lifted near-black panels to distinguish product cards and controls. Keep shadows soft and rare; visual depth comes from layered UI mockups, subtle gradients, and contrast between adjacent dark surfaces rather than heavy elevation.

## Imagery

There is no dominant photography. The page relies on dark product-interface mockups, code editors, charts, dataset tables, and restrained abstract diagonal light streaks. Frame interfaces as wide, precise product demonstrations, with legible controls and selective orange or blue data marks. Keep the imagery dark and integrated with the black canvas; brighter details inside mockups are product content, not a separate brand palette.

## Components

### Primary CTA

Compact Signal Ember (#da5c2b) button with white text, a subtly rounded rectangle, and a concise Start free label.

### Text link

Medium-weight orange inline link, commonly labeled Learn more and finished with a small arrow.

### Product panel

Dark interface card with fine charcoal border, restrained rounding, and dense query, chart, or dataset content.

### Code editor

Berkeley Mono query text on a black surface, with subtle line numbers and selective syntax color.

### Comparison card

Compact dark card with a platform mark, name, and short comparison copy, separated by subtle borders.

### Navigation

Minimal top bar with white brand mark, subdued text links, sign-in action, and orange primary CTA.

### Measured component styles

- **Primary button** (“Start free → →”): background #da5c2b · text #ffffff · border 1px solid · radius 6.08px · padding 0px 8px · 450 13px Geist
- **Secondary button** (“Cancel”): transparent background · text #7b7b7b · border 1px solid #3a3a3a · radius 4px · padding 2px 8px · 400 14px Geist
- **Link** (“Learn more → →”): transparent background · text #da5c2b · border 1px solid · radius 6.08px · padding 0px · 500 14px Geist
- **Card** (“Datasets / production-logs 14.2B Events ”): background #0c0c0c · text #eeeeee · border 1px solid #222222 · radius 10px · padding 0px · 400 16px Geist
- **Badge** (“1.0 TB/mo”): background #090909 · text #fafafa · border 1px solid #de5820 · radius 3.35544e+07px · padding 4px 12px · 400 12px berkeleyMono
- **Navigation item** (“Query”): transparent background · text #ffffff · radius 4.56px · padding 0px · 400 13px Geist

## Do

- Use #090909 as the dominant page canvas.
- Reserve #da5c2b for primary actions and selected links.
- Use Geist for marketing and interface text.
- Use Berkeley Mono for code and technical labels.
- Give major sections generous vertical separation.
- Frame product interfaces in subtle dark panels with fine borders.

## Don't

- Do not introduce bright full-width section backgrounds.
- Do not use orange as a large decorative field.
- Do not add prominent shadows or glossy effects.
- Do not let product mockups overwhelm their surrounding content.
- Do not use decorative display fonts in place of the measured sans.
- Do not treat illustration-only colors as broad brand colors.

## Agent prompt

Build a new Axiom-style page with a continuous Axiom Black canvas (#090909), restrained Screen White (#fafafa, #eeeeee) typography, and Signal Ember (#da5c2b) reserved for primary actions and selected links. Use Geist or a close sans substitute for headings, body, navigation, and buttons; use Berkeley Mono or IBM Plex Mono for code and compact technical labels. Center content within the measured 1208px maximum width. Create spacious, predominantly left-aligned sections with split text-and-product layouts and occasional compact grids. Show dark, credible product UI in near-black panels, edged with Rule Charcoal (#222222), not bright showcase frames. Keep supporting copy muted, borders subtle, and shadows minimal. Let authentic query editors, datasets, and charts provide visual detail; keep accent colors sparse and preserve generous vertical breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline and copy beside a large product interface showcase. | Primary signup action, Secondary sales action | Large headline, Dark product mockup, Orange CTA |
| 2 | logo-cloud | Four-column customer-logo band alongside a compact testimonial. | Social proof, Customer attribution | Quote block, Logo grid, Subtle separators |
| 3 | feature-grid | Left-aligned introduction above three problem cards. | Problem framing, Learn-more link | Three-column cards, Small data illustrations, Muted copy |
| 4 | product-showcase | Feature copy above a broad dataset interface with an overlapping detail panel. | Feature explanation, Learn-more link | Dataset table, Floating detail pane, Dark bordered surfaces |
| 5 | feature-split | Two-column pricing explanation with a wide calculator-style product visualization. | Pricing education, Usage exploration | Cost estimate panel, Horizontal comparisons, Orange data marker |
| 6 | testimonials | Single centered quote in a broad, sparse dark section. | Social proof, Customer attribution | Centered quotation, Muted typography, Generous negative space |
| 7 | feature-split | Two-column text and query editor, with copy at left and product UI at right. | Feature explanation, Learn-more link | Code editor, Query controls, Dark UI panel |
| 8 | feature-split | Two-column migration story with copy and a Splunk-oriented interface demonstration. | Migration reassurance, Learn-more link | Legacy product mockup, Stacked interface layers, Subtle borders |
| 9 | feature-split | Split text and agent-oriented terminal or conversation interface. | Developer use-case education, Learn-more link | Agent conversation UI, Dark terminal styling, Code details |
| 10 | product-showcase | Left-side prompt and action paired with a right-side query playground. | Try without account, Open playground | Query editor, Results visualization, Orange chart details |
| 11 | comparison | Centered heading and introduction above a four-column comparison-card row. | Compare alternatives, Explore competitor pages | Four platform cards, Logos or names, Subtle card borders |
| 12 | cta | Centered headline, reassurance copy, and compact paired actions. | Start free, Talk to sales | Centered CTA, Orange primary button, Minimal secondary action |
| 13 | footer | Brand and abstract accent above a dense multi-column navigation footer. | Grouped navigation, Company and resource links | Brand mark, Multi-column link lists, Social icons |

## Source CSS custom properties (selected)

```css
--brand: lab(55.3975% 51.7722 56.8029);
--background: lab(2.47865% 0 0);
--foreground: lab(98.26% 0 0);
--card-foreground: lab(98.26% 0 0);
--popover-foreground: lab(98.26% 0 0);
--primary: lab(100% 0 0);
--primary-foreground: lab(4.4379% 0 0);
--secondary: lab(15.204% 0 -.00000596046);
--secondary-foreground: lab(100% 0 0/.63);
--muted-foreground: lab(48.438% 0 0);
--accent: lab(15.204% 0 -.00000596046);
--accent-foreground: lab(98.26% 0 0);
--border: lab(11.84% 0 0);
--radius: .475rem;
--sidebar-foreground: lab(98.26% 0 0);
--sidebar-primary: lab(36.9089% 35.0961 -85.6872);
--sidebar-primary-foreground: lab(98.26% 0 0);
--sidebar-accent: lab(15.204% 0 -.00000596046);
--sidebar-accent-foreground: lab(98.26% 0 0);
--sidebar-border: lab(100% 0 0/.1);
--c15t-primary: hsl(228, 100%, 70%);
--c15t-primary-hover: hsl(228, 100%, 65%);
--c15t-surface: hsl(0, 0%, 7%);
--c15t-surface-hover: hsl(0, 0%, 10%);
--c15t-border: hsl(0, 0%, 20%);
--c15t-border-hover: hsl(0, 0%, 25%);
--c15t-text: hsl(0, 0%, 93%);
--c15t-text-muted: hsl(0, 0%, 60%);
--c15t-text-on-primary: hsl(0, 0%, 100%);
--c15t-font-family: system-ui, -apple-system, sans-serif;
--c15t-font-size-sm: 0.875rem;
--c15t-font-size-base: 1rem;
--c15t-font-size-lg: 1.125rem;
--c15t-font-weight-normal: 400;
--c15t-font-weight-medium: 500;
--c15t-font-weight-semibold: 600;
--c15t-space-xs: 0.25rem;
--c15t-space-sm: 0.5rem;
--c15t-space-md: 1rem;
--c15t-space-lg: 1.5rem;
```

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