---
version: alpha
name: Noovo
description: "Golden-hour amber on warm paper — the great indoors, parked in the wild."
colors:
  on-surface-variant: "#6F6E6C"
  on-surface: "#131211"
  surface: "#FFFFFF"
  outline: "#ECE9E2"
  error: "#E31111"
  primary: "#FFAC00"
  paper: "#F9F7F4"
  cloud: "#F9F9F9"
  bone: "#FAF7F1"
  stone: "#DEDEDE"
  silver: "#B4B4B4"
  fog: "#C4C6C7"
  charcoal: "#333333"
  black: "#000000"
  amber-lift: "#FFB31A"
  navy: "#112655"
  royal: "#1A3B83"
  ember: "#FF6200"
typography:
  micro-legal:
    fontFamily: General Sans
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption-eyebrow:
    fontFamily: General Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.02em
  small-meta:
    fontFamily: General Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  ui:
    fontFamily: General Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: General Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: General Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading-sm:
    fontFamily: General Sans
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading:
    fontFamily: General Sans
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  heading-lg:
    fontFamily: General Sans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.015em
  title:
    fontFamily: General Sans
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.015em
  display:
    fontFamily: General Sans
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
  hero:
    fontFamily: General Sans
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
rounded:
  inputs-fields: 10px
  chips-link-pills: 15px
  cards-media-tiles: 20px
  modals-large-panels: 30px
  hero-media-oversized-panels: 50px
  buttons: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 25px
---
# Noovo — Style Reference
> Golden-hour amber on warm paper — the great indoors, parked in the wild.

**Theme:** light

Noovo sells luxury camper vans, and the system is built like one: a warm, quiet interior wrapped around big windows onto the outdoors. The canvas is a warm paper family (`#F9F7F4`, `#FAF7F1`, `#ECE9E2`) rather than clinical white, the ink is a warm near-black (`#131211`), and exactly one color is allowed to act — the amber `#FFAC00` that fills every commit button. Photography does all the emotional and chromatic heavy lifting: full-bleed golden-hour landscapes and van interiors carry the color, while the UI floats over them as white type, a white wordmark, and pill-shaped controls. Everything interactive is a pill (`border-radius: 9999px`) and every container is generously rounded (10px inputs up to 30–50px panels), so the chrome feels upholstered rather than engineered. One grotesk — General Sans at weights 400–500 — does the entire voice, from 11px legal lines to the 70px hero headline, with a navy/red/royal-blue trio quarantined inside the announcement band and never allowed to leak into the product UI.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| White | `#FFFFFF` | `--color-white` | Default light canvas, card fills, form-input fills, and the secondary pill button — the resting surface of the indoors register. |
| Paper | `#F9F7F4` | `--color-paper` | The signature warm section surface — modal cards, alternate bands, and the tinted input variant. Warm, not grey: this is what separates Noovo from clinical SaaS white. |
| Cloud | `#F9F9F9` | `--color-cloud` | Neutral-cool alternate surface for utility zones where the warm paper would fight photography. Use sparingly; Paper is the house surface. |
| Bone | `#FAF7F1` | `--color-bone` | Light *text* color on photography and dark panels — eyebrows and captions read in Bone, not pure white, so they sit into the image instead of on it. |
| Linen | `#ECE9E2` | `--color-linen` | Warm hairline border on paper surfaces — the seam between two warm neutrals, visible but soft. |
| Stone | `#DEDEDE` | `--color-stone` | Input and control borders on white (a cooler `#E5E7EB` twin appears on utility chrome). |
| Silver | `#B4B4B4` | `--color-silver` | Mid-weight border for controls that need more presence than Stone — never for text. |
| Fog | `#C4C6C7` | `--color-fog` | Cool chrome grey for inert fills (scrubbers, disabled chrome). Background duty only. |
| Warm Grey | `#6F6E6C` | `--color-warm-grey` | Muted body text, placeholders, and captions (with a `#706E6B` metamer in the scan). Warm-tilted on purpose — a cool grey would break the paper palette. |
| Charcoal | `#333333` | `--color-charcoal` | Secondary text and pill-button labels — one comfortable step up from muted, one step short of Ink. |
| Ink | `#131211` | `--color-ink` | Primary text and the dark commit-pill fill (a `#171717` sibling appears in dense text). Warm near-black, ~17:1 on Paper — never pure `#000` for copy. |
| Black | `#000000` | `--color-black` | True black reserved for full-bleed photo/video canvases and footer depth — a surface, not an ink. |
| Amber | `#FFAC00` | `--color-amber` | THE brand action color. Fills every primary CTA pill, and nothing else — no amber headlines, no amber icons. Carries `#131211` labels at roughly 8:1. |
| Amber Lift | `#FFB31A` | `--color-amber-lift` | The hover lift for amber fills — one warm step brighter, so the press-state inset (`rgb(229,153,0)`) can darken the base. |
| Navy | `#112655` | `--color-navy` | The announcement band fill — the one cold surface in the system, deliberately foreign so news reads as news. |
| Royal | `#1A3B83` | `--color-royal` | The link chip inside the navy band (white label, 14.7px radius). Never appears outside announcement context. |
| Signal Red | `#E31111` | `--color-signal-red` | The "NEW" tag fill inside the band (a `#FF282B` red appears as text). Alert duty only — Noovo has no red error styling in the main UI. |
| Ember | `#FF6200` | `--color-ember` | Hot-orange campaign fill caught in the scan (`#FF6201` twin). A promotional heat color, not a UI token — keep it out of components. |

## Tokens — Typography
### General Sans — the entire voice: hero display, headings, body, buttons, legal · `--font-general`
- **Substitute:** Switzer, Inter, Plus Jakarta Sans
- **Weights:** 400, 500, 600, 700 (loaded 200–700 + italics; 400–500 do nearly all visible work)
- **Sizes:** 11px, 12px, 14px, 15px, 16px, 20px, 30px, 36px, 40px, 46px, 60px, 70px
- **Line height:** ~1.05 at display, ~1.5 at body (render-estimated; the scan captured no explicit leading)
- **Letter spacing:** near-neutral; display sizes tighten optically to roughly -0.01em to -0.02em (render-estimated)
- **Role:** The entire voice. A 60–70px headline at weight 400–500 is the signature: scale does the talking, weight stays conversational. 600–700 appear only in small utility moments (cookie-card heading, fine-print emphasis), never as display bombast.

### Recoleta — the loaded-but-held serif · `--font-recoleta`
- **Substitute:** Fraunces, Gelica, Georgia
- **Weights:** 300, 500, 700 (present in the font payload)
- **Sizes:** none measured — every element the scan touched runs General Sans
- **Line height:** —
- **Letter spacing:** —
- **Role:** Ships in the font payload but was measured on no above-the-fold element — treat it as the brand's reserve editorial voice for story/journal moments, and never for UI chrome.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro / legal | 11px | 1.4 | 0 | `--text-micro` |
| Caption / eyebrow | 12px | 1.4 | 0.02em (uppercase eyebrows) | `--text-caption` |
| Small / meta | 14px | 1.45 | 0 | `--text-sm` |
| UI | 15px | 1.4 | 0 | `--text-ui` |
| Body | 16px | 1.5 | 0 | `--text-body` |
| Lead | 20px | 1.5 | 0 | `--text-lead` |
| Heading sm | 30px | 1.2 | -0.01em | `--text-heading-sm` |
| Heading | 36px | 1.15 | -0.01em | `--text-heading` |
| Heading lg | 40px | 1.1 | -0.015em | `--text-heading-lg` |
| Title | 46px | 1.1 | -0.015em | `--text-title` |
| Display | 60px | 1.05 | -0.02em | `--text-display` |
| Hero | 70px | 1.05 | -0.02em | `--text-hero` |

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 20px | `--spacing-xl` |
| 2xl | 25px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Inputs / fields | 10px |
| Chips / link pills | 15px (the royal chip scans at 14.7px) |
| Cards / media tiles | 20px (a 16.944px tile variant appears in the scan) |
| Modals / large panels | 30px |
| Hero media / oversized panels | 50px |
| Buttons | 9999px (full pill, always) |
| Avatars / circular close | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Whisper | 0 1px 2px rgba(0,0,0,0.05) | `--shadow-whisper` |
| Float | 0 2px 16px rgba(0,0,0,0.04) | `--shadow-float` |
| Amber Press | inset 0 -1px 0 rgb(229,153,0) | `--shadow-amber-press` |
| Hairline Drop | 0 1px 0 rgba(0,0,0,0.15) | `--shadow-hairline` |
| Photo Well | inset 0 0 20px rgba(0,0,0,0.08) | `--shadow-well` |

### Layout
- **Page max-width:** contained content column ≈1280px (render-estimated) inside full-bleed photographic sections.
- **Section gap:** full-viewport photo panels stack edge-to-edge; light sections breathe with generous vertical padding.
- **Card padding:** 20–40px; the newsletter modal pads ~40px around a two-column body.
- **Element gap:** 12px between stacked inputs; 16–20px inside the hero CTA cluster; 25px is the pill's horizontal padding rhythm.

## Components
### Amber Pill CTA (primary)
**Role:** The single commit action — "Reserve your Plus", "Subscribe", "Save & Share".
Background `#FFAC00`, label `#131211` at 14–16px General Sans 400–500, `border-radius: 9999px`, padding 18px 25px (compact variant runs 0 25px on a fixed-height pill), 1px `#FFAC00` border, `--shadow-whisper`. Hover lifts to `#FFB31A`; the press state seats the button with an inset `rgb(229,153,0)` bottom edge — a physical, upholstered click. This amber is the only saturated fill in the product UI; one per decision.

### White Pill (secondary)
**Role:** The lower-commitment sibling — "Discover Noovo Plus", "Manage", "Explore Noovo Next".
Solid `#FFFFFF` fill, `#333333` (or `#131211`) label at 16px, `border-radius: 9999px`, no border on photography, `--shadow-whisper` to lift it off busy imagery. On white surfaces it takes a 1px `#DEDEDE` Stone border instead of a shadow. Always sits beside — never instead of — the amber pill when a real decision is on offer.

### Ink Pill (dark commit)
**Role:** The high-contrast commit on light utility surfaces — "Accept All" on the cookie card.
`#131211` fill (`#000000` on true-black contexts), `#FFFFFF` label at 15–16px, full 9999px pill, padding ~12px 25px. Used where amber would over-promote a utility action: dark means "confirm", amber means "buy".

### Announcement Band
**Role:** The floating news ribbon above the nav — "The Vancaskeys are on the road to Alaska."
An inset `#112655` navy bar with ~20px rounded corners and viewport margin (it floats, it doesn't touch the edges). Contents: a `#E31111` "NEW" tag pill with white label, white 14–16px General Sans copy, a `#1A3B83` royal follow-along chip (white 16px label, 14.7px radius, 8px 16px padding), and a white close ✕. The cold navy/red/royal trio lives here and only here — the foreignness is what makes it read as a bulletin.

### Global Nav
**Role:** Persistent top chrome floating over the hero photography.
Transparent background, white 16px weight-400 links left, the all-white Noovo wordmark dead center, and the action pair right: an amber `#FFAC00` pill CTA plus a white pill with avatar. No bar fill, no border — the photograph is the nav's background, and every element on it is white or amber.

### Hero Panel
**Role:** The full-bleed emotional opener — "Welcome to the great indoors."
100vw photographic (or video) canvas over `#000000`, left-anchored stack: a 12px `#FAF7F1` uppercase eyebrow, the 70px weight-400/500 white headline, a 16–20px white supporting line, then the pill pair — white secondary + amber primary with icon — separated by ~16px. The interior-shot-meets-landscape photography *is* the palette here; the UI adds only white and one amber.

### Newsletter Modal
**Role:** The subscribe capture — a paper room dropped over the dimmed page.
`#F9F7F4` Paper card, `border-radius: 30px`, `--shadow-float`, two-column body: a photography tile at 20px radius left; right, a 36–40px `#131211` heading, 16px `#6F6E6C` supporting line, three stacked inputs at 12px gaps, and a full-width amber pill "Subscribe". A `50%` circular close button (Stone-grey fill) sits top-right. The modal is the system in miniature: warm surface, soft radii, one amber commit.

### Form Input
**Role:** Name/email/zip capture in modals and footers.
`#FFFFFF` fill, `border-radius: 10px`, padding 16px 20px, 16px weight-500 `#131211` entry text, 14px `#6F6E6C` placeholder, 1px `#DEDEDE` border. A tinted variant runs `#F9F7F4` fill with a 1px `#000000` border at 15px radius (0 20px padding) where the input sits on white. No focus glow in the scan — the border darkens instead.

### Cookie Consent Card
**Role:** The privacy notice, bottom-right — "We respect your privacy."
`#FFFFFF` card, `border-radius: 20px`, `--shadow-float`, 16px weight-600 `#131211` heading, 12px `#6F6E6C` body with an underlined `#131211` policy link, and a right-aligned pill pair: white "Manage" ghost (1px `#DEDEDE` border) beside the Ink "Accept All" pill. Utility surfaces get white + Ink — amber stays out of consent flows.

### Royal Link Chip
**Role:** Inline "follow along ↗" affordance inside the announcement band.
`#1A3B83` fill, white 16px label, `border-radius: 14.7px` (the one non-pill button radius in the system), padding 8px 16px. Its rounded-rect shape — deliberately not a pill — marks it as a link, not a commit.

### Eyebrow Label
**Role:** The small voice above headlines on photography.
12px General Sans weight 500, `#FAF7F1` Bone, uppercase with open tracking. Bone instead of white is the tell — it warms into the golden-hour imagery rather than sitting cold on top of it.

### Display Headline Block
**Role:** Section and hero titling.
On photography: 70px white, weight 400–500, line-height ~1.05. On Paper: 60px `#131211`, weight 400, with 30px weight-400 subheads. Never bolded to 700, never colored — if a headline needs more presence, Noovo gives it more pixels, not more weight.

## Do's and Don'ts
### Do
- Keep amber to one job: `#FFAC00` fills the primary pill CTA, hovers to `#FFB31A`, presses with the inset `rgb(229,153,0)` edge. Nothing else is amber.
- Set copy in warm neutrals only — `#131211` primary, `#333333` secondary, `#6F6E6C` muted — on the warm paper family (`#FFFFFF`/`#F9F7F4`), and use `#FAF7F1` Bone for text over photography.
- Make every button a full `9999px` pill and every container generously round: 10px inputs → 20px cards → 30px modals → 50px hero media.
- Quarantine the cold colors — `#112655`, `#1A3B83`, `#E31111` — inside the announcement band; their foreignness is the signal.
- Keep shadows at whisper level: 4–5% black alpha (`--shadow-whisper`, `--shadow-float`). Lift is felt, not seen.
- Let photography carry all the saturation — the UI contributes only white, paper, ink, and one amber.
- Hold headlines at weight 400–500; reach for 60–70px, not for 700, when a line must lead.

### Don't
- Don't introduce a second UI accent. Amber is alone; `#FF6200` Ember is campaign heat, not a component color.
- Don't cool the neutrals — no `#808080` greys, no blue-greys in text. The warm tilt of `#6F6E6C` and `#F9F7F4` is the brand's temperature.
- Don't square off a button or draw a small-radius card. Nothing interactive sits below 10px radius except the royal chip's deliberate 14.7px rounded-rect.
- Don't put amber on utility actions — consent, manage, dismiss run white/Ink pills. Amber means the journey is starting.
- Don't set body or headline copy in pure `#000000`; true black is a photographic canvas, and text stays `#131211`.
- Don't add heavy drop shadows or borders to separate sections — full-bleed photography and warm-surface steps do the pacing.
- Don't let Recoleta into UI chrome; it is loaded as an editorial reserve, and the interface voice stays General Sans.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | White Canvas | `#FFFFFF` | Default light surface — cards, inputs, utility chrome. |
| 1 | Paper | `#F9F7F4` | The warm house surface — modals, alternate bands, tinted inputs. |
| 1b | Cloud | `#F9F9F9` | Neutral-cool utility alternate where paper would clash with imagery. |
| 1c | Linen Seam | `#ECE9E2` | Hairline separation between warm surfaces. |
| Photo | Black Canvas | `#000000` | Full-bleed photo/video sections — the outdoors register. |
| Band | Navy | `#112655` | The floating announcement ribbon — the one cold surface. |
| Ink | Dark Fill | `#131211` | Dark commit pills and deep footer moments. |

## Elevation
Depth is upholstered, not architectural. The two working shadows are nearly subliminal — `0 1px 2px rgba(0,0,0,0.05)` seats pills on photography, `0 2px 16px rgba(0,0,0,0.04)` floats modals and the cookie card — and both stay under 5% alpha, so lift registers as softness rather than as a cast shadow. The one emphatic depth cue is tactile: the amber CTA's press state pulls an inset `rgb(229,153,0)` bottom edge, compressing the button like a cushion. Everything else separates by surface temperature (white → paper → photograph) and by big radii; there are no hard borders between sections and no stacked-card shadow language anywhere.

## Imagery
Photography is the product and the palette. Full-bleed golden-hour landscapes and warm-lit van interiors supply every saturated pixel the UI itself refuses to — dusty pinks, forest greens, lamplight ambers — while the chrome stays white and paper. Two recurring shots: the *interior looking out* (the "great indoors" thesis rendered literally) and the *van small in a big landscape* (the aerial forest clearing in the newsletter modal). Images are always cropped into the radius vocabulary — 20px tiles, 30–50px panels — never hard-edged. Overlay text runs white or Bone `#FAF7F1`, and the white SVG wordmark sits directly on photography. No illustration, no 3D, no decorative iconography: if it isn't a photograph of the van life, it's type.

## Layout
Full-bleed photographic panels alternating with contained warm-paper sections. The chrome floats: the navy announcement band is inset from the viewport edges with rounded corners, the nav is transparent over the hero with a centered wordmark, and modals hover on `--shadow-float`. Content in light sections sits in a centered ~1280px column; hero copy anchors left over the photograph with the eyebrow → 70px headline → lead → pill-pair stack. Pacing comes from register flips (photo → paper → photo), not from divider lines — the scan shows no section rules at all. Corners everywhere: the page reads as a stack of soft rounded objects laid over full-bleed windows onto the outdoors.

## Typography Warmth
One grotesk, carried almost entirely by its two lightest working weights. General Sans at 400–500 sets everything from the 11px legal line to the 70px hero, which gives Noovo its particular calm: the headline "Welcome to the great indoors." lands at 70px with conversational weight, so it reads as an invitation rather than an ad. The 600–700 weights exist but are demoted to utility fine print — hierarchy is built from the 12-step size ladder (11 → 70px) and from color temperature (Ink on Paper, Bone on photograph), never from boldness. The reserve move is Recoleta: a warm serif riding along in the font payload in three weights, measured nowhere above the fold — a held breath for editorial storytelling that the UI never spends. That restraint — a loaded voice it declines to use — is the most Noovo thing in the system.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (warm alternate `#F9F7F4`, photo sections over `#000000`)
- text: `#131211` primary / `#333333` secondary / `#6F6E6C` muted; `#FAF7F1` on photography
- surface: `#F9F7F4` modal/paper cards, `#F9F9F9` utility alternate
- border: `#DEDEDE` / `#ECE9E2` hairlines (`#B4B4B4` mid, `#E5E7EB` cool utility)
- accent: `#FFAC00` amber (hover `#FFB31A`); announcement-only `#112655` / `#1A3B83` / `#E31111`
- primary action: `#FFAC00` filled pill with `#131211` label — the only saturated fill in the UI

## Example Component Prompts
1. **Hero panel**: Full-viewport photographic section (van interior looking out onto a landscape) over `#000000`. Left-anchored stack: a 12px uppercase `#FAF7F1` eyebrow, a 70px General Sans weight-500 white headline ("Welcome to the great indoors."), a 16px white supporting line, then two pills 16px apart — white `#FFFFFF` fill with `#333333` label, and amber `#FFAC00` fill with `#131211` label and a small leading icon. Both `border-radius: 9999px`, padding 18px 25px, shadow `0 1px 2px rgba(0,0,0,0.05)`.
2. **Amber CTA pill**: Button with `#FFAC00` background, `#131211` 16px General Sans 500 label, `border-radius: 9999px`, padding 18px 25px, 1px `#FFAC00` border, shadow `0 1px 2px rgba(0,0,0,0.05)`. Hover: background `#FFB31A`. Active: add `inset 0 -1px 0 rgb(229,153,0)` so the button seats downward.
3. **Newsletter modal**: Centered card, `#F9F7F4` background, `border-radius: 30px`, shadow `0 2px 16px rgba(0,0,0,0.04)`, two columns: left a photo tile with `border-radius: 20px`; right a 36px `#131211` heading, a 16px `#6F6E6C` line, three stacked inputs (white fill, `border-radius: 10px`, padding 16px 20px, 1px `#DEDEDE` border, 14px `#6F6E6C` placeholder) with 12px gaps, and a full-width `#FFAC00` pill labeled "Subscribe" in `#131211`. Circular 50% close button top-right.
4. **Announcement band**: A floating bar inset from the viewport edges, `#112655` background, 20px radius. Inside: a small `#E31111` pill tag "NEW" in white 12px, white 14px copy, a `#1A3B83` chip (white 16px label, `border-radius: 14.7px`, padding 8px 16px) reading "Follow along ↗", and a white ✕ at far right.
5. **Cookie consent card**: Bottom-right card, `#FFFFFF`, `border-radius: 20px`, shadow `0 2px 16px rgba(0,0,0,0.04)`, 16px weight-600 `#131211` heading "We respect your privacy.", 12px `#6F6E6C` body with an underlined `#131211` link, then two pills right-aligned: white "Manage" with 1px `#DEDEDE` border beside a `#131211`-filled "Accept All" with white label. No amber anywhere on this card.

## Similar Brands
- **Rivian** — adventure-vehicle warmth: earth-toned photography doing the color work over a restrained, warm-neutral UI with one yellow-adjacent accent.
- **Airstream** — the premium road-travel lineage: full-bleed landscape heroes, quiet type, and product-as-home storytelling.
- **Away** — warm paper neutrals, soft radii, and a single confident accent on an otherwise photographic travel canvas.
- **Hipcamp** — outdoors-first light UI where golden-hour imagery supplies the saturation and the chrome stays gentle and rounded.
- **YETI** — rugged single-accent discipline: one signature warm color reserved for action, photography carrying the brand's emotion.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-white: #FFFFFF;
  --color-cloud: #F9F9F9;
  --color-paper: #F9F7F4;
  --color-bone: #FAF7F1;
  --color-linen: #ECE9E2;
  --color-border-cool: #E5E7EB;
  --color-stone: #DEDEDE;
  --color-fog: #C4C6C7;
  --color-silver: #B4B4B4;
  --color-warm-grey: #6F6E6C;
  --color-warm-grey-2: #706E6B;
  --color-charcoal: #333333;
  --color-soot: #171717;
  --color-ink: #131211;
  --color-black: #000000;
  --color-amber: #FFAC00;
  --color-amber-lift: #FFB31A;
  --color-navy: #112655;
  --color-royal: #1A3B83;
  --color-signal-red: #E31111;
  --color-red-text: #FF282B;
  --color-ember: #FF6200;
  --color-ember-2: #FF6201;

  /* Typography — Families */
  --font-general: 'General Sans', 'Switzer', ui-sans-serif, system-ui, sans-serif;
  --font-recoleta: 'Recoleta', 'Fraunces', Georgia, serif;

  /* Typography — Scale */
  --text-micro: 11px;
  --text-caption: 12px;
  --text-sm: 14px;
  --text-ui: 15px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-heading-sm: 30px;
  --text-heading: 36px;
  --text-heading-lg: 40px;
  --text-title: 46px;
  --text-display: 60px;
  --text-hero: 70px;
  --leading-hero: 1.05;
  --leading-display: 1.05;
  --leading-title: 1.1;
  --leading-heading: 1.15;
  --leading-heading-sm: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 25px;

  /* Border Radius */
  --radius-input: 10px;
  --radius-chip: 15px;
  --radius-card: 20px;
  --radius-modal: 30px;
  --radius-panel: 50px;
  --radius-pill: 9999px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-whisper: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 2px 16px rgba(0, 0, 0, 0.04);
  --shadow-amber-press: inset 0 -1px 0 rgb(229, 153, 0);
  --shadow-hairline: 0 1px 0 rgba(0, 0, 0, 0.15);
  --shadow-well: inset 0 0 20px rgba(0, 0, 0, 0.08);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-white: #FFFFFF;
  --color-cloud: #F9F9F9;
  --color-paper: #F9F7F4;
  --color-bone: #FAF7F1;
  --color-linen: #ECE9E2;
  --color-border-cool: #E5E7EB;
  --color-stone: #DEDEDE;
  --color-fog: #C4C6C7;
  --color-silver: #B4B4B4;
  --color-warm-grey: #6F6E6C;
  --color-warm-grey-2: #706E6B;
  --color-charcoal: #333333;
  --color-soot: #171717;
  --color-ink: #131211;
  --color-black: #000000;
  --color-amber: #FFAC00;
  --color-amber-lift: #FFB31A;
  --color-navy: #112655;
  --color-royal: #1A3B83;
  --color-signal-red: #E31111;
  --color-red-text: #FF282B;
  --color-ember: #FF6200;
  --color-ember-2: #FF6201;

  /* Typography — Families */
  --font-general: 'General Sans', 'Switzer', ui-sans-serif, system-ui, sans-serif;
  --font-recoleta: 'Recoleta', 'Fraunces', Georgia, serif;

  /* Typography — Scale */
  --text-micro: 11px;
  --text-caption: 12px;
  --text-sm: 14px;
  --text-ui: 15px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-heading-sm: 30px;
  --text-heading: 36px;
  --text-heading-lg: 40px;
  --text-title: 46px;
  --text-display: 60px;
  --text-hero: 70px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 25px;

  /* Border Radius */
  --radius-input: 10px;
  --radius-chip: 15px;
  --radius-card: 20px;
  --radius-modal: 30px;
  --radius-panel: 50px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-whisper: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 2px 16px rgba(0, 0, 0, 0.04);
  --shadow-amber-press: inset 0 -1px 0 rgb(229, 153, 0);
  --shadow-hairline: 0 1px 0 rgba(0, 0, 0, 0.15);
  --shadow-well: inset 0 0 20px rgba(0, 0, 0, 0.08);
}
```