# Axiom — Marketing site Design Spec

> 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-N` ladder. Dashboard: not captured (needs login).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text

| 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 |

### Surfaces

| 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 ladder

`--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`

### Borders

| Token | Hex | Role / usage |
|---|---|---|
| `--border` | `#1f1f1f` | Every hairline, card edge, outline button |
| `--sidebar-border` | `#191a1a` | App rail divider |
| `--ring` | `#737373` | Focus ring |

### Accent & semantic

| 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.

## 3. Typography Rules

- Sans: `Geist` (with system fallbacks)
- Mono: `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.

## 4. Component Stylings

**Primary CTA** — `background:#da5c2b; color:#ffffff; border:1px solid transparent;
border-radius:6.08px; height:36px; padding:0 12px; font:500 13px;` with a trailing arrow
glyph that slides on hover. `transition:.15s cubic-bezier(.4,0,.2,1)`. The nav variant is
the same recipe at `height:28px; padding:0 8px; font-weight:450`.

**Secondary / outline** — `background:transparent; color:#fafafa; border:1px solid #1f1f1f;
border-radius:6.08px; height:36px; padding:0 12px; font:500 13px;`
`transition:color .2s cubic-bezier(.4,0,.2,1), background-color …`.

**Ghost (Sign in)** — transparent fill and transparent border, 28px tall, 13px/450.

**Inverted control (Run)** — white `#ffffff` fill with `#0f0f0f` ink, ~24–28px tall, 4px
radius, paired with disabled siblings (Cancel / Clear / Save) rendered at
`--muted-foreground #737373` on transparent.

**Segmented control (Builder | Editor)** — a `#0f0f0f` track with the active segment filled
`#2a2a2a`, label `#eeeeee` at 14px/400, 4px radius, 2px 8px padding, 24px tall.

**Tab strip** — text tabs at 13px with a 1px active underline in `--foreground`, on a card
head with `border-radius:8px 8px 0 0`. **Console card (the hero)** — `background:#0f0f0f;
border:1px solid #1f1f1f; border-radius:10.64px;` wrapping the tab strip, toolbar and query
surface. **Time-range picker** — outline pill with a clock glyph and chevron, 13px label.

## 5. Layout Principles

Content column `max-width:1240px`; prose blocks capped at `768px`; narrow copy at `576px`.
Spacing is a 4px base — control padding runs 0 8px / 0 12px, chips 2px 8px. Nav is a
full-width bar with a 1px `#1f1f1f` bottom hairline: wordmark left, six 13px links centred,
ghost "Sign in" + orange "Start free" right. Hero anatomy: two-line 72px headline → two-line
15px `#999999` sub → two 36px CTAs → the console card, which bleeds toward the bottom of
the viewport so the product is the first thing below the fold.

## 6. Depth & Elevation

Radius census: pill `9999px` (426 — mostly icon strokes), `1px`, `4px` (77), **`6.08px`**
(48 — the control radius, derived from `--radius:.475rem`), `2px`, `4.56px`, `10.64px`
(card), `8px 8px 0 0` (tab head), `7.6px`. The scale is computed off `--radius: .475rem`
(7.6px) as `calc(var(--radius) - 2px)` etc., which is why the values are fractional.

**Shadows: effectively none.** The census returns transparent stacks (21 elements) plus one
transparent brand glow and three tiny coloured focus glows inside product artwork
(`color(srgb 0 .565 1 / .25) 0 0 6px 2px` and violet/yellow siblings). Elevation is fill +
1px `#1f1f1f` hairline only.

## 7. Motion

House transition: `color, background-color, border-color .15s cubic-bezier(.4,0,.2,1)` —
105 elements. Secondary: `opacity .15s` same curve (36), and a slower `opacity .5s
cubic-bezier(0,0,.2,1)` for scroll reveals (25). A few `all .15s` fallbacks. Everything is
150ms; nothing translates far, nothing scales, nothing bounces. The only recurring
animation is the CTA arrow sliding right on hover.

## 8. Backgrounds, Effects & WebGL

Flat near-black fills plus fade masks: `linear-gradient(in oklab, rgba(0,0,0,0) 0%,
rgb(17,17,17) 100%)` bottom-fades the console card into the page, and
`linear-gradient(to top, oklab(.285 … / .4) 0%, rgba(0,0,0,0) 50%, …)` washes section
edges. No WebGL canvas, no background video, no grain or noise texture, no backdrop-filter
blur observed. Product artwork is rendered as inline SVG.

## 9. Do's and Don'ts

### Do
- Make the canvas `#090909` **darker than the cards** `#0f0f0f` — the inverse of usual dark mode.
- Keep the surface near-monochrome; use the grey `--chart-1…5` ramp for data, not hues.
- Reserve `#da5c2b` for the primary button and the logo only.
- Set body at **15px** and nav at **13px/450** — the whole page is one step smaller than typical.
- Use display line-height below 1.0 with -2.5% tracking.
- Separate with 1px `#1f1f1f` hairlines; never add a drop shadow.
- Put the real product console in the hero, with its disabled toolbar siblings, and use the
  fractional radius scale (6.08px control, 10.64px card) from `--radius:.475rem`.

### Don't
- Don't brighten the accent to a signal orange — `#da5c2b` is deliberately earthy.
- Don't introduce a categorical multi-hue chart palette.
- Don't use weight 600+ or scale controls above 36px.
- Don't use rounded pills for buttons — controls are ~6px rects.
- Don't add glow, gradient fills or elevation shadows to chrome.

## 10. Responsive Behavior

Not captured — desktop viewport only. The 1240px column, 768px prose cap and centred nav
cluster are the obvious collapse points.

## 11. Agent Prompt Guide

- Canvas `#090909` · Text `#fafafa` · Muted `#999999` · Border `#1f1f1f` · Accent `#da5c2b`
- Font: Geist · Body: 15/22.5px · Radius: 6.08px control / 10.64px card · Control height: 28px (nav) / 36px · Focus: `--ring #737373` · Hover: fill to `#262626` over 150ms `cubic-bezier(.4,0,.2,1)`

<axiom_design_language>
A near-black observability console rendered at product density: canvas `#090909` sitting
*darker* than its cards `#0f0f0f`, inset fills `#262626`, hairlines `#1f1f1f`, text `#fafafa`
over muted `#999999` and `#737373`, on a 12-step grey ladder from `#0c0c0c` to `#eeeeee`. The
only accent is an earthy terracotta `#da5c2b`, allowed on the primary button and the logo and
nowhere else — even the chart series are five greys (`#d4d4d4`, `#737373`, `#525252`, `#404040`,
`#262626`). Type is Geist capped at weight 500 with an unusual 450 for UI: hero 72px on a 68px
line at -1.8px tracking, h2 40/44, body 15/22.5, nav 13/19.5. Controls are small rects, not
pills — 28px in the nav and 36px in content, `6.08px` radius from `--radius:.475rem`, cards at
10.64px — with a white-fill `#ffffff`/`#0f0f0f` inverted Run button and greyed disabled
siblings. There are no shadows; elevation is a fill change plus a 1px hairline. Motion is a flat
150ms `cubic-bezier(.4,0,.2,1)` on colour, with 500ms opacity scroll reveals. Layout: 1240px
column, 768px prose, 4px spacing base, and the live query console framed as the hero.
Feels: dense, engineered, restrained, console-grade.
Avoid: a bright signal orange, a categorical multi-hue chart palette, pill buttons, weight 600+,
16px body, glows or elevation shadows, and cards darker than the canvas.
</axiom_design_language>