---
version: alpha
name: Lovable
description: An aurora of brand color blooming across warm cream.
colors:
  on-surface-variant: "#5F5F5D"
  on-surface: "#030303"
  surface: "#FCFBF8"
  error: "oklch(58.53% .2203 26.56)"
  primary: "hsl(224.6 88.2% 53.3%)"
  heading-ink: "#1C1C1C"
  surface-2: "#FAFAFA"
  sunk-warm: "#F7F4ED"
  hairline: "#ECEAE4"
  ocean-accent: "oklch(52.43% .2396 264.41)"
  accent-ink: "oklch(43.93% .2138 264.41)"
  inverse: "oklch(0% 0 0/.88)"
  twilight: "hsl(262 56% 51.4%)"
  bubblegum: "hsl(329.8 86.1% 37.8%)"
  tiger: "hsl(20.7 100% 40.4%)"
  saffron: "hsl(19.7 96.1% 33%)"
  positive: "oklch(54.42% .1689 138.23)"
  attention: "oklch(58.01% .1819 40.04)"
  highlight: "oklch(59.06% .2244 359.16)"
  special: "oklch(58.99% .2523 294.88)"
typography:
  caption:
    fontFamily: Camera Plain Variable
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Camera Plain Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  nav-label:
    fontFamily: Camera Plain Variable
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Camera Plain Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Camera Plain Variable
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: Camera Plain Variable
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading:
    fontFamily: Camera Plain Variable
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  title:
    fontFamily: Camera Plain Variable
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.015em
  display:
    fontFamily: Camera Plain Variable
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
rounded:
  buttons-inputs-small-chips: 8px
  cards-menus: 12px
  panels: 16px
  prompt-card-large-surfaces: 24px
  hero-container: 32px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
---
# Lovable — Style Reference
> An aurora of brand color blooming across warm cream.

**Theme:** light

Lovable puts almost nothing on screen — a bold black wordmark, one line of display type, and a single white prompt card — then floods the entire canvas behind them with a slow aurora mesh that runs blue → violet → magenta → coral → orange. The restraint is the point: the interface is warm off-white paper (`#FCFBF8`), the type is near-black, and all saturation is spent on the gradient itself, never on chrome. Underneath sits an unusually complete semantic token system ("silk") authored in OKLCH — every surface, foreground, border, glow and shadow has a named role, and the brand palette is a literal rainbow (ocean, sapphire, twilight, bubblegum, flamingo, tiger, saffron) whose primaries compose into that hero aurora. The signature craft move is tactile: buttons and cards are built from layered *inset* shadows — a white top highlight, a hairline border, a soft ambient drop — so every surface reads as a slightly raised physical chip rather than a flat rectangle. Camera Plain Variable carries display and body at a wide weight range; Roboto Mono handles code. It is quiet paper carrying loud light.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#030303` | `--fg-primary` | Primary text and wordmark; also `oklch(10% 0 0)`. The only near-black — used flat, never tinted. |
| Heading ink | `#1C1C1C` | `--color-heading` | Display headings; a hair softer than pure ink. |
| Muted text | `#5F5F5D` | `--fg-tertiary` | Subheads and helper copy; `oklch(50% .001 107)`. Warm-neutral, never cool gray. |
| Canvas | `#FCFBF8` | `--color-canvas` | The page. Warm cream paper (declared `theme-color`) — the anchor everything floats on. |
| Surface | `#FAFAFA` | `--background` | Card/popover fill, one step brighter than canvas. |
| Sunk warm | `#F7F4ED` | `--color-sunk` | Recessed warm panels, sidebar tint. |
| Hairline | `#ECEAE4` | `--border` | The single default border — a warm 1px line, never heavier. |
| Ocean accent | `oklch(52.43% .2396 264.41)` | `--bg-accent` | The primary blue — accent fills, focus, the "Build" action. |
| Accent ink | `oklch(43.93% .2138 264.41)` | `--fg-accent` | Accent text/links on light surfaces. |
| Inverse | `oklch(0% 0 0/.88)` | `--bg-inverse` | The black "Get started" button and inverse surfaces. |
| Sapphire | `hsl(224.6 88.2% 53.3%)` | `--brand-sapphire-primary` | Aurora blue — the mesh's cool end. |
| Twilight | `hsl(262 56% 51.4%)` | `--brand-twilight-primary` | Aurora violet — the transition into pink. |
| Bubblegum | `hsl(329.8 86.1% 37.8%)` | `--brand-bubblegum-primary` | Aurora magenta — the hot core of the mesh. |
| Tiger | `hsl(20.7 100% 40.4%)` | `--brand-tiger-primary` | Aurora coral/orange — the warm base of the mesh. |
| Saffron | `hsl(19.7 96.1% 33%)` | `--brand-saffron-primary` | Deep amber, the rainbow's warmest step. |
| Destructive | `oklch(58.53% .2203 26.56)` | `--bg-destructive` | Danger/delete only; border form `#8d0e13`. |
| Positive | `oklch(54.42% .1689 138.23)` | `--bg-positive` | Success green; border form `#1d4e04`. |
| Attention | `oklch(58.01% .1819 40.04)` | `--bg-attention` | Warning amber; border form `#7f2902`. |
| Highlight | `oklch(59.06% .2244 359.16)` | `--bg-highlight` | Notification pink; border form `#87164a`. |
| Special | `oklch(58.99% .2523 294.88)` | `--bg-special` | Promo/"special" violet; border form `#53388c`. |

> The identity palette is the curated view above. The full silk token system — bg/fg/border families (`--*-depth/base/primary/secondary/tertiary/quaternary`), every semantic + its `-translucent` (`/.16`) and glow (`-hover /.08`, `-pressed /.16`) variant, and the named brand ramps — is reproduced faithfully in Quick Start.

## Tokens — Typography

### Camera Plain Variable — display, headings, and body; a wide-axis geometric-humanist sans that goes from hairline captions to heavy 60px display · `--font-sans`
- **Substitute:** Inter, ui-sans-serif, system-ui, sans-serif
- **Weights:** 400 (body), 480 (nav/emphasis — an intermediate variable weight), 600 (headings/display); full loaded axis 100–900, plus a 400 italic
- **Sizes:** 12, 14, 15, 16, 18, 20, 36, 48, 60px
- **Line height:** tight on display (~1.0–1.1), ~1.5 on body
- **Letter spacing:** near-zero; display leans slightly negative for the packed "Build something Lovable" lockup
- **Role:** the entire visible interface is one family — headings, prompt placeholder, nav and buttons all Camera Plain; hierarchy comes from weight and size, not from a second face.

### Roboto Mono Variable — code, tokens, technical labels · `--font-mono`
- **Substitute:** ui-monospace, "SF Mono", Menlo, monospace
- **Weights:** 100–700 (variable)
- **Sizes:** inherits body scale (12–16px)
- **Line height:** ~1.5
- **Letter spacing:** none
- **Role:** reserved for code output and monospaced technical strings — the counterpoint to Camera Plain's warmth.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-xs` |
| Small | 14px | 1.45 | 0 | `--text-sm` |
| Nav / label | 15px | 1.45 | 0 | `--text-base-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Body large | 18px | 1.5 | 0 | `--text-md` |
| Subheading | 20px | 1.4 | 0 | `--text-lg` |
| Heading | 36px | 1.15 | -0.01em | `--text-3xl` |
| Title | 48px | 1.1 | -0.015em | `--text-5xl` |
| Display | 60px | 1.05 | -0.02em | `--text-6xl` |

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

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

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, inputs, small chips | 8px (`--radius`, .5rem) |
| Cards, menus | 12px |
| Panels | 16px |
| Prompt card, large surfaces | 24px / 28px |
| Hero container | 32px |
| Pills, toggles, icon buttons | full-round (pill sentinel) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Surface xs | `0 0 0 1px #fff, 0 0 0 2px rgba(119,119,113,.16), 0 1px 1px #0000000a` (layered) | `--shadow-surface-xs` |
| Surface lg | stacked `-6px…-12px` ambient offsets over the surface border | `--shadow-surface-lg` |
| Button neutral | `inset 0 1px 0 #fff, inset 0 -1px 0 #fffc, inset 0 0 0 1px #00000029, 0 2px 2px -1px #0000000a` | `--shadow-button-neutral` |
| Button accent | `inset 0 0 0 1px #11318c, inset 0 1px 0 #ffffff29, 0 2px 2px -1px #091a481f` | `--shadow-button-accent` |
| Button inverse | `inset 0 0 0 1px #000, inset 0 1px 0 #ffffff3d, 0 2px 2px -1px #0000001f` | `--shadow-button-inverse` |
| Tooltip | `0 0 0 1px #0000001f, inset 0 0 0 1px #ffffff1f, 0 12px 12px -6px #0000000a` | `--shadow-tooltip` |

### Layout
- **Page max-width:** full-bleed canvas; content column centered ~600–700px for the hero lockup
- **Section gap:** generous — the hero is mostly negative space, gradient breathing around a single card
- **Card padding:** ~16–24px inside the prompt card
- **Element gap:** 8–16px (nav items, input controls)

## Components

### Prompt Card (hero)
**Role:** the single interactive focal point — "Ask Lovable to create a web app that…".
White surface (`#FAFAFA`/`#fff`) on the aurora, radius ~24px, generous internal padding, muted placeholder (`#5F5F5D`). Bottom row carries a round `+` add button (left), a "Build" mode dropdown and a mic icon (right). Elevation comes from the layered `--shadow-surface-lg` — highlight border + soft ambient drop — so it hovers over the gradient without a hard edge.

### Primary Button — Inverse ("Get started")
**Role:** the top-level CTA.
Black fill (`oklch(0% 0 0/.88)`), white label, radius 8px. Uses `--shadow-button-inverse`: a `#000` hairline inset, a `#ffffff3d` top-highlight inset, and a soft `0 2px 2px -1px #0000001f` drop — the tactile "physical chip" treatment. No hover color shift; hover deepens via `--glow-on-inverse-hover`.

### Secondary Button — Neutral ("Log in")
**Role:** low-emphasis action beside the CTA.
Paper fill, warm `#ECEAE4` border, ink label, radius 8px, `--shadow-button-neutral` (white top-highlight inset + `#00000029` border inset). Reads as a raised light key.

### Accent Button (Build / focus action)
**Role:** the blue in-product action.
Fill `--bg-accent` `oklch(52.43% .2396 264.41)`, white label, `--shadow-button-accent` with the `#11318c` inset border. Same physical construction as neutral, tinted blue; hover/press via `--glow-accent-hover /.08` → `--glow-accent-pressed /.16`.

### Nav Link
**Role:** primary navigation (Solutions, Resources, Community, Enterprise, Pricing, Security).
Camera Plain 15px, weight 400 rising to 480 on the active/emphasis item, ink `#030303`. Dropdown items (Solutions ▾, Resources ▾) carry a chevron. Flat, no underline, no background until hover.

### Logo Lockup
**Role:** brand mark.
A gradient heart glyph (blue→magenta→orange, the aurora in miniature) beside "Lovable" set in Camera Plain ~20px, weight 600, ink. The only place the full rainbow appears at small scale.

### Surface Card
**Role:** generic elevated container.
Radius 12–16px, paper fill, built from `--shadow-surface-*` — a double inset border (white highlight over the warm base) plus stacked ambient offsets. Depth is luminance-and-highlight, not a heavy blurred shadow.

### Input Field
**Role:** text entry.
Paper fill with `--shadow-input-base` (`inset 0 2px 2px -1px #0000000a`) giving a subtly recessed well — the inverse of the raised buttons. Hairline `#ECEAE4` border, radius 8px.

### Switch / Toggle
**Role:** binary setting.
Pill track (`--shadow-switch-track`, recessed) with a raised thumb (`--shadow-switch-thumb`, white with its own highlight). On-state track tints toward accent blue.

### Segmented Switcher (silk pill)
**Role:** mode/segment selector.
Track uses `--lov-shadow-switcher-track`; the active pill fills with `--lov-bg-switcher-pill` — a blue-tinted (`#1f55f129`) gradient over white with a `#5e89f2` inset border glow. Lovable's most branded control.

### Badge / Semantic Pill
**Role:** status and category tags.
Full-round, filled with a semantic `-translucent` (`/.16`) background over its `-foreground` — e.g. positive, attention, highlight, special — each with the matching border form. Low-saturation, legible on paper.

### Tooltip
**Role:** transient hint.
Dark surface, radius ~8px, `--shadow-tooltip` (hairline `#0000001f` + inner `#ffffff1f` highlight + soft ambient), Camera Plain 12–14px.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white `#FCFBF8` — cream, not gray, not white.
- Spend all saturation on the aurora mesh; let chrome stay ink-on-paper.
- Build buttons and cards from the layered inset-shadow system (highlight + border + ambient) so surfaces feel physically raised.
- Compose gradients from the named brand ramp in order: sapphire → twilight → bubblegum → tiger.
- Use one type family (Camera Plain) and drive hierarchy with weight (400/480/600) and size.
- Reserve Roboto Mono strictly for code and token strings.

### Don't
- Don't introduce a cool/neutral gray background — the neutrals are warm (107 hue in OKLCH).
- Don't flatten the shadow system into a single blurred drop; the identity is the multi-layer inset build.
- Don't color the interface chrome with the brand rainbow — it belongs to the hero mesh and the logo only.
- Don't use accent blue and a second bright hue for CTAs on the same view; the black inverse button is the top action.
- Don't tighten the canvas — the hero is mostly negative space around one card.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Depth | `oklch(95.49% 0 107)` (`#F7F4ED`-warm) | Deepest recessed panels, behind base. |
| 1 | Canvas | `#FCFBF8` / `oklch(96.99% 0 107)` | The page paper. |
| 2 | Surface | `#FAFAFA` / `oklch(98.51% 0 107)` | Cards, popovers, the prompt card body. |
| 3 | Raised | `oklch(99.99% 0 107)` | Secondary/tertiary raised chips, near-white. |
| — | Inverse | `oklch(0% 0 0/.88)` | Black buttons, tooltips. |

## Elevation
Depth is carried by *luminance steps plus layered inset shadows*, not by big soft drops. Each surface climbs the neutral ramp (depth → canvas → surface → near-white) and is outlined by the silk shadow recipe: a white top-highlight inset (`inset 0 1px 0 #fff`), a warm hairline border inset (`rgba(119,119,113,.16)` / `#00000029`), then progressively stacked low-alpha ambient offsets (`-1.5px`, `-3px`, `-6px`, `-12px` at `#0000000a`). Recessed elements (inputs, switch tracks) invert the recipe with inner top shadows. The result is a tactile, "pressable chip" feel across the whole UI.

## Imagery
Effectively none in the traditional sense — the hero has no photography or illustration. The single visual is the generative aurora gradient mesh: a slow, out-of-focus wash of the brand rainbow (blue→violet→magenta→coral→orange) bleeding from the page edges toward a bright center. Icons are minimal line glyphs (`+`, chevron, mic). The gradient *is* the art direction; anything more would compete with it.

## Layout
Full-bleed canvas with a centered, single-column hero. Top bar: logo left, a flat text nav center-left, and a right cluster of outlined "Log in" + black "Get started". The hero stacks display headline → muted one-line subhead → the elevated prompt card, all vertically centered in a sea of gradient. No sidebars, no cards grid above the fold — the composition is deliberately sparse so the aurora and the one input own the screen. Content max-width for the lockup stays narrow (~600–700px) even on wide viewports.

## Typography Signature
Lovable runs a **single-family, weight-driven** system. Camera Plain Variable does display (60px/600, tight tracking), title (48px), heading (36px), and body (16px/400) — with a rare intermediate 480 weight for nav emphasis, a tell of a true variable-font design system rather than static cuts. The display lockup packs tightly (negative tracking, ~1.05 line height) so "Build something Lovable" reads as one confident object; body relaxes to ~1.5. Because there is no serif or second sans, the warm paper and the near-black ink do the tonal work, and the mono face (Roboto Mono) only surfaces for code. It is the opposite of a "big type + accent font" landing page — the loudness lives entirely in the gradient, so the type can stay calm and singular.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FCFBF8` (warm cream canvas)
- text: `#030303` (ink) / muted `#5F5F5D`
- surface: `#FAFAFA` (card) / sunk `#F7F4ED`
- border: `#ECEAE4` (warm hairline)
- accent: `oklch(52.43% .2396 264.41)` (ocean blue)
- primary action: `oklch(0% 0 0/.88)` black inverse button (the blue is the in-product accent, not the top CTA)
- hero aurora: sapphire `hsl(224.6 88.2% 53.3%)` → twilight `hsl(262 56% 51.4%)` → bubblegum `hsl(329.8 86.1% 37.8%)` → tiger `hsl(20.7 100% 40.4%)`

## Example Component Prompts
1. **Hero prompt card**: A centered white card, radius 24px, on a warm cream page. Placeholder text "Ask Lovable to create a web app that…" in muted `#5F5F5D`, Camera Plain 16px. Bottom row: a round `+` button on the left, a "Build" text dropdown and a mic icon on the right. Elevate with a layered surface shadow (white top-highlight inset + 1px warm border + soft ambient drop) — no hard border.
2. **Aurora hero background**: A full-bleed gradient mesh behind the content, blooming from a bright warm-white center outward through blue `hsl(224.6 88.2% 53.3%)`, violet `hsl(262 56% 51.4%)`, magenta `hsl(329.8 86.1% 37.8%)`, and coral `hsl(20.7 100% 40.4%)` at the edges. Soft, out-of-focus, no hard color stops.
3. **Inverse CTA button**: A black button (`oklch(0% 0 0/.88)`), white label, radius 8px, using an inset construction — `inset 0 0 0 1px #000`, `inset 0 1px 0 #ffffff3d` top highlight, and `0 2px 2px -1px #0000001f` ambient drop. Hover deepens; no color change.
4. **Display headline**: "Build something Lovable" in Camera Plain Variable, weight 600, ~60px, near-black `#030303`, tight tracking (-0.02em) and ~1.05 line height, followed by a 20px muted-gray subhead.
5. **Segmented switcher**: A pill toggle with a recessed track and a raised active pill filled with a blue-tinted gradient (`#1f55f129` over white) and a `#5e89f2` inset border glow. Labels in Camera Plain 14px.

## Similar Brands
- **Linear** — same warm-neutral restraint and obsessive semantic-token surface system, chrome kept quiet so product does the talking.
- **Vercel** — full-bleed hero, near-black-on-light type, a single input/CTA as the focal object over generous negative space.
- **Stripe** — the signature move of a soft multi-hue aurora gradient as the hero's whole art direction.
- **Raycast** — tactile "physical chip" buttons built from layered inset highlights and hairline borders.
- **Framer** — a bold single-family display lockup over a minimal light canvas, playful color reserved for the mark and hero.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — neutrals (measured) */
  --color-ink: #030303;            /* fg-primary, oklch(10% 0 0) */
  --color-heading: #1C1C1C;
  --color-muted: #5F5F5D;          /* fg-tertiary */
  --color-canvas: #FCFBF8;         /* theme-color */
  --color-surface: #FAFAFA;
  --color-sunk: #F7F4ED;
  --color-border: #ECEAE4;

  /* Silk — backgrounds (OKLCH) */
  --bg-depth: oklch(95.49% 0 107);
  --bg-base: oklch(96.99% 0 107);
  --bg-primary: oklch(98.51% 0 107);
  --bg-secondary: oklch(99.99% 0 107);
  --bg-tertiary: oklch(99.99% 0 107);
  --bg-quaternary: oklch(99.99% 0 107);
  --bg-inverse: oklch(0% 0 0/.88);
  --bg-translucent: oklch(100% 0 0/.8);
  --bg-muted: oklch(56.74% .009 106.68/.16);

  /* Silk — foregrounds */
  --fg-primary: oklch(10% 0 0);
  --fg-secondary: oklch(30% .001 107);
  --fg-tertiary: oklch(50% .001 107);
  --fg-quaternary: oklch(69% .001 107);
  --fg-inverse: oklch(98.51% 0 89.88);
  --fg-emphasis: oklch(100% 0 0);

  /* Silk — semantic (bg + translucent /.16) */
  --bg-accent: oklch(52.43% .2396 264.41);
  --bg-accent-translucent: oklch(52.43% .2396 264.41/.16);
  --fg-accent: oklch(43.93% .2138 264.41);
  --bg-destructive: oklch(58.53% .2203 26.56);
  --fg-destructive: oklch(49.84% .197 26.56);
  --bg-special: oklch(58.99% .2523 294.88);
  --fg-special: oklch(50.33% .2024 294.88);
  --bg-positive: oklch(54.42% .1689 138.23);
  --fg-positive: oklch(45.82% .1382 138.23);
  --bg-attention: oklch(58.01% .1819 40.04);
  --fg-attention: oklch(49.33% .1528 40.04);
  --bg-highlight: oklch(59.06% .2244 359.16);
  --fg-highlight: oklch(50.26% .198 359.16);

  /* Silk — borders (all /.4 unless noted) */
  --border-base: oklch(83.6% 0 107/.4);
  --border-primary: oklch(85.12% 0 107/.4);
  --border-accent: oklch(61.32% .2106 264.41/.4);
  --border-translucent: oklch(55% .002 107/.16);

  /* Brand rainbow — primaries (HSL) */
  --brand-ocean-primary: hsl(222.6 100% 62.8%);
  --brand-sapphire-primary: hsl(224.6 88.2% 53.3%);
  --brand-twilight-primary: hsl(262 56% 51.4%);
  --brand-bubblegum-primary: hsl(329.8 86.1% 37.8%);
  --brand-flamingo-primary: hsl(329.8 86.1% 37.8%);
  --brand-tiger-primary: hsl(20.7 100% 40.4%);
  --brand-saffron-primary: hsl(19.7 96.1% 33%);

  /* Semantic border-hex forms (button rims) */
  --rim-accent: #11318c;
  --rim-destructive: #8d0e13;
  --rim-special: #53388c;
  --rim-positive: #1d4e04;
  --rim-attention: #7f2902;
  --rim-highlight: #87164a;

  /* Typography — Families */
  --font-sans: 'Camera Plain Variable', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Typography — Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base-sm: 15px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-3xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-emphasis: 480;
  --weight-semibold: 600;

  /* Spacing (4px base) */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;

  /* Border Radius */
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Shadows (silk) */
  --border-default: 1px;
  --shadow-surface-border-alpha: .16;
  --shadow-button-neutral: inset 0 1px 0 0 #fff, inset 0 -1px 0 0 #fffc, inset 0 0 0 1px #00000029, 0 2px 2px -1px #0000000a, 0 4px 4px -2px #00000005;
  --shadow-button-accent: inset 0 0 0 1px #11318c, inset 0 1px 0 0 #ffffff29, inset 0 -1px 0 0 #ffffff14, 0 2px 2px -1px #091a481f, 0 4px 4px -2px #091a481f;
  --shadow-button-inverse: inset 0 0 0 1px #000, inset 0 1px 0 0 #ffffff3d, inset 0 -1px 0 0 #ffffff29, 0 2px 2px -1px #0000001f, 0 4px 4px -2px #0000001f;
  --shadow-input-base: inset 0 2px 2px -1px #0000000a, inset 0 4px 4px -2px #00000005, 0 1px 0 0 #fff;
  --shadow-tooltip: 0 0 0 1px #0000001f, inset 0 0 0 1px #ffffff1f, 0 3px 3px -1.5px #0000000a, 0 6px 6px -3px #0000000a, 0 12px 12px -6px #0000000a;
  --lov-bg-switcher-pill: linear-gradient(180deg, #0000 0%, #0000000a 100%), linear-gradient(0deg, #1f55f129 0%, #1f55f129 100%), #fff;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — neutrals */
  --color-ink: #030303;
  --color-heading: #1C1C1C;
  --color-muted: #5F5F5D;
  --color-canvas: #FCFBF8;
  --color-surface: #FAFAFA;
  --color-sunk: #F7F4ED;
  --color-border: #ECEAE4;

  /* Semantic (OKLCH) */
  --color-accent: oklch(52.43% .2396 264.41);
  --color-accent-fg: oklch(43.93% .2138 264.41);
  --color-inverse: oklch(0% 0 0/.88);
  --color-destructive: oklch(58.53% .2203 26.56);
  --color-positive: oklch(54.42% .1689 138.23);
  --color-attention: oklch(58.01% .1819 40.04);
  --color-highlight: oklch(59.06% .2244 359.16);
  --color-special: oklch(58.99% .2523 294.88);

  /* Brand rainbow */
  --color-ocean: hsl(222.6 100% 62.8%);
  --color-sapphire: hsl(224.6 88.2% 53.3%);
  --color-twilight: hsl(262 56% 51.4%);
  --color-bubblegum: hsl(329.8 86.1% 37.8%);
  --color-flamingo: hsl(329.8 86.1% 37.8%);
  --color-tiger: hsl(20.7 100% 40.4%);
  --color-saffron: hsl(19.7 96.1% 33%);

  /* Typography */
  --font-sans: 'Camera Plain Variable', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base-sm: 15px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-3xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;

  /* Radius */
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
}
```