---
version: alpha
name: Google Antigravity
description: "Google-grey whitespace, an ink-black pill CTA, one gravity-well logo the only color."
colors:
  on-surface-variant: "#5F6368"
  on-surface: "#121317"
  surface: "#f8f9fc"
  outline: "#e6eaf0"
  primary: "#1A73E8"
  pure-black: "#000000"
  outline-2: "#212226"
  slate-1100: "#18191d"
  graphite-900: "#2f3034"
  grey-800: "#45474d"
  disabled: "#6a6a71"
  cool-grey-400: "#b7bfd9"
  grey-100: "#e1e6ec"
  container-high: "#eff2f7"
  white: "#FFFFFF"
  blue-600: "#3279f9"
typography:
  caption:
    fontFamily: Google Sans Flex
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 15.5px
    letterSpacing: 0.11px
  small:
    fontFamily: Google Sans Flex
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 21.02px
    letterSpacing: 0.16px
  body:
    fontFamily: Google Sans Flex
    fontSize: 17.5px
    fontWeight: 400
    lineHeight: 25.38px
    letterSpacing: 0.18px
  medium:
    fontFamily: Google Sans Flex
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: -0.05px
  large:
    fontFamily: Google Sans Flex
    fontSize: 22px
    fontWeight: 400
    lineHeight: 24.64px
    letterSpacing: -0.08px
  title:
    fontFamily: Google Sans Flex
    fontSize: 24px
    fontWeight: 400
    lineHeight: 25.92px
    letterSpacing: -0.07px
  heading:
    fontFamily: Google Sans Flex
    fontSize: 28px
    fontWeight: 400
    lineHeight: 30.24px
    letterSpacing: -0.10px
  heading-2:
    fontFamily: Google Sans Flex
    fontSize: 32px
    fontWeight: 400
    lineHeight: 33.92px
    letterSpacing: -0.15px
  subhead:
    fontFamily: Google Sans Flex
    fontSize: 42px
    fontWeight: 400
    lineHeight: 43.68px
    letterSpacing: -0.73px
  display:
    fontFamily: Google Sans
    fontSize: 54px
    fontWeight: 450
    lineHeight: 56.16px
    letterSpacing: -0.95px
  display-2:
    fontFamily: Google Sans
    fontSize: 72px
    fontWeight: 450
    lineHeight: 72px
    letterSpacing: -1.44px
  hero:
    fontFamily: Google Sans
    fontSize: 107px
    fontWeight: 450
    lineHeight: 107px
    letterSpacing: -2.14px
  display-3:
    fontFamily: Google Sans
    fontSize: 124px
    fontWeight: 450
    lineHeight: 121.52px
    letterSpacing: -2.48px
  display-4:
    fontFamily: Google Sans
    fontSize: 148px
    fontWeight: 450
    lineHeight: 145.04px
    letterSpacing: -2.96px
rounded:
  chips-hairline-detail: 4px
  small-controls: 8px
  cards-inputs: 16px
  panels: 24px
  large-panels: 36px
  hero-cards: 48px
  pills-buttons: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 36px
  2xl: 48px
  3xl: 60px
  4xl: 80px
  5xl: 88px
  6xl: 120px
  7xl: 180px
---
# Google Antigravity — Style Reference
> Google-grey whitespace, an ink-black pill CTA, one gravity-well logo the only color.

**Theme:** light

Antigravity is Google's most disciplined kind of restraint: an almost-monochrome greyscale built as a Material-3 tonal ramp (`--palette-grey-0` through `--palette-grey-1200`), floated on near-white canvas with acres of negative space. The one signature move is inverted from Google's own habit — the primary call-to-action is an **ink-black pill (#121317), not Google Blue** — so #1A73E8 survives only as a link and one alternate button, the lone chroma in an otherwise achromatic UI (the multi-color "gravity-well" logo blob is the exception that proves it). Typography is pure Google Sans: the variable Google Sans Flex for text and a genuinely enormous display range — the hero runs at a 107px landing-text token, the scale climbs to 148px — tightly tracked into the negative (letter-spacing down to -2.96px). Everything is full-rounded (`9999px` pills) or generously soft-cornered (36–48px), on a strict 4px grid with a 72px page margin and a 12-column, 64px-gutter frame. The result reads as engineered calm: white, quiet, and confident enough to make one black pill do all the work.

## Tokens — Colors

Antigravity ships a full machine-generated Material-3 grey ramp (`--palette-grey-*`) plus a single blue. The table features the identity + load-bearing roles; the complete token set is reproduced faithfully in Quick Start.

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#121317` | `--palette-grey-1200` | Primary text, headings, and the ink-black CTA fill — the darkest brand ink and the hero's whole voice. |
| Pure Black | `#000000` | `--color-black` | Deepest reserved surface; used sparingly, ink (#121317) does most "black" work. |
| Outline | `#212226` | `--palette-grey-1000` | Base for hairline borders and `--theme-outline` (applied at 12% alpha, never solid). |
| Slate 1100 | `#18191d` | `--palette-grey-1100` | Focused-link ink; one shade below primary. |
| Graphite 900 | `#2f3034` | `--palette-grey-900` | Primary-button hover state only. |
| Grey 800 | `#45474d` | `--palette-grey-800` | Secondary / body text (`on-surface-variant`) and the ghost-button label. |
| Google Grey | `#5F6368` | `--color-grey-600` | Muted UI text, the classic Google supporting grey. |
| Disabled | `#6a6a71` | `--theme-text-link-states-disabled` | Disabled link and button labels — the only "off" grey. |
| Cool Grey 400 | `#b7bfd9` | `--palette-grey-400` | Periwinkle-cool tint base for nav-button fills (used at ~9–20% alpha). |
| Grey 100 | `#e1e6ec` | `--palette-grey-100` | Highest surface-container step. |
| Line 50 | `#e6eaf0` | `--palette-grey-50` | Default border and divider — the workhorse hairline. |
| Container High | `#eff2f7` | `--palette-grey-20` | Raised surface container (`surface-container-high`). |
| Canvas Tint | `#f8f9fc` | `--palette-grey-10` | Page-level container tint and disabled-button ground; the faint off-white beneath sections. |
| White | `#FFFFFF` | `--palette-grey-0` | True canvas and on-ink text. |
| Google Blue | `#1A73E8` | `--color-blue` | Links and one filled-blue button variant — the **only** chroma in the interface; never the hero CTA. |
| Blue 600 | `#3279f9` | `--palette-blue-600` | Brighter blue accent token, held in reserve. |

## Tokens — Typography

### Google Sans Flex — the text face: variable, oblique-capable, carries all body, nav, and CTA copy · `--font-sans`
- **Substitute:** Google Sans, Roboto Flex, Inter, system-ui
- **Weights:** 300, 400, 450, 500 (a true variable axis; 450 is the house "medium-light" default)
- **Sizes:** 12.5px, 14.5px, 16px, 17.5px, 18px (body/CTA/nav band)
- **Line height:** 1.24 (sm) → 1.45 (base 25.38/17.5)
- **Letter spacing:** slightly positive at text sizes (+.11px xs, +.16px sm, +.18px base) — opens the small copy
- **Role:** Body, navigation, buttons, and labels; a variable font with a live oblique axis (loaded 0°–10°) for subtle emphasis without a separate italic.

### Google Sans — display + wordmark: the headline and logo lockup face · `--font-display`
- **Substitute:** Google Sans Flex, Product Sans, Poppins
- **Weights:** 450 (headings render at the 450 "book-medium" weight)
- **Sizes:** display ramp 42, 54, 72, 80, 98, 124, 148px; hero landing token 107px
- **Line height:** ~1.0 at display (107/107, 148/145, 72/72) — set solid, no leading
- **Letter spacing:** aggressively negative — -.73px (42px) tightening to -2.14px (107px hero) and -2.96px (148px)
- **Role:** Hero headline ("Experience liftoff…") and the "Google Antigravity" wordmark; huge, tightly tracked, ink-black.

### Google Sans Code — monospace: terminal + code affordances · `--font-mono`
- **Substitute:** Google Sans Mono, JetBrains Mono, ui-monospace
- **Weights:** 400 (normal and italic loaded)
- **Role:** Code, and the terminal glyph on the "Download for Linux" CTA — signals the developer/agent context.

*(Google Symbols 300 is the icon font, not a text face.)*

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption (xs) | 12.5px | 15.5px | +.11px | `--text-xs` |
| Small (sm) | 14.5px | 21.02px | +.16px | `--text-sm` |
| Body (base) | 17.5px | 25.38px | +.18px | `--text-base` |
| Medium (md) | 20px | 26px | -.05px | `--text-md` |
| Large (lg) | 22px | 24.64px | -.08px | `--text-lg` |
| Title (xl) | 24px | 25.92px | -.07px | `--text-xl` |
| Heading (2xl) | 28px | 30.24px | -.10px | `--text-2xl` |
| Heading (3xl) | 32px | 33.92px | -.15px | `--text-3xl` |
| Subhead (4xl) | 42px | 43.68px | -.73px | `--text-4xl` |
| Display (5xl) | 54px | 56.16px | -.95px | `--text-5xl` |
| Display (6xl) | 72px | 72px | -1.44px | `--text-6xl` |
| Hero (landing) | 107px | 107px | -2.14px | `--landing-main-text` |
| Display (8xl) | 124px | 121.52px | -2.48px | `--text-8xl` |
| Display (9xl) | 148px | 145.04px | -2.96px | `--text-9xl` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (spacious — the layout breathes on whitespace)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--space-xs` |
| sm | 8px | `--space-sm` |
| md | 16px | `--space-md` |
| lg | 24px | `--space-lg` |
| xl | 36px | `--space-xl` |
| 2xl | 48px | `--space-2xl` |
| 3xl | 60px | `--space-3xl` |
| 4xl | 80px | `--space-4xl` |
| 5xl | 88px | `--space-5xl` |
| 6xl | 120px | `--space-6xl` |
| 7xl | 180px | `--space-7xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Chips / hairline detail (`--shape-corner-xs`) | 4px |
| Small controls (`--shape-corner-sm`) | 8px |
| Cards / inputs (`--shape-corner-md`) | 16px |
| Panels (`--shape-corner-lg`) | 24px |
| Large panels (`--shape-corner-xl`) | 36px |
| Hero cards (`--shape-corner-2xl`) | 48px |
| Pills / buttons (`--shape-corner-rounded`) | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Material elevation | `rgba(60, 64, 67, 0.3) 0px 2px 3px 0px, rgba(60, 64, 67, 0.15) 0px 6px 10px 4px` | `--shadow-elevated` |

### Layout
- **Page max-width:** 1600px (`--breakpoint-xl` / `--breakpoint-max`)
- **Page margin:** 72px (`--page-margin`)
- **Grid:** 12 columns, 64px gutter (56px small) (`--grid-columns` / `--grid-gutter`)
- **Nav height:** 52px (`--nav-height`)
- **Section gap:** 88–120px (`--space-5xl`–`--space-6xl`), up to 180px between major zones
- **Breakpoints:** 425 / 767 / 1024 / 1440 / 1600px (xs–xl)

## Components

### Primary Button (Ink Pill)
**Role:** The main CTA — "Download for Linux" in the hero, "Download" in the nav.
Ink fill `#121317`, white text, fully rounded `9999px`. Nav size: `6px 8px 6px 16px` padding, 14.5px / weight 450, often carrying a leading terminal glyph. Hero size: `10px 24px`, 17.5px / 450. Hover shifts to Graphite 900 `#2f3034`. This is the signature inversion — black, never blue.

### Secondary Button (Ghost Pill)
**Role:** The lower-priority companion — "Explore use cases" beside the hero CTA.
Transparent fill, `#45474d` label, `9999px` radius, `6px 16px` padding, 14.5px / 450. Backed by a whisper-faint cool tint (`--theme-nav-button`: `#b7bfd9` at ~9% alpha) that lifts on hover to ~20%. No border, no shadow — separation is by shape and label weight alone.

### Blue Button (Alternate CTA)
**Role:** A filled-blue action variant used where the accent is warranted in-page.
Google Blue `#1A73E8` fill, white text, `48px` radius (soft rectangle, not a full pill), `12px 24px` padding, 16px / weight 500. The one place chroma becomes a button — used deliberately, not as the default.

### Navigation Bar
**Role:** Top-level wayfinding — Products, Use Cases, Pricing, Blog, Resources.
52px tall, transparent over white canvas. Left: the multi-color "A" gravity-well mark + "Google Antigravity" wordmark in Google Sans. Center: text links in `#45474d` (14.5px / 450) with dropdown carets. Right: the ink "Download" pill. No bottom border in the hero state — the nav floats.

### Text Link
**Role:** Inline navigation and in-copy actions.
Google Blue `#1A73E8` at 18px / 400 for standalone links; body links resolve through `on-surface-variant` `#45474d` with hover → `#212226`, focus → `#18191d`, disabled → `#6a6a71`. Blue is the link color of record — the only sanctioned chroma in running text.

### Hero Headline
**Role:** The single dominant statement — "Experience liftoff with the next-gen agent platform."
Google Sans at the 80–107px display range, weight 450, ink `#121317`, line-height set solid (1.0), letter-spacing crushed to -2.14px. Centered, with the wordmark lockup floating above it. The type IS the hero — no imagery, no gradient behind it.

### Card / Surface Container
**Role:** Content grouping on the light canvas.
Radius `16px` (`--shape-corner-md`) up to `48px` for hero cards. Ground steps up through the container ramp — Canvas Tint `#f8f9fc` → Container High `#eff2f7` → `#e1e6ec` — rather than by shadow. Borders, when present, are `#e6eaf0` hairlines.

### Chip / Tag
**Role:** Compact metadata and filters.
Small radius `4px`–`8px`, 12.5–14.5px label, cool-grey tint fill. Reads as quiet structure, never as an accent.

### Input Field
**Role:** Form entry (search, sign-up).
`16px` radius, `#e6eaf0` border, white fill, 16px body text. Focus lifts the border toward `#212226`. Restrained — no fill color, no glow.

### Divider
**Role:** Section and list separation.
A single 1px line at `--theme-outline-outline-variant` (`#212226` at 6% alpha → `#2122260f`) or solid `#e6eaf0`. Depth is a luminance whisper, not a rule you notice.

### Icon
**Role:** Functional glyphs — terminal, carets, feature marks.
Google Symbols weight 300, sized on the icon scale (18 / 24 / 36px common). Line-weight light to match the airy type; monochrome, inheriting text color.

### Logo Lockup
**Role:** Brand signature.
The "A" is a soft blurred gravity-well of overlapping color blobs (blue, yellow, red, green — Google's spectrum, rendered as diffuse light) set beside "Google Antigravity" in Google Sans. It is the single deliberate burst of color in the entire system.

## Do's and Don'ts

### Do
- Make the primary CTA an ink pill (`#121317`, `9999px`), not blue — this is the identity.
- Set headlines huge (80–148px), weight 450, and crush the tracking negative (-2px+).
- Build depth from the grey container ramp (`#f8f9fc` → `#eff2f7` → `#e1e6ec`), not shadows.
- Let whitespace carry the layout — 72px margins, 88–180px section gaps.
- Keep borders to faint `#e6eaf0` hairlines; keep alpha overlays under 24%.
- Reserve Google Blue `#1A73E8` for links and the one deliberate accent button.

### Don't
- Don't turn the hero CTA blue — blue is a link color here, not the main action.
- Don't add a second accent hue; the palette is achromatic except for one blue and the logo.
- Don't use hard drop shadows to separate cards — step the surface luminance instead.
- Don't set display type loose — solid line-height and tight tracking are the whole voice.
- Don't box the nav in a border in the hero state; let it float on white.
- Don't crowd the grid — the 12-column / 64px-gutter frame is meant to breathe.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | True page background and card ground. |
| 1 | Canvas Tint | `#f8f9fc` | Faint section tint, disabled ground (`surface-container`). |
| 2 | Container High | `#eff2f7` | Raised container (`surface-container-high`). |
| 3 | Container Higher | `#e6eaf0` | Higher container / strong border (`surface-container-higher`). |
| 4 | Container Highest | `#e1e6ec` | Deepest light container step. |
| Inverse | Inverse Surface | `#121317` | Ink panels and the primary pill; white text sits on it. |

## Elevation
Depth is conveyed almost entirely by **luminance stepping**, not shadow. The grey container ramp climbs `#FFFFFF` → `#f8f9fc` → `#eff2f7` → `#e6eaf0` → `#e1e6ec`, so a raised surface is simply a half-step darker off-white. Borders are the secondary cue — 1px hairlines at `#e6eaf0` or ultra-low-alpha outline (`#2122260f`, `#e6eaf00f`). A single Material drop shadow (`rgba(60,64,67,.3) 0 2px 3px, rgba(60,64,67,.15) 0 6px 10px 4px`) exists for genuinely floating overlays like menus, but the flat surfaces of the page avoid it entirely.

## Imagery
The hero is **type-only** — no photography, no illustration, no gradient wash behind the headline. The single visual flourish is the logo's blurred multi-color "gravity-well" blob (Google's spectrum rendered as soft, overlapping light). Iconography is line-light Google Symbols. The direction is deliberate: an agent/developer platform that lets whitespace and one enormous headline do the persuading, with color rationed to a single mark.

## Layout
Contained to a 1600px max-width with a firm 72px page margin and a 12-column, 64px-gutter grid. The hero is vertically centered in a tall, near-empty viewport: floating nav (52px, transparent) at top, wordmark lockup mid-page, a two-line 107px headline, then the CTA pair — everything stacked and centered on white. Section rhythm is generous (88–180px vertical gaps). Navigation is a floating top bar with dropdown menus (Products, Use Cases, Resources) and a persistent ink "Download" pill anchored right.

## Typography Signature
Antigravity runs Google Sans in two registers off one family. **Display mode** is the shout: 80–148px, weight 450, line-height set dead-solid (1.0), tracking hauled deep negative (-2.14px at the 107px hero, -2.96px at 148px) so the giant words knit into a single dense block. **Text mode** is the whisper: Google Sans Flex at 14.5–18px with *positive* tracking (+.11 to +.18px) and 1.45 line-height to open the small copy for reading. The move that makes it work is the inversion between the two — huge/tight/solid for impact, small/loose/airy for calm — plus the variable font's live oblique axis (0°–10°) giving emphasis without ever switching to a separate italic cut.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF` (tint `#f8f9fc`) / text: `#121317` (secondary `#45474d`) / surface: `#eff2f7` / border: `#e6eaf0` / accent: `#1A73E8` (links + one alt button) / primary action: `#121317` ink pill (NOT blue)

## Example Component Prompts
1. **Ink CTA pill**: Fully rounded (`9999px`) button, fill `#121317`, white text, Google Sans Flex 14.5px weight 450, padding `6px 8px 6px 16px`, optional leading terminal glyph; hover fill `#2f3034`. No border, no shadow.
2. **Hero headline block**: Centered Google Sans headline at 107px, weight 450, color `#121317`, line-height 1.0, letter-spacing -2.14px, max ~2 lines, on pure white with 72px page margins and a wordmark lockup floating above.
3. **Ghost secondary button**: Transparent pill (`9999px`), label `#45474d` at 14.5px/450, padding `6px 16px`, faint cool-grey hover tint (`#b7bfd9` at ~12% alpha), placed immediately right of the ink CTA.
4. **Floating nav bar**: 52px tall, transparent over white, left = multi-color gravity-well "A" + "Google Antigravity" wordmark, center = `#45474d` text links with dropdown carets, right = ink `#121317` "Download" pill. No bottom border.
5. **Surface card**: `16px` radius, background `#f8f9fc` stepped over white canvas, optional `#e6eaf0` hairline border, no drop shadow; depth via luminance only. Body copy Google Sans Flex 17.5px, `#45474d`.

## Similar Brands
- **Google (Gemini / Search)** — the same Material-3 grey ramp, Google Sans, and airy light restraint, minus Google's usual blue-button reflex.
- **Linear** — kindred in near-monochrome discipline and enormous, tightly-tracked display type on generous whitespace.
- **Vercel** — shares the black-and-white-plus-one-accent stance and the ink-pill CTA over a clean canvas.
- **Raycast** — similar developer-tool calm: soft-rounded surfaces, restrained greys, and a single deliberate spark of color.
- **Arc (The Browser Company)** — parallel taste for a diffuse multi-color brand blob against an otherwise quiet, achromatic UI.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors — Grey ramp (Material-3 tonal) */
  --palette-grey-0: #ffffff;
  --palette-grey-10: #f8f9fc;
  --palette-grey-15: #f0f1f5;
  --palette-grey-20: #eff2f7;
  --palette-grey-50: #e6eaf0;
  --palette-grey-100: #e1e6ec;
  --palette-grey-200: #cdd4dc;
  --palette-grey-300: #b2bbc5;
  --palette-grey-400: #b7bfd9;
  --palette-grey-800: #45474d;
  --palette-grey-900: #2f3034;
  --palette-grey-1000: #212226;
  --palette-grey-1100: #18191d;
  --palette-grey-1200: #121317;
  --palette-black: #000000;
  /* Colors — alpha / derived */
  --palette-grey-600: #aab1cc4d;      /* cool tint @ 30% */
  --palette-grey-1000-12: #dedfe2;
  --palette-grey-50-20: #414347;
  --theme-outline: #2122260f;         /* outline @ 6% */
  --theme-inverse-outline: #e6eaf00f; /* inverse outline @ 6% */
  /* Colors — text */
  --color-ink: #121317;
  --color-text-secondary: #45474d;
  --color-grey-600: #5f6368;
  --color-text-disabled: #6a6a71;
  /* Colors — accent (the only chroma) */
  --color-blue: #1a73e8;
  --palette-blue-600: #3279f9;
  --color-link-ink: #202124;

  /* Typography — Families */
  --font-sans: 'Google Sans Flex', 'Google Sans', Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Google Sans', 'Google Sans Flex', Poppins, ui-sans-serif, sans-serif;
  --font-mono: 'Google Sans Code', ui-monospace, 'JetBrains Mono', monospace;
  /* Typography — Scale */
  --text-xs: 12.5px;   --leading-xs: 15.5px;
  --text-sm: 14.5px;   --leading-sm: 21.02px;
  --text-base: 17.5px; --leading-base: 25.38px;
  --text-md: 20px;     --leading-md: 26px;
  --text-lg: 22px;     --leading-lg: 24.64px;
  --text-xl: 24px;     --leading-xl: 25.92px;
  --text-2xl: 28px;    --leading-2xl: 30.24px;
  --text-3xl: 32px;    --leading-3xl: 33.92px;
  --text-4xl: 42px;    --leading-4xl: 43.68px;
  --text-5xl: 54px;    --leading-5xl: 56.16px;
  --text-6xl: 72px;    --leading-6xl: 72px;
  --text-7xl: 98px;    --leading-7xl: 82.04px;
  --landing-main-text: 107px; --landing-main-line-height: 107px; --landing-main-letter-spacing: -2.14px;
  --text-8xl: 124px;   --leading-8xl: 121.52px;
  --text-9xl: 148px;   --leading-9xl: 145.04px;

  /* Spacing */
  --space-xs: 4px;   --space-sm: 8px;   --space-md: 16px;  --space-lg: 24px;
  --space-xl: 36px;  --space-2xl: 48px; --space-3xl: 60px; --space-4xl: 80px;
  --space-5xl: 88px; --space-6xl: 120px; --space-7xl: 180px;
  --page-margin: 72px; --grid-gutter: 64px; --grid-columns: 12; --nav-height: 52px;

  /* Border Radius */
  --shape-corner-xs: 4px;   --shape-corner-sm: 8px;   --shape-corner-md: 16px;
  --shape-corner-lg: 24px;  --shape-corner-xl: 36px;  --shape-corner-2xl: 48px;
  --shape-corner-rounded: 9999px;

  /* Shadow (overlays only) */
  --shadow-elevated: rgba(60, 64, 67, 0.3) 0px 2px 3px 0px, rgba(60, 64, 67, 0.15) 0px 6px 10px 4px;
}
```

### Tailwind v4
```css
@theme {
  /* Colors — Grey ramp */
  --color-grey-0: #ffffff;
  --color-grey-10: #f8f9fc;
  --color-grey-15: #f0f1f5;
  --color-grey-20: #eff2f7;
  --color-grey-50: #e6eaf0;
  --color-grey-100: #e1e6ec;
  --color-grey-200: #cdd4dc;
  --color-grey-300: #b2bbc5;
  --color-grey-400: #b7bfd9;
  --color-grey-800: #45474d;
  --color-grey-900: #2f3034;
  --color-grey-1000: #212226;
  --color-grey-1100: #18191d;
  --color-ink: #121317;
  --color-black: #000000;
  /* Colors — text + accent */
  --color-text-secondary: #45474d;
  --color-grey-600: #5f6368;
  --color-text-disabled: #6a6a71;
  --color-link-ink: #202124;
  --color-blue: #1a73e8;
  --color-blue-600: #3279f9;

  /* Typography — Families */
  --font-sans: 'Google Sans Flex', 'Google Sans', Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Google Sans', 'Google Sans Flex', Poppins, ui-sans-serif, sans-serif;
  --font-mono: 'Google Sans Code', ui-monospace, 'JetBrains Mono', monospace;
  /* Typography — Scale */
  --text-xs: 12.5px;   --text-sm: 14.5px;  --text-base: 17.5px; --text-md: 20px;
  --text-lg: 22px;     --text-xl: 24px;    --text-2xl: 28px;    --text-3xl: 32px;
  --text-4xl: 42px;    --text-5xl: 54px;   --text-6xl: 72px;    --text-7xl: 98px;
  --text-hero: 107px;  --text-8xl: 124px;  --text-9xl: 148px;

  /* Spacing */
  --spacing-xs: 4px;   --spacing-sm: 8px;   --spacing-md: 16px;  --spacing-lg: 24px;
  --spacing-xl: 36px;  --spacing-2xl: 48px; --spacing-3xl: 60px; --spacing-4xl: 80px;
  --spacing-5xl: 88px; --spacing-6xl: 120px; --spacing-7xl: 180px;
  --spacing-page-margin: 72px; --spacing-gutter: 64px; --spacing-nav: 52px;

  /* Border Radius */
  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 16px;  --radius-lg: 24px;
  --radius-xl: 36px; --radius-2xl: 48px; --radius-full: 9999px;

  /* Shadow */
  --shadow-elevated: 0px 2px 3px 0px rgba(60, 64, 67, 0.3), 0px 6px 10px 4px rgba(60, 64, 67, 0.15);
}
```