---
version: alpha
name: Figma
description: "Black ink on infinite white — the chrome recedes so the canvas can speak."
colors:
  on-surface-variant: "#697485"
  on-surface: "#000000"
  surface: "#FFFFFF"
  error: "#972121"
  primary: "#67FF7F"
  static-hairline: "#E2E2E2"
  mint-wash: "#F3FFE3"
typography:
  form-label:
    fontFamily: Figma Sans
    fontSize: 0.6875rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.03125rem
  badge:
    fontFamily: Figma Sans
    fontSize: 0.75rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  body-caption:
    fontFamily: Figma Sans
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-l:
    fontFamily: Figma Sans
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-xl:
    fontFamily: Figma Sans
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  title-4:
    fontFamily: Figma Sans
    fontSize: 1.375rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.04125rem
  title-3:
    fontFamily: Figma Sans
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.04125rem
  title-2:
    fontFamily: Figma Sans
    fontSize: 2rem
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.04125rem
  title-1:
    fontFamily: Figma Sans
    fontSize: 2.25rem
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.078125rem
  display-2:
    fontFamily: Figma Sans
    fontSize: 2.75rem
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.078125rem
  display-1:
    fontFamily: Figma Sans
    fontSize: 4.5rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.078125rem
  hero:
    fontFamily: Figma Sans
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.078125rem
rounded:
  sharp-detail-tag: 2px
  input-small-chip: 4px
  button-card: 8px
  panel: 12px
  large-panel: 16px
  feature-block: 24px
  hero-action-large-block: 28px
  pill-avatar-play-button: 9999px
spacing:
  "4": 0.25rem
  "6": 0.375rem
  "8": 0.5rem
  "12": 0.75rem
  "16": 1rem
  "24": 1.5rem
  "32": 2rem
  "40": 2.5rem
  "56": 3.5rem
  "64": 4rem
  "80": 5rem
  "120": 7.5rem
---
# Figma — Style Reference
> Black ink on infinite white — the chrome recedes so the canvas can speak.

**Theme:** light

Figma's marketing surface is a near-monochrome system: pure black type on pure white paper, with every gray in between computed as black held at a reduced opacity via `color-mix(in oklch, #000000, transparent X%)` rather than picked as a discrete swatch. The one signature move is restraint — the interface is deliberately colorless so the embedded product work (the stacked festival posters, the shopping app, the community canvases) supplies all the chroma. Type is set in the variable **Figma Sans** at unusually light sub-regular weights (320–340 for body, ~400–540 for emphasis), tracked tight, which gives huge display headlines an airy, drawn quality instead of a heavy one. Layout is a calm 4-column, 1440–1520px grid with generous 5rem "lego-block" section padding. The only saturated colors in the whole token set are a signal green highlight and a single dark-red form-error state — both used sparingly, as punctuation.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--fig-theme-fg` | Primary text and primary-button fill. The entire gray ramp is *this* black at reduced opacity — there are no standalone gray hexes. |
| Paper | `#FFFFFF` | `--fig-theme-bg` | The canvas; also the foreground of any element sitting on black. |
| Foreground Muted | `color-mix(in oklch, #000000, transparent 46%)` | `--fig-theme-fg-muted` | Secondary/supporting text; ~54% black. Never for headlines. |
| Slate | `#697485` | `--color-slate` *(inferred name)* | Cool blue-gray secondary text where a true neutral is wanted over transparent black. |
| Card Fill | `color-mix(in oklch, #000000, transparent 96%)` | `--fig-theme-card-bg` | The faintest 4%-black tint that lifts a card off white without a border. |
| Hairline | `color-mix(in oklch, #000000, transparent 84%)` | `--fig-theme-border` | Default 16%-black divider/border. |
| Hairline Hover | `color-mix(in oklch, #000000, transparent 60%)` | `--fig-theme-border-hover` | Border darkens to 40% black on hover. |
| Static Hairline | `#E2E2E2` | `--color-hairline-static` *(inferred name)* | The one literal border gray (nav underline / input outline) where opacity blending isn't used. |
| Signal Green | `#67FF7F` | `--color-signal-green` *(inferred name)* | High-voltage accent surface — highlight blocks only, never body or CTAs. |
| Mint Wash | `#F3FFE3` | `--color-mint-wash` *(inferred name)* | Pale green section tint; the quiet companion to Signal Green. |
| Error | `#972121` | `--fig-theme-form-error-bg` | Form-error background (white text). The only red in the system; state signalling only. |

## Tokens — Typography
### Figma Sans — the entire voice: display, headings, body, UI. A variable family with weight, width, and slant axes, run at light sub-regular weights. · `--global-font-sans`
- **Substitute:** SF Pro Display, system-ui, Helvetica, sans-serif
- **Weights:** 320, 330, 340, 400, 450, 520, 540 (variation axis: regular 400 · bold 600 · bolder 700)
- **Sizes:** 11 · 12 · 14 · 16 · 18 · 24 · 30 · 32 · 44 · 56 · 86 · 88 px
- **Line height:** 1.0 (`lh-none`) → 1.45 (`lh-loose`); display sits at ~1.0–1.1
- **Letter spacing:** tight `-0.078125rem` on display, `-0.04125rem` standard, `0` slight/none, `0.03125rem` wide on caps labels
- **Width & slant axes:** width condensed 96 / narrow 98 / normal 100; italic slant `-6`
- **Role:** One typeface does everything. The lightness (default loaded weight is 320) is the identity — even the 86–88px hero reads elegant rather than bold.

### Figma Mono — code, spec labels, metadata · `--global-font-mono`
- **Substitute:** SF Mono, Menlo, monospace
- **Weights:** 400 (mono variation 100)
- **Sizes:** shares the 11–14px caption/label steps
- **Line height:** 1.3–1.45
- **Letter spacing:** 0
- **Role:** Utility voice — technical labels, kbd hints, and code specimens; never body copy.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Form Label | 0.6875rem (11px) | 1.2 | `0.03125rem` | `--fig-typography-size-formLabel` |
| Badge | 0.75rem (12px) | 1.2 | `0` | `--fig-typography-size-badge` |
| Body / Caption | 0.875rem (14px) | 1.4 | `0` | `--fig-typography-size-body` |
| Body L | 1rem (16px) | 1.4 | `0` | `--fig-typography-size-bodyL` |
| Body XL | 1.125rem (18px) | 1.4 | `0` | `--fig-typography-size-bodyXL` |
| Title 4 | 1.375rem (22px) | 1.2 | `-0.04125rem` | `--fig-typography-size-title4` |
| Title 3 | 1.5rem (24px) | 1.2 | `-0.04125rem` | `--fig-typography-size-title3` |
| Title 2 | 2rem (32px) | 1.1 | `-0.04125rem` | `--fig-typography-size-title2` |
| Title 1 | 2.25rem (36px) | 1.1 | `-0.078125rem` | `--fig-typography-size-title1` |
| Display 2 | 2.75rem (44px) | 1.1 | `-0.078125rem` | `--fig-typography-size-display2` |
| Display 1 | 4.5rem (72px) | 1.0 | `-0.078125rem` | `--fig-typography-size-display1` |
| Hero (rendered) | 86–88px | ~1.0 | `-0.078125rem` | *(clamp above Display 1)* |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (5rem section blocks)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 0.25rem | `--fig-space-4` |
| 6 | 0.375rem | `--fig-space-6` |
| 8 | 0.5rem | `--fig-space-8` |
| 12 | 0.75rem | `--fig-space-12` |
| 16 | 1rem | `--fig-space-16` |
| 24 | 1.5rem | `--fig-space-24` |
| 32 | 2rem | `--fig-space-32` |
| 40 | 2.5rem | `--fig-space-40` |
| 56 | 3.5rem | `--fig-space-56` |
| 64 | 4rem | `--fig-space-64` |
| 80 | 5rem | `--fig-space-80` |
| 120 | 7.5rem | `--fig-space-120` |

### Border Radius
| Element | Value |
|---------|-------|
| Sharp detail / tag | 2px (`--fig-radius-2`) |
| Input / small chip | 4px (`--fig-radius-4`) |
| Button / card | 8px (`--fig-radius-8`) |
| Panel | 12px (`--fig-radius-12`) |
| Large panel | 16px (`--fig-radius-16`) |
| Feature block | 24px (`--fig-radius-24`) |
| Hero action / large block | 28px (`--fig-radius-28`) |
| Pill / avatar / play button | 9999px (`--fig-radius-full`) · 50% for circles |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Elevation 1 | `0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%)` | `--fig-elevation-1-shadow` |
| Elevation 2 | `0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%)` | `--fig-elevation-2-shadow` |
| Inset hairline | `oklch(0 0 none / 0.16) 0 0 0 1px inset` | *(button/input border)* |
| Inset baseline | `oklch(0 0 none / 0.16) 0 1px 0 0` | *(1px seated edge)* |

### Layout
- **Page max-width:** 1440px (`--f-max-content-width`) / 95rem grid outer (`--fig-grid-max-content-width`)
- **Grid:** 4 columns, 1rem margin, 1rem gutter (`--fig-grid-*`)
- **Section gap:** 5rem lego-block padding (`--f-lego-block-padding`); 2.5rem section block padding
- **Card padding:** 24–36px range (from measured button/card specs)
- **Element gap:** 24px default gutter (`--f-gutter`)

## Components
### Primary Button ("Get started for free")
**Role:** The single conversion action, top-right of the nav and repeated in-page.
Fill `#000000` (`--fig-theme-btn-primary-bg`), text `#FFFFFF`, radius 8px, ~8px vertical padding, 16px label at ~450 weight. Hover darkens toward `color-mix(#000000, transparent 15%)`. A larger variant ("Get started") uses the same black on radius up to 16–28px.

### Secondary / Outline Button ("Contact sales")
**Role:** The lower-commitment sales path shown beside the primary CTA.
Transparent/white fill (`--fig-theme-btn-secondary-bg`), text `#000000`, 1px static hairline border (`#E2E2E2`), radius 8px. Reads as an inverse of the primary — same shape, no ink.

### Transparent / Ghost Button
**Role:** Tertiary and in-toolbar actions.
Fill `color-mix(#000000, transparent 96%)` (barely-there 4% black), text `#000000`, hover deepens to 92%/96% black. Ghost variant starts fully transparent and only tints on hover.

### Pill Button
**Role:** Rounded, high-emphasis action on media/dark surfaces.
Fill `#000000`, text `#FFFFFF`, 1px `#FFFFFF` border, radius 9999px, 16–18px label. The border lets it survive on top of imagery.

### Nav Bar
**Role:** Persistent top navigation.
White bar, `#000000` link labels at 16px/400, dropdown groups (Products, Solutions, Community, Resources) with a caret plus a flat "Pricing" link; right cluster is Log in (text) · Contact sales (outline) · Get started for free (black). Separated from content by a single `#E2E2E2` hairline underline.

### Card
**Role:** Content container that lifts off the canvas without a hard edge.
Fill `--fig-theme-card-bg` (4% black), no border, radius 8–16px, elevation-1 shadow. Padding on the 24px grid. Depth is a whisper, not a drop.

### Badge
**Role:** Small status/label token.
Fill `--fig-theme-badge-bg` (8% black), text `#000000` (`--fig-theme-badge-fg`), 12px label, tight radius. Used for tags and counts.

### Form Input
**Role:** Text entry.
Fill `--fig-theme-form-input-bg` (8% black), placeholder at `--fig-theme-form-placeholder` (54% black), 14px `formInput` size, radius 4px, static `#E2E2E2` outline. Focus deepens the border.

### Form Error
**Role:** Validation failure state.
Background `#972121`, text `#FFFFFF`. The only saturated-red moment in the system — reserved strictly for errors.

### Highlight Block (Signal Green)
**Role:** Occasional attention surface within otherwise-monochrome sections.
Background `#67FF7F` or its pale `#F3FFE3` wash, `#000000` text. Deployed rarely, as a jolt against the black-and-white field.

### Play / Pause Control
**Role:** Media control over the hero carousel.
Solid `#000000` circle (radius 9999px), white glyph. A minimal, unlabeled affordance.

### Media Stack (Hero)
**Role:** The signature hero motif — overlapping product screens (festival poster, shopping app, community canvases) fanned in depth.
Each screen is a rounded (12–24px) card carrying elevation-2 shadow; this stack is the *only* place vivid color lives — supplied by the content, not the theme.

## Do's and Don'ts
### Do
- Keep the interface black-and-white; derive every gray from `color-mix(in oklch, #000000, transparent X%)` rather than inventing swatches.
- Let embedded product imagery carry all the chroma — the chrome stays neutral.
- Set Figma Sans light (320–340 body); trust the tight tracking on big display sizes.
- Use radius 8px for buttons and cards, 9999px only for pills, avatars, and the play control.
- Reserve `#67FF7F`/`#F3FFE3` for genuine highlight moments and `#972121` for errors only.

### Don't
- Don't add brand accent colors to buttons or links — the primary action is black, full stop.
- Don't bold body text into 600/700; that breaks the airy, light typographic texture.
- Don't put hard borders on cards when a 4%-black fill plus elevation-1 already separates them.
- Don't let green become a theme color — it is punctuation, not palette.
- Don't tint the canvas; white is the constant, load-bearing ground.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The page ground; never tinted. |
| 1 | Card | `color-mix(in oklch, #000000, transparent 96%)` | 4%-black lift for grouped content. |
| 2 | Input / Badge | `color-mix(in oklch, #000000, transparent 92%)` | 8%-black recessed field. |
| 3 | Inverse | `#000000` | Black media panels, primary buttons, and the play control. |
| — | Accent | `#67FF7F` / `#F3FFE3` | Optional signal surface. |

## Elevation
Depth is conveyed two ways and both are subtle. Cards separate by a **luminance step** (a 4%-black fill on white) rather than a shadow, and where shadow is used it is soft and wide: elevation-1 is `0 0.25rem 2rem` at 10% black, elevation-2 (for the fanned hero media) is `0 1.5rem 4.375rem` at 10% black. Controls and inputs seat with 1px inset hairlines (`oklch(0 0 none / 0.16)`). Nothing is heavy — the whole system floats a millimeter off the page.

## Imagery
Photography and rendered product UI are the entire visual payload, and they are the deliberate opposite of the monochrome frame: festival posters with gradient auras, a dark shopping app full of model photography, community canvases. The theme stays colorless *precisely so* this imagery can be loud. Icons are minimal line/geometric marks. The brand mark itself is the well-known interlocking multi-color geometric glyph, kept small in the nav.

## Layout
Full-width white canvas with a contained 1440px (95rem grid) inner column on a 4-column grid, 1rem margins and gutters. Sections breathe on 5rem "lego-block" vertical padding. The hero is asymmetric: oversized left-aligned display headline against a right-side fanned media stack, with the CTA floated far right — an editorial, off-balance composition rather than a centered banner. A single hairline separates the sticky nav from content; there are no boxed containers or heavy dividers anywhere below it.

## Typography Signature
Two things make Figma Sans read as Figma. First, **weight**: the family is variable and the site runs it *below* regular — the default loaded weight is 320, body sits at 320–340, and even emphasis rarely passes 540. Nothing is bold in the conventional sense, which is what keeps an 86–88px hero elegant instead of aggressive. Second, **tracking discipline**: display and title sizes pull letter-spacing tight (`-0.078rem` to `-0.041rem`) while body stays at 0 and only all-caps micro-labels open up to `+0.031rem`. Combined with tight line-heights (1.0–1.1 on display, 1.4 on body) and a genuine width axis (condensed 96 → normal 100) plus a `-6` italic slant, the type has range without ever changing family. One typeface, many voices.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` / text: `#000000` / muted text: `color-mix(in oklch, #000000, transparent 46%)` or `#697485`
- surface: `color-mix(in oklch, #000000, transparent 96%)` / border: `#E2E2E2` (or 16%-black `color-mix`)
- accent: `#67FF7F` (highlight only) · error: `#972121`
- primary action: `#000000` on `#FFFFFF` — there is no distinct brand CTA color; the CTA is black.

## Example Component Prompts
1. **Primary CTA**: Black button, `background:#000000`, `color:#FFFFFF`, `border-radius:8px`, `padding:8px 16px`, Figma Sans 16px weight 450; hover to `color-mix(in oklch,#000000,transparent 15%)`.
2. **Outline button**: White fill, `color:#000000`, `1px solid #E2E2E2`, `border-radius:8px`, same padding and label as the primary — an inverse twin.
3. **Hero headline**: Left-aligned Figma Sans at 86px, weight 400, `letter-spacing:-0.078rem`, `line-height:1.0`, `color:#000000` on `#FFFFFF`, over a right-side fanned media stack.
4. **Content card**: `background: color-mix(in oklch, #000000, transparent 96%)`, no border, `border-radius:12px`, `box-shadow:0 0.25rem 2rem color-mix(in oklch,#000000,transparent 90%)`, 24px padding.
5. **Highlight block**: `background:#67FF7F` (or `#F3FFE3` wash), `color:#000000`, generous 5rem section padding — used once, as a jolt.

## Similar Brands
- **Linear** — shares the near-monochrome, hairline-and-luminance discipline where grays are opacity steps, not swatches.
- **Vercel** — the same black-on-white restraint with a single high-contrast black CTA and no decorative accent color.
- **Framer** — kindred variable-type, off-balance hero compositions where product imagery carries the color.
- **Notion** — the same "colorless container so the content can be the color" philosophy.
- **Stripe** — comparable calm grid, tight display tracking, and product UI treated as the hero visual.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — literal */
  --color-ink: #000000;
  --color-paper: #FFFFFF;
  --color-slate: #697485;
  --color-hairline-static: #E2E2E2;
  --color-signal-green: #67FF7F;
  --color-mint-wash: #F3FFE3;
  --color-error: #972121;

  /* Colors — theme (derived from black via color-mix) */
  --fig-theme-bg: #FFFFFF;
  --fig-theme-fg: #000000;
  --fig-theme-fg-muted: color-mix(in oklch, #000000, transparent 46%);
  --fig-theme-card-bg: color-mix(in oklch, #000000, transparent 96%);
  --fig-theme-btn-primary-bg: #000000;
  --fig-theme-btn-primary-bg-hover: color-mix(in oklch, #000000, transparent 15%);
  --fig-theme-btn-primary-fg: #FFFFFF;
  --fig-theme-btn-secondary-bg: color-mix(in oklch, #000000, transparent 100%);
  --fig-theme-btn-secondary-fg: #000000;
  --fig-theme-btn-transparent-bg: color-mix(in oklch, #000000, transparent 96%);
  --fig-theme-btn-transparent-bg-hover: color-mix(in oklch, #000000, transparent 92%);
  --fig-theme-btn-transparent-fg: #000000;
  --fig-theme-btn-ghost-bg: color-mix(in oklch, #000000, transparent 100%);
  --fig-theme-btn-ghost-bg-hover: color-mix(in oklch, #000000, transparent 96%);
  --fig-theme-form-placeholder: color-mix(in oklch, #000000, transparent 46%);
  --fig-theme-form-input-bg: color-mix(in oklch, #000000, transparent 92%);
  --fig-theme-form-error-bg: #972121;
  --fig-theme-form-error-fg: #FFFFFF;
  --fig-theme-border: color-mix(in oklch, #000000, transparent 84%);
  --fig-theme-border-hover: color-mix(in oklch, #000000, transparent 60%);
  --fig-theme-badge-bg: color-mix(in oklch, #000000, transparent 92%);
  --fig-theme-badge-fg: #000000;

  /* Typography — Families */
  --global-font-sans: 'Figma Sans', 'SF Pro Display', system-ui, helvetica, sans-serif;
  --global-font-mono: 'Figma Mono', 'SF Mono', menlo, monospace;

  /* Typography — Scale */
  --fig-typography-size-display1: 4.5rem;
  --fig-typography-size-display2: 2.75rem;
  --fig-typography-size-title1: 2.25rem;
  --fig-typography-size-title2: 2rem;
  --fig-typography-size-title3: 1.5rem;
  --fig-typography-size-title4: 1.375rem;
  --fig-typography-size-bodyXL: 1.125rem;
  --fig-typography-size-bodyL: 1rem;
  --fig-typography-size-body: 0.875rem;
  --fig-typography-size-caption: 0.875rem;
  --fig-typography-size-button: 1rem;
  --fig-typography-size-buttonS: 0.875rem;
  --fig-typography-size-badge: 0.75rem;
  --fig-typography-size-formInput: 0.875rem;
  --fig-typography-size-formLabel: 0.6875rem;

  /* Typography — Line height & tracking */
  --fig-typography-lh-none: 1;
  --fig-typography-lh-tight: 1.1;
  --fig-typography-lh-snug: 1.2;
  --fig-typography-lh-normal: 1.3;
  --fig-typography-lh-relaxed: 1.4;
  --fig-typography-lh-loose: 1.45;
  --fig-typography-ls-tight: -0.078125rem;
  --fig-typography-ls-standard: -0.04125rem;
  --fig-typography-ls-slight: 0rem;
  --fig-typography-ls-wide: 0.03125rem;

  /* Spacing */
  --fig-space-4: 0.25rem;
  --fig-space-6: 0.375rem;
  --fig-space-8: 0.5rem;
  --fig-space-12: 0.75rem;
  --fig-space-16: 1rem;
  --fig-space-24: 1.5rem;
  --fig-space-32: 2rem;
  --fig-space-40: 2.5rem;
  --fig-space-56: 3.5rem;
  --fig-space-64: 4rem;
  --fig-space-80: 5rem;
  --fig-space-120: 7.5rem;

  /* Border Radius */
  --fig-radius-2: 0.125rem;
  --fig-radius-4: 0.25rem;
  --fig-radius-8: 0.5rem;
  --fig-radius-12: 0.75rem;
  --fig-radius-16: 1rem;
  --fig-radius-24: 1.5rem;
  --fig-radius-28: 1.75rem;
  --fig-radius-full: 9999px;

  /* Elevation */
  --fig-elevation-1-shadow: 0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%);
  --fig-elevation-2-shadow: 0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%);

  /* Layout */
  --f-max-content-width: 1440px;
  --fig-grid-max-content-width: 95rem;
  --fig-grid-columns: 4;
  --fig-grid-margin: 1rem;
  --fig-grid-gutter: 1rem;
  --f-lego-block-padding: 5rem;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #000000;
  --color-paper: #FFFFFF;
  --color-slate: #697485;
  --color-hairline-static: #E2E2E2;
  --color-signal-green: #67FF7F;
  --color-mint-wash: #F3FFE3;
  --color-error: #972121;
  --color-fg-muted: color-mix(in oklch, #000000, transparent 46%);
  --color-card-bg: color-mix(in oklch, #000000, transparent 96%);
  --color-input-bg: color-mix(in oklch, #000000, transparent 92%);
  --color-border: color-mix(in oklch, #000000, transparent 84%);
  --color-border-hover: color-mix(in oklch, #000000, transparent 60%);
  --color-error-fg: #FFFFFF;

  /* Fonts */
  --font-sans: 'Figma Sans', 'SF Pro Display', system-ui, helvetica, sans-serif;
  --font-mono: 'Figma Mono', 'SF Mono', menlo, monospace;

  /* Type scale */
  --text-formlabel: 0.6875rem;
  --text-badge: 0.75rem;
  --text-body: 0.875rem;
  --text-bodyl: 1rem;
  --text-bodyxl: 1.125rem;
  --text-title4: 1.375rem;
  --text-title3: 1.5rem;
  --text-title2: 2rem;
  --text-title1: 2.25rem;
  --text-display2: 2.75rem;
  --text-display1: 4.5rem;

  /* Line height */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.3;
  --leading-relaxed: 1.4;
  --leading-loose: 1.45;

  /* Tracking */
  --tracking-tight: -0.078125rem;
  --tracking-standard: -0.04125rem;
  --tracking-wide: 0.03125rem;

  /* Spacing */
  --spacing-4: 0.25rem;
  --spacing-6: 0.375rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-56: 3.5rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --spacing-120: 7.5rem;

  /* Radius */
  --radius-2: 0.125rem;
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-24: 1.5rem;
  --radius-28: 1.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-elevation-1: 0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%);
  --shadow-elevation-2: 0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%);
}
```