---
version: alpha
name: Axiom
description: Contemplative near-black canvas for an AI research lab — phrase-by-phrase typographic rhythm, monospace system-status labels, ultra-restrained near-monochrome palette where a single faint warm-white ink and a cool signal blue do all the work against deep void backgrounds.

colors:
  # Canvas + ink
  background: "#0a0a0b"
  surface: "#101012"
  surface-soft: "#16161a"
  ink: "#ededef"
  ink-secondary: "#9a9aa2"
  ink-muted: "#5c5c66"

  # Signal accent — used sparingly for status/links/CTA hover
  primary: "#6ea8ff"
  primary-dim: "#3a5e9e"
  signal-green: "#5fd08a"

  # Borders / hairlines
  border: "#222226"
  border-strong: "#33333a"

  # On-color
  on-primary: "#0a0a0b"
  on-ink: "#0a0a0b"

  # Overlays
  overlay-backdrop: "#000000"
  selection-bg: "#222226"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Inter, Helvetica, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Space Grotesk, Inter, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Space Grotesk, Inter, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px
  mono-caption:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1.0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  status-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.signal-green}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Axiom Design System

## Overview

Axiom presents itself less as a product page and more as an observation instrument. The design system is built around a near-black void canvas (`{colors.background}`) — not pure black, but a faintly cool off-black that keeps the surface from feeling like a switched-off screen. Against it, a single warm-neutral ink (`{colors.ink}`) carries nearly all the text, and the entire palette stays achromatic except for a cool signal blue (`{colors.primary}`) and an occasional system-green (`{colors.signal-green}`) that behave like instrument readouts rather than brand colors.

The defining typographic move is phrase-by-phrase rhythm. Hero statements break across lines by meaning, not by container width — "Intelligence is not something we build. / It is something we encounter." This gives the large display type a contemplative, almost liturgical cadence. Headlines use a humanist-geometric sans at regular weight with gentle negative tracking, deliberately avoiding the bold, high-impact register most marketing sites reach for. The result reads quiet and certain.

The mono layer is where the lab's identity lives. JetBrains Mono labels carry system-status metadata — observation mode, drift data, timestamps — set in small uppercase-feeling captions with open letter-spacing. These mono tags frame the editorial sans copy the way a telemetry overlay frames a photograph, connecting the philosophical voice to the sense of an instrument quietly recording.

Chrome is reduced to hairlines. Borders are thin near-background grays (`{colors.border}`), radii stay small, and depth comes from subtle surface tinting (`{colors.surface}` → `{colors.surface-soft}`) rather than shadows. Full-width imagery and generous vertical spacing do the structural work.

**Key Characteristics:**
- Near-black cool void canvas (`{colors.background}`) — never pure black
- Phrase-by-phrase line breaks for contemplative display rhythm
- Headlines at regular weight (400) with negative tracking — quiet, not bold
- JetBrains Mono system-status labels as a telemetry-style identity layer
- Near-monochrome: warm-neutral ink + one cool signal blue + one system green
- Hairline borders and surface tints instead of shadows for depth
- Generous vertical spacing and full-width imagery

## Colors

### Canvas & Ink
- **Void** (`{colors.background}`): Page background. Faintly cool off-black, never `#000000` in body.
- **Surface** (`{colors.surface}`): Cards, nav, pills — one step up from void.
- **Surface Soft** (`{colors.surface-soft}`): Larger feature panels.
- **Ink** (`{colors.ink}`): Primary text and headings — warm near-white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, nav labels.
- **Ink Muted** (`{colors.ink-muted}`): Timestamps, faint metadata.

### Signal Accents
- **Signal Blue** (`{colors.primary}`): Links, CTA hover, focus rings, active telemetry.
- **Signal Blue Dim** (`{colors.primary-dim}`): Quieter accent on dark surfaces.
- **System Green** (`{colors.signal-green}`): Live status indicators ("observing", "online").

### Borders
- **Border** (`{colors.border}`): Default hairline, barely above the canvas.
- **Border Strong** (`{colors.border-strong}`): Inputs, ghost buttons, emphasized dividers.

## Typography

### Font Family
- **Display / Headings**: `Space Grotesk` with fallbacks `Inter, Helvetica, Arial, sans-serif`
- **Body**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 52px hero statements, phrase-broken |
| `section-heading` | Section titles |
| `sub-heading` | Card and sub-section headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Supporting copy, captions |
| `button-ui` | Buttons, links |
| `mono-label` | Nav and inline system labels |
| `mono-caption` | Telemetry / status metadata |

### Principles
- **Quiet display**: Headlines stay at weight 400 with negative tracking — restraint signals confidence.
- **Phrase rhythm**: Break hero copy by meaning, not by width.
- **Mono as telemetry**: JetBrains Mono with open tracking for status labels only — never for reading copy.
- **Achromatic discipline**: Color is a signal, not decoration.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) that create the breathing, observatory pacing between sections.

### Grid & Container
- Max content width approximately 1100px, centered
- Hero: single-column, generous top padding, phrase-broken statement
- Feature sections: full-width imagery alternating with centered text blocks
- Hairline dividers (`{colors.border}`) instead of filled separators

### Whitespace Philosophy
- **Observatory pacing**: Very large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) between sections.
- **Image as pause**: Full-width imagery acts as a breath between text passages.
- **Depth without shadow**: Surface tints and hairlines, never drop shadows.

## Components

The full component spec lives in the `components:` block above.

### Buttons
- **`button-primary`** — Warm-white fill, dark text, pill radius. Hover shifts fill to signal blue.
- **`button-ghost`** — Transparent on void with a `{colors.border-strong}` hairline.

### Pills & Badges
- **`badge`** — Surface fill, mono-caption text, hairline border.
- **`status-pill`** — System-green mono text for live status readouts.

### Cards
- **`card`** — Surface fill, hairline border, small radius.
- **`card-soft`** — Larger feature panel on `{colors.surface-soft}`.

### Inputs
- **`input`** — Surface fill, `{colors.border-strong}` hairline; focus switches border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Void background, mono labels in `{colors.ink-secondary}`, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas a faintly cool off-black (`{colors.background}`), never pure black for large fields
- Set headlines at weight 400 with negative tracking
- Break hero copy phrase-by-phrase by meaning
- Reserve `{colors.primary}` and `{colors.signal-green}` for signal/status only
- Use hairline borders and surface tints for depth

### Don't
- Don't bold the display type — restraint is the brand
- Don't introduce warm decorative colors into the chrome
- Don't use drop shadows — depth comes from tint and hairlines
- Don't set reading copy in the monospace face
- Don't crowd sections — the spacing is the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales to ~32px, reduced section gaps |
| Tablet | 600–1024px | Imagery spans full width, text blocks centered |
| Desktop | 1024–1400px | Full layout, ~1100px content column |
| Large | >1400px | Centered with generous side margins |

### Collapsing Strategy
- Hero: 52px → ~32px, phrase breaks preserved
- Section spacing: `{spacing.4xl}` → `{spacing.2xl}` on mobile
- Full-width imagery maintained edge-to-edge at all sizes
- Mono status labels wrap or truncate gracefully

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Void `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent / link: Signal Blue `{colors.primary}`
- Status: System Green `{colors.signal-green}`
- Border: Hairline `{colors.border}`

### Example Component Prompts
- "Hero on `{colors.background}`. Statement at 52px Space Grotesk weight 400, line-height 1.12, letter-spacing -1.5px, `{colors.ink}`, broken into two phrase lines. Mono status label above it: 11px JetBrains Mono, `{colors.signal-green}`, letter-spacing 1px."
- "Card: `{colors.surface}` fill, 1px `{colors.border}`, 8px radius, 24px padding. Title 24px Space Grotesk weight 400. Body 16px Inter `{colors.ink-secondary}`."
- "Primary button: `{colors.ink}` fill, `{colors.on-ink}` text, pill radius, 12px 22px padding; hover fill `{colors.primary}`."

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Axiom. Brand names and trademarks belong to their respective owners.