---
version: alpha
name: Clay
description: "Claymation optimism — a whole produce drawer of color on warm oat paper."
colors:
  on-surface-variant: "#55534e"
  on-surface: "#000000"
  outline: "#d1cdc7"
  primary: "#3859f9"
  surface: "#ffffff"
  oat-100: "#fefdfb"
  oat-200: "#f4f3f0"
  terra-oat-500: "#1b1a18"
  hero-green: "#035d44"
  lime-300: "#cbd810"
  blueberry-500: "#001433"
  dragonfruit-400: "#cc089e"
  dragonfruit-500: "#46022f"
  tangerine-300: "#ff7614"
  ube-400: "#6d4cd6"
  slushie-400: "#008bad"
  lemon-300: "#fcbe11"
  matcha-600: "#078a52"
  pomegranate-300: "#fb4450"
typography:
  eyebrow:
    fontFamily: Roobert Mono
    fontSize: 0.8rem
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.1em
  caption:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 0.75rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-small:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  body:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  paragraph-lg:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 1.25rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading-4:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading-3:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 2.3rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.04em
  heading-2:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 3.8rem
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.04em
  heading-1:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 5.5rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  display:
    fontFamily: "Roobert / Roobert VF"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
rounded:
  small: 0.5rem
  button: 12px
  secondary-button: 16px
  card: 18px
  input: 20px
  medium-container: 1.5rem
  large-container: 2.5rem
  pill-fully-rounded: 999rem
spacing:
  3xs: 0.25rem
  2xs: 0.5rem
  xs: 0.75rem
  sm: 1rem
  md: 1.5rem
  lg: 2rem
  xl: 2.5rem
  2xl: 3rem
  3xl: 4rem
  4xl: 6rem
  5xl: 8rem
  6xl: 11rem
---
# Clay — Style Reference
> Claymation optimism — a whole produce drawer of color on warm oat paper.

**Theme:** mixed (light oat canvas with a deep-green cinematic hero band)

Clay dresses a serious GTM-infrastructure product in claymation warmth: a soft oat-white paper canvas, a full produce-named accent system (blueberry, lime, dragonfruit, tangerine, ube, slushie, lemon, matcha, pomegranate), and 3D clay-sculpted hero art that reads like a children's-book diorama. The signature move is a two-tier color logic — every fruit family ships a *bright* swatch and a *terra* (deep, muted) swatch, so a pastel card background (`#fff0fa` dragonfruit tint) pairs with an aubergine heading (`#46022f`) drawn from the same family. Type is Roobert — a geometric grotesk run on its variable axis at unusual weights (550, 575) — set tight and large, with a Roobert-mono eyebrow and a Canela serif kept in reserve. Depth is drawn with 2px inset color rings, never drop shadows; the interface stays flat, papery, and bright. The primary action is plain ink black; color is editorial, not functional.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Oat 100 | `#fefdfb` | `--color-oat-100` | Primary canvas — a warm off-white, never pure white for large surfaces. |
| Oat 200 | `#f4f3f0` | `--color-oat-200` | Soft surface / secondary-button fill; the quiet grey-beige step. |
| Oat 300 | `#d1cdc7` | `--color-oat-300` | Hairline borders and dividers on paper. |
| Oat 800 | `#55534e` | `--color-oat-800` | Muted body / caption text; the workhorse secondary ink. |
| Terra Oat 500 | `#1b1a18` | `--color-oat-950` | Warm near-black — headings and body on light surfaces. |
| Ink Black | `#000000` | `--color-black` | **Primary action.** Black pill CTAs and top-level text. Color is never used for CTAs — the button is always black. |
| White | `#ffffff` | `--color-white` | Nav chrome, hero-inverse buttons, card insets. |
| Hero Green | `#035d44` | `--color-hero-green` | The one cinematic dark band — the grassy hero background; white type sits on it. |
| Lime 300 | `#cbd810` | `--color-lime-300` | The loud brand pop — hero accent CTA and the mono eyebrow. Used sparingly, once per view. |
| Blueberry 400 | `#3859f9` | `--color-blueberry-400` | Primary accent / inline links (`#395afa` measured). Brand blue, not a CTA. |
| Blueberry 500 | `#001433` | `--color-blueberry-500` | Terra navy — heading ink on blueberry-tint cards. |
| Dragonfruit 400 | `#cc089e` | `--color-dragonfruit-400` | Bright magenta accent. |
| Dragonfruit 500 | `#46022f` | `--color-dragonfruit-500` | Terra aubergine — heading ink on dragonfruit-tint cards. |
| Tangerine 300 | `#ff7614` | `--color-tangerine-300` | Bright orange accent; terra `#381005` for its card headings. |
| Ube 400 | `#6d4cd6` | `--color-ube-400` | Purple accent. |
| Slushie 400 | `#008bad` | `--color-slushie-400` | Cyan accent / secondary link (`#008aad` bright variant). |
| Lemon 300 | `#fcbe11` | `--color-lemon-300` | Yellow accent. |
| Matcha 600 | `#078a52` | `--color-matcha-600` | Green accent (kin to the hero band). |
| Pomegranate 300 | `#fb4450` | `--color-pomegranate-300` | Red accent; terra `#390307` for deep states. |

*(Full bright + terra ramps for every produce family are frozen in Quick Start. The table above is the identity view — the ~19 roles a designer actually reaches for.)*

## Tokens — Typography

### Roobert / Roobert VF — the entire voice: display, headings, body, buttons, inputs · `--font-primary`
- **Substitute:** Söhne, Inter, ui-sans-serif, system-ui, sans-serif
- **Weights:** 400 (body), 500 (buttons/labels), 550, 575 (hero display — a variable-axis weight), 600 (headings)
- **Sizes:** display 88px / 72px; h1 clamp 2.8→5.5rem; h2 2→3.8rem; h3 1.5→2.3rem; body .9→1rem; small .875rem
- **Line height:** 1.0 display/h1, 1.1 h2, 1.2 h3, 1.4–1.6 body
- **Letter spacing:** −.04em on h1–h3 (tight), 0 on body
- **Role:** One geometric grotesk carries everything. The unusual variable weights (550/575) give the hero its distinctive not-quite-bold heft.

### Roobert Mono — eyebrows / kickers only · `--font-mono`
- **Substitute:** "Roobert mono", ui-monospace, Menlo, monospace
- **Weights:** 500
- **Sizes:** .7→.8rem
- **Line height:** 1.2
- **Letter spacing:** .1em, uppercase
- **Role:** The "LATEST LAUNCH: ACCOUNT RESEARCH AGENTS" kicker — monospace + wide tracking + lime color signals a system label above headlines.

### Canela Web — editorial serif, held in reserve · `--font-serif`
- **Substitute:** "Canela Web", Georgia, "Times New Roman", serif
- **Weights:** 300, 400 (incl. italic)
- **Sizes:** contextual (large pull-quote / accent scale)
- **Line height:** ~1.2
- **Letter spacing:** 0
- **Role:** A loaded high-contrast serif used only for occasional editorial emphasis — a warm counterpoint to Roobert's geometry, never for UI chrome.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Eyebrow (mono) | .7→.8rem | 1.2 | .1em, uppercase | `--text-eyebrow` |
| Caption | .75rem | 1.5 | 0 | `--text-sm` |
| Body Small | .875rem | 1.3 | 0 | `--text-body-sm` |
| Body | .9→1rem | 1.6 | 0 | `--text-body` |
| Paragraph LG | 1→1.25rem | 1.5 | 0 | `--text-lg` |
| Heading 4 | 1.3→1.5rem | 1.4 | 0 | `--text-h4` |
| Heading 3 | 1.5→2.3rem | 1.2 | −.04em | `--text-h3` |
| Heading 2 | 2→3.8rem | 1.1 | −.04em | `--text-h2` |
| Heading 1 | 2.8→5.5rem | 1.0 | −.04em | `--text-h1` |
| Display | 88px | 1.0 | −.04em | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | .25rem | `--spacing-025` |
| 2xs | .5rem | `--spacing-05` |
| xs | .75rem | `--spacing-075` |
| sm | 1rem | `--spacing-1` |
| md | 1.5rem | `--spacing-15` |
| lg | 2rem | `--spacing-2` |
| xl | 2.5rem | `--spacing-25` |
| 2xl | 3rem | `--spacing-3` |
| 3xl | 4rem | `--spacing-4` |
| 4xl | 6rem | `--spacing-6` |
| 5xl | 8rem | `--spacing-8` |
| 6xl | 11rem | `--spacing-11` |

### Border Radius
| Element | Value |
|---------|-------|
| Small (chips, small controls) | .5rem (8px) |
| Button | 12px |
| Secondary button | 16px |
| Card | 18px |
| Input | 20px |
| Medium container | 1.5rem (24px) |
| Large container | 2.5rem (40px) |
| Pill / fully rounded | 999rem |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Inset ring (tint card) | `rgb(240, 248, 255) 0px 0px 0px 2px inset` | `--ring-card` |
| Inset ring (lime card) | `rgb(252, 254, 226) 0px 0px 0px 2px inset` | `--ring-lime` |
| Inset ring (tangerine) | `rgb(255, 243, 237) 0px 0px 0px 2px inset` | `--ring-tangerine` |
| Inset ring (dragonfruit) | `rgb(255, 240, 250) 0px 0px 0px 2px inset` | `--ring-dragonfruit` |
| Hairline inset (white) | `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset` | `--ring-hairline` |

Depth is a *ring in the card's own tint*, not a drop shadow — the interface has no float, only paper stacked on paper.

### Layout
- **Page max-width:** ~90rem container (fluid clamp, min 20rem)
- **Section gap:** 3rem (sm) / 4rem (regular) / 6rem (md) / 9rem (large) vertical rhythm
- **Card padding:** clamp 1→1.5rem (fluid), colored cards 16px 20px
- **Element gap:** 8px (sm) / 16px (button row) / 24px (md) / 40px (main grid)

## Components

### Nav Bar
**Role:** Persistent top navigation as a floating rounded container.
White (`#ffffff`) bar with generous horizontal padding, radius ~16–18px, resting on the page rather than pinned edge-to-edge. Left: rainbow-arc "clay" wordmark. Center: text links (Product, Use Cases, Solutions, Resources, Company, Pricing) in Roobert 400 `#000000`. Right cluster: a ⌘K search hint, ghost "Log in", oat-fill "Get a demo", and a black-pill "Start free trial."

### Primary Button
**Role:** Top-level CTA — the only call to action that carries weight.
Black fill `#000000`, white text `#ffffff`, radius 12px, padding 8px 16px, Roobert 500 at ~13.9px. Never colored — Clay's rule is that the CTA is ink, and color stays editorial.

### Hero CTA (inverse)
**Role:** Primary action on the dark green hero band.
White fill `#ffffff`, black text `#000000`, radius 16px, padding 9px 18px, 18px 500, with a trailing arrow → . Sits beside the lime accent CTA.

### Lime Accent Button
**Role:** The one loud, high-energy CTA on the hero ("Get a demo →").
Lime `#cbd810` fill, black `#000000` text, radius 16px, arrow trailing. The single saturated CTA per view — its scarcity is what makes it pop against oat and green.

### Secondary Button
**Role:** Lower-priority action.
Oat fill `#f4f3f0` (or `#f3f2ed`), text `#1b1a18` / `#000000`, radius 12px, padding 8–10px 16px, Roobert 500. No border, no shadow — a soft raised chip.

### Eyebrow / Kicker
**Role:** System label above a headline.
Roobert **mono**, .7–.8rem, uppercase, .1em tracking, colored lime `#cbd810` on dark or blueberry on light. Often paired with a trailing arrow.

### Tonal Accent Card
**Role:** The core content module — a pastel card themed to one produce family.
Background is a family tint (dragonfruit `#fff0fa`, lime `#fcfee2`, tangerine `#fff3ed`, blueberry `#f0f8ff`, ube `#f5f3ff`); heading uses the same family's *terra* deep tone (dragonfruit → `#46022f`, blueberry → `#001433`, tangerine → `#381005`); depth is a 2px inset ring in the tint. Radius 18px, padding 16px 20px. No drop shadow.

### Input Field
**Role:** Text entry (forms, search).
White `#ffffff` fill, text `#1b1a18`, radius 20px (softest corner in the system), padding ~11px 16px, Roobert 400 16px, no border, no shadow.

### Inline Link
**Role:** In-text navigation and reference.
Roobert 400, blueberry `#395afa` or slushie `#008bad`; plain black `#000000` for nav links. Underline on interaction rather than by default.

### Display Heading
**Role:** Hero and section headlines.
Roobert 500–575, 72–88px, line-height 1.0, tracking −.04em; `#fefdfb` when on the green hero, `#000000`/`#1b1a18` on paper. Tight, oversized, confident.

### Logo Cloud
**Role:** Social proof strip ("Trusted by more than 500,000+ GTM teams").
Muted greyscale customer logos on an oat `#f4f3f0` panel with a large top radius, framed as a lifted card that overlaps the hero base.

### Logo Mark
**Role:** Brand identity.
Lowercase "clay" wordmark preceded by a rainbow-gradient rounded-arch glyph — the multi-hue arc that seeds the whole produce palette.

## Do's and Don'ts

### Do
- Keep large surfaces on oat `#fefdfb` / `#f4f3f0`, not pure white — the warmth is the brand.
- Make the CTA black `#000000`. Always. Let color live in art, cards, and eyebrows.
- Pair each pastel card tint with its family's terra heading tone (tint + deep = one fruit).
- Draw depth with a 2px inset ring in the card's own color; keep everything flat and papery.
- Reserve lime `#cbd810` for exactly one high-energy accent per view (hero CTA or eyebrow).
- Set headings large and tight — Roobert at −.04em, line-height 1.0, weight 550–600.
- Use Roobert **mono** for uppercase kickers only; it signals "system label."

### Don't
- Don't tint the primary button — a blue or lime CTA breaks the ink-black rule.
- Don't add drop shadows or glassy blur; there is no float in this system, only paper.
- Don't mix a bright family tint with another family's terra tone (no dragonfruit card with navy ink).
- Don't let more than one saturated accent shout per section.
- Don't use pure `#ffffff` for page canvas — reserve white for chrome, hero-inverse buttons, and insets.
- Don't set body copy tight; body stays line-height 1.6, tracking 0.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#fefdfb` | Warm oat page base. |
| 1 | Soft Surface | `#f4f3f0` | Panels, secondary buttons, logo-cloud strip. |
| 2 | Card (raised) | `#ffffff` / `#fefdfb` | Content cards, framed by inset ring. |
| Tint | Accent Card | `#fff0fa` · `#fcfee2` · `#fff3ed` · `#f0f8ff` · `#f5f3ff` | Family-themed pastel modules. |
| Dark | Hero Band | `#035d44` | The one cinematic deep-green section. |
| Ink | Inverse | `#000000` | Black CTA pills and rare dark blocks. |

## Elevation
Elevation is chromatic, not shadowed. A card lifts by (1) sitting on a warmer/whiter surface than its parent, and (2) wearing a 2px **inset** ring in its own tint (`rgb(...) 0 0 0 2px inset`). The logo-cloud strip overlaps the hero base to imply a single half-step of depth. There are no drop shadows, no ambient blur — the whole interface behaves like layered construction paper, which is exactly the register the claymation art establishes.

## Imagery
Signature 3D **claymation** dioramas: matte plasticine sculptures — a funnel of colored shapes, a coiled blue tube reading "rev," a magnifying glass, a mailbox, a rising bar-chart staircase — staged on a rolling green felt hillside under an airbrushed blue sky with clay pine trees. Everything is hand-modeled, soft-lit, tactile, and optimistic; it turns abstract GTM concepts (data, workflows, growth) into playful physical objects. Icons and secondary art stay simple and rounded to match. Photography, when present, is muted greyscale logos only.

## Layout
Contained (~90rem) with full-bleed color bands. The page opens on a floating white nav, then a tall dark-green hero with the claymation scene up top and a left-aligned oversized headline + right-aligned support paragraph and CTA pair below. Sections alternate oat canvas with pastel tonal-card grids (24–40px gaps) and the occasional overlapping lifted panel. Vertical rhythm is generous (4–9rem section gaps). Nav is horizontal, text-first, with a ⌘K search affordance and a right-anchored CTA cluster.

## Typography Signature
Clay runs one family in two registers. **Register one — geometric confidence:** Roobert (variable) at 72–88px, weight 550–575, line-height 1.0, tracking −.04em. The odd variable weights (not 500, not 600, but 575) give the hero a bespoke heft that plain Roobert-Bold wouldn't. **Register two — the system label:** Roobert *mono* at .75rem, uppercase, .1em tracking, colored — a machine-precise kicker that frames each human headline. The tight-display / loose-body contrast (−.04em headings vs 1.6 line-height body) is the rhythm; the mono eyebrow is the tell that says "this is infrastructure, playfully dressed." Canela serif waits in the wings for rare editorial warmth.

## Agent Prompt Guide

## Quick Color Reference
- background: `#fefdfb` (oat canvas) / surface: `#f4f3f0` / text: `#1b1a18` / muted text: `#55534e` / border: `#d1cdc7` / accent: `#3859f9` (blueberry) · `#cbd810` (lime pop) / primary action: `#000000` (ink black — never colored) / dark band: `#035d44`

## Example Component Prompts
1. **Primary CTA button**: Black `#000000` pill, white `#ffffff` Roobert-500 text at 13.9px, radius 12px, padding 8px 16px, no border, no shadow. Optional trailing → arrow.
2. **Tonal accent card**: Radius 18px, padding 16px 20px, dragonfruit-tint background `#fff0fa`, heading in terra aubergine `#46022f` (Roobert 600, −.04em), body in `#1b1a18`, depth via 2px inset ring `rgb(255,240,250) 0 0 0 2px inset`. No drop shadow.
3. **Hero band**: Full-bleed `#035d44` green section, oversized left headline in `#fefdfb` Roobert-575 at clamp 2.8→5.5rem line-height 1.0 tracking −.04em, mono lime `#cbd810` uppercase eyebrow above it, a white `#ffffff` CTA + a lime `#cbd810` CTA (both radius 16px, black text, trailing arrow) on the right.
4. **Eyebrow label**: Roobert mono, uppercase, .75rem, .1em letter-spacing, colored `#cbd810` (on dark) or `#3859f9` (on light), with a trailing → arrow.
5. **Search input**: White `#ffffff` fill, `#1b1a18` text, radius 20px, padding 11px 16px, Roobert 400 16px, no border, no shadow.

## Similar Brands
- **Webflow's own marketing craft** — Clay is built on Webflow, and shares its confident-grotesk-on-warm-paper polish.
- **Linear** — kindred tight-tracked geometric headings and restrained, ink-first CTA discipline.
- **Retool / Ramp** — the same "serious infrastructure made friendly" register through playful color and rounded modules.
- **Notion** — warm off-white canvas + hand-crafted illustration turning abstract tooling into approachable objects.
- **Claymation studios (Aardman-adjacent)** — the tactile plasticine art direction that gives Clay its literal name and mood.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Neutrals (oat) */
  --color-oat-50: #fffcfa;
  --color-oat-100: #fefdfb;
  --color-oat-200: #f4f3f0;
  --color-oat-300: #d1cdc7;
  --color-oat-400: #7b7974;
  --color-oat-600: #9f9b93;
  --color-oat-700: #85817a;
  --color-oat-800: #55534e;
  --color-oat-900: #363430;
  --color-oat-950: #1b1a18;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-hero-green: #035d44;

  /* Colors — Blueberry (bright / terra) */
  --color-blueberry-100: #f0f8ff;
  --color-blueberry-200: #bedffd;
  --color-blueberry-300: #429dff;
  --color-blueberry-400: #3859f9;
  --color-blueberry-400-alt: #395afa;
  --color-blueberry-500: #001433;

  /* Colors — Lime (bright / terra) */
  --color-lime-100: #fcfee2;
  --color-lime-200: #eef673;
  --color-lime-300: #cbd810;
  --color-lime-400: #7f7f00;
  --color-lime-500: #102b03;

  /* Colors — Dragonfruit (bright / terra) */
  --color-dragonfruit-100: #fff0fa;
  --color-dragonfruit-200: #f8b9e3;
  --color-dragonfruit-300: #ff70d1;
  --color-dragonfruit-400: #cc089e;
  --color-dragonfruit-500: #46022f;

  /* Colors — Tangerine (bright / terra) */
  --color-tangerine-100: #fff3ed;
  --color-tangerine-200: #fcc9aa;
  --color-tangerine-300: #ff7614;
  --color-tangerine-400: #b53c09;
  --color-tangerine-500: #381005;

  /* Colors — Ube / purple (bright / terra) */
  --color-ube-100: #f5f3ff;
  --color-ube-200: #c8bbfb;
  --color-ube-300: #a07bf9;
  --color-ube-400: #6d4cd6;
  --color-ube-500: #160038;

  /* Colors — Slushie / cyan (bright / terra) */
  --color-slushie-100: #f0fcff;
  --color-slushie-200: #aaeafc;
  --color-slushie-300: #3bd3fd;
  --color-slushie-400: #008aad;
  --color-slushie-400-alt: #008bad;
  --color-slushie-500: #002833;

  /* Colors — Lemon (bright / terra) */
  --color-lemon-100: #fefae8;
  --color-lemon-200: #fae188;
  --color-lemon-300: #fcbe11;
  --color-lemon-400: #9e5801;
  --color-lemon-500: #372100;

  /* Colors — Matcha / green */
  --color-matcha-600: #078a52;
  --color-matcha-900: #03331d;
  --color-green-600: #047e4a;

  /* Colors — Pomegranate / red (bright / terra) */
  --color-pomegranate-100: #fff1f2;
  --color-pomegranate-200: #fcbabe;
  --color-pomegranate-300: #fb4450;
  --color-pomegranate-400: #c22e3d;
  --color-pomegranate-500: #390307;

  /* Typography — Families */
  --font-primary: 'Roobert', 'Roobertvf', Söhne, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roobert mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Canela Web', Georgia, 'Times New Roman', serif;

  /* Typography — Scale */
  --text-eyebrow: 0.8rem;   /* mono, uppercase, .1em */
  --text-sm: 0.75rem;
  --text-body-sm: 0.875rem;
  --text-body: 1rem;
  --text-lg: 1.25rem;
  --text-h4: 1.5rem;
  --text-h3: 2.3rem;
  --text-h2: 3.8rem;
  --text-h1: 5.5rem;
  --text-display: 88px;
  --leading-display: 1;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: -0.04em;
  --tracking-eyebrow: 0.1em;
  --weight-body: 400;
  --weight-label: 500;
  --weight-display: 575;
  --weight-heading: 600;

  /* Spacing */
  --spacing-025: 0.25rem;
  --spacing-05: 0.5rem;
  --spacing-075: 0.75rem;
  --spacing-1: 1rem;
  --spacing-15: 1.5rem;
  --spacing-2: 2rem;
  --spacing-25: 2.5rem;
  --spacing-3: 3rem;
  --spacing-4: 4rem;
  --spacing-6: 6rem;
  --spacing-8: 8rem;
  --spacing-11: 11rem;

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-button: 12px;
  --radius-button-lg: 16px;
  --radius-card: 18px;
  --radius-input: 20px;
  --radius-md: 1.5rem;
  --radius-lg: 2.5rem;
  --radius-pill: 999rem;

  /* Elevation — inset rings (no drop shadows) */
  --ring-card: rgb(240, 248, 255) 0px 0px 0px 2px inset;
  --ring-lime: rgb(252, 254, 226) 0px 0px 0px 2px inset;
  --ring-tangerine: rgb(255, 243, 237) 0px 0px 0px 2px inset;
  --ring-dragonfruit: rgb(255, 240, 250) 0px 0px 0px 2px inset;
  --ring-hairline: rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Neutrals (oat) */
  --color-oat-50: #fffcfa;
  --color-oat-100: #fefdfb;
  --color-oat-200: #f4f3f0;
  --color-oat-300: #d1cdc7;
  --color-oat-400: #7b7974;
  --color-oat-600: #9f9b93;
  --color-oat-700: #85817a;
  --color-oat-800: #55534e;
  --color-oat-900: #363430;
  --color-oat-950: #1b1a18;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-hero-green: #035d44;

  /* Colors — Blueberry */
  --color-blueberry-100: #f0f8ff;
  --color-blueberry-200: #bedffd;
  --color-blueberry-300: #429dff;
  --color-blueberry-400: #3859f9;
  --color-blueberry-500: #001433;

  /* Colors — Lime */
  --color-lime-100: #fcfee2;
  --color-lime-200: #eef673;
  --color-lime-300: #cbd810;
  --color-lime-400: #7f7f00;
  --color-lime-500: #102b03;

  /* Colors — Dragonfruit */
  --color-dragonfruit-100: #fff0fa;
  --color-dragonfruit-200: #f8b9e3;
  --color-dragonfruit-300: #ff70d1;
  --color-dragonfruit-400: #cc089e;
  --color-dragonfruit-500: #46022f;

  /* Colors — Tangerine */
  --color-tangerine-100: #fff3ed;
  --color-tangerine-200: #fcc9aa;
  --color-tangerine-300: #ff7614;
  --color-tangerine-400: #b53c09;
  --color-tangerine-500: #381005;

  /* Colors — Ube */
  --color-ube-100: #f5f3ff;
  --color-ube-200: #c8bbfb;
  --color-ube-300: #a07bf9;
  --color-ube-400: #6d4cd6;
  --color-ube-500: #160038;

  /* Colors — Slushie */
  --color-slushie-100: #f0fcff;
  --color-slushie-200: #aaeafc;
  --color-slushie-300: #3bd3fd;
  --color-slushie-400: #008bad;
  --color-slushie-500: #002833;

  /* Colors — Lemon */
  --color-lemon-100: #fefae8;
  --color-lemon-200: #fae188;
  --color-lemon-300: #fcbe11;
  --color-lemon-400: #9e5801;
  --color-lemon-500: #372100;

  /* Colors — Matcha / green */
  --color-matcha-600: #078a52;
  --color-matcha-900: #03331d;
  --color-green-600: #047e4a;

  /* Colors — Pomegranate */
  --color-pomegranate-100: #fff1f2;
  --color-pomegranate-200: #fcbabe;
  --color-pomegranate-300: #fb4450;
  --color-pomegranate-400: #c22e3d;
  --color-pomegranate-500: #390307;

  /* Typography */
  --font-primary: 'Roobert', 'Roobertvf', Söhne, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roobert mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Canela Web', Georgia, 'Times New Roman', serif;
  --text-eyebrow: 0.8rem;
  --text-sm: 0.75rem;
  --text-body-sm: 0.875rem;
  --text-body: 1rem;
  --text-lg: 1.25rem;
  --text-h4: 1.5rem;
  --text-h3: 2.3rem;
  --text-h2: 3.8rem;
  --text-h1: 5.5rem;
  --text-display: 88px;
  --leading-display: 1;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: -0.04em;
  --tracking-eyebrow: 0.1em;

  /* Spacing */
  --spacing-025: 0.25rem;
  --spacing-05: 0.5rem;
  --spacing-075: 0.75rem;
  --spacing-1: 1rem;
  --spacing-15: 1.5rem;
  --spacing-2: 2rem;
  --spacing-25: 2.5rem;
  --spacing-3: 3rem;
  --spacing-4: 4rem;
  --spacing-6: 6rem;
  --spacing-8: 8rem;
  --spacing-11: 11rem;

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-button: 12px;
  --radius-button-lg: 16px;
  --radius-card: 18px;
  --radius-input: 20px;
  --radius-md: 1.5rem;
  --radius-lg: 2.5rem;
  --radius-pill: 999rem;
}
```