---
version: alpha
name: Microsoft
description: "Four colored squares, tight Segoe, and one brilliant blue that means go."
colors:
  on-surface-variant: "#616161"
  on-surface: "#0E1726"
  surface: "#FFFFFF"
  outline: "#B3DAF0"
  neutral: "#262626"
  primary: "#0078D4"
  link-blue: "#0067B8"
  deep-blue: "#004275"
  slate-ink: "#17253D"
  slate-blue: "#2A446F"
  golden-yellow: "#FFB900"
  sky-wash: "#DCEEF8"
  pale-sky: "#F4FAFD"
  neutral-hairline: "#E7E7E7"
typography:
  display:
    fontFamily: Segoe UI Variable Display
    fontSize: 76px
    fontWeight: 400
    lineHeight: 82px
    letterSpacing: -0.025em
  display-2:
    fontFamily: Segoe UI Variable Display
    fontSize: 56px
    fontWeight: 400
    lineHeight: 62px
    letterSpacing: -0.025em
  heading-xl:
    fontFamily: Segoe UI Variable Display
    fontSize: 48px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -0.025em
  heading-l:
    fontFamily: Segoe UI Variable Display
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.025em
  heading-m:
    fontFamily: Segoe UI Variable Display
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: -0.025em
  heading-s:
    fontFamily: Segoe UI Variable Display
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.015em
  heading-xs:
    fontFamily: Segoe UI Variable Display
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.01em
  subheading:
    fontFamily: Segoe UI Variable Display
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body:
    fontFamily: Segoe UI Variable Display
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.03em
  body-s:
    fontFamily: Segoe UI Variable Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.03em
  action-button:
    fontFamily: Segoe UI Variable Display
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: -0.02em
  eyebrow:
    fontFamily: Segoe UI Variable Display
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0.08em
  caption:
    fontFamily: Segoe UI Variable Display
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.03em
rounded:
  buttons-small-controls: 4px
  cards-product-tiles: 8px
  chat-panel-large-surfaces: 16px
  toggles-suggestion-chips: 200px
  nav-utility-buttons: 0px
spacing:
  3xs: 2px
  2xs: 4px
  xs: 8px
  s-m: 12px
  l: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 56px
---
# Microsoft — Style Reference
> Four colored squares, tight Segoe, and one brilliant blue that means go.

**Theme:** light

Microsoft's homepage is Fluent design at full civic scale: a near-white canvas washed with the palest sky-blues, ink set in Segoe UI Variable at heroic display sizes with tight negative tracking, and a single load-bearing accent — Brilliant Blue `#0078D4` — reserved for actions and the four-square mark. The system is enormous underneath (a full Fluent tonal library of ~30 named ramps stepped 50→900) yet reads calm and restrained on the surface: one blue does the work, one golden yellow (`#FFB900`, the logo's fourth square) survives as a badge, and everything else is neutral ink on sky-tinted paper. The signature move is the AI gradient — a blue-to-aqua sweep (`#0078D4` → `#6DD1C1`) that underlines the "Ask a question" field, marking the Copilot surface without shouting. Layout is the classic UHF global nav over a centered, spacious hero, with full-bleed promo strips and soft Fluent elevation (ambient + directional shadow pairs) doing the depth. It is optimistic, systematic, and quietly confident — enterprise trust rendered friendly.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Brilliant Blue | `#0078D4` | `--color-brilliant-blue` | The one accent — primary buttons, promo banner, brand mark. The only color that ever means "act." |
| Link Blue | `#0067B8` | `--color-link` | Text links only; a half-step deeper than the action blue for legibility in running copy. |
| Deep Blue | `#004275` | `--color-deep-blue` | Pressed/hover states and dark hero washes; the bottom of the blue ramp (brilliant-blue-800). |
| Ink / Blue-Black | `#0E1726` | `--color-ink` | Headings and display type; the near-black the whole page reads against (dark-blue-900). |
| Slate Ink | `#17253D` | `--color-ink-strong` | Strong body text and input text; one step warmer than pure ink (dark-blue-800). |
| Slate Blue | `#2A446F` | `--color-slate` | Subtle accent text and captions — the "quiet" ink for secondary labels (dark-blue-500). |
| Neutral Ink | `#262626` | `--color-neutral-ink` | Nav links and utility text; the workhorse gray-black for chrome. |
| Muted Gray | `#616161` | `--color-muted` | Placeholder and metadata text; never for anything that must be read carefully. |
| Golden Yellow | `#FFB900` | `--color-golden-yellow` | The logo's fourth square, surviving only as a badge/highlight fill. Never a CTA, never body — editorial credit only. |
| Sky Wash | `#DCEEF8` | `--color-sky-wash` | Hero tint, highlight surfaces, chat user-bubble; the pale blue the brand floats on (sky-blue-100). |
| Pale Sky | `#F4FAFD` | `--color-pale-sky` | The lightest surface — section washes just off pure white (sky-blue-50). |
| Sky Border | `#B3DAF0` | `--color-sky-border` | Hairline borders on chips and cards; a soft blue edge instead of gray (sky-blue-300). |
| Canvas White | `#FFFFFF` | `--color-canvas` | The base page. |
| Neutral Hairline | `#E7E7E7` | `--color-hairline` | Neutral 1px dividers and card edges (vapor-gray-100). |
| AI Gradient | `linear-gradient(89.97deg, #0078D4 0.03%, #6DD1C1 99.97%)` | `--gradient-ai` | Copilot/assistant signature — underlines the Ask field, marks AI surfaces. The one gradient with meaning. |

## Tokens — Typography
### Segoe UI Variable Display — the hero face: welcome headline and section titles, weight 400–500, drawn at optical Display sizes with tight −0.025em tracking · `--font-display`
- **Substitute:** Segoe UI, "Helvetica Neue", Arial, system-ui, sans-serif
- **Weights:** 300, 400, 500, 600, 700 (variable 300–700)
- **Sizes:** 76px / 56px / 48px / 40px / 32px display steps
- **Line height:** ~1.05–1.1 at display sizes (76px → 5.125rem)
- **Letter spacing:** −0.025em on all heading steps; loosens to normal at 16–18px
- **Role:** Optical Display cut of Segoe for large type — the "Hi there, welcome to Microsoft" headline lives here.

### Segoe UI Variable Text — body copy, subheads, labels, and UI at 16px and below; weight 400 body / 600 labels, tracking −0.03em · `--font-text`
- **Substitute:** Segoe UI, "Helvetica Neue", Arial, system-ui, sans-serif
- **Weights:** 400 (body), 600 (labels, semibold headings ≤18px)
- **Sizes:** 18px / 16px / 14px / 12px
- **Line height:** 1.5 (body 1rem/1.5rem), 1.43 for small text
- **Letter spacing:** −0.03em on body and paragraph; eyebrow labels invert to +0.08em uppercase
- **Role:** The reading and interface face — every paragraph, chip, and nav item.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display (3xl) | 76px | 82px | −0.025em | `--text-display-3xl` |
| Display (2xl) | 56px | 62px | −0.025em | `--text-display-2xl` |
| Heading XL | 48px | 56px | −0.025em | `--text-heading-xl` |
| Heading L | 40px | 48px | −0.025em | `--text-heading-l` |
| Heading M | 32px | 40px | −0.025em | `--text-heading-m` |
| Heading S | 24px | 32px | −0.015em | `--text-heading-s` |
| Heading XS | 20px | 28px | −0.01em | `--text-heading-xs` |
| Subheading | 18px | 24px | normal (w600) | `--text-subheading` |
| Body | 16px | 24px | −0.03em | `--text-body` |
| Body S | 14px | 20px | −0.03em | `--text-body-s` |
| Action Button | 15px | 22px | −0.02em (w600) | `--text-action` |
| Eyebrow | 12px | 16px | +0.08em (w600, uppercase) | `--text-eyebrow` |
| Caption | 12px | 16px | −0.03em | `--text-caption` |

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 2px | `--spacing-3xs` |
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| s / m | 12px | `--spacing-s` |
| l | 16px | `--spacing-l` |
| xl | 24px | `--spacing-xl` |
| 2xl | 32px | `--spacing-2xl` |
| 3xl | 48px | `--spacing-3xl` |
| 4xl | 56px | `--spacing-4xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / small controls | 4px |
| Cards / product tiles | 8px |
| Chat panel / large surfaces | 16px |
| Toggles, suggestion chips (pill) | 200px |
| Avatars / icon buttons | 50% |
| Nav / utility buttons | 0px (square) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Elevation 1 | `0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)` | `--elevation-1` |
| Elevation 2 | `0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)` | `--elevation-2` |
| Elevation 3 | `0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)` | `--elevation-3` |
| Elevation 4 | `0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)` | `--elevation-4` |
| Elevation 6 | `0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)` | `--elevation-6` |

### Layout
- **Page max-width:** full-bleed shell; content sections centered
- **Global nav height:** 64px (UHF header)
- **Section gap:** 56px (`--spacing-4xl`) comfortable, 32px compact
- **Card padding:** 16px default · 24px comfortable · 32px relaxed
- **Element gap:** 8–16px

## Components
### Primary Action Button
**Role:** The single "act" control — "See offer," "Shop now" links styled as buttons.
Fill Brilliant Blue `#0078D4`, white text, 4px radius, action type 15px/600/−0.02em, ~12px 24px padding. Hover deepens to `#006dc1`, pressed to `#004275`. This is the only element that carries the brand blue as a fill.

### Segment Toggle (Personal / Business)
**Role:** Switches the whole hero context between audiences.
A pill container (200px radius) on white with a subtle border; the active segment is a dark ink-navy pill (`#0E1726`) with white text, the inactive segment reads as Slate Blue `#2A446F` text on transparent. Fully rounded, generous horizontal padding.

### Suggestion Chip
**Role:** Copilot prompt starters under the Ask field — "Help me choose a PC," "Microsoft 365 tips."
Pill (200px radius), white fill, 1px Sky Border `#B3DAF0`, Slate Blue `#2A446F` text at 14–15px. No shadow; the blue hairline alone defines it.

### Ask / Search Input
**Role:** The AI-powered hero query field.
Transparent Fluent input, 16px text in Slate Ink `#17253D`, muted `#616161` placeholder, no visible box border — instead a full-width AI gradient underline (`#0078D4` → `#6DD1C1`) marks it as a Copilot surface. Trailing send glyph, generous internal height.

### Global Nav (UHF)
**Role:** Persistent Microsoft header across all properties.
64px white bar, the four-square mark + "Microsoft" wordmark at left, text links in Neutral Ink `#262626` at 13px/400, utility cluster (All Microsoft ▾, Search, Cart, Sign in) at right. Square (0px radius) hit targets, no fills — pure typographic navigation.

### Promo Banner
**Role:** Full-bleed announcement strip above the hero — "Back to school… Shop now."
Brilliant Blue `#0078D4` background edge-to-edge, white centered text, an underlined white inline link for the CTA, dismiss ✕ at right. The one place the accent blue fills a whole surface.

### Product Card / Tile
**Role:** Product promo panels and app-icon tiles.
White-to-`#FEFEFE` fill, 8px radius, Fluent elevation-1/2 shadow, hairline card border (`#E7E7E7` / off-white edge). Content sits on a soft sky-blue-to-white gradient wash inside larger promo blocks.

### Text Link
**Role:** Inline and standalone navigation links.
Link Blue `#0067B8`, no default underline, weight 400, underline on hover. Distinct from the action blue so links and buttons never read the same.

### Store Assistant / Chat Widget
**Role:** Floating support panel, bottom-right.
Dark ink-navy panel (`#0E1726` / `#030B0F`), 16px radius, white heading. Primary "Chat now" button is a pale sky fill (`#DCEEF8` / `#B3DAF0`) with dark text; secondary "No thanks" is a dark outline button. Elevation-6 lifts it clear of the page.

### Eyebrow Label
**Role:** Kicker/eyebrow above sections and italic hero helper text.
12px, weight 600, uppercase, +0.08em letter-spacing (the one place tracking goes positive) in Slate Blue or Slate Ink. The system's counterpoint to its otherwise-tight type.

### Badge
**Role:** Small status/offer markers.
Two flavors — strong: Golden Yellow `#FFB900` fill (the only warm accent on the page); subtle: Sky Wash `#DCEEF8` fill with Deep Blue text. Pill or 4px radius.

### Hero Surface
**Role:** The welcome canvas.
Near-white with the faintest Pale Sky `#F4FAFD` → white wash, no hard edges. Display headline in Ink `#0E1726` centered, controls stacked below. Depth comes from luminance and soft mesh tints, not borders.

## Do's and Don'ts
### Do
- Reserve Brilliant Blue `#0078D4` for actions and the mark — buttons, the promo strip, the AI gradient origin.
- Set headlines in Segoe UI Variable Display with −0.025em tracking; keep body at −0.03em. The tightness is the voice.
- Float everything on pale sky washes (`#F4FAFD`, `#DCEEF8`) rather than pure gray — the blue tint is the brand's warmth.
- Use Fluent elevation pairs (ambient + directional) for depth; let luminance carry the rest.
- Let the AI gradient (`#0078D4` → `#6DD1C1`) be the exclusive marker of Copilot/assistant surfaces.
- Keep the four-square logo colors as identity only — golden yellow `#FFB900` may badge, but the other squares never enter the UI palette.

### Don't
- Don't fill UI with Golden Yellow — it's the logo's fourth square and a badge accent, never a CTA or body color.
- Don't underline links by default or color them the same blue as buttons (`#0067B8` links vs `#0078D4` actions).
- Don't loosen heading tracking — Segoe at display size wants negative letter-spacing; positive tracking is reserved for uppercase eyebrows only.
- Don't add hard borders where a luminance step or soft shadow will do; the surface is calm.
- Don't introduce a second accent hue — the enormous Fluent ramp exists for products, but the marketing surface commits to one blue.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Base page. |
| 1 | Pale Sky | `#F4FAFD` | Lightest section wash, just off white. |
| 2 | Sky Wash | `#DCEEF8` | Hero tint, highlights, user chat bubbles. |
| 3 | Card | `#FEFEFE` | Product tiles and panels, lifted on Fluent shadow. |
| 4 | Neutral Fill | `#F2F2F2` / `#EBEBEB` | Utility button and skeleton backgrounds. |
| — | Dark Panel | `#0E1726` / `#030B0F` | Inverted surfaces — Store Assistant, dark hero washes. |

## Elevation
Depth is Fluent, not flat: every raised surface uses a **pair** of shadows — a tight ambient glow (`0 0 2px rgba(0,0,0,0.12)`) plus a directional drop that grows with height (`0 2px 4px` → `0 32px 64px rgba(0,0,0,0.14)`). Six discrete levels map to interaction weight — cards sit at 1–2, floating dialogs and the Store Assistant at 6. Acrylic/glass surfaces exist too (`blur(5rem)` over `rgba(255,255,255,0.05)`) for overlay chrome. On the marketing canvas, most separation is done by **luminance step** (pale-sky vs white) rather than lines — borders are a last resort.

## Imagery
The four-square logo is the whole identity — red/green/blue/yellow tiles beside the Segoe wordmark, echoed in the Windows 11 lockup. Photography is bright, optimistic, and product-forward: real hardware renders (Surface laptops shot at a lively three-quarter angle), colorful game-splash key art, and clusters of glossy app-icon tiles (Word, PowerPoint, Xbox Game Pass) floating on tinted sky-blue-to-white panels. The system carries a deep library of mesh and linear gradients (brilliant-blue, sky-blue, lavender, aqua-foam) for section backgrounds, but the hero itself stays near-white and lets the products supply the color.

## Layout
Full-bleed shell with a persistent 64px UHF global nav, an optional edge-to-edge promo banner, then a **centered, generously-spaced hero** — big display headline, segment toggle, AI query field, prompt chips, all stacked and center-aligned. Below, contained content sections alternate with full-bleed promo blocks whose backgrounds carry soft sky-blue → white gradients. Product tiles group into loose card clusters. The Store Assistant floats persistently bottom-right. Rhythm is comfortable (56px section gaps), never dense — the page breathes.

## Typography Voice
Two Segoe optical cuts do everything: **Display** for anything large (76px welcome headline down to 32px section heads), **Text** for 16px and below. The signature is the tracking discipline — every heading rides −0.025em and body rides a notably tight −0.03em, giving Segoe a compact, engineered confidence that reads as "system software, made human." The single inversion is the eyebrow: 12px, uppercase, weight 600, tracked **+0.08em** — a deliberate loosening that lets small caps breathe against the tight display type. Weights stay disciplined too: 400 for reading, 500 for display headings, 600 for labels and semibold subheads. Nothing italic except the occasional helper line; the personality is in the letter-spacing, not the letterforms.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (canvas) / `#F4FAFD` / `#DCEEF8` (sky washes)
- text: `#0E1726` (headings/ink) / `#17253D` (strong body) / `#262626` (nav) / `#616161` (muted)
- surface: `#FEFEFE` (card) / `#F2F2F2` (neutral fill) / `#0E1726` (dark panel)
- border: `#B3DAF0` (sky hairline) / `#E7E7E7` (neutral hairline)
- accent: `#FFB900` (golden yellow — badge/editorial only)
- primary action: `#0078D4` (Brilliant Blue — buttons, banner, mark) · links `#0067B8`
- AI signature: `linear-gradient(89.97deg, #0078D4, #6DD1C1)`

## Example Component Prompts
1. **Primary button**: 4px-radius button, fill `#0078D4`, white text in Segoe UI Variable Text 15px/600, letter-spacing −0.02em, padding 12px 24px; hover `#006dc1`, active `#004275`.
2. **Segment toggle**: pill container (200px radius) on white with a 1px `#E7E7E7` border; active segment a solid `#0E1726` pill with white text, inactive `#2A446F` text on transparent — both 15px/600, generous horizontal padding.
3. **AI query field**: transparent Fluent input, 16px Segoe text `#17253D`, placeholder `#616161`, no box border, a full-width bottom underline using `linear-gradient(89.97deg,#0078D4,#6DD1C1)`, trailing send glyph.
4. **Product promo card**: white `#FEFEFE` card, 8px radius, shadow `0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)`, 1px `#E7E7E7` edge, set on a `#DCEEF8`→`#FFFFFF` gradient panel; display heading `#0E1726` 40px/500 tracking −0.025em.
5. **Suggestion chip**: pill (200px radius), white fill, 1px `#B3DAF0` border, `#2A446F` text 14px/400, no shadow.

## Similar Brands
- **Microsoft Fluent 2 (self)** — this *is* the Fluent design language rendered for marketing: tonal ramps, acrylic depth, and Segoe optical sizing.
- **Atlassian** — kindred friendly-enterprise system: one confident blue, humane sans, restraint over decoration.
- **IBM Carbon** — the same systematized, ramp-driven rigor beneath a calm, trust-first surface.
- **GitHub Primer** — Microsoft-adjacent restraint: neutral ink, a single accent, luminance-led depth.
- **Google Material** — a shared philosophy of enormous machine-generated tonal palettes curated down to a few load-bearing roles.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — core accent */
  --color-brilliant-blue: #0078D4;   /* primary action, banner, mark */
  --color-brilliant-blue-hover: #006dc1;
  --color-brilliant-blue-pressed: #004275;
  --color-brilliant-blue-700: #005597;
  --color-link: #0067B8;             /* text links */
  --color-deep-blue: #004275;
  /* Colors — ink */
  --color-ink: #0E1726;              /* headings / display */
  --color-ink-strong: #17253D;       /* strong body */
  --color-slate: #2A446F;            /* subtle accent text */
  --color-neutral-ink: #262626;      /* nav / utility */
  --color-muted: #616161;            /* placeholder / meta */
  --color-blue-black: #030B0F;       /* deepest ink / dark panel */
  /* Colors — warm accent */
  --color-golden-yellow: #FFB900;    /* badge / editorial only */
  /* Colors — surfaces */
  --color-canvas: #FFFFFF;
  --color-card: #FEFEFE;
  --color-pale-sky: #F4FAFD;
  --color-sky-wash: #DCEEF8;
  --color-sky-200: #CBE6F4;
  --color-neutral-fill: #F2F2F2;
  --color-neutral-fill-2: #EBEBEB;
  /* Colors — borders */
  --color-sky-border: #B3DAF0;
  --color-hairline: #E7E7E7;
  --color-hairline-warm: #E1DFDD;
  --color-card-border: #DEDDDF;
  /* Signature gradient */
  --gradient-ai: linear-gradient(89.97deg, #0078D4 0.03%, #6DD1C1 99.97%);
  --gradient-sky: linear-gradient(180deg, #F4FAFD 0%, #FFFFFF 100%);

  /* Typography — Families */
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Typography — Scale */
  --text-display-3xl: 4.75rem;  --leading-display-3xl: 5.125rem; /* -0.025em */
  --text-display-2xl: 3.5rem;   --leading-display-2xl: 3.875rem;
  --text-heading-xl: 3rem;      --leading-heading-xl: 3.5rem;
  --text-heading-l: 2.5rem;     --leading-heading-l: 3rem;
  --text-heading-m: 2rem;       --leading-heading-m: 2.5rem;
  --text-heading-s: 1.5rem;     --leading-heading-s: 2rem;    /* -0.015em */
  --text-heading-xs: 1.25rem;   --leading-heading-xs: 1.75rem; /* -0.01em */
  --text-subheading: 1.125rem;  --leading-subheading: 1.5rem;  /* w600 */
  --text-body: 1rem;            --leading-body: 1.5rem;        /* -0.03em */
  --text-body-s: 0.875rem;      --leading-body-s: 1.25rem;
  --text-action: 0.9375rem;     --leading-action: 1.375rem;    /* -0.02em w600 */
  --text-eyebrow: 0.75rem;      --leading-eyebrow: 1rem;       /* +0.08em uppercase w600 */
  /* Letter spacing */
  --tracking-heading: -0.025em;
  --tracking-body: -0.03em;
  --tracking-action: -0.02em;
  --tracking-eyebrow: 0.08em;
  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing (4px base) */
  --spacing-3xs: 0.125rem; /* 2px */
  --spacing-2xs: 0.25rem;  /* 4px */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-s: 0.75rem;    /* 12px */
  --spacing-l: 1rem;       /* 16px */
  --spacing-xl: 1.5rem;    /* 24px */
  --spacing-2xl: 2rem;     /* 32px */
  --spacing-3xl: 3rem;     /* 48px */
  --spacing-4xl: 3.5rem;   /* 56px */
  --card-padding-default: 1rem;
  --card-padding-comfortable: 1.5rem;
  --card-padding-relaxed: 2rem;

  /* Border Radius */
  --radius-xs: 0.25rem;   /* 4px buttons */
  --radius-s: 0.5rem;     /* 8px cards */
  --radius-l: 1rem;       /* 16px panels */
  --radius-pill: 200px;   /* toggles / chips */
  --radius-circle: 50%;

  /* Elevation (Fluent ambient + directional pairs) */
  --elevation-1: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.063rem 0.125rem rgba(0,0,0,0.14);
  --elevation-2: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.125rem 0.25rem rgba(0,0,0,0.14);
  --elevation-3: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.25rem 0.5rem rgba(0,0,0,0.14);
  --elevation-4: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.5rem 1rem rgba(0,0,0,0.14);
  --elevation-6: 0 0 0.5rem rgba(0,0,0,0.12), 0 2rem 4rem rgba(0,0,0,0.14);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-brilliant-blue: #0078D4;
  --color-brilliant-blue-hover: #006dc1;
  --color-brilliant-blue-pressed: #004275;
  --color-link: #0067B8;
  --color-deep-blue: #004275;
  --color-ink: #0E1726;
  --color-ink-strong: #17253D;
  --color-slate: #2A446F;
  --color-neutral-ink: #262626;
  --color-muted: #616161;
  --color-blue-black: #030B0F;
  --color-golden-yellow: #FFB900;
  --color-canvas: #FFFFFF;
  --color-card: #FEFEFE;
  --color-pale-sky: #F4FAFD;
  --color-sky-wash: #DCEEF8;
  --color-sky-200: #CBE6F4;
  --color-neutral-fill: #F2F2F2;
  --color-neutral-fill-2: #EBEBEB;
  --color-sky-border: #B3DAF0;
  --color-hairline: #E7E7E7;
  --color-hairline-warm: #E1DFDD;
  --color-card-border: #DEDDDF;

  /* Fonts */
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-text: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale */
  --text-display-3xl: 4.75rem;
  --text-display-2xl: 3.5rem;
  --text-heading-xl: 3rem;
  --text-heading-l: 2.5rem;
  --text-heading-m: 2rem;
  --text-heading-s: 1.5rem;
  --text-heading-xs: 1.25rem;
  --text-subheading: 1.125rem;
  --text-body: 1rem;
  --text-body-s: 0.875rem;
  --text-action: 0.9375rem;
  --text-eyebrow: 0.75rem;
  --tracking-heading: -0.025em;
  --tracking-body: -0.03em;
  --tracking-action: -0.02em;
  --tracking-eyebrow: 0.08em;

  /* Spacing */
  --spacing-3xs: 0.125rem;
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-l: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 3.5rem;

  /* Radius */
  --radius-xs: 0.25rem;
  --radius-s: 0.5rem;
  --radius-l: 1rem;
  --radius-pill: 200px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-elevation-1: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.063rem 0.125rem rgba(0,0,0,0.14);
  --shadow-elevation-2: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.125rem 0.25rem rgba(0,0,0,0.14);
  --shadow-elevation-3: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.25rem 0.5rem rgba(0,0,0,0.14);
  --shadow-elevation-4: 0 0 0.125rem rgba(0,0,0,0.12), 0 0.5rem 1rem rgba(0,0,0,0.14);
  --shadow-elevation-6: 0 0 0.5rem rgba(0,0,0,0.12), 0 2rem 4rem rgba(0,0,0,0.14);
}
```