---
version: alpha
name: Emergent
description: "Finished apps drift weightless at the edges of a white void; one idea stands center."
colors:
  on-surface-variant: "#666666"
  on-surface: "#050505"
  surface: "#FFFFFF"
  error: "#EF4343"
  secondary: "#F6F5F4"
  primary: "#1463FF"
  muted: "#EBEBEB"
  muted-hover: "#D9D9D9"
  hairline: "#E5E3E1"
  slate-border: "#6B7280"
  grey: "#808080"
  charcoal: "#252528"
  ring-grey: "#2E2E33"
  primary-ink: "#0E0E0E"
  black: "#000000"
  accent-cyan: "#80FFFF"
  accent-green: "#80FF99"
typography:
  caption-legal:
    fontFamily: Ndot
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small-ui-label:
    fontFamily: Ndot
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Ndot
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-lg-buttons:
    fontFamily: Ndot
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Ndot
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  subheading:
    fontFamily: Ndot
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Ndot
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0em
  display:
    fontFamily: Ndot
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
rounded:
  tags-fine-chrome: 4px
  micro-controls: 5px
  small-controls: 8px
  cards-mockup-frames: 12px
  panels: 20px
  large-auth-buttons: 28px
  pills-ctas: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  4xl: 40px
---
# Emergent — Style Reference
> Finished apps drift weightless at the edges of a white void; one idea stands center.

**Theme:** light

Emergent's auth page is a white room staged like a product launch. The canvas is pure `#FFFFFF` washed with a faint radial glow, and everything the platform can build — dashboards, phones, tablets — floats tilted at the margins under one deep soft shadow, fading into the void before it can compete with the center. All real UI is monochrome: black ink, a ladder of greys (`#666666`, `#808080`, `#EBEBEB`), a charcoal `#252528` Google pill — color is permitted exactly once, in the sky-blue auth gradient (`#4e9bee → #57d5fe → #3489fe`) painted across the second headline line, so the promise "Build websites & apps with AI" is literally the only colored sentence on the page. Type is a trio with strict jobs: Brockmann for the headline lockup at 36px/600, Inter for every control and footnote, and Ndot — a dot-matrix face — scattered as a barely-there glyph field across the background, machine static behind human intent. The quirk that defines the system: the shadcn `--primary` token is *white* — commitment is carried instead by hard black and charcoal pills, and even the focus ring (`--ring: #2E2E33`) is dark grey, never blue. Restraint is total; the mockups do the selling.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| White | `#FFFFFF` | `--color-white` | Canvas, card, popover — and, unusually, the `--primary` token itself (`0 0% 100%`). The resting state of the entire system is white. |
| Secondary Warm | `#F6F5F4` | `--color-secondary` | The source `--secondary` (`36 9% 96%`) — the one warm-tinted surface, a whisper off white for secondary panels. |
| Muted | `#EBEBEB` | `--color-muted` | The source `--muted` / `--auth-surface` / header login pill — the workhorse grey fill: the Continue-with-Email pill, chips, and quiet controls. |
| Muted Hover | `#D9D9D9` | `--color-muted-hover` | The source `--muted-hover` (`0 0% 85%`) — the single hover step for muted fills; interaction darkens, never colors. |
| Hairline | `#E5E3E1` | `--color-border` | The source `--border` (`30 7% 89%`) — a warm hairline, so faint the page reads borderless. |
| Slate Border | `#6B7280` | `--color-slate-border` | Observed secondary border grey (Tailwind gray-500) on utility strokes — presence without weight. |
| Grey | `#808080` | `--color-grey-500` | Mid-grey text observed in the render — tertiary labels and de-emphasized pill labels. |
| Quiet Ink | `#666666` | `--color-grey-600` | The source `--muted-foreground` / `--auth-muted` (`0 0% 40%`) — the legal line, placeholders, helper copy. |
| Charcoal | `#252528` | `--color-charcoal` | The source `--google-button` (`240 4% 15%`) — the Google auth pill's fill, a blue-leaning near-black one step softer than true black. |
| Ring Grey | `#2E2E33` | `--color-ring` | The source `--input` AND `--ring` (both `240 5% 19%`) — inputs border and focus in this dark grey. The focus ring is graphite, not blue; alertness without accent. |
| Ink | `#050505` | `--color-ink` | Underlined text links (Terms of Service, Privacy Policy) — a hair off black, links dressed as body text. |
| Primary Ink | `#0E0E0E` | `--color-ink-primary` | The source `--primary-foreground` (`0 0% 5.5%`) — text sitting on the white "primary" surface. |
| Black | `#000000` | `--color-black` | `--foreground`, the wordmark, the "e" roundel, headings, and the solid marketing CTA pill fill. |
| Auth Gradient | `linear-gradient(90deg,#4e9bee,#57d5fe 58.5%,#3489fe)` | `--gradient-auth` | The single permitted color moment — clipped into the second headline line. Never a button fill, never a border. |
| Accent Blue | `#1463FF` | `--color-accent-blue` | The source `--accent-blue` (`220 100% 54%`) — declared saturated blue, held in reserve on the auth view; the gradient outranks it here. |
| Accent Cyan | `#80FFFF` | `--color-accent-cyan` | The source `--accent-cyan` (`180 100% 75%`) — a Nothing-esque neon pastel defined in the token set but unspent on this page. |
| Accent Green | `#80FF99` | `--color-accent-green` | The source `--accent-green` (`132 100% 75%`) — the matching neon green, likewise dormant in the auth chrome. |
| Destructive | `#EF4343` | `--color-destructive` | The source `--destructive` (`0 84% 60%`) with white foreground — errors only; the sole warm saturated color in the system. |

## Tokens — Typography
### Brockmann — the announcement voice: headline lockups only, 500–600 weight, geometric and warm · `--font-brockmann`
- **Substitute:** Söhne, General Sans, Helvetica Now
- **Weights:** 400, 500, 600
- **Sizes:** 32px, 36px
- **Line height:** ~1.1 — headlines set nearly solid *(inferred from render)*
- **Letter spacing:** near-neutral; the face's rounded geometry carries the character
- **Role:** The two-line hero lockup ("Describe your idea / Build websites & apps with AI") and section headings. It appears only where the brand speaks; UI never borrows it.

### Inter — everything operational: buttons, links, legal, nav · `--font-inter`
- **Substitute:** -apple-system, Roboto, Helvetica Neue
- **Weights:** 400, 500, 600, 700 (variable 100–900 loaded)
- **Sizes:** 12px, 14px, 15px, 16px, 18px, 20px
- **Line height:** 1.4–1.5 for reading sizes *(inferred from render)*
- **Letter spacing:** neutral — Inter is deployed as pure utility
- **Role:** All controls and chrome — 16px/600 auth-button labels, 16px/500 nav links, 12px/500 underlined links, 12px/400 legal copy. The workhorse that never asks for attention.

### Ndot — the machine texture: a dot-matrix face used as ambience, never as reading text · `--font-ndot`
- **Substitute:** VT323, a pixel/LED display face, or a dotted SVG treatment
- **Weights:** 400 only
- **Sizes:** decorative glyph field, roughly caption scale
- **Line height:** loose, grid-spaced — the glyphs read as a character rain, not lines
- **Letter spacing:** wide, grid-aligned
- **Role:** The faint background glyph field — scattered dot-matrix characters in pale grey across the white void, terminal static behind the idea. Atmospheric only; if a human must read it, Ndot is the wrong face.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption / legal | 12px | 1.4 | 0 | `--text-caption` |
| small / UI label | 14px | 1.45 | 0 | `--text-sm` |
| body | 15px | 1.5 | 0 | `--text-body` |
| body-lg / buttons | 16px | 1.5 | 0 | `--text-body-lg` |
| lead | 18px | 1.4 | 0 | `--text-lead` |
| subheading | 20px | 1.3 | 0 | `--text-subheading` |
| heading | 32px | 1.15 | 0 | `--text-heading` |
| display | 36px | 1.1 | 0 | `--text-display` |

## 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 | 24px | `--spacing-2xl` |
| 3xl | 32px | `--spacing-3xl` |
| 4xl | 40px | `--spacing-4xl` |

*(Scale derived from observed control padding — 8px 12px nav links, 10px 20px pills, 0 12px chips — on the 4px base.)*

### Border Radius
| Element | Value |
|---------|-------|
| Tags / fine chrome | 4px |
| Micro controls | 5px |
| Small controls | 8px |
| Cards / mockup frames | 12px |
| Panels (`--radius`) | 20px |
| Large auth buttons | 28px |
| Pills / CTAs | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Float | `0 25px 50px -12px rgba(0, 0, 0, 0.25)` | `--shadow-float` |

The single shadow in the system — reserved for the floating device mockups. UI chrome (buttons, pills, links) casts nothing.

### Layout
- **Page max-width:** full-bleed viewport stage; the auth stack itself holds to a narrow ~360px centered column.
- **Section gap:** the auth view is a single centered composition — spacing is radial, not stacked.
- **Card padding:** mockup frames bleed to their 12px-radius edges; auth pills run ~14px 24px.
- **Element gap:** ~16px between the stacked auth pills; ~24px from headline lockup to buttons.

## Components
### Google Auth Button
**Role:** The primary door into the product — "Continue with Google", first in the stack.
Fill `#252528` (`--google-button` — a blue-tinted charcoal, deliberately NOT `#000000`), label `#FFFFFF` (`--google-button-foreground`) at 16px Inter weight 600, radius 28px (reads as a full pill at button height), padding ~14px 24px, no border, no shadow. The multicolor Google "G" sits left of the label — the only full-color icon permitted on the page. Contrast alone makes it primary.

### Email Auth Button
**Role:** The quieter second path — "Continue with Email", stacked directly below Google.
Fill `#EBEBEB` (`--muted`), label `#000000` at 16px Inter weight 500, full pill radius (9999px), identical footprint to the Google pill so the pair reads as one decision. A monoline envelope glyph in black leads the label. Hover deepens to `#D9D9D9` (`--muted-hover`) — interaction is a luminance step, never a color.

### Solid Black Pill (marketing CTA)
**Role:** The commit button of the marketing register (the DOM scan captures it as the "Get Started" primary).
Fill `#000000`, label `#FFFFFF` at 16px Inter weight 600, radius 9999px, padding 10px 20px, no border, no shadow. Because `--primary` is white, this hard-coded black pill is what "primary action" actually looks like at Emergent — ink, not accent.

### Header / Wordmark
**Role:** The only persistent chrome — brand presence without a bar.
A lowercase "emergent" wordmark in solid black, top-left, on the bare white canvas — no header background, no border, no shadow. On the auth view it stands entirely alone: no login pill or nav cluster is rendered top-right; the page trusts the center. Nav links elsewhere run 16px Inter weight 500 in `#000000` with 8px 12px padding and no underline.

### Header Login Pill *(tokenized, not shown on the auth view)*
**Role:** The marketing header's sign-in affordance, fully specified in tokens even while hidden here.
Fill `#EBEBEB` (`--header-login-pill`, `0 0% 92.2%`), hover `#DEDEDE` (`--header-login-pill-hover`, `0 0% 87.1%`), full pill. Its mobile sibling, the hamburger button, sits on `rgba(0,0,0,0.06)` (`--header-hamburger-bg`) with a `#212121` glyph (`--header-hamburger-foreground`). Every grey is a named token — nothing in the chrome is improvised.

### Gradient Headline Lockup
**Role:** The hero statement — two lines, one idea, one moment of color.
Line one, "Describe your idea": Brockmann 36px weight 600 in `#000000`. Line two, "Build websites & apps with AI": the same scale with `--auth-gradient` — `linear-gradient(90deg,#4e9bee,#57d5fe 58.5%,#3489fe)` — clipped into the text. The gradient exists nowhere else on the page; spending it on the promise, not the button, is the brand's sharpest choice.

### Logo Roundel
**Role:** The "e" mark that anchors the composition.
A solid black circular "e" glyph, centered directly above the headline, sitting on a faint radial white-on-white glow that lifts the center of the void. No container, no border — the mark floats exactly like the product mockups around it.

### Underlined Text Link
**Role:** Tertiary navigation — "View All", "Terms of Service", "Privacy Policy".
`#050505` (or `#000000`) at 12–16px Inter weight 400–500, underlined at rest. There is no blue link color anywhere — links are ink with an underline, keeping the monochrome discipline absolute.

### Legal Footnote
**Role:** The consent line under the auth stack.
12px Inter weight 400 in `#666666` (`--muted-foreground`), centered, with "Terms of Service" and "Privacy Policy" as underlined `#050505` links inline. Present, compliant, and visually last.

### Floating Device Mockup
**Role:** The proof — finished products drifting in the void, selling the platform without a word of copy.
Tilted screenshots of real apps in device frames (laptop dashboards, phone UIs, tablet spreads), each under the system's single shadow — `0 25px 50px -12px rgba(0,0,0,0.25)` — with 12px-radius frames, scattered centrifugally toward the viewport edges and fading toward white as they approach the center. They are the only place photography, saturated color, or depth exists.

### Ndot Glyph Field
**Role:** Ambient machine texture across the background.
Scattered dot-matrix characters set in Ndot 400, in a grey so pale it sits barely above the white canvas, grid-spaced across the full viewport behind the mockups. It reads as decoded static — the raw material the platform turns into apps — and must never rise to legibility or compete with the auth stack.

### Input / Focus Ring
**Role:** Text entry and keyboard focus, specified by token (the auth view renders none).
Input border and focus ring share one value: `#2E2E33` (`--input` and `--ring`, both `240 5% 19%`). Focus at Emergent is a dark graphite ring on white — deliberately not an accent-blue halo — with placeholder text in `#666666` (`--auth-placeholder`) sharpening to `#000000` on focus (`--auth-placeholder-focus`).

## Do's and Don'ts
### Do
- Keep the canvas pure `#FFFFFF` and let a faint radial glow — not a surface change — mark the center.
- Spend the `--auth-gradient` exactly once, clipped into headline text. It is the page's entire color budget.
- Build commit actions as pills: charcoal `#252528` for Google, `#EBEBEB` for the muted sibling, `#000000` for marketing CTAs — hierarchy by luminance, never by hue.
- Use Brockmann only for the announcement (32–36px, weight 500–600) and Inter for every control, label, and footnote.
- Focus with the `#2E2E33` graphite ring; hover muted fills to `#D9D9D9`. Interaction states darken — they never colorize.
- Reserve the one shadow (`0 25px 50px -12px rgba(0,0,0,0.25)`) for floating mockups, and fade every mockup toward white as it nears the center.
- Underline links and set them in `#050505` ink — a link should look like emphasized text, not a colored word.

### Don't
- Don't give buttons or chrome a blue focus ring — `--ring` is `#2E2E33` dark grey, and that restraint is identity.
- Don't use `--accent-cyan` (`#80FFFF`), `--accent-green` (`#80FF99`), or `--accent-blue` (`#1463FF`) in auth or marketing chrome — they are product-side reserves, dormant on this page.
- Don't put a shadow on a button, pill, or link. Depth belongs to the mockups alone.
- Don't set body or UI copy in Brockmann, and never set readable text in Ndot — the dot-matrix face is texture, not type.
- Don't fill the "primary" role with color: `--primary` is white and real primaries are ink. No saturated CTA exists in this system.
- Don't crowd the header — the auth view carries a lone wordmark, no nav, no login pill.
- Don't let mockups overlap the central column; the void between them and the auth stack is the composition.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The white void — page, card, and popover are all the same surface. |
| 1 | Secondary Warm | `#F6F5F4` | Barely-warm secondary panel tint (`36 9% 96%`). |
| 2 | Muted | `#EBEBEB` | Grey pill and chip fill — the only visible "surface" on the auth view. |
| 2h | Muted Hover | `#D9D9D9` | Hover state of level 2 — one luminance step down. |
| Inverse | Charcoal | `#252528` | The Google pill — a dark surface floated on white for maximum commit contrast. |
| Inverse+ | Black | `#000000` | Solid CTA pills, the wordmark, and the roundel — ink as surface. |

## Elevation
One shadow, one job. The entire elevation vocabulary is `0 25px 50px -12px rgba(0,0,0,0.25)` under the floating device mockups — a deep, soft, long-throw shadow that makes finished products hover in the void. Nothing else lifts: buttons, pills, links, and the wordmark are dead flat, separated from the canvas by fill contrast alone (charcoal-on-white, grey-on-white). Even borders barely exist — `#E5E3E1` is nearly invisible, and the dark `#2E2E33` input ring appears only under focus. The result is a stage, not a stack: one plane of UI, with the product demos as the only objects allowed to float above it.

## Imagery
The imagery *is* the argument. Real, saturated, fully-rendered app screenshots — analytics dashboards, phone health apps, food editorial, e-commerce spreads — are mounted in device frames, tilted a few degrees, and scattered centrifugally around the viewport edges, each fading toward white as it approaches the center so the auth stack stays sovereign. This is the only place color runs free. Behind them, the Ndot glyph field supplies a second imagery layer: pale dot-matrix characters like machine static, implying raw computation resolving into the finished products floating above it. Brand iconography is monoline black (the envelope glyph); the Google "G" is the single full-color icon. No lifestyle photography, no illustration, no decoration that isn't proof of output.

## Layout
A radial composition, not a scroll rhythm. The viewport is one full-bleed white stage: dead center, a narrow ~360px vertical stack — roundel → two-line headline → Google pill → Email pill → "View All" → legal line — with the lone black wordmark pinned top-left as the only chrome. Everything else is arranged centrifugally: mockups cluster at the corners and edges, largest at the periphery, opacity falling off toward the middle, so the eye is squeezed from all sides toward the prompt of the idea. There is no nav bar, no footer, no section grid on this view — hierarchy is distance from center. The 4px spacing base governs the stack (16px between pills, ~24px from headline to buttons), and the whole composition breathes because the void is treated as load-bearing space.

## Typography Signature
A three-voice system with unbreachable walls. **Brockmann** speaks only when the brand does — the 36px/600 two-line lockup, warm and geometric, its second line carrying the system's entire color budget in gradient-clipped text. **Inter** does everything with a click in it: 16px/600 button labels, 16px/500 nav, 12px/400 legal — utility so neutral it disappears. **Ndot** never speaks at all; the dot-matrix face is scattered as background static, type demoted to texture. The signature move is that hierarchy runs on register, not scale: the display size is a modest 36px — small for a hero — but because everything around it is 12–16px monochrome utility, and because the gradient lives nowhere else, the headline owns the page. Weight stays in the 400–600 band; nothing shouts, including the headline.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (secondary panels `#F6F5F4`)
- text: `#000000` / `#050505` ink; muted `#666666`, tertiary `#808080`
- surface: `#EBEBEB` muted pill fill (hover `#D9D9D9`); inverse surfaces `#252528` / `#000000`
- border: `#E5E3E1` warm hairline (utility `#6B7280`); input + focus ring `#2E2E33` — dark grey, never blue
- accent: `linear-gradient(90deg,#4e9bee,#57d5fe 58.5%,#3489fe)` — headline text only; `#1463FF` / `#80FFFF` / `#80FF99` reserved
- primary action: `#252528` charcoal pill (Google) / `#000000` solid pill — no saturated CTA color exists

## Example Component Prompts
1. **Auth stack**: On a pure `#FFFFFF` canvas with a faint radial white glow at center, stack (centered, ~360px wide): a solid black circular "e" logo mark; a 36px Brockmann weight-600 headline "Describe your idea" in `#000000`; a second 36px line "Build websites & apps with AI" with `linear-gradient(90deg,#4e9bee,#57d5fe 58.5%,#3489fe)` clipped to the text; then two stacked full-width pills 16px apart; then a 12px underlined "View All" link; then a 12px `#666666` legal line with underlined `#050505` links. No borders, no shadows on any of it.
2. **Google auth pill**: Fill `#252528`, radius 28px, padding 14px 24px, full-width. Label "Continue with Google" in Inter 16px weight 600 `#FFFFFF`, with the multicolor Google "G" icon at left — the only full-color icon on the page. No border, no shadow.
3. **Email auth pill**: Fill `#EBEBEB`, radius 9999px, same footprint as the Google pill. Label "Continue with Email" in Inter 16px weight 500 `#000000` with a black monoline envelope icon. Hover darkens the fill to `#D9D9D9` — no color shift, no shadow.
4. **Floating mockup field**: Scatter 6–8 tilted device mockups (laptop, phone, tablet screenshots with 12px-radius frames) around the edges of a `#FFFFFF` viewport, each with shadow `0 25px 50px -12px rgba(0,0,0,0.25)`, opacity fading toward white as they near the center. Behind them, sprinkle a sparse grid of pale-grey dot-matrix (Ndot-style) characters as background static. Keep a clean central void.
5. **Marketing CTA + focus behavior**: A solid `#000000` pill, radius 9999px, padding 10px 20px, Inter 16px weight 600 `#FFFFFF` label ("Get Started"). On keyboard focus, ring it in 2px `#2E2E33` — the system's graphite focus ring — never blue. Beside it, links are `#050505` underlined text, no link-blue anywhere.

## Similar Brands
- **Nothing** — the literal source of Ndot: dot-matrix type as brand texture, monochrome discipline, and tech presented as designed object.
- **OpenAI (ChatGPT)** — the same auth minimalism: white void, centered mark, stacked provider pills, and near-total colorlessness at the door.
- **v0 by Vercel** — prompt-to-product framing with a black-and-white system where the generated output supplies all the color.
- **Lovable** — the kindred AI-builder gesture of one centered idea box surrounded by proof-of-output imagery.
- **Framer** — monochrome chrome, pill CTAs, and real product screenshots doing the emotional work instead of illustration.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-white: #FFFFFF;            /* --background / --card / --popover / --primary */
  --color-secondary: #F6F5F4;        /* --secondary (36 9% 96%) */
  --color-muted: #EBEBEB;            /* --muted / --auth-surface / --header-login-pill */
  --color-muted-hover: #D9D9D9;      /* --muted-hover (0 0% 85%) */
  --color-pill-hover: #DEDEDE;       /* --header-login-pill-hover (0 0% 87.1%) */
  --color-border: #E5E3E1;           /* --border (30 7% 89%) */
  --color-slate-border: #6B7280;
  --color-grey-500: #808080;
  --color-grey-600: #666666;         /* --muted-foreground / --auth-muted */
  --color-graphite: #212121;         /* --header-hamburger-foreground (0 0% 12.9%) */
  --color-charcoal: #252528;         /* --google-button (240 4% 15%) */
  --color-ring: #2E2E33;             /* --input AND --ring (240 5% 19%) */
  --color-ink: #050505;
  --color-ink-primary: #0E0E0E;      /* --primary-foreground (0 0% 5.5%) */
  --color-black: #000000;            /* --foreground */
  --color-accent-blue: #1463FF;      /* --accent-blue (220 100% 54%) */
  --color-accent-cyan: #80FFFF;      /* --accent-cyan (180 100% 75%) */
  --color-accent-green: #80FF99;     /* --accent-green (132 100% 75%) */
  --color-destructive: #EF4343;      /* --destructive (0 84% 60%), foreground #FFFFFF */
  --color-item-selected: #E6E6E6;    /* --auth-item-selected (0 0% 90%) */

  /* Gradients */
  --gradient-auth: linear-gradient(90deg, #4e9bee, #57d5fe 58.5%, #3489fe);
  --gradient-video: linear-gradient(90deg, #000, #4e9bee);

  /* Typography — Families */
  --font-brockmann: 'Brockmann', ui-sans-serif, system-ui, sans-serif;
  --font-inter: 'Inter', -apple-system, ui-sans-serif, system-ui, sans-serif;
  --font-ndot: 'Ndot', monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 15px;
  --text-body-lg: 16px;
  --text-lead: 18px;
  --text-subheading: 20px;
  --text-heading: 32px;
  --text-display: 36px;
  --leading-display: 1.1;
  --leading-heading: 1.15;
  --leading-subheading: 1.3;
  --leading-body: 1.5;
  --leading-caption: 1.4;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-card: 12px;
  --radius-panel: 20px;      /* --radius: 1.25rem */
  --radius-button: 28px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-white: #FFFFFF;
  --color-secondary: #F6F5F4;
  --color-muted: #EBEBEB;
  --color-muted-hover: #D9D9D9;
  --color-pill-hover: #DEDEDE;
  --color-border: #E5E3E1;
  --color-slate-border: #6B7280;
  --color-grey-500: #808080;
  --color-grey-600: #666666;
  --color-graphite: #212121;
  --color-charcoal: #252528;
  --color-ring: #2E2E33;
  --color-ink: #050505;
  --color-ink-primary: #0E0E0E;
  --color-black: #000000;
  --color-accent-blue: #1463FF;
  --color-accent-cyan: #80FFFF;
  --color-accent-green: #80FF99;
  --color-destructive: #EF4343;
  --color-item-selected: #E6E6E6;

  /* Typography — Families */
  --font-brockmann: 'Brockmann', ui-sans-serif, system-ui, sans-serif;
  --font-inter: 'Inter', -apple-system, ui-sans-serif, system-ui, sans-serif;
  --font-ndot: 'Ndot', monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 15px;
  --text-body-lg: 16px;
  --text-lead: 18px;
  --text-subheading: 20px;
  --text-heading: 32px;
  --text-display: 36px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-card: 12px;
  --radius-panel: 20px;
  --radius-button: 28px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
```