---
version: alpha
name: Firecrawl
description: One ember of heat-orange loose on a cold engineering blueprint.
colors:
  on-surface-variant: "#c2c2c2"
  on-surface: "#262626"
  surface: "#f9f9f9"
  outline: "#ededed"
  error: "#eb3424"
  primary: "#fa5d19"
  heat-20: "#fa5d1933"
  heat-8: "#fa5d1914"
  canvas-lighter: "#fbfbfb"
  surface-2: "#ffffff"
  border-muted: "#e8e8e8"
  border-loud: "#e6e6e6"
  illustration-line: "#dbdbdb"
  accent-amethyst: "#9061ff"
  accent-bluetron: "#2a6dfb"
  accent-forest: "#42c366"
  accent-honey: "#ecb730"
typography:
  display:
    fontFamily: Suisse
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
  h1:
    fontFamily: Suisse
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.015em
  h2:
    fontFamily: Suisse
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  h3:
    fontFamily: Suisse
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.005em
  subheading:
    fontFamily: Suisse
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  body:
    fontFamily: Suisse
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  input:
    fontFamily: Suisse
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  ui-small:
    fontFamily: Suisse
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: Suisse
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  micro-label:
    fontFamily: Suisse
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
rounded:
  micro: 4px
  small-chip: 6px
  button-link-chip: 8px
  primary-button-icon-button: 10px
  nested-control: 12px
  input-panel-card: 16px
  large-card: 20px
  pill-badge: 999px
spacing:
  3xs: 4px
  2xs: 6px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 16px
  xl: 20px
---
# Firecrawl — Style Reference
> One ember of heat-orange loose on a cold engineering blueprint.

**Theme:** light

Firecrawl paints a near-white technical canvas — `#f9f9f9` washed with faint grid lines, corner brackets, and monospace annotations like `[ 200 OK ]` and `[ .JSON ]` — and lights exactly one thing on fire. The signature is a single flame-orange, `#fa5d19`, that the site itself names `--heat`: an entire alpha ramp (`--heat-4` → `--heat-100`) descended from one hot hue. That heat runs the full-bleed announcement bar, the accent half of the headline, the four-point spark markers, and the primary CTA, which carries a Display-P3 inner-glow shadow so the button looks lit from within rather than filled. Everything else is disciplined greyscale: `#262626` ink on `#ffffff` surfaces, hairline borders stepping `#ededed` → `#e8e8e8` → `#e6e6e6`. Type is Suisse — a quiet Swiss neo-grotesque at a heavy 500-weight display size (60px) — paired with GeistMono for the blueprint labels and the JSON payloads it loves to show off. The layout reads like an instrument panel: contained ~1112px column, precise 4px rhythm, and a reserved decorative palette (amethyst, bluetron, forest, honey) that stays out of the way so the orange keeps its monopoly on attention.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Heat 100 (Flame) | `#fa5d19` | `--heat-100` | The signature. Only true accent — announcement bar, headline accent word, spark markers, primary CTA, arrow submit. Reserve it; one hot moment per view. |
| Heat 20 | `#fa5d1933` | `--heat-20` | Flame at 20% — badge fills, hover washes, active-tab tint. |
| Heat 8 | `#fa5d1914` | `--heat-8` | Flame at 8% — faintest heat wash behind icons and chips. |
| Ink | `#262626` | `--accent-black` | Primary text, headlines, logo mark. Never pure black — always this warm charcoal. |
| Text Muted | `#999999` | — | Secondary/supporting copy, sub-labels. |
| Text Faint | `#c2c2c2` | — | Placeholder text, disabled, tertiary hints. |
| Canvas | `#f9f9f9` | `--background-base` | Page base — the blueprint field, never pure white. |
| Canvas Lighter | `#fbfbfb` | `--background-lighter` | Subtly raised zones above the base. |
| Surface | `#ffffff` | `--surface` | Cards, input bars, panels — the one true white. |
| Border Faint | `#ededed` | `--border-faint` | Grid lines, lightest dividers. |
| Border Muted | `#e8e8e8` | `--border-muted` | Default control and card hairlines. |
| Border Loud | `#e6e6e6` | `--border-loud` | Emphasised separators, focused outlines. |
| Illustration Line | `#dbdbdb` | `--illustrations-default` | Wireframe/blueprint stroke — the mockup line art. |
| Accent Amethyst | `#9061ff` | `--accent-amethyst` | Reserved secondary — category/illustration accent only, never a CTA. |
| Accent Bluetron | `#2a6dfb` | `--accent-bluetron` | Reserved secondary — data/link accent in diagrams only. |
| Accent Crimson | `#eb3424` | `--accent-crimson` | Reserved secondary — error/destructive states only. |
| Accent Forest | `#42c366` | `--accent-forest` | Reserved secondary — success/`200 OK` states only. |
| Accent Honey | `#ecb730` | `--accent-honey` | Reserved secondary — warning/caution states only. |

## Tokens — Typography
### Suisse — the whole voice: headlines, body, UI, labels. Swiss neo-grotesque run heavy (500) at display sizes for that blunt, confident poster weight · `--font-suisse`
- **Substitute:** Suisse Int'l, Inter, Helvetica Neue, `ui-sans-serif`
- **Weights:** 400 (body), 450 (UI controls/links — the house default), 500 (headings & emphasis), 600/700 (loaded, for heaviest display)
- **Sizes:** 60 / 52 / 40 / 24 / 20 / 16 / 15 / 14 / 13 / 12 / 10 px
- **Line height:** tight on display (~1.0–1.1), ~1.5 on body
- **Letter spacing:** near-zero; slight negative tracking on the 52–60px display sizes
- **Role:** Carries everything. The 450 weight on buttons and links is the tell — a touch heavier than body, so controls read as tappable without a bold.

### GeistMono / Roboto Mono — monospace for blueprint annotations (`[ 200 OK ]`, `[ .JSON ]`) and JSON/code payloads · `--font-mono`
- **Substitute:** Geist Mono, Roboto Mono, `ui-monospace`, SFMono-Regular, Menlo
- **Weights:** 400, 500 (GeistMono variable 100–900)
- **Sizes:** 12 / 13 / 10 px for corner labels; body-mono for code panels
- **Line height:** ~1.4 in code blocks
- **Letter spacing:** default; uppercase micro-labels sit inside bracket glyphs
- **Role:** The engineering texture. It signals "developer tool / API" and turns metadata into decoration.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 60px | 1.05 | -0.02em | `--text-display` |
| H1 | 52px | 1.08 | -0.015em | `--text-h1` |
| H2 | 40px | 1.1 | -0.01em | `--text-h2` |
| H3 | 24px | 1.2 | -0.005em | `--text-h3` |
| Subheading | 20px | 1.3 | 0 | `--text-subheading` |
| Body | 16px | 1.5 | 0 | `--text-body` |
| Input | 15px | 1.4 | 0 | `--text-input` |
| UI / Small | 14px | 1.4 | 0 | `--text-ui` |
| Caption | 12–13px | 1.4 | 0 | `--text-caption` |
| Micro-label | 10px | 1.3 | 0.02em | `--text-micro` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (generous vertical air on a contained column)

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

### Border Radius
| Element | Value |
|---------|-------|
| Micro (tight controls) | 4px |
| Small chip | 6px |
| Button / link chip | 8px |
| Primary button / icon button | 10px |
| Nested control | 12px |
| Input / panel card | 16px |
| Large card | 20px |
| Pill / badge | 999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card (subtle) | `rgba(0,0,0,0.03) 0px 24px 32px -12px, rgba(0,0,0,0.03) 0px 16px 24px -8px, rgba(0,0,0,0.03) 0px 8px 16px -4px, rgba(0,0,0,0.03) 0px 0px 0px 1px` | `--shadow-card` |
| Panel (lifted) | `rgba(0,0,0,0.02) 0px 40px 48px -20px, rgba(0,0,0,0.03) 0px 32px 32px -20px, rgba(0,0,0,0.03) 0px 16px 24px -12px, rgba(0,0,0,0.03) 0px 0px 0px 1px` | `--shadow-panel` |
| Flame CTA (ember glow) | `color(display-p3 0.9804 0.1127 0.098 / 0.2) 0px -6px 12px 0px inset, color(display-p3 0.9804 0.3647 0.098 / 0.12) 0px 2px 4px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.16) 0px 0.5px 0.5px 0px` | `--shadow-flame` |
| Focus ring | `rgb(249,249,249) 0px 0px 0px 6px` | `--shadow-ring` |

### Layout
- **Page max-width:** 1112px content / 1144px with padding (`--container-width` / `--container-width-padding`)
- **Section gap:** generous — large vertical bands, hero breathes at ~half viewport
- **Card padding:** ~16–20px
- **Element gap:** 8–12px between controls; 4px inside tight groups

## Components
### Announcement Bar
**Role:** Full-bleed top strip for the current headline ("Introducing our most accurate /search yet").
Solid flame `#fa5d19` spanning edge to edge, white text centered, an underlined inline link with a `→`. The one place the orange is allowed to fill a whole surface — it frames the page in heat before any content loads.

### Primary Button ("Start for free")
**Role:** The single most important action per view.
Flame `#fa5d19` fill, white 14px/450 label, radius 10px, padding ~6px 10px. Wears `--shadow-flame` — a Display-P3 inner-glow + soft ember drop so it reads as *lit*, not merely colored. Only ever one on screen.

### Secondary Button ("Setup for agents" / "Sign up")
**Role:** The lower-priority sibling to the flame CTA.
Neutral: white `#ffffff` surface, `#262626` 14px/450 label, a `#e8e8e8` hairline border, radius 8px, padding 6px 10px. Often carries a small leading glyph. Never orange — it exists to let the CTA stay unique.

### Navigation Bar
**Role:** Top-level wayfinding.
Transparent over canvas, flame logomark + wordmark left, center link cluster (Products, Resources, Pricing, Docs, Blog, Playground) in `#262626` 14–16px/450 with caret dropdowns, and a right group showing a GitHub star count and the Sign-up button.

### Pill Badge ("2 Months Free — Annually")
**Role:** Small promotional or status marker above the headline.
Radius 999px, `#ffffff` surface with a hairline border, `#262626` 12–14px label, a trailing circular arrow chip. Compact and quiet.

### Endpoint Input (the scrape bar)
**Role:** The hero's live product surface — paste a URL, pick a mode, fire.
White `#ffffff` card, radius 16px, `--shadow-card`, a globe glyph + 15px/400 URL field with `#c2c2c2` placeholder. It IS the demo: the product rendered as a component.

### Mode Tabs (Search · Scrape · Map · Crawl)
**Role:** Switch the endpoint's operation inside the input bar.
Segmented pill row; the active tab ("Scrape") gets a raised white chip with a subtle grid glyph, inactive tabs sit flat in `#999999`. Radius ~10px on the active chip.

### Icon Submit Button (arrow)
**Role:** Execute the endpoint request.
Square-ish flame `#fa5d19` button, radius 10px, white `→` glyph. The compact echo of the primary CTA, closing the input.

### Spark / Star Marker
**Role:** Decorative punctuation on the blueprint field.
Four-point flame `#fa5d19` stars sitting on grid intersections, sometimes ringed by a faint circle. Pure ornament — the only warm pixels loose in the cold grid.

### Blueprint Corner Bracket
**Role:** Frames the canvas as an engineering schematic.
GeistMono 10–12px labels in `#999999` inside bracket glyphs — `[ 200 OK ]`, `[ SCRAPE ]`, `[ .JSON ]`, `[ .MD ]` — pinned to the corners of faint `#ededed` grid cells. Metadata as decoration.

### Code / JSON Panel
**Role:** Show the actual output — clean Markdown / structured JSON.
White `#ffffff` panel, `--shadow-panel`, a `[ .JSON ]` header tab, GeistMono body with line numbers in `#c2c2c2`, string values tinted flame `#fa5d19`. Proof-by-payload.

### Wireframe Illustration
**Role:** Abstract "any page → clean data" mockups below the hero.
Line art in `#dbdbdb` on `#f9f9f9`, rounded browser chrome, placeholder blocks, a small "Logo" tag chip in faint heat. Reads as a schematic, not a screenshot.

## Do's and Don'ts
### Do
- Keep exactly one flame `#fa5d19` focal point per view — the CTA, the accent word, or the announcement bar, not all at once in the same eyeline.
- Build the whole page in warm greyscale — `#262626` ink on `#f9f9f9`/`#ffffff`, hairlines from the `#ededed`/`#e8e8e8`/`#e6e6e6` step.
- Use the `--heat` alpha ramp (`#fa5d1914`, `#fa5d1933`) for washes and hover, so tints stay in the same hue family as the solid flame.
- Give the primary CTA the P3 ember glow (`--shadow-flame`) — the button should look lit from inside.
- Lean into monospace metadata: bracketed `[ .JSON ]`-style labels and spark markers are the brand's texture.
- Let Suisse 500 carry display headlines and use 450 for controls — that half-step is the house signature.

### Don't
- Don't use the reserved accents (amethyst, bluetron, crimson, forest, honey) for CTAs or emphasis — they are diagram/status colors only.
- Don't fill large surfaces with orange beyond the announcement bar; the flame loses its heat when it stops being rare.
- Don't reach for pure black (`#000`) or pure-white page backgrounds — the warmth of `#262626` on `#f9f9f9` is the mood.
- Don't add heavy drop shadows; depth here is a 1px hairline plus a whisper of `rgba(0,0,0,0.03)`.
- Don't crowd the hero — the contained ~1112px column and its open blueprint field are load-bearing.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#f9f9f9` | Page base — the blueprint field. |
| 1 | Canvas Lighter | `#fbfbfb` | Subtly raised zones / alternating bands. |
| 2 | Surface | `#ffffff` | Cards, input bars, code panels — the true white. |
| 3 | Announcement | `#fa5d19` | The one saturated surface, edge to edge. |

## Elevation
Depth is almost entirely luminance + hairline, not shadow. A raised element steps up in whiteness (`#f9f9f9` → `#fbfbfb` → `#ffffff`) and gains a single `rgba(0,0,0,0.03)` 1px ring. Real cards (the endpoint bar, JSON panel) add a wide, ultra-soft multi-layer drop (`--shadow-card` / `--shadow-panel`) where every layer is ≤3% black — present but never dark. The lone exception is the flame CTA, which projects a *colored* Display-P3 ember glow instead of a grey shadow, and the focus ring, a flat 6px `rgb(249,249,249)` halo. Everything floats; nothing casts.

## Imagery
Not photography — schematics. The visual language is engineering line-art: faint `#ededed` grids, `#dbdbdb` wireframe browser mockups, monospace corner annotations, and four-point flame spark markers. The recurring metaphor is "any source → clean structured data," rendered as JSON payloads and abstract page skeletons. The only literal illustration is the flame logomark. Treat imagery as blueprint diagram, never stock or gradient art.

## Layout
Contained and centered: a ~1112px column (1144px with padding) on a full-bleed canvas. Full-width announcement bar → transparent nav → a tall, breathing hero with centered display headline, centered supporting line, a two-button CTA row, and the live endpoint card. Below, product mockups sit on the same grid. The background is an all-over faint blueprint of `#ededed` cells with bracketed labels at the corners and spark markers on intersections — decorative structure that makes the whole page feel like a technical drawing. Section rhythm is generous vertical bands; alignment is strict to the 4px grid.

## Typography Signature
Two registers, one job each. Suisse handles all human-facing text and does its heaviest lifting at the top: 60px display at weight 500 with slight negative tracking gives headlines a blunt, poster-like confidence — "Power AI agents with **clean web data**," where only the second line goes flame. The quiet tell is the **450 weight** on buttons and links: fractionally heavier than the 400 body, so interactive text reads as pressable without a bold jump. GeistMono is the second voice and it's pure signal — it never sets prose, only metadata and payloads (`[ 200 OK ]`, JSON strings), which is exactly what makes the page feel like a developer instrument rather than a marketing site. The pairing works because the two fonts never compete: sans owns the message, mono owns the machinery.

## Agent Prompt Guide
## Quick Color Reference
- background: `#f9f9f9` (surface `#ffffff`, lighter `#fbfbfb`)
- text: `#262626` (muted `#999999`, faint `#c2c2c2`)
- surface: `#ffffff`
- border: `#e8e8e8` (faint `#ededed`, loud `#e6e6e6`)
- accent: `#fa5d19` (flame — the only accent)
- primary action: `#fa5d19` with white text + P3 ember glow shadow

## Example Component Prompts
1. **Primary CTA button**: Flame `#fa5d19` background, white 14px Suisse label at weight 450, radius 10px, padding 6px 10px, with a Display-P3 inner-glow shadow (`color(display-p3 0.9804 0.1127 0.098 / 0.2) 0 -6px 12px inset` plus soft ember drop) so it looks lit from within. Exactly one per view.
2. **Endpoint input bar**: White `#ffffff` card, radius 16px, soft `rgba(0,0,0,0.03)` multi-layer shadow; leading globe glyph, 15px/400 URL field with `#c2c2c2` placeholder, a segmented tab row (Search · Scrape · Map · Crawl) where the active tab is a raised white chip, and a flame `#fa5d19` square arrow-submit button at radius 10px on the right.
3. **Blueprint corner label**: GeistMono 10–12px in `#999999` inside bracket glyphs like `[ .JSON ]`, pinned to the corner of a faint `#ededed` grid cell on a `#f9f9f9` field; add optional four-point `#fa5d19` spark markers at grid intersections.
4. **Announcement bar**: Full-bleed strip in solid flame `#fa5d19`, centered white 14px text with an underlined inline link ending in `→`.
5. **Code/JSON panel**: White `#ffffff` panel with a `[ .JSON ]` header tab and wide soft shadow; GeistMono body, `#c2c2c2` line numbers, `#262626` keys, and string values tinted flame `#fa5d19`.

## Similar Brands
- **Vercel** — the same near-white technical minimalism where restraint and a monospace-inflected developer voice do the work.
- **Linear** — kindred discipline: greyscale surfaces, hairline borders, one confident accent, and precise grid rhythm.
- **Resend** — developer-tool clarity with a single warm accent on clean light surfaces and JSON-as-hero storytelling.
- **Railway** — engineering-blueprint aesthetic: grids, brackets, and diagrammatic imagery framing an infra product.
- **Stripe (Docs)** — payloads and code as first-class visuals, monospace metadata treated as design texture.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Heat ramp (the signature) */
  --heat-4: #fa5d190a;
  --heat-8: #fa5d1914;
  --heat-12: #fa5d191f;
  --heat-16: #fa5d1929;
  --heat-20: #fa5d1933;
  --heat-40: #fa5d1966;
  --heat-90: #fa5d19e6;
  --heat-100: #fa5d19ff;

  /* Colors — Ink & surfaces */
  --accent-black: #262626ff;
  --accent-white: #ffffffff;
  --surface: #ffffffff;
  --surface-raised: #ffffffff;
  --background-base: #f9f9f9ff;
  --background-lighter: #fbfbfbff;
  --text-muted: #999999;
  --text-faint: #c2c2c2;

  /* Colors — Reserved accents (diagram/status only) */
  --accent-amethyst: #9061ffff;
  --accent-bluetron: #2a6dfbff;
  --accent-crimson: #eb3424ff;
  --accent-forest: #42c366ff;
  --accent-honey: #ecb730ff;

  /* Colors — Borders & illustration lines */
  --border-faint: #edededff;
  --border-muted: #e8e8e8ff;
  --border-loud: #e6e6e6ff;
  --illustrations-faint: #edededff;
  --illustrations-muted: #e6e6e6ff;
  --illustrations-default: #dbdbdbff;

  /* Colors — Black/white alpha ramp */
  --black-alpha-1: #00000003;
  --black-alpha-2: #00000005;
  --black-alpha-3: #00000008;
  --black-alpha-4: #0000000a;
  --black-alpha-5: #0000000d;
  --black-alpha-6: #0000000f;
  --black-alpha-7: #00000012;
  --black-alpha-8: #00000014;
  --black-alpha-10: #0000001a;
  --black-alpha-12: #0000001f;
  --black-alpha-16: #00000029;
  --black-alpha-20: #00000033;
  --black-alpha-24: #0000003d;
  --black-alpha-32: #26262652;
  --black-alpha-40: #26262666;
  --black-alpha-48: #2626267a;
  --black-alpha-56: #2626268f;
  --black-alpha-64: #262626a3;
  --black-alpha-72: #262626b8;
  --black-alpha-88: #262626e0;
  --white-alpha-56: #ffffff8f;
  --white-alpha-72: #ffffffb8;

  /* Typography — Families */
  --font-suisse: 'Suisse', 'Suisse Int\'l', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'GeistMono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-display: 60px;
  --text-h1: 52px;
  --text-h2: 40px;
  --text-h3: 24px;
  --text-subheading: 20px;
  --text-body: 16px;
  --text-input: 15px;
  --text-ui: 14px;
  --text-caption: 13px;
  --text-micro: 10px;

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

  /* Border Radius */
  --radius-micro: 4px;
  --radius-chip: 6px;
  --radius-button-sm: 8px;
  --radius-button: 10px;
  --radius-nested: 12px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-pill: 999px;

  /* Layout */
  --container-width: 1112px;
  --container-width-padding: 1144px;

  /* Shadows */
  --shadow-card: rgba(0,0,0,0.03) 0px 24px 32px -12px, rgba(0,0,0,0.03) 0px 16px 24px -8px, rgba(0,0,0,0.03) 0px 8px 16px -4px, rgba(0,0,0,0.03) 0px 0px 0px 1px;
  --shadow-panel: rgba(0,0,0,0.02) 0px 40px 48px -20px, rgba(0,0,0,0.03) 0px 32px 32px -20px, rgba(0,0,0,0.03) 0px 16px 24px -12px, rgba(0,0,0,0.03) 0px 0px 0px 1px;
  --shadow-flame: color(display-p3 0.9804 0.1127 0.098 / 0.2) 0px -6px 12px 0px inset, color(display-p3 0.9804 0.3647 0.098 / 0.12) 0px 2px 4px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.12) 0px 1px 1px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.16) 0px 0.5px 0.5px 0px, color(display-p3 0.9804 0.3647 0.098 / 0.2) 0px 0.25px 0.25px 0px;
  --shadow-ring: rgb(249,249,249) 0px 0px 0px 6px;
}
```
### Tailwind v4
```css
@theme {
  /* Heat ramp */
  --color-heat-4: #fa5d190a;
  --color-heat-8: #fa5d1914;
  --color-heat-12: #fa5d191f;
  --color-heat-16: #fa5d1929;
  --color-heat-20: #fa5d1933;
  --color-heat-40: #fa5d1966;
  --color-heat-90: #fa5d19e6;
  --color-heat-100: #fa5d19ff;

  /* Ink & surfaces */
  --color-accent-black: #262626ff;
  --color-accent-white: #ffffffff;
  --color-surface: #ffffffff;
  --color-background-base: #f9f9f9ff;
  --color-background-lighter: #fbfbfbff;
  --color-text-muted: #999999;
  --color-text-faint: #c2c2c2;

  /* Reserved accents */
  --color-accent-amethyst: #9061ffff;
  --color-accent-bluetron: #2a6dfbff;
  --color-accent-crimson: #eb3424ff;
  --color-accent-forest: #42c366ff;
  --color-accent-honey: #ecb730ff;

  /* Borders & illustration lines */
  --color-border-faint: #edededff;
  --color-border-muted: #e8e8e8ff;
  --color-border-loud: #e6e6e6ff;
  --color-illustrations-default: #dbdbdbff;

  /* Typography */
  --font-suisse: 'Suisse', 'Suisse Int\'l', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'GeistMono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: 60px;
  --text-h1: 52px;
  --text-h2: 40px;
  --text-h3: 24px;
  --text-subheading: 20px;
  --text-body: 16px;
  --text-input: 15px;
  --text-ui: 14px;
  --text-caption: 13px;
  --text-micro: 10px;

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

  /* Radius */
  --radius-micro: 4px;
  --radius-chip: 6px;
  --radius-button-sm: 8px;
  --radius-button: 10px;
  --radius-nested: 12px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-pill: 999px;
}
```