---
version: alpha
name: Mastra
description: "a debugger's night shift — charcoal instruments on black, with agent traces glowing green, violet, and amber."
colors:
  on-surface-variant: "#424242"
  on-surface: "#FFFFFF"
  surface: "#080808"
  primary: "#FDAC53"
  void: "#020202"
  ink-raise: "#0F0F0F"
  panel: "#171717"
  charcoal-pill: "#1C1C1C"
  track: "#242424"
  input-grey: "#262626"
  hairline: "#161616"
  edge: "#2B2B2B"
  muted: "#939393"
  body: "#CCCCCC"
  soft-white: "#D9D9D9"
  heading: "#F0F0F0"
  signal-green: "#98FC82"
  trace-violet: "#B898F8"
  amber-dim: "#F3AD5D"
typography:
  caption:
    fontFamily: greed
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  meta:
    fontFamily: greed
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  ui:
    fontFamily: greed
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: greed
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: greed
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  heading:
    fontFamily: greed
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0em
  heading-lg:
    fontFamily: greed
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.12
    letterSpacing: 0em
  display:
    fontFamily: greed
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
rounded:
  micro-elements: 8px
  small-controls: 10px
  popovers-menus: 20px
  media-containers: 28px
  cards: 40px
  link-pills: 51px
  inputs: 58px
  buttons: 9999px
spacing:
  "4": 4px
  "8": 8px
  "12": 12px
  "17": 17px
  "20": 20px
  "22": 22px
  "28": 28px
  "38": 38px
---
# Mastra — Style Reference
> a debugger's night shift — charcoal instruments on black, with agent traces glowing green, violet, and amber.

**Theme:** dark

Mastra's system is a developer console promoted to a brand. The canvas is a true near-black (`#020202` base, reading `#080808` across the working page), and every interactive element — including both primary CTAs — is a charcoal pill (`#1C1C1C` fill, `#CCCCCC` label): the system deliberately ships **no high-contrast action button**, so the loudest objects on the page are the product's own telemetry — trace meter bars in signal green (`#98FC82`), violet (`#B898F8`), and amber (`#FDAC53`) — plus a single hanging workshop ribbon in that same amber. Typography is a two-font contract: greed, a variable sans dialed to in-between weights (520 for display, 450 for leads — never a round 400/700 shout), against commitMono for anything the machine says (`npm create mastra`, `10.364s`). Surfaces climb a strict luminance ladder (#020202 → #0F0F0F → #171717 → #1C1C1C → #242424 → #262626) and, unusually for a near-black system, real soft shadows (`0 4px 60px rgba(0,0,0,0.75)`) float panels off the void. The rhythm is calm, engineering-grade restraint: hierarchy comes from luminance and weight, color is reserved for data.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void | `#020202` | `--color-void` | Page base and theme-color — the deepest black, visible at the page top behind the nav |
| Canvas | `#080808` | `--color-canvas` | The working page background — hero, sections, and footer band all sit on this near-black |
| Ink Raise | `#0F0F0F` | `--color-ink-raise` | Nav bar strip and feature-card fill — the first luminance step off the canvas |
| Panel | `#171717` | `--color-panel` | Popover and dropdown menu surface — floats on shadows, not borders |
| Charcoal Pill | `#1C1C1C` | `--color-charcoal-pill` | Fill for every button on the page — Login, Sign Up, Quickstart, the command snippet. There is no lighter or colored CTA fill; this is the system's most radical restraint |
| Track | `#242424` | `--color-track` | Meter-bar track and hover surface — the empty state a colored fill loads into |
| Input Grey | `#262626` | `--color-input` | Input and tag fills — the lightest resting surface in the ladder |
| Hairline | `#161616` | `--color-hairline` | 2px card border — barely one step above the card it frames |
| Edge | `#2B2B2B` | `--color-edge` | Subtle 1px pill-button border on emphasized variants (Sign Up, Quickstart) |
| Border Strong | `#424242` | `--color-border-strong` | Input borders and the most-muted link text — the strongest structural line the system draws |
| Muted | `#939393` | `--color-muted` | Body paragraphs, captions, popover labels, and commitMono timing readouts |
| Body | `#CCCCCC` | `--color-body` | Nav links, button labels, trace row labels — the default interactive text |
| Soft White | `#D9D9D9` | `--color-soft-white` | Card body copy and customer logo fills — the global foreground token |
| Heading | `#F0F0F0` | `--color-heading` | Display and heading type — deliberately short of pure white |
| White | `#FFFFFF` | `--color-white` | The wordmark and 22px lead lines only — full white is a highlight, not a default |
| Signal Green | `#98FC82` | `--color-signal-green` | The brand accent: the inline "observe" keyword and successful agent-run meter bars. Data and verbs earn it; buttons never do |
| Trace Violet | `#B898F8` | `--color-trace-violet` | LLM-span meter bars in the trace waterfall — the model's color |
| Run Amber | `#FDAC53` | `--color-run-amber` | Tool-call meter dots and the workshop announcement ribbon — the only saturated *fill* on the page |
| Amber Dim | `#F3AD5D` | `--color-amber-dim` | Secondary amber for smaller tool-call markers and warm text accents |

## Tokens — Typography

### greed — The single sans for everything human: display, headings, body, nav, buttons. A variable font dialed to in-between weights (520 display, 450 lead, 500 UI) — precision-tuned, never a round bold. · `--font-greed`
- **Substitute:** Söhne, Inter, or General Sans
- **Weights:** 400, 423, 450, 500, 520, 600 (variable axis 100–900 — weights are dialed, not stepped)
- **Sizes:** 10.5px, 11px, 14px, 14.5px, 15px, 17px, 22px, 34px, 40px, 54px
- **Line height:** ~1.1 at display, ~1.45 at the 22px lead, ~1.5 at body
- **Letter spacing:** near-neutral; the fractional computed sizes (14.5px, 15.172px) betray a fluid clamp()-driven scale
- **Role:** The single sans for everything human: display, headings, body, nav, buttons. A variable font dialed to in-between weights (520 display, 450 lead, 500 UI) — precision-tuned, never a round bold.

### commitMono — The machine's voice: install commands, trace timings (10.364s), and code. Carried at 500/550 — slightly heavier than default mono so it holds its own against greed on dark. · `--font-commit-mono`
- **Substitute:** JetBrains Mono, IBM Plex Mono, or Geist Mono
- **Weights:** 500, 550
- **Sizes:** 12px–15px
- **Line height:** ~1.4
- **Letter spacing:** default mono spacing — the fixed grid is the point
- **Role:** The machine's voice: install commands, trace timings (10.364s), and code. Carried at 500/550 — slightly heavier than default mono so it holds its own against greed on dark.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.5 | — | `--text-caption` |
| meta | 14px | 1.4 | — | `--text-meta` |
| ui | 15px | 1.4 | — | `--text-ui` |
| body | 17px | 1.5 | — | `--text-body` |
| lead | 22px | 1.45 | — | `--text-lead` |
| heading | 34px | 1.15 | — | `--text-heading` |
| heading-lg | 40px | 1.12 | — | `--text-heading-lg` |
| display | 54px | 1.1 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 17 | 17px | `--spacing-17` |
| 20 | 20px | `--spacing-20` |
| 22 | 22px | `--spacing-22` |
| 28 | 28px | `--spacing-28` |
| 38 | 38px | `--spacing-38` |

### Border Radius

| Element | Value |
|---------|-------|
| micro elements | 8px |
| small controls | 10px |
| popovers / menus | 20px |
| media containers | 28px |
| cards | 40px |
| link pills | 51px |
| inputs | 58px |
| buttons | 9999px (full pill) |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| popover | 0px 4px 60px rgba(0,0,0,0.75) | `--shadow-popover` |
| panel-float | 0px 16px 36px rgba(0,0,0,0.46) | `--shadow-panel` |
| inset-well | inset 0px 4px 10px rgba(0,0,0,0.3) | `--shadow-inset` |
| hairline-drop | 0px 1px 0px rgba(0,0,0,0.4) | `--shadow-hairline` |

### Layout

- **Page max-width:** 1028px content column (wider 1120–1328px variants for full-bleed panels)
- **Nav height:** 60px
- **Section gap:** 100-160px
- **Card padding:** 38px
- **Element gap:** 12-20px

## Components

### Top Navigation Bar
**Role:** Persistent 60px site header carrying brand, product nav, social proof, and auth

A `#0F0F0F` strip over the `#020202` page top. Left: the Mastra asterisk-mark and wordmark in `#FFFFFF`. Center: nav links (Product, Resources, Pricing, Customers, Docs) in greed 15px weight 500 `#CCCCCC` — dropdown-bearing items carry a small dot prefix. Right: a GitHub glyph with live star count (26.7k) in `#F5F5F5`, then two charcoal pills: Login and Sign Up, both `#1C1C1C`. Even Sign Up gets no accent fill — the nav ends quiet.

### Charcoal Pill Button
**Role:** Every CTA on the page — Login, Sign Up, Quickstart

Fill `#1C1C1C`, label `#CCCCCC` in greed 14.5–15px weight 500, fully-rounded 9999px radius, 0 17–22px horizontal padding. Emphasized variants (Sign Up, Quickstart) add a 1px `#2B2B2B` border to lift the edge one step. No shadow, no accent, no white fill — the system's defining refusal. Hierarchy between paired buttons comes from the border and position, not color.

### Workshop Ribbon
**Role:** The announcement banner for live events — the only saturated fill on the page

A tab-shaped band hanging directly beneath the nav with curved lower corners, filled `#FDAC53`, text in `#000000` greed weight 500: date, a dot separator, the event title, and a trailing arrow. Because every button is charcoal, this single amber tab out-shouts the entire page — it is the one element allowed to.

### Command Snippet Pill
**Role:** The install one-liner that doubles as the primary onboarding CTA

`npm create mastra` set in commitMono 500 `#CCCCCC` inside a `#1C1C1C` pill with a subtle `#2B2B2B` edge and a copy-to-clipboard glyph at the right. Paired inline with a Quickstart pill at 12px gap. The command IS the call to action — the brand trusts developers to prefer a terminal string to a marketing verb.

### Hero Display Block
**Role:** The page-opening statement — left-aligned, half-width, sharing the fold with live product UI

"Build AI agents" in greed 54px weight 520 `#F0F0F0`, line-height ~1.1. Below it a 22px lead in `#939393` with inline keyword highlights, then the command pill + Quickstart row. The hero takes only the left half of the viewport; the right half belongs to a live trace waterfall — copy and evidence side by side.

### Keyword Highlight
**Role:** Inline verb accenting within muted body copy

A single word ("observe") set in Signal Green `#98FC82` inside a `#939393` paragraph, same size and weight as its neighbors. Color is the only differentiator — no bold, no underline, no background. Used for the product's verbs, one per sentence at most.

### Trace Waterfall Panel
**Role:** The hero's proof — a live observability trace rendered as brand imagery

A floating panel on `#0D0D0D`/`#080808` showing an agent run as an indented span tree: row labels ("agent run: 'ops-agent'", "llm: 'gpt-4o-mini'") in greed 14px `#CCCCCC` with tree hairlines, collapse chevrons and span counts, a meter bar per row, and right-aligned commitMono timings (`10.364s`, `0.004s`) in `#939393`. This panel is the page's only illustration — the product's own telemetry doing the work photography would.

### Meter Bar
**Role:** Span-duration visualization inside the trace waterfall

A pill-ended track in `#242424`, ~8px tall, with a proportional fill colored by span kind: Signal Green `#98FC82` for agent runs, Trace Violet `#B898F8` for LLM spans, Run Amber `#FDAC53` for tool calls (small dot-length fills for sub-second spans). The trio is the entire chromatic vocabulary of the brand, and it only ever appears as data.

### Popover Menu
**Role:** Nav dropdown for Product/Resources groups

Surface `#171717`, 20px radius, floated on the `0 4px 60px rgba(0,0,0,0.75)` shadow — no border. A group label ("Observability") in greed `#939393` caption size, then items (Traces, Metrics, Logs) as icon + label rows in 15px `#F0F0F0` with generous 12px row padding. Depth by shadow alone; the surface luminance step does the separation from the canvas.

### Feature Card
**Role:** Content container for feature and marketing sections

Fill `#0F0F0F`, 2px `#161616` border, 40px radius, 38px padding — a big, soft-cornered slab. Body copy in greed 17px weight 400 `#D9D9D9`. The oversized radius against the hairline-subtle border is the signature: generous geometry, almost invisible structure.

### Input Pill
**Role:** Search, email capture, and tag-style fields

Fill `#262626` — the lightest surface in the ladder — 1px `#424242` border, fully-soft 58px radius, 4px 12px padding, 12px `#D9D9D9` text. The one place the system draws a strong border, because the lightest surface can't separate by luminance alone.

### Customer Logo Band
**Role:** Social-proof strip anchoring the fold

A full-width row on the `#080808` canvas: customer wordmarks (Replit, Marsh, Sanity, SoftBank, WorkOS, Brex) rendered flat in `#D9D9D9`, each with a tiny "Read →" case-study link beneath in deeply muted `#424242` — visible on intent, silent otherwise. No card, no border; the logos float directly on the canvas.

## Do's and Don'ts

### Do
- Fill every button `#1C1C1C` with `#CCCCCC` text — including the primary CTA. The absence of a loud button is the brand.
- Reserve `#98FC82`, `#B898F8`, and `#FDAC53` for data: meter bars, span markers, inline keywords. Color always means telemetry.
- Set display type in greed at weight 520, not 600 or 700 — the variable axis is tuned, and the in-between weight is the voice.
- Use commitMono 500 for anything the machine says: commands, timings, identifiers. Never set code in the sans.
- Climb the surface ladder in order: `#020202` → `#080808` → `#0F0F0F` → `#171717` → `#1C1C1C` → `#242424` → `#262626`. Each step is one level of interactivity or elevation.
- Float popovers on `0 4px 60px rgba(0,0,0,0.75)` with no border — shadow-on-black works here because every surface is a lifted grey.
- Keep headings at `#F0F0F0` and save `#FFFFFF` for the wordmark and single lead lines.

### Don't
- Never introduce a white, green, or colored button fill. If an element needs a fill, it gets `#1C1C1C`.
- Never use the accent trio decoratively — no green gradients, no violet section washes. If it isn't representing agent data or a live event, it stays grey.
- Never set headings at a stock 400 or 700. The system's weights are 450/500/520 — dialed, deliberate, slightly off-grid.
- Never square off an interactive element. Buttons are full pills, inputs are 58px, even cards run 40px — there are no crisp corners in this system.
- Never draw borders stronger than `#424242`, and use that only on inputs. Structure comes from luminance steps and shadows, not lines.
- Never replace the trace-waterfall imagery with photography or abstract 3D. The product's own console output is the only permitted illustration.
- Never brighten body copy past `#CCCCCC` — the muted `#939393` paragraph against a `#F0F0F0` heading is the contrast rhythm.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Void | `#020202` | Page base — the deepest black behind everything |
| 1 | Canvas | `#080808` | The working page background for all sections |
| 2 | Ink Raise | `#0F0F0F` | Nav strip and card fills — first lift |
| 3 | Panel | `#171717` | Popovers and floating menus |
| 4 | Charcoal Pill | `#1C1C1C` | Button and snippet fills |
| 5 | Track | `#242424` | Meter tracks, hover states |
| 6 | Input Grey | `#262626` | Inputs and tags — the ceiling of the ladder |

## Elevation

Two mechanisms, used together. First, the seven-step luminance ladder: every level of interactivity sits exactly one grey step above its parent (`#080808` canvas → `#0F0F0F` card → `#171717` popover → `#1C1C1C` control → `#242424` track → `#262626` input), so elevation is legible even before shadows render. Second — unusually for a near-black system — real, oversized soft shadows: popovers cast `0 4px 60px rgba(0,0,0,0.75)` and floating panels `0 16px 36px rgba(0,0,0,0.46)`. Shadow-on-black works because no surface is actually black: each lifted grey has a darker void beneath it to cast into. Borders are the last resort — a 2px `#161616` card hairline, a 1px `#424242` input line — and never carry elevation on their own.

## Imagery

No photography, no illustration, no abstract 3D. The hero image is the product itself: a live agent-trace waterfall — span tree, meter bars, millisecond timings — rendered in the brand's own tokens. Customer proof is flat `#D9D9D9` wordmarks floating directly on the canvas. Icons are small functional glyphs (copy, chevrons, chart marks) in the text colors, never decorated. The discipline: if a pixel isn't type, surface, or telemetry, it doesn't ship. This is what makes the three accent colors feel like instrument readings rather than decoration.

## Layout

A 1028px centered content column (with 1120–1328px variants for wide panels) on a full-bleed near-black canvas, under a 60px `#0F0F0F` nav. The fold is a split composition: hero copy left-aligned in the left half, the trace-waterfall panel occupying the right half — statement and evidence side by side, not stacked. The amber workshop ribbon hangs as a tab directly beneath the nav, breaking the horizontal rhythm exactly once. Below the fold, a full-width customer logo band, then card-based sections on `#0F0F0F` slabs with 40px radii. Section spacing is generous (100–160px); nothing is boxed unless it's a card, and section boundaries are marked by spacing and luminance, never rules.

## Typography Signature

One sans, one mono, and a variable axis used like a tuning knob. greed carries every human-facing word, but never at a stock weight: display runs at 520, leads at 450, UI at 500 — computed weights like 423 reveal that the axis is being interpolated per-size rather than snapped to named stops. The result reads as engineered rather than styled: headlines at 54px/520 have the presence of a semibold without its shout. The fractional computed sizes (14.5px, 15.172px) betray a fluid clamp() scale — type is sized by viewport math, not a fixed ramp. Against this, commitMono 500/550 marks every machine utterance — `npm create mastra` in the CTA row, `10.364s` in the trace gutter — slightly overweight for a mono so it holds optical parity with the sans on dark. The two-font boundary is semantic, not aesthetic: greed is what Mastra says, commitMono is what the system returns.

## Agent Prompt Guide
## Quick Color Reference
- background: #080808 (page base #020202)
- text: #CCCCCC (headings #F0F0F0, muted #939393, card body #D9D9D9)
- surface: #0F0F0F (cards, nav) / #171717 (popovers) / #262626 (inputs)
- border: #161616 (card hairline) / #2B2B2B (pill edge) / #424242 (inputs)
- accent: #98FC82 (signal green) / #B898F8 (trace violet) / #FDAC53 (run amber) — data only
- primary action: no distinct CTA color — every button is #1C1C1C with #CCCCCC text

## Example Component Prompts
1. **Hero split fold**: Canvas #080808. Left half: "Build AI agents" in greed (or Inter) 54px weight 520 color #F0F0F0, line-height 1.1; below it a 22px lead in #939393 with one word colored #98FC82; below that a #1C1C1C pill containing `npm create mastra` in a 500-weight mono #CCCCCC with a copy icon, next to a #1C1C1C "Quickstart" pill with 1px #2B2B2B border, both 9999px radius. Right half: a trace-waterfall panel.

2. **Charcoal pill pair**: Two buttons, 9999px radius, fill #1C1C1C, label #CCCCCC at 15px weight 500, horizontal padding 20px, height ~36px. The emphasized one adds a 1px #2B2B2B border. No accent fills, no shadows — position and border carry the hierarchy.

3. **Trace waterfall row**: On a #0D0D0D panel: an indented row with a thin tree hairline, label "llm: 'gpt-4o-mini'" in 14px #CCCCCC, a span count "12" with a double-chevron glyph, then a pill-ended meter: track #242424 8px tall, fill #B898F8 at ~95% width, and right-aligned "10.123s" in mono 13px #939393.

4. **Nav dropdown popover**: Surface #171717, radius 20px, shadow 0 4px 60px rgba(0,0,0,0.75), no border, padding 16px. Caption label "Observability" in 13px #939393, then three rows (Traces, Metrics, Logs) with small line-icons and 15px #F0F0F0 labels, 12px vertical rhythm.

5. **Workshop ribbon**: A tab hanging under a #0F0F0F nav bar, fill #FDAC53, curved bottom corners (radius ~20px), text in #000000 weight 500: "Jul 30th (Tomorrow) · Build Multiplayer Agents with Mastra Channels →". This is the only saturated fill allowed on the page.

## Similar Brands

- **Vercel** — the same near-black developer canvas with luminance-step surfaces, restrained greys, and product output treated as imagery
- **Linear** — dark SaaS discipline: soft-radius panels, muted body copy under bright headings, accent color rationed to meaning
- **Railway** — infrastructure telemetry (deploys, logs, metrics) rendered in brand accents as the hero visual on deep charcoal
- **Warp** — terminal-native identity: the mono typeface and command snippet promoted to first-class brand elements
- **Resend** — developer-tool minimalism where the API/console output is the marketing surface and chrome stays monochrome

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors — Neutrals */
  --color-void: #020202;
  --color-canvas: #080808;
  --color-ink-raise: #0F0F0F;
  --color-hairline: #161616;
  --color-panel: #171717;
  --color-charcoal-pill: #1C1C1C;
  --color-track: #242424;
  --color-input: #262626;
  --color-edge: #2B2B2B;
  --color-border-strong: #424242;
  --color-muted: #939393;
  --color-body: #CCCCCC;
  --color-soft-white: #D9D9D9;
  --color-heading: #F0F0F0;
  --color-white: #FFFFFF;

  /* Colors — Accents (data only) */
  --color-signal-green: #98FC82;
  --color-trace-violet: #B898F8;
  --color-run-amber: #FDAC53;
  --color-amber-dim: #F3AD5D;

  /* Typography — Font Families */
  --font-greed: 'greed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-commit-mono: 'commitMono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --text-meta: 14px;
  --leading-meta: 1.4;
  --text-ui: 15px;
  --leading-ui: 1.4;
  --text-body: 17px;
  --leading-body: 1.5;
  --text-lead: 22px;
  --leading-lead: 1.45;
  --text-heading: 34px;
  --leading-heading: 1.15;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.12;
  --text-display: 54px;
  --leading-display: 1.1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-lead: 450;
  --font-weight-ui: 500;
  --font-weight-display: 520;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-28: 28px;
  --spacing-38: 38px;

  /* Layout */
  --page-max-width: 1028px;
  --nav-height: 60px;

  /* Border Radius */
  --radius-micro: 8px;
  --radius-sm: 10px;
  --radius-popover: 20px;
  --radius-media: 28px;
  --radius-card: 40px;
  --radius-link-pill: 51px;
  --radius-input: 58px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-popover: 0px 4px 60px rgba(0, 0, 0, 0.75);
  --shadow-panel: 0px 16px 36px rgba(0, 0, 0, 0.46);
  --shadow-inset: inset 0px 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-hairline: 0px 1px 0px rgba(0, 0, 0, 0.4);

  /* Surfaces */
  --surface-void: #020202;
  --surface-canvas: #080808;
  --surface-ink-raise: #0F0F0F;
  --surface-panel: #171717;
  --surface-pill: #1C1C1C;
  --surface-track: #242424;
  --surface-input: #262626;
}
```

### Tailwind v4

```css
@theme {
  /* Colors — Neutrals */
  --color-void: #020202;
  --color-canvas: #080808;
  --color-ink-raise: #0F0F0F;
  --color-hairline: #161616;
  --color-panel: #171717;
  --color-charcoal-pill: #1C1C1C;
  --color-track: #242424;
  --color-input: #262626;
  --color-edge: #2B2B2B;
  --color-border-strong: #424242;
  --color-muted: #939393;
  --color-body: #CCCCCC;
  --color-soft-white: #D9D9D9;
  --color-heading: #F0F0F0;
  --color-white: #FFFFFF;
  --color-signal-green: #98FC82;
  --color-trace-violet: #B898F8;
  --color-run-amber: #FDAC53;
  --color-amber-dim: #F3AD5D;

  /* Typography */
  --font-greed: 'greed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-commit-mono: 'commitMono', ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --text-meta: 14px;
  --leading-meta: 1.4;
  --text-ui: 15px;
  --leading-ui: 1.4;
  --text-body: 17px;
  --leading-body: 1.5;
  --text-lead: 22px;
  --leading-lead: 1.45;
  --text-heading: 34px;
  --leading-heading: 1.15;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.12;
  --text-display: 54px;
  --leading-display: 1.1;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-28: 28px;
  --spacing-38: 38px;

  /* Border Radius */
  --radius-micro: 8px;
  --radius-sm: 10px;
  --radius-popover: 20px;
  --radius-media: 28px;
  --radius-card: 40px;
  --radius-link-pill: 51px;
  --radius-input: 58px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-popover: 0px 4px 60px rgba(0, 0, 0, 0.75);
  --shadow-panel: 0px 16px 36px rgba(0, 0, 0, 0.46);
  --shadow-inset: inset 0px 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-hairline: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
```