An observability console rendered at product density on a marketing page, and near-monochrome on purpose: the chart series are five greys rather than a categorical hue scale, so even the data refuses colour. The canvas at #090909 sits darker than the cards on it, inverting the usual dark-mode convention, and the one accent is an earthy terracotta #da5c2b reserved for the primary button and the logo. Geist is capped at weight 500 with an unusual 450 half-step for nav and UI, the hero runs 72px on a 68px line, and body is set at 15px with 13px chrome so the whole page reads one step smaller than typical marketing. Controls are small rects on a fractional radius scale derived from --radius:.475rem, and the hero is the live query console itself, complete with a segmented Builder/Editor control, a time-range picker, an inverted white Run button and greyed-out disabled siblings.
Browse Axiom in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: axiom.co (live DOM, computed styles), 2026-07-20. Coverage: home ("The modern machine data platform"). Token layer: 231 CSS custom properties in a shadcn-style semantic set (--background/--foreground/--card/--muted/…) plus a 12-step--gray-Nladder. Dashboard: not captured (needs login).
A near-black observability console rendered at product density on a marketing page. The canvas is #090909 — deeper than the cards that sit on it (#0f0f0f) — and the whole surface is near-monochrome by design: the chart palette itself is five greys (#d4d4d4 → #262626), so even the data refuses colour. The single accent is a **terracotta orange #da5c2b** — muted and earthy rather than a signal orange — appearing only on the primary button. The signature move: the hero is not an illustration but the **live Query console**, a card-framed app shell with a tab strip, a Builder-Editor segmented control, a time-range picker and a real Run button beside greyed-out Cancel / Clear / Save siblings. Everything is small — 13px nav, 15px body, 28–36px controls, radii under 11px — and separation is a 1px #1f1f1f hairline with no drop shadows.
Feels: dense, engineered, restrained, console-grade.
| Token | Hex | Role / usage |
|---|---|---|
--foreground | #fafafa | Headings, primary text |
--secondary-foreground | #999999 | Body copy, nav links |
--muted-foreground | #737373 | Tertiary labels, disabled text |
--muted | #484848 | Deepest muted / placeholder |
--primary-foreground | #0f0f0f | Ink on the white primary surface |
--gray-12 | #eeeeee | Segmented-control active label |
| Token | Hex | Role / usage |
|---|---|---|
--background | #090909 | Page canvas — *darker* than the cards |
--card / --popover / --sidebar | #0f0f0f | Cards, popovers, app rail |
--secondary / --accent / --input | #262626 | Inset fills, input grounds, chips |
--gray-4 | #2a2a2a | Active segment fill |
--primary | #ffffff | Inverted primary surface (the Run button) |
`--gray-1 #0c0c0c · 2 #111111 · 3 #222222 · 4 #2a2a2a · 5 #313131 · 6 #3a3a3a · 7 #484848 · 8 #606060 · 9 #6e6e6e · 10 #7b7b7b · 11 #b4b4b4 · 12 #eeeeee`
| Token | Hex | Role / usage |
|---|---|---|
--border | #1f1f1f | Every hairline, card edge, outline button |
--sidebar-border | #191a1a | App rail divider |
--ring | #737373 | Focus ring |
| Token | Hex | Role / usage |
|---|---|---|
--brand | #da5c2b | The only accent — primary CTA fill, logo |
--destructive | #ff6467 | Error / destructive |
--sidebar-primary | #1447e6 | App-rail active state (product only) |
--chart-1…5 | #d4d4d4 #737373 #525252 #404040 #262626 | Chart series — all grey |
Rules. The accent appears on the primary button and the logo, nothing else. The chart palette is deliberately achromatic. The canvas is darker than the cards — the inverse of the usual dark-mode convention.
Geist (with system fallbacks)Geist Mono — query editor, code, IDs| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 72/68px (0.94) | 500 | -1.8px (-2.5%) |
| Section h2 | 40/44px (1.1) | 500 | -1px (-2.5%) |
| Card h3 | 16/24px | 500 | -0.4px |
| Body | 15/22.5px (1.5) | 400 | normal |
| Nav / UI | 13/19.5px | 450 | normal |
| Button label | 13px | 500 | normal |
| Toolbar / chip | 14px | 400 | normal |
Patterns. Weight ceiling is 500, with an unusual 450 used for nav and UI text — a half-step between regular and medium. Display line-height is *below* 1.0 (72px type on a 68px line). Negative tracking is a constant -2.5% on display roles and near-zero below 16px. Body copy is 15px, not 16px — the whole page is set one step smaller than typical marketing. No uppercase, no letter-spaced eyebrows.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.