open-design/design-systems/runwayml/tokens.css

/* ─────────────────────────────────────────────────────────────────────────
 * design-systems/runwayml/tokens.css
 *
 * Structured token bindings for the "Runway" brand — a cinematic,
 * editorial-cinema dark canvas where photography (and AI-generated
 * video) is the design and the chrome is intentionally invisible.
 *
 * Brand identity in three sentences:
 *   1. Pure-black canvas (#000000) under bright pure-white type
 *      (#ffffff), with cool blue-gray neutrals (#767d88 / #7d848e)
 *      for the entire supporting text ramp — never warm gray.
 *   2. Single typeface system: abcNormal at 400 / 450 / 500 / 600
 *      (no bold) handles everything from 48px display down to 11px
 *      uppercase tags. Hierarchy comes from size + case + tracking,
 *      not weight.
 *   3. Zero shadows, near-invisible borders (#27272a hairline), and
 *      sharp 4–8px corners — depth comes from photographic content
 *      and dark-vs-light section alternation, never from CSS blur.
 *
 * Schema decisions:
 *   - --bg: #000000; --surface: #1a1a1a (dark card surface);
 *     --surface-warm: #030303 (the rarely-used third-tier dark, an
 *     "even darker" panel surface — this brand does not have a warm
 *     temperature, so the B-slot reads as a parallel cool tier).
 *   - --fg: #ffffff; --fg-2: #e9ecf2 (Cool Cloud — alt heading tone);
 *     --muted: #767d88 (Cool Slate); --meta: #7d848e (Mid Slate).
 *   - --border: #27272a (Border Dark); --border-soft: #1a1a1a (row
 *     separator that blends into the dark surface — "barely visible
 *     containment", per DESIGN.md §4).
 *   - --accent: #ffffff. Runway has no decorative accent color; the
 *     highest-signal surface in the system is pure white against
 *     black. Hover/active states dim toward Cool Cloud / Cool Silver
 *     rather than mixing in a hue.
 *   - --font-display / --font-body bind to abcNormal — DESIGN.md §3
 *     mandates a single typeface; Inter / DM Sans are documented
 *     external substitutes for the custom face.
 *   - --tracking-display: -0.025em (-1.2px at 48px hero per
 *     DESIGN.md §3 hierarchy table).
 *   - --leading-tight: 1.0 (film-title compression on display sizes);
 *     --leading-body: 1.4 (mid-range of the documented 1.30–1.50
 *     band — body text stays editorial-tight, never magazine-loose).
 *   - --section-y-desktop: 78px ("cinema-grade breathing" — the
 *     largest discrete step on the documented spacing scale).
 *   - --radius-sm: 4px (sharp / button); --radius-md: 8px (card,
 *     image); --radius-lg: 16px (alert containers only — DESIGN.md §4).
 *   - --elev-raised: none. The brand do/don't is explicit: zero
 *     shadows. We override the schema's blur fallback so any
 *     component that reaches for `var(--elev-raised)` produces no
 *     shadow, preserving the cinematic flat-vs-photographic depth
 *     model. --elev-ring stays available for the "alert container"
 *     case where a hairline ring substitutes for a border.
 *   - --container-max: 1600px (cinema-wide, per DESIGN.md §5 grid).
 * ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface (3 levels) ──────────────────────────────────────────
   * Dark-dominant. The canvas is true black; cards lift onto Dark
   * Surface (#1a1a1a) without a shadow or border. --surface-warm is
   * the schema's B-slot for a tertiary tier; runway has no warm
   * temperature, so we bind it to Deep Black (#030303) — a parallel
   * "even darker" panel used for layered dark containers. */
  --bg:           #000000;             /* Runway Black — primary canvas */
  --surface:      #1a1a1a;             /* Dark Surface — card / lifted container */
  --surface-warm: #030303;             /* Deep Black — third-tier layered panel */

  /* ─── Foreground (4 levels) ───────────────────────────────────────
   * Pure white anchors the ramp; Cool Cloud is a near-imperceptible
   * alt for headings; the muted / meta tiers are the brand's
   * signature cool-blue grays (never warm). */
  --fg:    #ffffff;                    /* Pure White — primary type, brand mark */
  --fg-2:  #e9ecf2;                    /* Cool Cloud — alt heading tone */
  --muted: #767d88;                    /* Cool Slate — secondary body text */
  --meta:  #7d848e;                    /* Mid Slate — tertiary, metadata */

  /* ─── Border (2 levels) ───────────────────────────────────────────
   * Per DESIGN.md §4: "barely visible containment". --border is the
   * single dark-mode border value; --border-soft blends almost into
   * the card surface so row separators do not visually compete. */
  --border:      #27272a;              /* Border Dark — alert / standard edge */
  --border-soft: #1a1a1a;              /* matches surface — inner row separator */

  /* ─── Accent ──────────────────────────────────────────────────────
   * Runway has no decorative color — DESIGN.md §2 is explicit ("None
   * in the interface. Visual richness comes entirely from
   * photographic content"). Pure white IS the brand's high-signal
   * accent, used on CTA fills and the focus ring. Hover/active dim
   * toward the cool-silver neutrals rather than mixing in any hue. */
  --accent:        #ffffff;            /* Pure White — sole interface accent */
  --accent-on:     #000000;            /* black type on white CTA fill */
  --accent-hover:  #e9ecf2;            /* Cool Cloud — hover dim */
  --accent-active: #c9ccd1;            /* Cool Silver — pressed dim */

  /* ─── Semantic ────────────────────────────────────────────────────
   * Runway's UI does not surface state colors in its public surface;
   * we inherit the schema defaults so any utility/admin chrome the
   * fixture spawns still resolves. Keep semantic coverage <5% of any
   * surface — this is not a brand color tier. */
  --success: #16a34a;
  --warn:    #eab308;
  --danger:  #dc2626;

  /* ─── Typography ──────────────────────────────────────────────────
   * Single typeface commitment. DESIGN.md §3: "abcNormal handles
   * every text role." We list the documented external substitutes
   * (Inter, DM Sans) as the next layer of the fallback chain so the
   * fixture renders predictably on machines without the custom face. */
  --font-display: "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale — direct map of DESIGN.md §3 hierarchy table.
   *   11px micro/tag (uppercase, weight 450) → --text-xs
   *   13px small description                 → --text-sm
   *   16px body / button                     → --text-base
   *   20px feature title                     → --text-lg
   *   24px card title                        → --text-xl
   *   36px sub-heading                       → --text-2xl
   *   40px section heading                   → --text-3xl
   *   48px display / hero                    → --text-4xl */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  36px;
  --text-3xl:  40px;
  --text-4xl:  48px;

  /* Leading + tracking.
   *   --leading-tight: 1.0 → film-title compression on display sizes.
   *   --leading-body: 1.4 → mid-range of DESIGN.md's documented
   *     1.30–1.50 body band; intentionally editorial-tight.
   *   --tracking-display: -0.025em → -1.2px at 48px hero per
   *     DESIGN.md §3 hierarchy table. */
  --leading-body:     1.4;
  --leading-tight:    1.0;
  --tracking-display: -0.025em;

  /* ─── Spacing ─────────────────────────────────────────────────────
   * 8px base unit per DESIGN.md §5 — the schema's 4px-grid scale
   * maps cleanly. Runway's documented scale (4/6/8/12/16/20/24/28/
   * 32/48/64/78) lands on every required step except 6/28/64/78,
   * which live inline in components (no token name needed). */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  /* Section rhythm — "cinema-grade breathing". 78px on desktop is
   * the largest discrete step on the documented scale, creating the
   * scrolling-between-scenes pacing called out in DESIGN.md §5. */
  --section-y-desktop: 78px;
  --section-y-tablet:  48px;
  --section-y-phone:   32px;

  /* ─── Radius ──────────────────────────────────────────────────────
   * DESIGN.md §5 documents four tiers: 4px sharp (buttons), 6–8px
   * comfortable (containers/images), 16px generous (alerts). The
   * pill tier is preserved at the schema default — Runway forbids
   * pill-shaped UI ("Don't use pill-shaped radius"), so the token
   * exists purely so cross-brand components resolve cleanly. */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ─── Elevation ───────────────────────────────────────────────────
   * DESIGN.md §6 is explicit: "Runway uses zero shadows." We honor
   * that by overriding --elev-raised to `none` (depth comes from
   * dark/light section alternation and photographic depth of field,
   * never from CSS blur). --elev-ring remains as a hairline ring so
   * the documented "alert container" case still has a treatment. */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: none;

  /* ─── Focus ───────────────────────────────────────────────────────
   * White ring on dark canvas — the only chromatic affordance the
   * brand permits. 60% transparency keeps the ring readable without
   * looking like a fill. */
  --focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 60%);

  /* ─── Motion ──────────────────────────────────────────────────────
   * Slightly slower base than the schema default — cinematic pacing
   * favors deliberate state changes over instant snap. Easing stays
   * on the standard curve so micro-interactions still feel
   * mechanical-precise rather than springy. */
  --motion-fast:   150ms;
  --motion-base:   220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ──────────────────────────────────────────────────────
   * Cinema-wide container — DESIGN.md §5: "up to 1600px". Gutters
   * progressively shrink from 48px desktop → 16px phone so the
   * full-bleed photography hero can stay edge-to-edge. */
  --container-max:            1600px;
  --container-gutter-desktop: 48px;
  --container-gutter-tablet:  24px;
  --container-gutter-phone:   16px;
}