---
version: alpha
name: Function Health
description: "Golden-hour wellness: warm cream editorial calm cut by one burnt-sienna accent."
colors:
  on-surface-variant: "#737373"
  on-surface: "#2A2B2F"
  surface: "#FEF9EF"
  outline: "#D1C9BF"
  error: "#DB0000"
  primary: "#B05A36"
  cream: "#F5EEE1"
  gray: "#515151"
  green: "#79BD8B"
  blue: "#488AD5"
  black: "#000000"
  white: "#FFFFFF"
  orange-tint: "#f7eeeb"
  green-tint: "#f1f3e5"
typography:
  caption-mono:
    fontFamily: Fragment Mono
    fontSize: 0.75rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: FT Base
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: FT Base
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  large-body:
    fontFamily: FT Base
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  xl-intro:
    fontFamily: FT Base
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  heading-3:
    fontFamily: FT Base
    fontSize: 2.125rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  heading-1:
    fontFamily: FT Base
    fontSize: 3.5625rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  display-xl:
    fontFamily: Financier Display
    fontSize: 3.375rem
    fontWeight: 300
    lineHeight: 1
    letterSpacing: 0em
  stat:
    fontFamily: FT Base
    fontSize: 3rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  pull-quote:
    fontFamily: FT Base
    fontSize: 1.6875rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
rounded:
  extra-small: 0.25rem
  small: 0.375rem
  base: 0.75rem
  large: 1rem
  extra-large: 1.5rem
  card: 24px
  button: 36px
  pill: 999px
spacing:
  s1: 0.25rem
  s2: 0.5rem
  s3: 0.75rem
  s4: 0.75rem
  s5: 1rem
  s7: 1.5rem
  s9: 2.5rem
  s11: 3.5rem
  s13: 5rem
  section-top-bottom: 3rem
---
# Function Health — Style Reference
> Golden-hour wellness: warm cream editorial calm cut by one burnt-sienna accent.

**Theme:** mixed

Function Health is a warm, editorial light system that opens on a cinematic full-bleed photograph — a face turned to golden-hour light — with translucent cream chrome floating on top, then settles the rest of the page onto a soft beige-and-cream canvas. The whole identity turns on restraint: a single burnt-sienna orange (`#B05A36`) carries every accent — links, the notification banner, the primary CTA — while `#79BD8B` green and `#488AD5` blue sit in reserve for data and status only. Type is a two-voice conversation between **Financier Display**, a high-contrast serif used at light weight (300) and famously in italic for the hero line "*Check your health.*", and **FT Base**, a clean grotesque sans that carries body, labels and stat numerals. Everything is round: pill CTAs at `999px`, `24px` cards, generously radiused chrome. Spacing rides a fluid `clamp()` scale from a 4px base, so the layout breathes wide (max `90rem`) and never feels cramped. The mood is clinical trust wrapped in analog warmth — a lab that reads like a lifestyle magazine.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Beige | `#FEF9EF` | `--beige` | Primary page canvas and inverse text on the dark photographic hero; the brand's default "paper". |
| Cream | `#F5EEE1` | `--cream` | Secondary surface — cards, banners, the floating nav fill; one warm step down from beige. |
| Dark Cream | `#D1C9BF` | `--dark-cream` | Hairline borders and card outlines; the only divider color — never a fill. |
| Midnight | `#2A2B2F` | `--midnight` | Primary text and the dark UI surface; near-black but warmed, never pure `#000`. |
| Gray | `#515151` | `--gray` | Secondary/body text and captions on light surfaces. |
| Light Gray | `#737373` | `--light-gray` | Muted labels and resting input borders (also `--text-05`, hsl 45%). |
| Burnt Sienna | `#B05A36` | `--orange` | The single brand accent: links, notification banner, primary CTA fill. Use sparingly — one per view. |
| Green | `#79BD8B` | `--green` | Reserved for positive/in-range health data and success states — never a CTA. |
| Blue | `#488AD5` | `--blue` | Reserved for informational/data status — never decorative. |
| Black | `#000000` | — | Pure black for select UI text and consent chrome only; body text prefers Midnight. |
| White | `#FFFFFF` | — | Input fields and the crispest inner surfaces. |
| Error | `#DB0000` | `--error` | Form validation errors exclusively. |
| Orange Tint | `#f7eeeb` | `--orange-10p` | 10% orange wash — soft accent backgrounds and highlight rows. |
| Green Tint | `#f1f3e5` | `--green-10p` | 10% green wash — positive-data background chips. |

## Tokens — Typography
### Financier Display — the editorial voice: display headlines and pull-quotes, light weight (300), italic for the signature hero line · `--font-serif`
- **Substitute:** Georgia, "Times New York", Freight Display Pro
- **Weights:** 300 (normal + italic) — the system only ever loads Light
- **Sizes:** Hero display up to `80px` / `64px`; `--heading-xl` clamps `54px→100px`, `--h1` `57px→80px`, down through `--h6`
- **Line height:** Tight — headings run near `1` (`--h3-line-height: 1`)
- **Letter spacing:** None added; the serif's own contrast does the work
- **Role:** High-contrast serif set light and often italic — the emotional, magazine-cover register of the brand.

### FT Base — the working voice: body, navigation, labels, buttons and stat numerals · `--font-sans`
- **Substitute:** system-ui, Inter, Neue Haas Grotesk
- **Weights:** 300 (light body / large intro text), 400 (default), 600 (buttons, eyebrows, emphasis)
- **Sizes:** `--text-regular` `16px` base; scale from `--text-xs` `.75rem` to `--text-xxl` `~34px`; stat figures at `--stat` `48px→64px`
- **Line height:** ~1.4–1.6 for body; tight for stats
- **Letter spacing:** Neutral; taglines (`--tagline`) may carry light tracking as eyebrows
- **Role:** Clean grotesque that grounds the serif — everything functional and legible.

### Fragment Mono — technical annotation and fine print · `--font-mono`
- **Substitute:** "Söhne Mono", ui-monospace, monospace
- **Weights:** 400
- **Sizes:** Small — captions and metadata, `~11–14px`
- **Line height:** ~1.4
- **Letter spacing:** Native mono
- **Role:** Lab-report texture — used for codes, units and small structured data, not prose.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption / mono | `.75rem` (12px) | ~1.4 | native | `--text-xs` |
| Small | `.875rem` (14px) | ~1.5 | 0 | `--text-sm` |
| Body | `1rem` (16px) | ~1.5 | 0 | `--text-regular` |
| Large body | `clamp(1.125rem, .188vw+1.08rem, 1.25rem)` | ~1.5 | 0 | `--text-lg` |
| XL intro | `clamp(1.125rem, .564vw+.99rem, 1.5rem)` | ~1.45 | 0 | `--text-xl` |
| Heading 3 | `clamp(2.125rem, 1.03vw+1.88rem, 2.8125rem)` | ~1 | 0 | `--h3` |
| Heading 1 | `clamp(3.5625rem, 2.16vw+3.05rem, 5rem)` | ~1 | 0 | `--h1` |
| Display XL | `clamp(3.375rem, 4.32vw+2.36rem, 6.25rem)` | ~1 | 0 | `--heading-xl` |
| Stat | `clamp(3rem, 1.5vw+2.65rem, 4rem)` | ~1 | 0 | `--stat` |
| Pull-quote | `clamp(1.6875rem, 1.22vw+1.4rem, 2.5rem)` | ~1.2 | 0 | `--pull-quote` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (`--s1: .25rem`)   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| s1 | `.25rem` (4px) | `--s1` |
| s2 | `.5rem` (8px) | `--s2` |
| s3 | `.75rem` (12px) | `--s3` |
| s4 | `clamp(.75rem, .38vw+.66rem, 1rem)` | `--s4` |
| s5 | `clamp(1rem, .38vw+.91rem, 1.25rem)` | `--s5` |
| s7 | `clamp(1.5rem, .75vw+1.32rem, 2rem)` | `--s7` |
| s9 | `clamp(2.5rem, 1.5vw+2.15rem, 3.5rem)` | `--s9` |
| s11 | `clamp(3.5rem, 2.26vw+2.97rem, 5rem)` | `--s11` |
| s13 | `clamp(5rem, 3.76vw+4.12rem, 7.5rem)` | `--s13` |
| Section top/bottom | `clamp(3rem, 4.81vw+1.87rem, 6.2rem)` | `--section-top` |

### Border Radius
| Element | Value |
|---------|-------|
| Extra-small (chips, small returns) | `.25rem` (4px) · `--radius-xs` |
| Small (fields, gpc banner) | `.375rem` (6px) · `--radius-small` |
| Base (nav container, modal) | `.75rem` (12px) · `--radius-base` |
| Large | `clamp(1rem, .75vw+.82rem, 1.5rem)` · `--radius-large` |
| Extra-large | `clamp(1.5rem, 1.5vw+1.15rem, 2.5rem)` · `--radius-xl` |
| Card | `24px` |
| Button (banner CTA) | `36px` |
| Pill (primary CTA, inputs) | `999px` |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| None | `0 0 0 0` transparent (default) | — |
| Soft glow | `rgba(0,0,0,0.15) 0 0 32px 0` | — |
| Lifted card | `rgba(42,43,47,0.14) 0 18px 40px 0` | — |
| Deep float | `rgba(42,43,47,0.1) 12px 32px 80px 0` | — |
| Subtle | `rgba(0,0,0,0.1) 0 2px 12px 0` | — |

### Layout
- **Page max-width:** `90rem` (`--main`)
- **Section gap:** `clamp(3rem, 4.81vw+1.87rem, 6.2rem)` top and bottom
- **Card padding:** `17px 33px` (measured) — roughly `--s5`/`--s7`
- **Element gap:** `--s3`–`--s5` (`12–20px`); site margin `clamp(1.25rem, 4.14vw+.28rem, 4rem)`

## Components
### Primary CTA (Start testing / Join Function)
**Role:** The one high-emphasis action per view.
Two live variants: burnt-sienna fill (`#B05A36` bg, `#FEF9EF` text, `36px` radius, `0 20px` padding, FT Base 600/14px) on light sections, and a cream pill (`#FEF9EF` bg, `#B05A36` text, `999px` radius, `12px 25px` padding, 16px 600) floating over the photographic hero. Both sit flat with no shadow.

### Secondary / Outline Button
**Role:** Lower-emphasis actions beside the primary CTA.
Transparent fill with a `1px #2A2B2F` hairline, Midnight text, `36px` radius, `0 20px` padding, FT Base 600/14px. Reads as a quiet companion to the orange CTA.

### Text / Ghost Link Button
**Role:** Inline navigation actions (e.g. "Log in").
No background or border, `#000000`/Midnight text, FT Base 600 ~15px, with a `2px` baseline gap for an underline-on-hover feel.

### Text Link
**Role:** Inline links and editorial cross-references.
Burnt-sienna `#B05A36` at 14px/400 in body contexts; on the dark hero, links invert to Beige `#FEF9EF` 300. Color alone signals the link — no persistent underline.

### Notification Banner
**Role:** Top-of-page promotional strip (e.g. "Use your HSA/FSA funds to Join Function").
Full-bleed burnt-sienna `#B05A36` band with Beige text and a Beige underlined link. The one place orange fills edge-to-edge.

### Floating Nav Bar
**Role:** Primary navigation, floating over the hero photograph.
Translucent cream (`--cream` / `rgba(245,238,225,·)`) container, `--radius-base` `12px` corners, wordmark left, centered links (FT Base ~16px), and the pill CTA right. Sits inset from the page edge, not full-width.

### Card
**Role:** Content and data containers on the cream canvas.
Beige `#FEF9EF` fill, `1px #D1C9BF` hairline border, `24px` radius, `17px 33px` padding, FT Base 300/16px. Depth comes from the border and optional soft shadow, not heavy elevation.

### Input Field
**Role:** Form entry (email capture, search).
Pill-shaped `999px`, Beige `#FEF9EF` fill, `1px #737373` resting border, Midnight text at 16px/300, `0 20px` padding. A secondary square variant (`#FFFFFF` fill, `2px #767676` border, `0` radius) appears in embedded/consent forms.

### Stat Block
**Role:** Hero proof points ("160+ lab tests", "$1 per day").
FT Base 600 figure at `--stat` (`48–64px`) over a small caption, separated by thin vertical rules. Sits directly on the hero photo in Beige text.

### Display Headline
**Role:** The emotional hero statement.
Financier Display 300 **italic** at `64–80px`, set on the photograph in Beige `#FEF9EF` (or Midnight on light sections). Line height near `1`. This italic serif is the single most recognizable brand gesture.

### Eyebrow / Tag Pill
**Role:** Small category label above headlines ("HSA/FSA Eligible").
FT Base 600 uppercase-ish label inside a pill/rounded chip with a hairline outline; low-contrast, sits quietly above the display line.

### Consent / Cookie Modal
**Role:** Privacy and preference UI.
A cream-surfaced (`rgba(245,236,224,·)`) modal, `~11–12px` corners, orange action buttons at `36px` radius, and pure-black toggle/checkbox states — the one region that leans on `#000000` over Midnight.

## Do's and Don'ts
### Do
- Keep burnt-sienna `#B05A36` as the lone accent — one orange element per view (a CTA, a link, or the banner), never several.
- Set the hero headline in Financier Display **300 italic**; that light italic serif is the brand's signature.
- Layer surfaces by warmth: Beige `#FEF9EF` canvas → Cream `#F5EEE1` cards/chrome → `#D1C9BF` hairlines.
- Use `999px` pills for CTAs and inputs, `24px` for cards; stay round everywhere.
- Reserve Green `#79BD8B` and Blue `#488AD5` strictly for health-data status, never decoration or buttons.
- Let type breathe on the `clamp()` fluid scale and the wide `90rem` measure.

### Don't
- Don't use pure black `#000000` for body copy — warmed Midnight `#2A2B2F` is the text color; pure black is for consent chrome only.
- Don't set Financier Display at bold weights; the system only owns Light (300).
- Don't add drop shadows to CTAs or the banner — they sit flat.
- Don't turn green or blue into accents or CTA fills; orange is the only action color.
- Don't fill large areas with orange except the top notification band.
- Don't introduce cool grays; every neutral here is warmed (beige/cream/`#737373`).

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FEF9EF` | Default page background — warm beige paper. |
| 1 | Warm surface | `#F5EEE1` | Cards, floating nav, banners — one warm step down. |
| 2 | Hairline | `#D1C9BF` | Card and divider outlines (border, not fill). |
| 3 | Dark surface | `#2A2B2F` | Inverted sections and dark UI; text becomes Beige. |
| — | Crisp field | `#FFFFFF` | Input interiors and the highest-contrast inner surface. |
| — | Photographic hero | image | Full-bleed golden-hour photo; chrome overlays in translucent cream. |

## Elevation
Depth is almost entirely luminance- and border-driven, not shadow-heavy. The system separates layers by warming or cooling the surface (Beige → Cream → hairline `#D1C9BF`) and by a single `1px` border on cards. Shadows exist but stay subtle and diffuse — a `rgba(42,43,47,0.14) 0 18px 40px` lift for prominent floating cards, a soft `0 0 32px` glow where a surface must detach from the photo. CTAs and the banner are deliberately flat. The most dramatic "elevation" is conceptual: the translucent cream chrome and pill CTA hovering over a cinematic photograph.

## Imagery
Photography is the emotional core. Expect large, cinematic, golden-hour lifestyle photography — real people in natural light and warm landscapes, shot with shallow depth and film-like grain, keyed to the palette's warm neutrals. The hero uses a full-bleed image with a subtle diagonal "slice"/motion treatment and a play/pause control, implying video. Over imagery, all chrome turns translucent cream and text goes Beige. Iconography is minimal and line-based; the wordmark pairs a circular striped "orb" mark with "Function" in FT Base. Illustration is essentially absent — the brand trusts photography and type to carry warmth.

## Layout
Full-bleed at the hero, contained (`90rem` max) everywhere else. The nav is a floating, inset container over the photo rather than a full-width bar. A thin promotional band pins to the very top. Sections stack with generous fluid vertical rhythm (`--section-top`/`--section-bottom`, up to `6.2rem`) and a fluid horizontal site margin. The hero composition is asymmetric: eyebrow tag → oversized italic serif headline → supporting sans paragraph → CTA, anchored bottom-left, with a stat row (thin vertical rules between figures) bottom-right. Content sits on a warm beige canvas below, in rounded cards outlined by `#D1C9BF` hairlines.

## Typography Signature
The whole voice lives in one collision: a **high-contrast Light-italic serif** (Financier Display 300) against a **neutral grotesque** (FT Base). The serif is only ever set light — and often italic — so headlines read as calm, editorial, almost handwritten confidence rather than shouting. FT Base does all the load-bearing work in three weights (300 for airy intros, 400 for body, 600 for buttons/eyebrows), keeping the interface quiet enough that the serif can be the star. Heading line-heights are pushed near `1` for a tight, magazine-cover set, while body relaxes to ~1.5. Fragment Mono adds a third, technical register for units and codes — the "lab report" texture under the wellness gloss. It works because each font stays in its lane: serif for feeling, sans for function, mono for data.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FEF9EF` (beige) / text: `#2A2B2F` (midnight) / surface: `#F5EEE1` (cream) / border: `#D1C9BF` (dark cream) / accent: `#B05A36` (burnt sienna) / primary action: `#B05A36` fill on light, `#FEF9EF` cream pill over the hero

## Example Component Prompts
1. **Primary CTA**: Build a pill button, `999px` radius, `#B05A36` background, `#FEF9EF` text, FT Base 600 at 14–16px, `12px 25px` padding, no shadow, no border; over a photo use `#FEF9EF` background with `#B05A36` text instead.
2. **Hero headline**: Set a display line in Financier Display, weight 300, *italic*, `clamp(3.375rem, 4.32vw+2.36rem, 6.25rem)`, line-height 1, color `#FEF9EF` over a full-bleed golden-hour photograph, anchored bottom-left with a small outlined eyebrow tag above it.
3. **Content card**: `#FEF9EF` fill, `1px solid #D1C9BF` border, `24px` radius, `17px 33px` padding, FT Base 300/16px in `#2A2B2F`, optional soft `rgba(42,43,47,0.14) 0 18px 40px` shadow.
4. **Floating nav**: Inset translucent `#F5EEE1` bar, `12px` corners, striped-orb wordmark + "Function" left, centered FT Base ~16px links, cream pill CTA right; overlays the hero photo.
5. **Stat row**: FT Base 600 figures at `clamp(3rem, 1.5vw+2.65rem, 4rem)` in `#FEF9EF` over the hero, each with a small caption, separated by thin vertical hairlines.

## Similar Brands
- **Aesop** — warm apothecary neutrals, editorial restraint and a single quiet accent over confident serif type.
- **Oura** — clinical health-tech that reads calm and premium, letting one warm accent and generous whitespace carry trust.
- **Ritual** — wellness brand built on soft, warm-neutral surfaces and rounded, friendly geometry.
- **Kinfolk / Cereal (magazines)** — the Light serif + grotesque pairing and golden-hour photographic editorial rhythm.
- **Maude** — muted, warm minimalism in health/self-care with a disciplined one-accent palette.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --beige: #FEF9EF;
  --cream: #F5EEE1;
  --dark-cream: #D1C9BF;
  --light-gray: #737373;
  --gray: #515151;
  --midnight: #2A2B2F;
  --orange: #B05A36;
  --green: #79BD8B;
  --blue: #488AD5;
  --error: #DB0000;
  --orange-10p: #f7eeeb;
  --green-10p: #f1f3e5;
  --black: #000000;
  --white: #FFFFFF;
  /* Semantic aliases (as declared by the site) */
  --text-01: #FEF9EF;
  --text-02: #515151;
  --text-03: #2A2B2F;
  --text-04: #B05A36;
  --text-05: hsla(0, 0%, 45%, 1);
  --fill-01: #FEF9EF;
  --fill-02: #F5EEE1;
  --fill-03: #2A2B2F;
  --fill-04: #B05A36;
  --stroke-01: #FEF9EF;
  --stroke-02: #D1C9BF;
  --stroke-03: #2A2B2F;
  --stroke-04: #2A2B2F;
  --stroke-05: #B05A36;
  --stroke-06: #737373;

  /* Typography — Families */
  --font-serif: "Financier Display", Georgia, serif;
  --font-sans: "FT Base", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;

  /* Typography — Scale */
  --heading-xl: clamp(3.375rem, 4.3233vw + 2.359rem, 6.25rem);
  --h1: clamp(3.5625rem, 2.1617vw + 3.0545rem, 5rem);
  --h2: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
  --h3: clamp(2.125rem, 1.0338vw + 1.882rem, 2.8125rem);
  --h4: clamp(1.6875rem, .6579vw + 1.5329rem, 2.125rem);
  --h5: clamp(1.375rem, .188vw + 1.3308rem, 1.5rem);
  --h6: clamp(1.1875rem, .094vw + 1.1654rem, 1.25rem);
  --text-xxl: clamp(1.8125rem, .4699vw + 1.7021rem, 2.125rem);
  --text-xl: clamp(1.125rem, .5639vw + .9925rem, 1.5rem);
  --text-lg: clamp(1.125rem, .188vw + 1.0808rem, 1.25rem);
  --text-md: clamp(1rem, .188vw + .9558rem, 1.125rem);
  --text-regular: 1rem;
  --text-sm: .875rem;
  --text-xs: .75rem;
  --tagline: clamp(.75rem, .3759vw + .6617rem, 1rem);
  --stat: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
  --pull-quote: clamp(1.6875rem, 1.2218vw + 1.4004rem, 2.5rem);
  --h3-line-height: 1;

  /* Spacing (4px base) */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: clamp(.75rem, .3759vw + .6617rem, 1rem);
  --s5: clamp(1rem, .3759vw + .9117rem, 1.25rem);
  --s6: clamp(1.25rem, .3759vw + 1.1617rem, 1.5rem);
  --s7: clamp(1.5rem, .7519vw + 1.3233rem, 2rem);
  --s8: clamp(2rem, .7519vw + 1.8233rem, 2.5rem);
  --s9: clamp(2.5rem, 1.5038vw + 2.1466rem, 3.5rem);
  --s10: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
  --s11: clamp(3.5rem, 2.2556vw + 2.9699rem, 5rem);
  --s12: clamp(4.5rem, 2.2556vw + 3.9699rem, 6rem);
  --s13: clamp(5rem, 3.7594vw + 4.1165rem, 7.5rem);
  --section-top: clamp(3rem, 4.812vw + 1.8692rem, 6.2rem);
  --section-bottom: clamp(3rem, 4.812vw + 1.8692rem, 6.2rem);
  --site-margin: clamp(1.25rem, 4.1353vw + .2782rem, 4rem);
  --main: 90rem;

  /* Border Radius */
  --radius-xs: .25rem;
  --radius-small: .375rem;
  --radius-base: .75rem;
  --radius-large: clamp(1rem, .7519vw + .8233rem, 1.5rem);
  --radius-xl: clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem);
  --radius-card: 24px;
  --radius-button: 36px;
  --radius-pill: 999px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-beige: #FEF9EF;
  --color-cream: #F5EEE1;
  --color-dark-cream: #D1C9BF;
  --color-light-gray: #737373;
  --color-gray: #515151;
  --color-midnight: #2A2B2F;
  --color-orange: #B05A36;
  --color-green: #79BD8B;
  --color-blue: #488AD5;
  --color-error: #DB0000;
  --color-orange-10p: #f7eeeb;
  --color-green-10p: #f1f3e5;
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Typography — Families */
  --font-serif: "Financier Display", Georgia, serif;
  --font-sans: "FT Base", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, monospace;

  /* Typography — Scale */
  --text-heading-xl: clamp(3.375rem, 4.3233vw + 2.359rem, 6.25rem);
  --text-h1: clamp(3.5625rem, 2.1617vw + 3.0545rem, 5rem);
  --text-h2: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
  --text-h3: clamp(2.125rem, 1.0338vw + 1.882rem, 2.8125rem);
  --text-xxl: clamp(1.8125rem, .4699vw + 1.7021rem, 2.125rem);
  --text-xl: clamp(1.125rem, .5639vw + .9925rem, 1.5rem);
  --text-lg: clamp(1.125rem, .188vw + 1.0808rem, 1.25rem);
  --text-md: clamp(1rem, .188vw + .9558rem, 1.125rem);
  --text-regular: 1rem;
  --text-sm: .875rem;
  --text-xs: .75rem;
  --text-stat: clamp(3rem, 1.5038vw + 2.6466rem, 4rem);
  --text-pull-quote: clamp(1.6875rem, 1.2218vw + 1.4004rem, 2.5rem);

  /* Spacing (4px base) */
  --spacing-s1: .25rem;
  --spacing-s2: .5rem;
  --spacing-s3: .75rem;
  --spacing-s5: clamp(1rem, .3759vw + .9117rem, 1.25rem);
  --spacing-s7: clamp(1.5rem, .7519vw + 1.3233rem, 2rem);
  --spacing-s9: clamp(2.5rem, 1.5038vw + 2.1466rem, 3.5rem);
  --spacing-s11: clamp(3.5rem, 2.2556vw + 2.9699rem, 5rem);
  --spacing-s13: clamp(5rem, 3.7594vw + 4.1165rem, 7.5rem);
  --spacing-section: clamp(3rem, 4.812vw + 1.8692rem, 6.2rem);

  /* Border Radius */
  --radius-xs: .25rem;
  --radius-small: .375rem;
  --radius-base: .75rem;
  --radius-large: clamp(1rem, .7519vw + .8233rem, 1.5rem);
  --radius-xl: clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem);
  --radius-card: 24px;
  --radius-button: 36px;
  --radius-pill: 999px;
}
```