---
version: alpha
name: OpenArt
description: A near-black gallery wall where scattered AI stills float and one magenta button burns.
colors:
  on-surface-variant: "#B0B4BA"
  on-surface: "#FFFFFF"
  surface: "#090A0A"
  primary: "#FB23C2"
  pure-black: "#000000"
  void: "#060708"
  bg-raise: "#0B0C0D"
  surface-2: "#0D0E10"
  surface-2-2: "#111315"
  card: "#16181A"
  elevated: "#17191D"
  text-soft: "#F5F6F7"
  text-card: "#EEEDF0"
  text-dim: "#A8AAAD"
  text-faint: "#60646C"
  text-ghost: "#3F454D"
  pink: "#D84DB2"
  green: "#57C77C"
  gold: "#D7BD62"
  blue: "#5D8FD8"
typography:
  hero-h1:
    fontFamily: Bricolage Grotesque
    fontSize: 80px
    fontWeight: 400
    lineHeight: 84px
    letterSpacing: -1.2px
  stat:
    fontFamily: Inter
    fontSize: 96px
    fontWeight: 400
    lineHeight: 84px
    letterSpacing: -1.12px
  h2-cinematic:
    fontFamily: Inter
    fontSize: 80px
    fontWeight: 400
    lineHeight: 84px
    letterSpacing: -1.12px
  h2-standard:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 52px
    letterSpacing: -0.144px
  h3-large:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: -0.28px
  h3-mid:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: 0px
  h3-standard:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0.216px
  caption-large:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0.196px
  price:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  eyebrow:
    fontFamily: Inter
    fontSize: 21px
    fontWeight: 400
    lineHeight: 29px
    letterSpacing: 0.231px
  body-large:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: -0.18px
  body-small:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.374px
  button:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.374px
  caption:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.374px
  fine:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.224px
  micro-nav:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: -0.12px
rounded:
  button: 8px
  small-control: 10px
  chip-small-card: 13px
  panel: 16px
  content-card: 18px
  large-card: 20px
  pill-fully-round: 999px
spacing:
  eyebrow-margin: 16px
  h2-margin: 24px
  card-gap: 32px
  card-padding: 32px
  section: 40px
  container-gutter: 80px
  heading-margin: 80px
  section-padding: 120px
  section-2: 180px
---
# OpenArt — Style Reference
> A near-black gallery wall where scattered AI stills float and one magenta button burns.

**Theme:** dark

OpenArt runs on the darkest possible canvas — a wall of near-blacks from `#090A0A` down to true `#000000` — so that the product's real output, a scattered collage of AI-generated film stills, does the coloring. The palette is deliberately monochrome until it isn't: a single hot magenta (`#FB23C2`) owns the one action that matters, and a hard candy-green promo bar (`#57C77C`) sits above the fold as the only other saturated note. The signature move is the hero itself — a colossal 900-weight all-caps display headline ("WHERE IDEAS BECOME VISUAL STORIES") slammed at ~102px in pure white, floating between drop-shadowed image cards that lean and overlap like a lightbox spread. Type pairs a heavy grotesque display (Bricolage Grotesque, with Inter carrying UI and body) against a tight, negatively-tracked headline rhythm. Layout is wide (1440px max, 80px gutters), airy (120px section padding), and full-bleed — the imagery bleeds off every edge while the copy stays centered and narrow.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Pure Black | `#000000` | `--color-black` | Deepest wells — pill insets, image-card backdrops behind the hero collage. |
| Void | `#060708` | `--color-void` | The lowest section fill; a hair above black. |
| Canvas | `#090A0A` | `--color-canvas` | Primary page background AND the ink color on light chips (does double duty). |
| Bg Raise | `#0B0C0D` | `--color-bg-raise` | First lift off canvas for banded sections. |
| Surface | `#0D0E10` | `--color-surface` | Panel fill, one step brighter. |
| Surface 2 | `#111315` | `--color-surface-2` | Secondary panel / hover surface. |
| Card | `#16181A` | `--color-card` | The measured card fill — 18px-radius content cards. |
| Elevated | `#17191D` | `--color-elevated` | Highest neutral surface; menus, raised chrome. |
| White | `#FFFFFF` | `--color-white` | Hero headline, primary text, the "Start for Free" pill fill and its border. |
| Text Soft | `#F5F6F7` | `--color-text-soft` | Near-white body on dark. |
| Text Card | `#EEEDF0` | `--color-text-card` | Body copy inside cards. |
| Text Muted | `#B0B4BA` | `--color-text-muted` | Subheads and the hero sub-paragraph. |
| Text Dim | `#A8AAAD` | `--color-text-dim` | Quiet UI labels, ghost-button text. |
| Text Faint | `#60646C` | `--color-text-faint` | Captions, meta, fine print. |
| Text Ghost | `#3F454D` | `--color-text-ghost` | Lowest-contrast disabled/placeholder ink. |
| Magenta | `#FB23C2` | `--color-magenta` | THE action color — the "Start Creating Now" CTA pill only. Never a background field, never body text. One per view. |
| Pink | `#D84DB2` | `--color-pink` | Magenta's softer sibling — gradient/hover partner to the CTA. |
| Green | `#57C77C` | `--color-green` | The top promo bar, full-bleed, with dark text. The only saturated note besides magenta. |
| Gold | `#D7BD62` | `--color-gold` | Rare accent — category tag / badge highlight. |
| Blue | `#5D8FD8` | `--color-blue` | Rare accent — category tag, sky note pulled from the imagery. |

*Note: the branding scrape reports `#FF82DB` as link/accent, but that hex does not appear in the measured token set, so it is intentionally omitted. The dark ink family also includes `#0A0A0A` and `#05070A` — deep near-blacks used as text-on-light — frozen in Quick Start.*

## Tokens — Typography
### Bricolage Grotesque — the display & heading face; heavy, slightly-condensed grotesque carrying the giant all-caps hero and section headings · `--font-display`
- **Substitute:** Inter, Arial Black, Helvetica, ui-sans-serif
- **Weights:** 400, 500, 600, 700, 800 (loaded); headings push to a 900-weight display for the hero (measured — via the heavy fallback stack)
- **Sizes:** hero ~102px measured / 80px token · h2 80px (cinematic) or 48px (standard) · h3 56 / 40 / 24px · eyebrow 21px · stat 96px
- **Line height:** tight — 84px on the 80px hero, 52px on the 48px heading (~1.02–1.08)
- **Letter spacing:** negative on large sizes (`-1.2px` hero, `-1.12px` h2), easing toward `0` and slightly positive at small sizes
- **Role:** Every headline. Set in ALL CAPS at the hero, heavy weight, tight tracking — the single loudest element on the page.

### Inter — the workhorse for UI, body, buttons, nav and the hero sub-paragraph · `--font-body`
- **Substitute:** ui-sans-serif, system-ui, Helvetica, sans-serif
- **Weights:** 300, 400, 500, 600, 700, 800, 900 (all loaded)
- **Sizes:** body-lg 18px · body-sm 17px · caption 17px · fine 14px · micro/nav 12px · btn 17px · price 28px
- **Line height:** 26px on 18px body (~1.44), 21px on 17px (~1.24)
- **Letter spacing:** subtly negative on body (`-0.18px` to `-0.374px`); near-zero on micro
- **Role:** All running text, controls, and navigation. Quiet, neutral, grey — it recedes so the imagery and the magenta lead.

### JetBrains Mono — monospace accent · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo, monospace
- **Weights:** 400, 500 (loaded)
- **Sizes:** used at fine/micro sizes for technical labels
- **Line height:** ~1.4
- **Letter spacing:** default
- **Role:** Model names, token counts, technical metadata — the "engine room" voice.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Hero / H1 | 80px (→~102px measured) | 84px | -1.2px | `--text-hero` |
| Stat | 96px | 84px | -1.12px | `--text-stat` |
| H2 cinematic | 80px | 84px | -1.12px | `--text-h2-cinematic` |
| H2 standard | 48px | 52px | -0.144px | `--text-h2-standard` |
| H3 large | 56px | 60px | -0.28px | `--text-h3-large` |
| H3 mid | 40px | 48px | 0px | `--text-h3-mid` |
| H3 standard | 24px | 28px | 0.216px | `--text-h3-standard` |
| Caption large | 28px | 32px | 0.196px | `--text-caption-large` |
| Price | 28px | — | — | `--text-price` |
| Eyebrow | 21px | 29px | 0.231px | `--text-eyebrow` |
| Body large | 18px | 26px | -0.18px | `--text-body-lg` |
| Body small | 17px | 21px | -0.374px | `--text-body-sm` |
| Button | 17px | — | -0.374px | `--text-btn` |
| Caption | 17px | 21px | -0.374px | `--text-caption` |
| Fine | 14px | 20px | -0.224px | `--text-fine` |
| Micro / Nav | 12px | 16px | -0.12px | `--text-micro` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable (generous — 120px section padding, 80px gutters)

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Eyebrow margin | 16px | `--eyebrow-mb` |
| H2 margin | 24px | `--h2-mb` |
| Card gap | 32px | `--card-gap` |
| Card padding | 32px | `--card-padding` |
| Section (tight) | 40px | `--section-py-c` |
| Container gutter | 80px | `--container-px` |
| Heading margin | 80px | `--heading-mb` |
| Section padding | 120px | `--section-py-a` |
| Section (large) | 180px | `--section-pb-large` |

### Border Radius
| Element | Value |
|---------|-------|
| Button (compact) | 8px |
| Small control | 10px |
| Chip / small card | ~13px (12.96px) |
| Panel | 16px |
| Content card | 18px |
| Large card | 20px |
| Pill / fully-round | 999px / 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Inset hairline | `rgba(255,255,255,0.04) 0 1px 0 0 inset` | `--shadow-hairline` |
| Raised pill | `rgba(255,255,255,0.18) 0 1px 0 0 inset, rgba(0,0,0,0.22) 0 12px 28px 0` | `--shadow-raise` |
| Card | `rgba(0,0,0,0.24) 0 14px 34px 0` | `--shadow-card` |
| Card lift | `rgba(0,0,0,0.32) 0 10px 24px 0` | `--shadow-lift` |
| Hero float | `rgba(0,0,0,0.78) 0 42px 120px 0, rgba(255,255,255,0.055) 0 20px 72px 0, rgba(0,0,0,0.7) 0 32px 80px 0, rgba(0,0,0,0.5) 0 12px 32px 0, rgba(0,0,0,0.4) 0 2px 6px 0, rgba(255,255,255,0.06) 0 1px 0 0 inset` | `--shadow-hero` |

### Layout
- **Page max-width:** 1440px (`--container-max`); text column capped at 980px (`--container-text-max`)
- **Section gap:** 120px vertical (180px for large closers)
- **Card padding:** 32px  - **Element gap:** 32px card gap
- **Nav height:** 44px, transparent over the hero

## Components
### Primary CTA (Start Creating Now)
**Role:** The one conversion action in the hero.
Fully-rounded pill (`--radius-full`) filled solid magenta `#FB23C2` with white label text at ~17px. Copy stacks an emphasis word ("Start Creating Now") with a lighter tail ("It's free! →"). This is the ONLY magenta object on the page — its saturation is the entire attention budget.

### Secondary CTA (Start for Free)
**Role:** Persistent top-right nav action.
Rounded-full pill with a solid `#FFFFFF` fill and near-black `#090A0A` (`--color-ink`) text, weight 600, ~11–17px, padding `0 12px`. Quiet, high-contrast, always available — the calm counterpart to the loud magenta hero button.

### Promo Bar
**Role:** Top-of-page limited-time offer strip.
Full-bleed candy-green `#57C77C` band with dark text, a white rounded-pill inline button ("Enjoy Limited Time Up to 27% OFF! →"), and a dismiss ✕ at the right edge. The only saturated horizontal band on the site.

### Top Navigation
**Role:** Global wayfinding.
44px transparent bar over the dark hero: wordmark + infinity glyph at left; centered menu (AI Tools, AI Models, Features, Resources, Pricing) with dropdown carets at 12px (`--text-nav`, weight 400); a globe/language selector and the white pill CTA at right.

### Image Card (Gallery Collage)
**Role:** Showcases model output; the hero's visual furniture.
`#16181A` fill, 18px radius (`--radius-card`), holding a full-bleed AI-generated still. Cards are scattered, rotated, and overlapped around the headline, each carrying the deep multi-layer `--shadow-hero` so they read as physical prints floating above the void.

### Hero Headline
**Role:** The brand statement.
ALL-CAPS, ~102px, 900 weight, pure white, tracking `-1.2px`, line-height ~84px so the lines stack almost touching. Centered, breaking across 3 lines ("WHERE IDEAS / BECOME VISUAL / STORIES").

### Hero Sub-paragraph
**Role:** One-line value proposition under the headline.
`--color-text-muted` `#B0B4BA`, 18px body-lg, centered, capped near the 980px text column ("Your all-in-one AI creation platform that brings characters, stories, brands, and worlds to life.").

### Eyebrow / Badge
**Role:** Section label or offer tag.
21px (`--text-eyebrow`), weight 600, tracking `+0.231px`; badge variant is a rounded-full white-bordered chip with 15–16px caps text.

### Category Tag
**Role:** Rare colored labels drawn from the imagery.
Small rounded chips tinted gold `#D7BD62` or blue `#5D8FD8` — used sparingly to categorize models/tools, never in the hero.

### Dropdown Menu
**Role:** Nav sub-navigation surface.
Raised `#17191D` (`--color-elevated`) panel, 16–18px radius, `--shadow-card`, `#EEEDF0` item text.

### Section Container
**Role:** Standard content frame.
Max 1440px wide, 80px side gutters, 120px vertical padding, contents optionally narrowed to 980px for readable prose.

### Stat Block
**Role:** Big-number proof point ("8M+ creators").
96px (`--text-stat`), display weight, tracking `-1.12px`, with a 21px label beneath — reuses the hero's typographic scale for impact.

## Do's and Don'ts
### Do
- Keep the canvas near-black (`#090A0A` and below) and let the AI imagery supply all the color.
- Reserve magenta `#FB23C2` for the single primary action per view; use white pills for everything secondary.
- Set headlines heavy, ALL-CAPS, and tightly tracked (`-1.1` to `-1.2px`) — the hero should dwarf everything.
- Float imagery on the deep `--shadow-hero` stack so cards feel like physical prints over a void.
- Round CTAs and chips fully (`999px`); round content cards to 18px.
- Use the green promo bar as the ONE saturated horizontal band, always with dark text.

### Don't
- Don't add a second saturated CTA color — two magentas cancel each other; one is law.
- Don't lighten the canvas to grey; the depth comes from stacking near-blacks, not raising the floor.
- Don't set body copy in magenta or green — accents are for actions and offers only.
- Don't center-justify at full width; keep prose inside the 980px text column while imagery bleeds edge-to-edge.
- Don't soften the hero weight — anything under 800 loses the poster punch.
- Don't introduce `#FF82DB` (or other unmeasured pinks); the magenta ramp is `#FB23C2` → `#D84DB2` only.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| -1 | Void | `#060708` | Lowest bands / behind-collage wells (with `#000000` for the deepest insets). |
| 0 | Canvas | `#090A0A` | Default page background. |
| 1 | Bg Raise | `#0B0C0D` | First banded lift. |
| 2 | Surface | `#0D0E10` | Panels. |
| 3 | Surface 2 | `#111315` | Hover / secondary panels. |
| 4 | Card | `#16181A` | Content cards (18px radius). |
| 5 | Elevated | `#17191D` | Menus, top-most chrome. |

## Elevation
Depth is built almost entirely from **shadow, not borders** — borders exist only as `#FFFFFF` (chip outlines) or `#090A0A`. The neutral surfaces step up in tiny luminance increments (`#090A0A` → `#17191D`, roughly 4–8 levels apart), so on their own they read as one dark plane; it's the shadow stack that separates layers. The hero collage uses a six-layer `--shadow-hero` (a 120px-blur black drop plus faint white inset rims) to lift cards dramatically off the void, while ordinary cards use a single `0 14px 34px rgba(0,0,0,0.24)`. Raised pills add a bright inset top-rim (`rgba(255,255,255,0.18) inset`) to catch light.

## Imagery
Imagery is the whole point and the whole palette. The hero is a **scattered lightbox collage** of AI-generated film stills — a person floating in a spaceship porthole, a horse-and-car chase across desert, an upside-down bride among flowers, a rain-soaked bus stop, a basketball scene, a locker-room portrait. Shots are cinematic, high-production, wildly varied in genre and color, cropped into 18px-rounded cards and rotated/overlapped at different sizes so they lean like physical prints. Because the UI is monochrome, the imagery carries 100% of the color and mood. Icons are minimal (dropdown carets, a globe, a dismiss ✕); the wordmark uses a custom infinity-loop glyph.

## Layout
Full-bleed and cinematic. A 1440px max container with 80px gutters holds a **centered editorial column** (headline + sub + CTA capped near 980px) while the image collage bleeds past the container to every screen edge, framing the copy. The nav is a thin 44px transparent bar over the hero. Vertical rhythm is generous — 120px section padding, up to 180px on large closers — with 32px gaps between cards. The composition is intentionally asymmetric: text dead-center, images orbiting it at varied scales and rotations.

## Typography Voice
Two registers, hard-separated. **Loud:** Bricolage Grotesque at 900 weight, ALL CAPS, ~102px, tracked in to `-1.2px` and line-stacked at ~1.02 so words nearly touch — a movie-poster shout that treats the headline as the primary graphic. **Quiet:** Inter at 400, 17–18px, softly negative tracking, in muted grey (`#B0B4BA`) — it never competes, it just delivers. The signature move is the extreme scale ratio: the hero is ~6× the body and set in a different weight class entirely, so the eye lands on the headline, drops to one calm sentence, then to the magenta button — a three-beat funnel. JetBrains Mono appears only for technical labels (model names, counts), a third small "engine room" voice.

## Agent Prompt Guide
## Quick Color Reference
- background: `#090A0A` (canvas) / deepest `#000000`
- text: `#FFFFFF` (headline) / `#B0B4BA` (muted body)
- surface: `#16181A` (card) / `#17191D` (elevated)
- border: `#FFFFFF` (chips) / `#090A0A`
- accent: `#57C77C` (promo green), `#D7BD62` gold, `#5D8FD8` blue (rare tags)
- primary action: `#FB23C2` (magenta pill — the only saturated CTA; white pill for secondary)

## Example Component Prompts
1. **Hero headline**: Full-width, centered, ALL-CAPS display headline in Bricolage Grotesque 900 at 102px, pure white `#FFFFFF`, letter-spacing `-1.2px`, line-height 84px, breaking across 3 lines, on a `#090A0A` near-black background.
2. **Primary CTA**: A fully-rounded (`border-radius: 9999px`) pill button filled solid magenta `#FB23C2`, white 17px label reading an emphasis word plus a lighter "It's free! →" tail, generous horizontal padding, `--shadow-raise` with a white inset top-rim.
3. **Promo bar**: A full-bleed candy-green `#57C77C` top strip with dark `#090A0A` centered text, an inline white rounded-pill button, and a dismiss ✕ at the right edge.
4. **Image collage card**: An 18px-radius card with `#16181A` fill holding a full-bleed cinematic AI-generated still, rotated a few degrees, lifted with a deep six-layer shadow (`0 42px 120px rgba(0,0,0,0.78)` plus faint white inset rim) so it floats above the void.
5. **Secondary nav CTA**: A rounded-full white `#FFFFFF` pill with near-black `#090A0A` text at weight 600, ~12px, padding `0 12px`, sitting top-right in a 44px transparent nav over the dark hero.

## Similar Brands
- **Midjourney** — same instinct to disappear the UI into near-black so generated imagery is the only color; gallery-first, minimal chrome.
- **Runway** — dark, cinematic, film-still-driven creative tool with an editorial hero and restrained accenting.
- **Krea** — near-black AI canvas with playful saturated accents deployed sparingly against monochrome surfaces.
- **Linear** — the same deep near-black surface stack and shadow-over-border elevation discipline (though far quieter typographically).
- **Vercel** — the pure-black + single-bold-headline poster instinct, high-contrast white-on-black with one accent action.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Neutrals / Surfaces */
  --color-black: #000000;
  --color-void: #060708;
  --color-canvas: #090A0A;
  --color-bg-raise: #0B0C0D;
  --color-surface: #0D0E10;
  --color-surface-2: #111315;
  --color-card: #16181A;
  --color-elevated: #17191D;
  /* Colors — Text (on dark) */
  --color-white: #FFFFFF;
  --color-text-soft: #F5F6F7;
  --color-text-card: #EEEDF0;
  --color-text-muted: #B0B4BA;
  --color-text-dim: #A8AAAD;
  --color-text-faint: #60646C;
  --color-text-ghost: #3F454D;
  /* Colors — Ink (on light chips) */
  --color-ink: #090A0A;
  --color-ink-2: #0A0A0A;
  --color-ink-3: #05070A;
  /* Colors — Accents */
  --color-magenta: #FB23C2;   /* primary action only */
  --color-pink: #D84DB2;
  --color-green: #57C77C;      /* promo bar */
  --color-gold: #D7BD62;
  --color-blue: #5D8FD8;

  /* Typography — Families */
  --font-display: 'Bricolage Grotesque', 'Arial Black', Helvetica, ui-sans-serif, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-hero: 80px;
  --text-stat: 96px;
  --text-h2-cinematic: 80px;
  --text-h2-standard: 48px;
  --text-h3-large: 56px;
  --text-h3-mid: 40px;
  --text-h3-standard: 24px;
  --text-caption-large: 28px;
  --text-price: 28px;
  --text-eyebrow: 21px;
  --text-body-lg: 18px;
  --text-body-sm: 17px;
  --text-btn: 17px;
  --text-caption: 17px;
  --text-fine: 14px;
  --text-micro: 12px;
  --text-nav: 12px;
  /* Line heights */
  --leading-hero: 84px;
  --leading-h2-standard: 52px;
  --leading-h3-large: 60px;
  --leading-h3-mid: 48px;
  --leading-h3-standard: 28px;
  --leading-body-lg: 26px;
  --leading-body-sm: 21px;
  --leading-fine: 20px;
  --leading-micro: 16px;
  /* Letter spacing */
  --ls-hero: -1.2px;
  --ls-h2-cinematic: -1.12px;
  --ls-h2-standard: -0.144px;
  --ls-h3-large: -0.28px;
  --ls-body-lg: -0.18px;
  --ls-body: -0.374px;
  --ls-eyebrow: 0.231px;

  /* Weights */
  --weight-hero: 700;      /* display pushes to 900 for the poster hero */
  --weight-display: 600;
  --weight-body: 400;
  --weight-body-emphasis: 600;
  --weight-btn: 400;

  /* Spacing / Layout */
  --container-max: 1440px;
  --container-text-max: 980px;
  --container-px: 80px;
  --section-py: 120px;
  --section-pb-large: 180px;
  --section-py-tight: 40px;
  --heading-mb: 80px;
  --h2-mb: 24px;
  --eyebrow-mb: 16px;
  --card-gap: 32px;
  --card-padding: 32px;
  --nav-height: 44px;

  /* Border Radius */
  --radius-btn: 8px;
  --radius-sm: 10px;
  --radius-chip: 12.96px;
  --radius-panel: 16px;
  --radius-card: 18px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-hairline: rgba(255,255,255,0.04) 0 1px 0 0 inset;
  --shadow-raise: rgba(255,255,255,0.18) 0 1px 0 0 inset, rgba(0,0,0,0.22) 0 12px 28px 0;
  --shadow-card: rgba(0,0,0,0.24) 0 14px 34px 0;
  --shadow-lift: rgba(0,0,0,0.32) 0 10px 24px 0;
  --shadow-hero: rgba(0,0,0,0.78) 0 42px 120px 0, rgba(255,255,255,0.055) 0 20px 72px 0, rgba(0,0,0,0.7) 0 32px 80px 0, rgba(0,0,0,0.5) 0 12px 32px 0, rgba(0,0,0,0.4) 0 2px 6px 0, rgba(255,255,255,0.06) 0 1px 0 0 inset;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Neutrals / Surfaces */
  --color-black: #000000;
  --color-void: #060708;
  --color-canvas: #090A0A;
  --color-bg-raise: #0B0C0D;
  --color-surface: #0D0E10;
  --color-surface-2: #111315;
  --color-card: #16181A;
  --color-elevated: #17191D;
  /* Colors — Text */
  --color-white: #FFFFFF;
  --color-text-soft: #F5F6F7;
  --color-text-card: #EEEDF0;
  --color-text-muted: #B0B4BA;
  --color-text-dim: #A8AAAD;
  --color-text-faint: #60646C;
  --color-text-ghost: #3F454D;
  /* Colors — Ink */
  --color-ink: #090A0A;
  --color-ink-2: #0A0A0A;
  --color-ink-3: #05070A;
  /* Colors — Accents */
  --color-magenta: #FB23C2;
  --color-pink: #D84DB2;
  --color-green: #57C77C;
  --color-gold: #D7BD62;
  --color-blue: #5D8FD8;

  /* Typography — Families */
  --font-display: 'Bricolage Grotesque', 'Arial Black', Helvetica, ui-sans-serif, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-hero: 80px;
  --text-stat: 96px;
  --text-h2-cinematic: 80px;
  --text-h2-standard: 48px;
  --text-h3-large: 56px;
  --text-h3-mid: 40px;
  --text-h3-standard: 24px;
  --text-caption-large: 28px;
  --text-price: 28px;
  --text-eyebrow: 21px;
  --text-body-lg: 18px;
  --text-body-sm: 17px;
  --text-btn: 17px;
  --text-caption: 17px;
  --text-fine: 14px;
  --text-micro: 12px;
  --text-nav: 12px;

  /* Spacing / Layout */
  --spacing-container-max: 1440px;
  --spacing-container-text-max: 980px;
  --spacing-container-px: 80px;
  --spacing-section: 120px;
  --spacing-section-large: 180px;
  --spacing-section-tight: 40px;
  --spacing-heading-mb: 80px;
  --spacing-card-gap: 32px;
  --spacing-card-padding: 32px;
  --spacing-nav-height: 44px;

  /* Border Radius */
  --radius-btn: 8px;
  --radius-sm: 10px;
  --radius-chip: 12.96px;
  --radius-panel: 16px;
  --radius-card: 18px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: rgba(0,0,0,0.24) 0 14px 34px 0;
  --shadow-lift: rgba(0,0,0,0.32) 0 10px 24px 0;
  --shadow-hero: rgba(0,0,0,0.78) 0 42px 120px 0, rgba(255,255,255,0.055) 0 20px 72px 0, rgba(0,0,0,0.7) 0 32px 80px 0, rgba(0,0,0,0.5) 0 12px 32px 0, rgba(0,0,0,0.4) 0 2px 6px 0, rgba(255,255,255,0.06) 0 1px 0 0 inset;
}
```