Runway

MIT
Warm, accessible design system with amber accents and refined typography, suited to modern SaaS and content-driven products
Published by Layout24 importsminimal tier
light saas content-first
Layout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install runway
Download .zip Read the CLI docs
UI themeReskin shadcn or Layout UI components to match Runway.
npx shadcn add https://layout.design/r/runway/theme.json
Browse Layout UI components
# layout.md — Runway Design System

---

## 0. Quick Reference

**Stack:** CSS custom properties from Figma extraction. Token source: `extracted-from-figma` (149 tokens, high confidence).
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.

```css
:root {
  /* BRAND */
  --_color---brand--500: #f9a600;           /* Primary amber accent */
  --_color---neutral--900: #261b07;         /* Body text, near-black warm */
  --_color---neutral--200: #f8f7f5;         /* Page background, warm off-white */
  --_color---neutral--100: white;           /* Surface, cards */
  --_color---neutral--400: #e3dfd5;         /* Borders, dividers */
  --_color---neutral--700: #493f2f;         /* Secondary text */
  --_color---neutral--800: #332a19;         /* Dark surface text */

  /* SEMANTIC ALIASES */
  --colors--background: var(--_color---neutral--200);
  --colors--text: var(--_color---neutral--900);
  --colors--primary-accent: var(--_color---brand--500);
  --colors--border: var(--_color---neutral--400);

  /* TYPOGRAPHY */
  --_typography---fonts--primary-font: "Interphases Pro Variable", Arial, sans-serif;

  /* SPACING */
  --_layout---width--container-md: 76rem;
  --_responsive---grid--gap-main: 40px;
  --_responsive---padding--section-md: 10rem;
  --_responsive---padding--section-sm: 5rem;

  /* RADIUS */
  --_size---radius--corner-md: .5rem;       /* Buttons */
  --_size---radius--corner-lg: .75rem;      /* Cards */
  --_size---radius--corner-sm: .375rem;
  --_size---radius--corner-xs: .25rem;

  /* COMPONENTS */
  --_components---button--border-radius: var(--_size---radius--corner-md);
  --_components---card--border-radius: var(--_size---radius--corner-lg);
}
```

```tsx
// Primary button — production-ready
<button
  className="btn-primary"
  style={{
    fontFamily: 'var(--_typography---fonts--primary-font)',
    fontSize: 'var(--_components---button--font-size)',       /* .875rem */
    fontWeight: 'var(--_components---button--font-weight)',   /* 584 */
    letterSpacing: 'var(--_components---button--letter-spacing)',
    borderRadius: 'var(--_components---button--border-radius)',
    padding: 'var(--_components---button--vertical-padding) var(--_components---button--horizontal-padding)',
    background: 'var(--_color---brand--500)',
    color: 'var(--_color---neutral--900)',
    boxShadow: 'var(--_utility---shadow--button-outset)',
  }}
>
  Get started
</button>
```

**NEVER rules:**
- NEVER use `Inter`, `Roboto`, or `Arial` as primary font — always `"Interphases Pro Variable", Arial, sans-serif`
- NEVER use cool-toned grays — all neutrals are warm brown-tinted (#261b07 not #1a1a1a)
- NEVER use pill-shaped buttons — button radius is `--_size---radius--corner-md` (0.5rem), not 9999px
- NEVER hardcode `#f9a600` — always use `var(--_color---brand--500)`
- NEVER use font-weight 700 or 400 for headings — headings use weight **584**
- NEVER add section padding below `--_responsive---padding--section-sm` (5rem) without explicit reason
- NEVER use cold/blue-toned backgrounds — background is warm `#f8f7f5`

Full design system → see **layout.md**

---

## 1. Design Direction & Philosophy

### Character & Mood
Runway's design language is **warm, premium, and purposeful**. The palette is anchored in warm brown-blacks and off-whites — a deliberate rejection of the cold gray/white aesthetic common in SaaS. The amber brand accent (`#f9a600`) signals energy and focus without aggression.

Typography uses a custom variable font ("Interphases Pro Variable") with non-standard weight values (492, 584) that exist between conventional 500 and 600 — this is intentional and creates a distinctive typographic density. Tight letter-spacing (−0.01em to −0.02em) on all headings and body text gives copy a compact, editorial feel.

### Aesthetic Intent
- **Warm minimalism** — generous whitespace but with a warm, earthy tonal range
- **Editorial density** — tight line heights (1.0–1.25), tight tracking, no loose leading
- **Tactile depth** — subtle inset shadows on inputs, multi-layer outset shadows on buttons create physical affordance
- **Structured grid** — 40px main gap, fluid percentage-based container widths at 1344/1440 scale

### What This Design Explicitly Rejects
- Cool grays, pure whites, or blue-toned neutral palettes
- Rounded pill buttons (radius is a modest 0.5rem)
- Loose or relaxed typography (no line-heights above 1.25)
- Heavy drop shadows or dramatic elevation
- Generic system fonts (Inter, Roboto, SF Pro as primary)
- Hot or saturated accent colours — the amber is rich but muted

---

## 2. Colour System

### Tier 1: Primitive Values

```css
:root {
  /* Warm Neutral Scale — extracted */
  --_color---neutral--100: white;           /* Pure white surface */
  --_color---neutral--200: #f8f7f5;         /* Warm off-white, page background */
  --_color---neutral--400: #e3dfd5;         /* Warm light border/divider */
  --_color---neutral--700: #493f2f;         /* Medium warm brown, secondary text */
  --_color---neutral--800: #332a19;         /* Dark warm brown, dark surface text */
  --_color---neutral--900: #261b07;         /* Near-black warm brown, primary text */

  /* Brand */
  --_color---brand--500: #f9a600;           /* Amber, primary CTA and accent */

  /* UI Utility Colours */
  --_color---ui--red: #f0624f;              /* Error, destructive states */
  --_color---ui--purple: #d5befa;           /* Tag, highlight, decorative */
  --_color---ui--blue: #6ac9ff;             /* Info, link accent, decorative */
  --_color---ui--green: #ade988;            /* Success, positive states */
}
```

### Tier 2: Semantic Aliases

```css
:root {
  --colors--background: var(--_color---neutral--200);  /* Page-level background */
  --colors--text: var(--_color---neutral--900);         /* Default body text */
  --colors--primary-accent: var(--_color---brand--500);/* Primary interactive colour */
  --colors--border: var(--_color---neutral--400);       /* All borders and dividers */
}
```

### Tier 3: Component Applications

```css
:root {
  /* Button */
  --_components---button--bg: var(--_color---brand--500);
  --_components---button--text: var(--_color---neutral--900);
  --_components---button--border-radius: var(--_size---radius--corner-md); /* 0.5rem */

  /* Card */
  --_components---card--bg: var(--_color---neutral--100);
  --_components---card--border: var(--_color---neutral--400);
  --_components---card--border-radius: var(--_size---radius--corner-lg); /* 0.75rem */

  /* Input */
  --_components---input--bg: var(--_color---neutral--100);
  --_components---input--border: var(--_color---neutral--400);
  --_components---input--border-radius: .5rem;
}
```

### Colour Table

| Token | Value | Usage |
|---|---|---|
| `--_color---neutral--900` | `#261b07` | Primary text, headings |
| `--_color---neutral--800` | `#332a19` | Dark surface text |
| `--_color---neutral--700` | `#493f2f` | Secondary/muted text |
| `--_color---neutral--400` | `#e3dfd5` | Borders, dividers, subtle strokes |
| `--_color---neutral--200` | `#f8f7f5` | Page background |
| `--_color---neutral--100` | `white` | Card and input surfaces |
| `--_color---brand--500` | `#f9a600` | CTA buttons, active states, highlights |
| `--_color---ui--red` | `#f0624f` | Error, destructive |
| `--_color---ui--green` | `#ade988` | Success, positive |
| `--_color---ui--blue` | `#6ac9ff` | Info, links |
| `--_color---ui--purple` | `#d5befa` | Tags, decorative |

---

## 3. Typography System

All type uses **`"Interphases Pro Variable", Arial, sans-serif`**. Weight values are non-standard variable font axes: **584** for headings (between semibold and bold), **492** for eyebrow labels, **400** for body text.

```css
:root {
  --_typography---fonts--primary-font: "Interphases Pro Variable", Arial, sans-serif; /* extracted */
}
```

### Composite Type Groups

```css
:root {
  /* H1 — Hero headings */
  /* font: var(--_typography---fonts--primary-font) */
  /* font-size: var(--_responsive---font-size--h1) = 4.5rem */
  /* font-weight: 584 */
  /* line-height: 1 */
  /* letter-spacing: -0.02em */
  /* margin-bottom: 0.2em */

  /* H2 — Section headings */
  /* font: var(--_typography---fonts--primary-font) */
  /* font-size: var(--_responsive---font-size--h2) = 3.5rem */
  /* font-weight: 584 */
  /* line-height: 1.125 */
  /* letter-spacing: -0.02em */
  /* margin-bottom: 0.3em */

  /* H3 — Subsection headings */
  /* font: var(--_typography---fonts--primary-font) */
  /* font-size: var(--_responsive---font-size--h3) = 2.25rem */
  /* font-weight: 584 */
  /* line-height: 1.125 */
  /* letter-spacing: -0.01em */
  /* margin-bottom: 0.5em */

  /* H4 */
  /* font-size: 1.5rem | font-weight: 584 | line-height: 1.25 | letter-spacing: -0.01em | margin-bottom: 0.5em */

  /* H5 */
  /* font-size: 1.25rem | font-weight: 584 | line-height: 1.25 | letter-spacing: -0.01em | margin-bottom: 0.4em */

  /* H6 */
  /* font-size: 1rem | font-weight: 584 | line-height: 1.25 | letter-spacing: -0.01em | margin-bottom: 0.5em */

  /* Eyebrow — Label above headings */
  /* font-size: 0.75rem | font-weight: 492 | line-height: 1.125 | letter-spacing: 0.05em | margin-bottom: 0.75em */
  /* NOTE: Eyebrow uses POSITIVE tracking (+0.05em), opposite to all other styles */

  /* Paragraph XL */
  /* font-size: 1.5rem | font-weight: 400 | line-height: 1.25 | letter-spacing: -0.01em */

  /* Paragraph LG */
  /* font-size: 1.25rem | font-weight: 400 | line-height: 1.25 | letter-spacing: -0.01em */

  /* Paragraph MD (base body) */
  /* font-size: 1rem | font-weight: 400 | line-height: 1.25 | letter-spacing: -0.01em | margin-bottom: 1em */

  /* Paragraph SM */
  /* font-size: 0.875rem | font-weight: 400 | line-height: 1.25 | letter-spacing: -0.01em */

  /* Paragraph XS */
  /* font-size: 0.75rem | font-weight: 400 | line-height: 1.25 | letter-spacing: -0.01em */
}
```

### Typography Scale Table

| Style | Font Size Token | Size | Weight | Line Height | Letter Spacing |
|---|---|---|---|---|---|
| H1 | `--_responsive---font-size--h1` | 4.5rem | **584** | 1.0 | −0.02em |
| H2 | `--_responsive---font-size--h2` | 3.5rem | **584** | 1.125 | −0.02em |
| H3 | `--_responsive---font-size--h3` | 2.25rem | **584** | 1.125 | −0.01em |
| H4 | `--_responsive---font-size--h4` | 1.5rem | **584** | 1.25 | −0.01em |
| H5 | `--_responsive---font-size--h5` | 1.25rem | **584** | 1.25 | −0.01em |
| H6 | `--_responsive---font-size--h6` | 1rem | **584** | 1.25 | −0.01em |
| Eyebrow | `--_responsive---font-size--eyebrow` | 0.75rem | **492** | 1.125 | **+0.05em** |
| Paragraph XL | `--_responsive---font-size--paragraph-xl` | 1.5rem | 400 | 1.25 | −0.01em |
| Paragraph LG | `--_responsive---font-size--paragraph-lg` | 1.25rem | 400 | 1.25 | −0.01em |
| Paragraph MD | `--_responsive---font-size--paragraph-md` | 1rem | 400 | 1.25 | −0.01em |
| Paragraph SM | `--_responsive---font-size--paragraph-sm` | 0.875rem | 400 | 1.25 | −0.01em |
| Paragraph XS | `--_responsive---font-size--paragraph-xs` | 0.75rem | 400 | 1.25 | −0.01em |
| Button | `--_components---button--font-size` | 0.875rem | **584** | 1.0 | −0.01em |
| Input | `--_components---input--font-size` | 1rem | 400 | 1.25em | 0em |
| Input Label | `--_components---input-label--font-size` | 0.875rem | **584** | 1.25em | −0.01em |

### Pairing Rules
- **Eyebrow → H2**: Standard section opening pattern. Eyebrow in `--_color---neutral--700`, H2 in `--_color---neutral--900`.
- **H1 with Paragraph XL**: Hero pattern. H1 line-height 1.0 creates compact mass; Paragraph XL provides breathing room below.
- NEVER mix heading weights — all headings must use weight **584**, never 600, 700, or 500.
- NEVER set body text above 1.5rem without using the Paragraph XL token.

---

## 4. Spacing & Layout

```css
:root {
  /* Section Vertical Padding */
  --_responsive---padding--section-md: 10rem;   /* Default full section padding */ /* extracted */
  --_responsive---padding--section-sm: 5rem;    /* Compact section padding */ /* extracted */
  --_responsive---padding--section-xs: 2rem;    /* Minimal section padding */ /* extracted */

  /* Container Widths */
  --_layout---width--container-lg: 84rem;       /* Large container */ /* extracted */
  --_layout---width--container-md: 76rem;       /* Default content container */ /* extracted */
  --_layout---width--container-sm: 61.25rem;    /* Narrow/text container */ /* extracted */
  --_layout---width--container-nav: 88.5rem;    /* Navigation bar container */ /* extracted */
  --_responsive---container--width-md: calc(1344/1440*100%); /* Fluid 93.3% width */ /* extracted */
  --_responsive---padding--inner-container: calc(64/1344*100%); /* Inner gutter ~4.76% */ /* extracted */

  /* Grid Gaps */
  --_responsive---grid--gap-main: 40px;         /* Primary grid column gap */ /* extracted */
  --_responsive---grid--gap-md: 20px;           /* Medium gap */ /* extracted */
  --_responsive---grid--gap-sm: 16px;           /* Small gap */ /* extracted */

  /* Layout Margins */
  --_layout---spacing--margin-xs: .5em;         /* Tight margin */ /* extracted */
  --_layout---spacing--margin-sm: 1em;          /* Small margin */ /* extracted */
  --_layout---spacing--margin-md: 2em;          /* Medium margin */ /* extracted */
  --_layout---spacing--margin-lg: 3em;          /* Large margin */ /* extracted */

  /* Card Padding */
  --_responsive---padding--card-xs: .375rem;    /* Compact card padding */ /* extracted */
  --_responsive---padding--card-md: 1.25rem;    /* Default card padding */ /* extracted */
  --_responsive---padding--card-lg: 2rem;       /* Large card padding */ /* extracted */

  /* Navigation */
  --_layout---height--nav: 3.8125rem;           /* Fixed nav height 61px */ /* extracted */

  /* Utility */
  --_utility---outline--width: 2px;             /* Focus ring width */ /* extracted */
  --_utility---outline--offset: 2px;            /* Focus ring offset */ /* extracted */
}
```

### Grid System
- **Base grid gap:** `40px` (`--_responsive---grid--gap-main`)
- **Container strategy:** fluid percentage `calc(1344/1440*100%)` at desktop, capped by `--_layout---width--container-md: 76rem`
- **Inner gutter:** `calc(64/1344*100%)` on each side of the container
- **Column system:** 12-column, with gap-aware column width formula: `calc(N*100%/12 + gap*(N-12)/12)`
- Grid gap tiers: `40px` main → `20px` medium → `16px` small

### Spacing Decision Rule
Use `em`-based margins (`--_layout---spacing--*`) for content-relative spacing (headings, paragraphs). Use `rem`-based padding tokens for component/section padding to remain independent of font scaling.

---

## 6. Component Patterns

### 6.1 Button

**Anatomy:** `[shadow-outset] [border-radius] [vertical-padding + horizontal-padding] [font] [inset-shadow]`

| State | Background | Text | Shadow | Transform |
|---|---|---|---|---|
| Default | `--_color---brand--500` (#f9a600) | `--_color---neutral--900` | `--_utility---shadow--button-outset` + `--_utility---shadow--button-inset` | none |
| Hover | darken `--_color---brand--500` ~8% | `--_color---neutral--900` | `--_utility---shadow--button-outset` enhanced | translateY(-1px) |
| Focus | `--_color---brand--500` | `--_color---neutral--900` | outline `2px` `--_color---brand--500` offset `2px` | none |
| Active | darken `--_color---brand--500` ~15% | `--_color---neutral--900` | reduced/no outset shadow | translateY(0) |
| Disabled | `--_color---neutral--400` | `--_color---neutral--700` | none | none |

```tsx
// Button — production-ready with full state handling
import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  disabled,
  children,
  ...props
}) => {
  const sizeStyles: Record<string, React.CSSProperties> = {
    sm: { fontSize: '0.75rem', padding: '0.375em 1em' },
    md: { fontSize: 'var(--_components---button--font-size)', padding: 'var(--_components---button--vertical-padding) var(--_components---button--horizontal-padding)' },
    lg: { fontSize: '1rem', padding: '0.625em 1.5em' },
  };

  const variantStyles: Record<string, React.CSSProperties> = {
    primary: {
      background: 'var(--_color---brand--500)',
      color: 'var(--_color---neutral--900)',
      border: 'none',
      boxShadow: [
        'var(--_utility---shadow--button-outset)',
        'var(--_utility---shadow--button-inset)',
      ].join(', '),
    },
    secondary: {
      background: 'var(--_color---neutral--100)',
      color: 'var(--_color---neutral--900)',
      border: `1px solid var(--_color---neutral--400)`,
      boxShadow: 'var(--_utility---shadow--button-outset)',
    },
    ghost: {
      background: 'transparent',
      color: 'var(--_color---neutral--900)',
      border: 'none',
      boxShadow: 'none',
    },
  };

  return (
    <button
      disabled={disabled || isLoading}
      style={{
        fontFamily: 'var(--_typography---fonts--primary-font)',
        fontWeight: 584,
        lineHeight: 'var(--_components---button--line-height)',
        letterSpacing: 'var(--_components---button--letter-spacing)',
        borderRadius: 'var(--_components---button--border-radius)',
        cursor: disabled || isLoading ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1,
        transition: 'transform 120ms ease, box-shadow 120ms ease, background 120ms ease',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '0.5em',
        whiteSpace: 'nowrap',
        ...sizeStyles[size],
        ...variantStyles[variant],
      }}
      onMouseEnter={e => {
        if (!disabled && !isLoading) {
          (e.currentTarget as HTMLButtonElement).style.transform = 'translateY(-1px)';
        }
      }}
      onMouseLeave={e => {
        (e.currentTarget as HTMLButtonElement).style.transform = 'translateY(0)';
      }}
      onMouseDown={e => {
        (e.currentTarget as HTMLButtonElement).style.transform = 'translateY(0)';
      }}
      {...props}
    >
      {isLoading ? <span aria-hidden="true">···</span> : null}
      {children}
    </button>
  );
};
```

---

### 6.2 Card

**Anatomy:** `[border-radius-lg] [card-padding] [border] [shadow] [background-white]`

| State | Background | Border | Shadow |
|---|---|---|---|
| Default | `--_color---neutral--100` | `1px solid --_color---neutral--400` | `--_utility---shadow--card` |
| Hover | `--_color---neutral--100` | `1px solid --_color---neutral--700` | elevated outset shadow |
| Focus (keyboard) | `--_color---neutral--100` | `--_utility---outline--width` outline | `--_utility---shadow--card` |

```tsx
interface CardProps {
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
}

export const Card: React.FC<CardProps> = ({ size = 'md', children, onClick }) => {
  const padding = {
    sm: 'var(--_responsive---padding--card-xs)',
    md: 'var(--_responsive---padding--card-md)',
    lg: 'var(--_responsive---padding--card-lg)',
  }[size];

  return (
    <div
      tabIndex={onClick ? 0 : undefined}
      role={onClick ? 'button' : undefined}
      onClick={onClick}
      style={{
        background: 'var(--_color---neutral--100)',
        border: '1px solid var(--_color---neutral--400)',
        borderRadius: 'var(--_components---card--border-radius)',
        padding,
        boxShadow: 'var(--_utility---shadow--card)',
        transition: 'border-color 150ms ease, box-shadow 150ms ease',
        cursor: onClick ? 'pointer' : 'default',
      }}
      onMouseEnter={e => {
        (e.currentTarget as HTMLDivElement).style.borderColor = 'var(--_color---neutral--700)';
      }}
      onMouseLeave={e => {
        (e.currentTarget as HTMLDivElement).style.borderColor = 'var(--_color---neutral--400)';
      }}
    >
      {children}
    </div>
  );
};
```

---

### 6.3 Input

**Anatomy:** `[input-label] [input-field] [border] [inset-shadow]`

| State | Border | Shadow | Background |
|---|---|---|---|
| Default | `1px solid --_color---neutral--400` | `--_utility---shadow--input` | `--_color---neutral--100` |
| Focus | `1px solid --_color---brand--500` | `--_utility---shadow--input` + brand outline | `--_color---neutral--100` |
| Error | `1px solid --_color---ui--red` | `--_utility---shadow--input` | `--_color---neutral--100` |
| Disabled | `1px solid --_color---neutral--400` | none | `--_color---neutral--200` |

```tsx
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

export const Input: React.FC<InputProps> = ({ label, error, id, disabled, ...props }) => (
  <div style={{ marginBottom: 'var(--_components---input--bottom-margin)' }}>
    {label && (
      <label
        htmlFor={id}
        style={{
          display: 'block',
          fontFamily: 'var(--_typography---fonts--primary-font)',
          fontSize: 'var(--_components---input-label--font-size)',
          fontWeight: 584,
          lineHeight: 'var(--_components---input-label--line-height)',
          letterSpacing: 'var(--_components---input-label--letter-spacing)',
          color: 'var(--_color---neutral--900)',
          marginBottom: '0.375rem',
        }}
      >
        {label}
      </label>
    )}
    <input
      id={id}
      disabled={disabled}
      style={{
        fontFamily: 'var(--_typography---fonts--primary-font)',
        fontSize: 'var(--_components---input--font-size)',
        fontWeight: 400,
        lineHeight: 'var(--_components---input--line-height)',
        letterSpacing: '0em',
        borderRadius: 'var(--_components---input--border-radius)',
        border: error
          ? '1px solid var(--_color---ui--red)'
          : '1px solid var(--_color---neutral--400)',
        background: disabled ? 'var(--_color---neutral--200)' : 'var(--_color---neutral--100)',
        boxShadow: disabled ? 'none' : 'var(--_utility---shadow--input)',
        padding: '.5em .75em',
        width: '100%',
        color: 'var(--_color---neutral--900)',
        outline: 'none',
        transition: 'border-color 120ms ease',
      }}
      onFocus={e => {
        e.currentTarget.style.borderColor = error
          ? 'var(--_color---ui--red)'
          : 'var(--_color---brand--500)';
        e.currentTarget.style.outline = `var(--_utility---outline--width) solid var(--_color---brand--500)`;
        e.currentTarget.style.outlineOffset = 'var(--_utility---outline--offset)';
      }}
      onBlur={e => {
        e.currentTarget.style.borderColor = error
          ? 'var(--_color---ui--red)'
          : 'var(--_color---neutral--400)';
        e.currentTarget.style.outline = 'none';
      }}
      {...props}
    />
    {error && (
      <p style={{
        fontSize: 'var(--_responsive---font-size--paragraph-xs)',
        color: 'var(--_color---ui--red)',
        marginTop: '0.375rem',
        fontFamily: 'var(--_typography---fonts--primary-font)',
        fontWeight: 400,
      }}>
        {error}
      </p>
    )}
  </div>
);
```

---

### 6.4 Eyebrow Label

**Anatomy:** `[small-caps-like text] [positive letter-spacing] [medium weight 492]`

```tsx
export const Eyebrow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <p
    style={{
      fontFamily: 'var(--_typography---fonts--primary-font)',
      fontSize: 'var(--_responsive---font-size--eyebrow)',  /* 0.75rem */
      fontWeight: 492,
      lineHeight: 1.125,
      letterSpacing: '0.05em',  /* POSITIVE tracking — unique to eyebrow */
      marginBottom: 'var(--_typography---eyebrow--bottom-margin)',
      color: 'var(--_color---neutral--700)',
      textTransform: 'uppercase',
    }}
  >
    {children}
  </p>
);
```

---

### 6.5 Navigation Bar

**Anatomy:** `[container-nav width] [fixed height 3.8125rem] [background neutral-100] [border-bottom neutral-400]`

```tsx
export const NavBar: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <nav
    style={{
      height: 'var(--_layout---height--nav)',
      maxWidth: 'var(--_layout---width--container-nav)',
      margin: '0 auto',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '0 var(--_responsive---padding--inner-container)',
      background: 'var(--_color---neutral--100)',
      borderBottom: '1px solid var(--_color---neutral--400)',
    }}
  >
    {children}
  </nav>
);
```

---

## 7. Elevation & Depth

```css
:root {
  /* Button Shadows — extracted */
  --_utility---shadow--button-inset:
    0px 2px 4px 0px color-mix(in srgb, var(--_color---neutral--100) 56%, transparent) inset;
  /* White inset highlight — creates raised/physical button feel */

  --_utility---shadow--button-outset:
    0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent),
    0px 1px 2px 0px color-mix(in srgb, var(--_color---neutral--900) 36%, transparent);
  /* Dual-layer outset — soft ambient + tight contact shadow */

  /* Card Shadow — extracted */
  --_utility---shadow--card:
    0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent);
  /* Soft single-layer ambient lift */

  /* Input Shadow — extracted */
  --_utility---shadow--input:
    0px 1px 2px 0px color-mix(in srgb, var(--_color---neutral--900) 32%, transparent) inset,
    0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent) inset;
  /* Dual inset — pressed/recessed affordance */

  /* Focus Ring */
  --_utility---outline--width: 2px;   /* extracted */
  --_utility---outline--offset: 2px;  /* extracted */
  /* Focus: outline var(--_utility---outline--width) solid var(--_color---brand--500) */
  /* offset: var(--_utility---outline--offset) */

  /* Border Radius Scale */
  --_size---radius--corner-xs: .25rem;  /* Tight radius, tags/chips */ /* extracted */
  --_size---radius--corner-sm: .375rem; /* Small elements */ /* extracted */
  --_size---radius--corner-md: .5rem;   /* Buttons, inputs */ /* extracted */
  --_size---radius--corner-lg: .75rem;  /* Cards, modals */ /* extracted */
}
```

### Z-Index Scale

| Layer | Z-index | Usage |
|---|---|---|
| Base | 0 | Default page flow |
| Card | 1 | Cards lifted from background |
| Dropdown | 100 | Menus, popovers |
| Nav | 200 | Sticky navigation |
| Modal backdrop | 300 | Overlay layer |
| Modal | 400 | Modal dialogs |
| Toast | 500 | Notification toasts |

### Elevation Principles
- Shadows use `color-mix()` to inherit warm tones from `--_color---neutral--900` (`#261b07`) — **never use cold gray box shadows**
- Inset shadows signal recessed/interactive-input affordance; outset shadows signal raised/clickable affordance
- Maximum elevation depth: two-layer shadow. Never use three or more shadow layers.

---

## 8. Motion

No motion tokens were explicitly defined in the Figma extraction. The following values are inferred from design patterns. [TBD - extract manually from production CSS for authoritative values]

```css
:root {
  /* Duration Scale — inferred from component complexity */
  --motion-duration-instant: 80ms;    /* Micro feedback: button press */
  --motion-duration-fast: 120ms;      /* Default interaction: hover, border-color */
  --motion-duration-standard: 150ms;  /* State transitions: card hover */
  --motion-duration-enter: 200ms;     /* Element entering: dropdown open */
  --motion-duration-exit: 150ms;      /* Element leaving: dropdown close */
  --motion-duration-layout: 300ms;    /* Layout shifts, page transitions */

  /* Easing */
  --motion-ease-default: ease;        /* Standard transitions */
  --motion-ease-out: ease-out;        /* Elements entering viewport */
  --motion-ease-in: ease-in;          /* Elements leaving viewport */
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Button hover lift */
}
```

### Motion Rules
- **Transition properties:** `transform`, `box-shadow`, `border-color`, `background`, `opacity` — transition these individually, never `all`
- **Button hover:** `transform: translateY(-1px)` at `120ms ease` — subtle vertical lift only
- **Interactive elements:** Always transition `border-color` and `box-shadow` together at the same duration
- NEVER animate `width`, `height`, or `padding` for performance — use `transform: scale()` instead
- NEVER use motion durations above `300ms` for UI feedback (reserve for page-level transitions)
- **Respect `prefers-reduced-motion`:** wrap all transforms in `@media (prefers-reduced-motion: no-preference)`

---

## 9. Anti-Patterns & Constraints

1. **Using Inter, Roboto, or Arial as the primary font → Why it fails:** AI models default to `Inter` for "clean modern" interfaces. Runway's design uses `"Interphases Pro Variable"` — a custom variable font with weight axes that don't correspond to standard weight keywords. Using Inter breaks the typographic identity and loses variable weight precision (584, 492). **What to do instead:** Always declare `font-family: var(--_typography---fonts--primary-font)` and use numeric `font-weight` values (584, 492, 400) — never named weights like `semibold` or `bold`.

2. **Hardcoding colour hex values → Why it fails:** AI agents often inline colours like `color: #261b07` directly in JSX or CSS. When the design system updates a token value, all hardcoded instances become stale inconsistencies. Runway's neutrals are also non-standard warm browns — AI will often "correct" them to standard cool grays. **What to do instead:** Always use `var(--_color---neutral--900)` etc. Never write a hex value in component code.

3. **Using pill-shaped buttons (border-radius 9999px) → Why it fails:** AI agents trained on SaaS UIs default to fully-rounded pill buttons because they're common in modern design. Runway explicitly uses `--_size---radius--corner-md` (0.5rem = 8px) for buttons — a modest radius that conveys precision, not playfulness. **What to do instead:** Always use `border-radius: var(--_components---button--border-radius)` which resolves to `0.5rem`.

4. **Inventing arbitrary spacing values → Why it fails:** AI agents fill gaps in component spacing with arbitrary values like `padding: 12px 16px` or `margin: 24px`. Runway has a precise spacing system with em-based margins and rem-based padding. Arbitrary px values break the proportional rhythm and don't scale with font size where intended. **What to do instead:** Use tokens: `--_responsive---padding--card-md`, `--_layout---spacing--margin-md`, etc. For sizing not in the scale, use the nearest token and note it for design review.

5. **Using cold/neutral gray backgrounds → Why it fails:** AI models strongly associate "clean UI" with neutral grays like `#f5f5f5`, `#fafafa`, or `#eee`. Runway's background is a **warm off-white** `#f8f7f5` (`--_color---neutral--200`) and all neutrals carry warm brown undertones. Cold grays create a jarring off-brand feel. **What to do instead:** Always use `background: var(--colors--background)` or `var(--_color---neutral--200)` for page surfaces.

6. **Heading font-weight 700 or 600 → Why it fails:** AI generates `font-weight: 700` for headings as the universal bold convention. Runway headings use weight **584** — a variable font axis value between semibold and bold that creates a distinctive editorial density. Weight 700 makes headings appear too heavy and destroys the typographic balance. **What to do instead:** Always specify `font-weight: 584` numerically for all heading levels H1–H6.

7. **Using `box-shadow` with gray colour values → Why it fails:** AI generates shadows like `box-shadow: 0 4px 8px rgba(0,0,0,0.1)`. Runway uses `color-mix(in srgb, var(--_color---neutral--900) 6%, transparent)` — shadows derived from the warm near-black `#261b07`, not neutral black. Gray shadows create a cold visual disconnection from the warm palette. **What to do instead:** Use `var(--_utility---shadow--card)`, `var(--_utility---shadow--button-outset)`, or `var(--_utility---shadow--input)` exclusively.

8. **Setting body line-height to 1.5 → Why it fails:** AI defaults to `line-height: 1.5` for "accessible" body text. Runway's design uses `1.25` for all paragraph sizes — a deliberate compact, editorial density. Setting 1.5 loosens the typographic rhythm and makes copy feel airy in a way that contradicts the brand character. **What to do instead:** Use `line-height: var(--_typography---paragraph-md--line-height)` = `1.25` for all body text.

9. **Using `transition: all` → Why it fails:** `transition: all` captures every CSS property change including layout properties (`width`, `height`, `padding`), causing janky transitions, forced reflows, and performance issues on low-end devices. **What to do instead:** Transition only specific properties: `transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease, opacity 120ms ease`.

10. **Ignoring the eyebrow's positive letter-spacing → Why it fails:** AI agents apply the standard `letter-spacing: -0.01em` from the paragraph tokens to eyebrow labels, because it's the dominant tracking value. Eyebrow labels uniquely use `letter-spacing: 0.05em` (positive) — this is what creates the small-caps-like effect. Negative tracking on eyebrows makes them look like compressed body text, losing the hierarchical signal. **What to do instead:** Always set eyebrow `letter-spacing: 0.05em` and `font-weight: 492` explicitly — these are the two values that define the eyebrow style.

---

## Appendix A: Complete Token Reference

Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.

```css
/* Colours (42) */
--colors--background: var(--_color---neutral--200);
--colors--text: var(--_color---neutral--900);
--colors--primary-accent: var(--_color---brand--500);
--_responsive---container--width-md: calc(1344/1440*100%);
--_column---width: calc(12*100%/12 + var(--_responsive---grid--gap-main)*(12 - 12)/12);
--_components---button--border-radius: var(--_size---radius--corner-md);
--_color---neutral--900: #261b07;
--_color---brand--500: #f9a600;
--_color---neutral--100: white;
--_color---neutral--200: #f8f7f5;
--_color---neutral--700: #493f2f;
--_color---neutral--800: #332a19;
--colors--border: var(--_color---neutral--400);
--_components---card--border-radius: var(--_size---radius--corner-lg);
--_components---input--border-radius: .5rem;
--_color---neutral--400: #e3dfd5;
--_responsive---padding--inner-container: calc(64/1344*100%);
--_color---ui--red: #f0624f;
--_color---ui--purple: #d5befa;
--_color---ui--blue: #6ac9ff;
--_color---ui--green: #ade988;
--_typography---fonts--primary-font: "Interphases Pro Variable",Arial,sans-serif;
--_color---brand--500: #f9a600;
--_color---neutral--900: #261b07;
--_color---neutral--200: #f8f7f5;
--_color---neutral--100: white;
--_color---neutral--400: #e3dfd5;
--_color---neutral--700: #493f2f;
--_color---neutral--800: #332a19;
--colors--background: var(--_color---neutral--200);
--colors--text: var(--_color---neutral--900);
--colors--primary-accent: var(--_color---brand--500);
--colors--border: var(--_color---neutral--400);
--_color---ui--red: #f0624f;
--_color---ui--purple: #d5befa;
--_color---ui--blue: #6ac9ff;
--_color---ui--green: #ade988;
--_components---button--bg: var(--_color---brand--500);
--_components---card--bg: var(--_color---neutral--100);
--_components---card--border: var(--_color---neutral--400);
--_components---input--bg: var(--_color---neutral--100);
--_components---input--border: var(--_color---neutral--400);

/* Typography (108) */
--_typography---paragraph-md--font: var(--_typography---fonts--primary-font);
--_typography---paragraph-md--line-height: 1.25;
--_typography---paragraph-md--font-weight: 400;
--_typography---paragraph-md--letter-spacing: -.01em;
--_typography---h1--font: var(--_typography---fonts--primary-font);
--_typography---h1--line-height: 1;
--_typography---h1--font-weight: 584;
--_typography---h1--letter-spacing: -.02em;
--_typography---h2--font: var(--_typography---fonts--primary-font);
--_typography---h2--line-height: 1.125;
--_typography---h2--font-weight: 584;
--_typography---h2--letter-spacing: -.02em;
--_typography---h3--font: var(--_typography---fonts--primary-font);
--_typography---h3--line-height: 1.125;
--_typography---h3--font-weight: 584;
--_typography---h3--letter-spacing: -.01em;
--_typography---h4--font: var(--_typography---fonts--primary-font);
--_typography---h4--line-height: 1.25;
--_typography---h4--font-weight: 584;
--_typography---h4--letter-spacing: -.01em;
--_typography---h5--font: var(--_typography---fonts--primary-font);
--_typography---h5--line-height: 1.25;
--_typography---h5--font-weight: 584;
--_typography---h5--letter-spacing: -.01em;
--_typography---h6--font: var(--_typography---fonts--primary-font);
--_typography---h6--line-height: 1.25;
--_typography---h6--font-weight: 584;
--_typography---h6--letter-spacing: -.01em;
--_components---input-label--font: var(--_typography---fonts--primary-font);
--_components---input-label--line-height: 1.25em;
--_components---input-label--font-weight: 584;
--_components---input-label--letter-spacing: -.01em;
--_components---button--font: var(--_typography---fonts--primary-font);
--_components---button--line-height: 1;
--_components---button--font-weight: 584;
--_components---button--letter-spacing: -.01em;
--_components---input--font: var(--_typography---fonts--primary-font);
--_components---input--line-height: 1.25em;
--_components---input--font-weight: 400;
--_typography---eyebrow--font: var(--_typography---fonts--primary-font);
--_typography---eyebrow--line-height: 1.125;
--_typography---eyebrow--font-weight: 492;
--_typography---paragraph-xs--font: var(--_typography---fonts--primary-font);
--_typography---paragraph-xs--line-height: 1.25;
--_typography---paragraph-xs--font-weight: 400;
--_typography---paragraph-xs--letter-spacing: -.01em;
--_typography---paragraph-sm--font: var(--_typography---fonts--primary-font);
--_typography---paragraph-sm--line-height: 1.25;
--_typography---paragraph-sm--font-weight: 400;
--_typography---paragraph-sm--letter-spacing: -.01em;
--_typography---paragraph-lg--font: var(--_typography---fonts--primary-font);
--_typography---paragraph-lg--line-height: 1.25;
--_typography---paragraph-lg--font-weight: 400;
--_typography---paragraph-lg--letter-spacing: -.01em;
--_typography---paragraph-xl--font: var(--_typography---fonts--primary-font);
--_typography---paragraph-xl--line-height: 1.25;
--_typography---paragraph-xl--font-weight: 400;
--_typography---paragraph-xl--letter-spacing: -.01em;
--_typography---fonts--primary-font: "Interphases Pro Variable", Arial, sans-serif;
--_components---button--text: var(--_color---neutral--900);
--_responsive---font-size--h1: 4.5rem;
--_typography---h1--font-weight: 584;
--_typography---h1--line-height: 1;
--_typography---h1--letter-spacing: -.02em;
--_responsive---font-size--h2: 3.5rem;
--_typography---h2--font-weight: 584;
--_typography---h2--line-height: 1.125;
--_typography---h2--letter-spacing: -.02em;
--_responsive---font-size--h3: 2.25rem;
--_typography---h3--font-weight: 584;
--_typography---h3--line-height: 1.125;
--_typography---h3--letter-spacing: -.01em;
--_responsive---font-size--h4: 1.5rem;
--_typography---h4--font-weight: 584;
--_typography---h4--line-height: 1.25;
--_typography---h4--letter-spacing: -.01em;
--_responsive---font-size--h5: 1.25rem;
--_typography---h5--font-weight: 584;
--_typography---h5--line-height: 1.25;
--_typography---h5--letter-spacing: -.01em;
--_responsive---font-size--h6: 1rem;
--_typography---h6--font-weight: 584;
--_typography---h6--line-height: 1.25;
--_typography---h6--letter-spacing: -.01em;
--_responsive---font-size--eyebrow: .75rem;
--_typography---eyebrow--font-weight: 492;
--_typography---eyebrow--line-height: 1.125;
--_typography---eyebrow--letter-spacing: .05em;
--_responsive---font-size--paragraph-xl: 1.5rem;
--_responsive---font-size--paragraph-lg: 1.25rem;
--_responsive---font-size--paragraph-md: 1rem;
--_responsive---font-size--paragraph-sm: .875rem;
--_responsive---font-size--paragraph-xs: .75rem;
--_typography---paragraph-md--font-weight: 400;
--_typography---paragraph-md--line-height: 1.25;
--_typography---paragraph-md--letter-spacing: -.01em;
--_components---button--font-size: .875rem;
--_components---button--font-weight: 584;
--_components---button--line-height: 1;
--_components---button--letter-spacing: -.01em;
--_components---input--font-size: 1rem;
--_components---input--font-weight: 400;
--_components---input--line-height: 1.25em;
--_components---input--letter-spacing: 0em;
--_components---input-label--font-size: .875rem;
--_components---input-label--font-weight: 584;
--_components---input-label--line-height: 1.25em;
--_components---input-label--letter-spacing: -.01em;

/* Spacing (90) */
--_responsive---font-size--paragraph-md: 1rem;
--_typography---h1--bottom-margin: .2em;
--_responsive---font-size--h1: 4.5rem;
--_typography---h2--bottom-margin: .3em;
--_responsive---font-size--h2: 3.5rem;
--_typography---h3--bottom-margin: .5em;
--_responsive---font-size--h3: 2.25rem;
--_typography---h4--bottom-margin: .5em;
--_responsive---font-size--h4: 1.5rem;
--_typography---h5--bottom-margin: .4em;
--_responsive---font-size--h5: 1.25rem;
--_typography---h6--bottom-margin: .5em;
--_responsive---font-size--h6: 1rem;
--_typography---paragraph-md--bottom-margin: 1em;
--_utility---outline--offset: 2px;
--_components---input-label--font-size: .875rem;
--_responsive---padding--section-md: 10rem;
--_responsive---padding--section-sm: 5rem;
--_responsive---padding--section-xs: 2rem;
--_layout---width--container-md: 76rem;
--_layout---width--container-nav: 88.5rem;
--_responsive---grid--gap-main: 40px;
--_components---button--vertical-padding: .5em;
--_components---button--horizontal-padding: 1.25em;
--_components---button--font-size: .875rem;
--_utility---outline--width: 2px;
--_responsive---padding--card-xs: .375rem;
--_responsive---padding--card-md: 1.25rem;
--_responsive---padding--card-lg: 2rem;
--_components---input--bottom-margin: 1.25rem;
--_size---0-5rem<deleted|variable-70a8c3ac-c656-f79e-479c-716ec38165c2>: .5rem;
--_components---input--font-size: 1rem;
--_components---input--letter-spacing: 0em;
--_typography---eyebrow--bottom-margin: .75em;
--_responsive---font-size--eyebrow: .75rem;
--_typography---eyebrow--letter-spacing: .05em;
--_typography---paragraph-xs--bottom-margin: 1em;
--_responsive---font-size--paragraph-xs: .75rem;
--_typography---paragraph-sm--bottom-margin: 1em;
--_responsive---font-size--paragraph-sm: .875rem;
--_typography---paragraph-lg--bottom-margin: 1em;
--_responsive---font-size--paragraph-lg: 1.25rem;
--_typography---paragraph-xl--bottom-margin: 1em;
--_responsive---font-size--paragraph-xl: 1.5rem;
--_layout---spacing--margin-md: 2em;
--_layout---spacing--margin-lg: 3em;
--_layout---spacing--margin-sm: 1em;
--_layout---height--nav: 3.8125rem;
--_typography---type-paragraph-sm--font-size-md<deleted|variable-94c5336e-6e13-9026-329b-a7b4ba64e183>: .9rem;
--_typography---type-paragraph-sm--font-size-sm<deleted|variable-dce65071-f183-75c5-98aa-d8afc83560a0>: .9rem;
--_typography---type-paragraph-sm--font-size-xs<deleted|variable-5ffbcc90-83d8-60d2-b7ba-601684d03f16>: .9rem;
--_layout---spacing--margin-xs: .5em;
--_components---card--card-body-padding-sm<deleted|variable-886aa6f6-843b-26b9-170b-96cc08ca36e2>: 20px;
--_size---4rem<deleted|variable-9c0e34bf-d979-3906-a451-347bf3bf13b2>: 4rem;
--_size---2rem<deleted|variable-703e76dd-22c1-0e62-be30-102e06bdb527>: 2rem;
--_responsive---grid--gap-md: 20px;
--_size---1-5rem<deleted|variable-f3ca9317-f658-e5ae-7950-f14c04b8bdeb>: 1.5rem;
--_size---3rem<deleted|variable-69c16ee0-18a3-4590-ef2c-d3d00d2064c9>: 3rem;
--_layout---width--container-lg: 84rem;
--_layout---width--container-sm: 61.25rem;
--_responsive---grid--gap-sm: 16px;
--_layout---width--container-md: 76rem;
--_responsive---grid--gap-main: 40px;
--_responsive---padding--section-md: 10rem;
--_responsive---padding--section-sm: 5rem;
--_responsive---padding--section-xs: 2rem;
--_layout---width--container-lg: 84rem;
--_layout---width--container-sm: 61.25rem;
--_layout---width--container-nav: 88.5rem;
--_responsive---padding--inner-container: calc(64/1344*100%);
--_responsive---grid--gap-md: 20px;
--_responsive---grid--gap-sm: 16px;
--_layout---spacing--margin-xs: .5em;
--_layout---spacing--margin-sm: 1em;
--_layout---spacing--margin-md: 2em;
--_layout---spacing--margin-lg: 3em;
--_responsive---padding--card-xs: .375rem;
--_responsive---padding--card-md: 1.25rem;
--_responsive---padding--card-lg: 2rem;
--_layout---height--nav: 3.8125rem;
--_utility---outline--width: 2px;
--_utility---outline--offset: 2px;
--_typography---h1--bottom-margin: .2em;
--_typography---h2--bottom-margin: .3em;
--_typography---h3--bottom-margin: .5em;
--_typography---eyebrow--bottom-margin: .75em;
--_typography---paragraph-md--bottom-margin: 1em;
--_components---button--vertical-padding: .5em;
--_components---button--horizontal-padding: 1.25em;
--_components---input--bottom-margin: 1.25rem;

/* Radius (11) */
--_size---radius--corner-xs: .25rem;
--_size---radius--corner-md: .5rem;
--_size---radius--corner-lg: .75rem;
--_size---radius--corner-sm: .375rem;
--_size---radius--corner-md: .5rem;
--_size---radius--corner-lg: .75rem;
--_size---radius--corner-sm: .375rem;
--_size---radius--corner-xs: .25rem;
--_components---button--border-radius: var(--_size---radius--corner-md);
--_components---card--border-radius: var(--_size---radius--corner-lg);
--_components---input--border-radius: .5rem;

/* Effects (8) */
--_utility---shadow--button-inset: 0px 2px 4px 0px color-mix(in srgb, var(--_color---neutral--100) 56%, transparent) inset;
--_utility---shadow--button-outset: 0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent),
      0px 1px 2px 0px color-mix(in srgb, var(--_color---neutral--900) 36%, transparent);
--_utility---shadow--card: 0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent);
--_utility---shadow--input: 0px 1px 2px 0px color-mix(in srgb, var(--_color---neutral--900) 32%, transparent) inset,
			0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent) inset;
--_utility---shadow--button-inset: 0px 2px 4px 0px color-mix(in srgb, var(--_color---neutral--100) 56%, transparent) inset;
--_utility---shadow--button-outset: 0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent), 0px 1px 2px 0px color-mix(in srgb, var(--_color---neutral--900) 36%, transparent);
--_utility---shadow--card: 0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent);
--_utility---shadow--input: 0px 1px 2px 0px color-mix(in srgb, var(--_color---neutral--900) 32%, transparent) inset, 0px 4px 8px 0px color-mix(in srgb, var(--_color---neutral--900) 6%, transparent) inset;
```

## Appendix B: Token Source Metadata

| Property | Value |
|---|---|
| **Token source** | `extracted-from-figma` |
| **Confidence level** | High — 149 tokens extracted directly from Figma design file |
| **Extraction method** | Figma Styles & Variables API — authoritative design intent |
| **Reconstruction used** | None. All tokens are direct extractions. No computed-style clustering was needed. |
| **Naming convention** | Original Figma variable names preserved exactly. Names use `--_category---subcategory--property` convention with triple-hyphen separators and double-hyphen sub-separators. |
| **Deleted variables** | Several variables marked `<deleted|...>` in the Figma source are included for completeness but should not be used in new component work. These include `--_size---0-5rem`, `--_size---4rem`, `--_size---2rem`, `--_size---1-5rem`, `--_size---3rem`, and legacy paragraph-sm size variants. |
| **Motion tokens** | NOT present in the Figma extraction. Motion values in Section 8 are inferred from component design patterns and should be validated against production CSS manually. Annotated `[TBD]`. |
| **Font availability** | `"Interphases Pro Variable"` is a licensed custom variable font. Ensure it is loaded via `@font-face` or font hosting before deployment. The `Arial, sans-serif` fallback activates if the font fails to load. |
| **Color-mix() support** | Shadow tokens use `color-mix(in srgb, ...)` syntax. Requires Chrome 111+, Firefox 113+, Safari 16.2+. Add fallback `box-shadow` values with static rgba equivalents for broader browser support if needed. |
| **Viewport breakpoints** | No explicit breakpoint tokens were extracted from Figma. Responsive font-size and padding tokens represent desktop values. Mobile/tablet overrides should be inferred from proportional scaling and validated manually. |
| **Token count** | 149 extracted tokens. Covers: colour (22), typography (48), spacing/layout (28), radius (7), component (32), effects (4), utility (4), navigation (1), and miscellaneous (3). |

---

## Appendix C: Responsive Behaviour

### Breakpoint Reference (Inferred)

No breakpoint tokens were extracted from Figma. The following breakpoints are inferred from container widths and design patterns. **Validate against production CSS before treating as authoritative.**

| Name | Width | Basis |
|---|---|---|
| `sm` | 640px | Mobile landscape / small tablet |
| `md` | 768px | Tablet portrait |
| `lg` | 1024px | Tablet landscape / small desktop |
| `xl` | 1280px | Desktop |
| `2xl` | 1440px | Wide desktop (Figma canvas width) |

### Typography Scaling

Desktop values are defined by the token system. The following scale-down ratios are recommended for mobile (≤768px). **These are inferred — validate against production.**

| Style | Desktop | Mobile (inferred) | Ratio |
|---|---|---|---|
| H1 | 4.5rem | 2.5rem | ~0.56× |
| H2 | 3.5rem | 2rem | ~0.57× |
| H3 | 2.25rem | 1.5rem | ~0.67× |
| H4 | 1.5rem | 1.25rem | ~0.83× |
| H5 | 1.25rem | 1.125rem | ~0.9× |
| H6 | 1rem | 1rem | 1× |
| Paragraph XL | 1.5rem | 1.25rem | ~0.83× |
| Paragraph LG | 1.25rem | 1.125rem | ~0.9× |
| Paragraph MD | 1rem | 1rem | 1× |

### Section Padding Scaling

| Breakpoint | Padding token to use |
|---|---|
| Desktop (≥1024px) | `--_responsive---padding--section-md` (10rem) |
| Tablet (768px–1023px) | `--_responsive---padding--section-sm` (5rem) |
| Mobile (<768px) | `--_responsive---padding--section-xs` (2rem) |

### Container Behaviour

```css
/* Recommended container implementation */
.container {
  width: var(--_responsive---container--width-md); /* calc(1344/1440*100%) = 93.3% */
  max-width: var(--_layout---width--container-md); /* 76rem */
  margin-inline: auto;
  padding-inline: var(--_responsive---padding--inner-container); /* calc(64/1344*100%) */
}

/* At narrower viewports, allow full-width with fixed horizontal padding */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding-inline: 1.25rem; /* ~20px fixed mobile gutter */
  }
}
```

---

## Appendix D: Accessibility Notes

### Colour Contrast

The following contrast ratios are approximate, based on extracted hex values. **Verify with a contrast checker tool before shipping.**

| Foreground | Background | Ratio (approx.) | WCAG AA (4.5:1) | Notes |
|---|---|---|---|---|
| `#261b07` (neutral-900) | `#f8f7f5` (neutral-200) | ~14.5:1 | ✅ Pass | Primary text on page bg |
| `#261b07` (neutral-900) | `white` (neutral-100) | ~16.2:1 | ✅ Pass | Text on card surface |
| `#261b07` (neutral-900) | `#f9a600` (brand-500) | ~7.2:1 | ✅ Pass | Button label on amber bg |
| `#493f2f` (neutral-700) | `#f8f7f5` (neutral-200) | ~7.1:1 | ✅ Pass | Secondary text on page bg |
| `#493f2f` (neutral-700) | `white` (neutral-100) | ~7.9:1 | ✅ Pass | Muted text on card |
| `#e3dfd5` (neutral-400) | `#f8f7f5` (neutral-200) | ~1.2:1 | ❌ Fail | Border only — never use as text colour |
| `#f9a600` (brand-500) | `white` (neutral-100) | ~2.5:1 | ❌ Fail | Never use amber text on white |
| `#f0624f` (ui-red) | `white` (neutral-100) | ~3.8:1 | ❌ Fail (large text only) | Error text must be paired with icon or label |

### Contrast Rules
- NEVER place amber (`--_color---brand--500`) text on white or off-white backgrounds — contrast is insufficient.
- NEVER use `--_color---neutral--400` as a text colour — it exists only for borders and decorative strokes.
- Error states (`--_color---ui--red`) MUST NOT rely on colour alone — always pair with an icon or explicit text label.
- `--_color---ui--blue`, `--_color---ui--purple`, and `--_color---ui--green` are decorative/tag colours and should not be used for body text.

### Focus Management
- All interactive elements must have a visible focus ring: `outline: 2px solid var(--_color---brand--500); outline-offset: 2px`
- Focus ring colour (`--_color---brand--500`) on `--_color---neutral--200` background has sufficient contrast (~3.9:1 against the off-white) — acceptable for a non-text focus indicator under WCAG 2.1 SC 1.4.11.
- Do not suppress `outline` without providing an equivalent custom focus indicator.
- Navigation focus order must follow document reading order — avoid `tabindex` values above 0.

### Motion & Reduced Motion

```css
/* Wrap all transform-based animations */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

/* Always allow instant state changes (colour, border) regardless of preference */
.btn {
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
```

- Transforms (`translateY`, `scale`) must be gated behind `prefers-reduced-motion: no-preference`.
- Opacity and colour transitions are exempt — they are not vestibular triggers and may run unconditionally.
- Never auto-play looping animations in the UI without a pause control.

### Semantic Markup Reminders
- Eyebrow labels (`<Eyebrow>`) should render as `<p>` or `<span>`, not as heading elements — they are decorative labels, not structural headings.
- Button components must render as `<button>` (not `<div>` or `<a>`) when they trigger actions.
- Cards with `onClick` handlers must include `role="button"` and `tabIndex={0}` (see Section 6.2).
- Icon-only buttons must include `aria-label` describing the action.

---

## Appendix E: Common Composition Patterns

### Hero Section

```tsx
// Standard hero: Eyebrow → H1 → Paragraph XL → CTA Button
export const HeroSection: React.FC = () => (
  <section
    style={{
      padding: 'var(--_responsive---padding--section-md) 0',
      background: 'var(--colors--background)',
    }}
  >
    <div className="container">
      <Eyebrow>Introducing Runway</Eyebrow>
      <h1
        style={{
          fontFamily: 'var(--_typography---fonts--primary-font)',
          fontSize: 'var(--_responsive---font-size--h1)',
          fontWeight: 584,
          lineHeight: 1,
          letterSpacing: '-0.02em',
          color: 'var(--_color---neutral--900)',
          marginBottom: '0.2em',
          maxWidth: '14ch',
        }}
      >
        The financial model that moves with you
      </h1>
      <p
        style={{
          fontFamily: 'var(--_typography---fonts--primary-font)',
          fontSize: 'var(--_responsive---font-size--paragraph-xl)',
          fontWeight: 400,
          lineHeight: 1.25,
          letterSpacing: '-0.01em',
          color: 'var(--_color---neutral--700)',
          marginBottom: 'var(--_layout---spacing--margin-md)',
          maxWidth: '42ch',
        }}
      >
        Runway connects your data, models your future, and keeps your whole team aligned.
      </p>
      <Button variant="primary" size="md">Get started</Button>
    </div>
  </section>
);
```

### Feature Grid Section

```tsx
// Standard feature grid: Eyebrow → H2 → 3-column card grid
export const FeatureSection: React.FC = () => (
  <section
    style={{
      padding: 'var(--_responsive---padding--section-md) 0',
      background: 'var(--colors--background)',
    }}
  >
    <div className="container">
      <Eyebrow>Why Runway</Eyebrow>
      <h2
        style={{
          fontFamily: 'var(--_typography---fonts--primary-font)',
          fontSize: 'var(--_responsive---font-size--h2)',
          fontWeight: 584,
          lineHeight: 1.125,
          letterSpacing: '-0.02em',
          color: 'var(--_color---neutral--900)',
          marginBottom: 'var(--_layout---spacing--margin-lg)',
          maxWidth: '20ch',
        }}
      >
        Built for the speed of your business
      </h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 'var(--_responsive---grid--gap-main)',
        }}
      >
        {features.map(feature => (
          <Card key={feature.id} size="lg">
            <h3
              style={{
                fontFamily: 'var(--_typography---fonts--primary-font)',
                fontSize: 'var(--_responsive---font-size--h5)',
                fontWeight: 584,
                lineHeight: 1.25,
                letterSpacing: '-0.01em',
                color: 'var(--_color---neutral--900)',
                marginBottom: '0.5em',
              }}
            >
              {feature.title}
            </h3>
            <p
              style={{
                fontFamily: 'var(--_typography---fonts--primary-font)',
                fontSize: 'var(--_responsive---font-size--paragraph-md)',
                fontWeight: 400,
                lineHeight: 1.25,
                letterSpacing: '-0.01em',
                color: 'var(--_color---neutral--700)',
                margin: 0,
              }}
            >
              {feature.description}
            </p>
          </Card>
        ))}
      </div>
    </div>
  </section>
);
```

### Form Pattern

```tsx
// Standard form layout with label + input + error + submit
export const ContactForm: React.FC = () => {
  const [errors, setErrors] = React.useState<Record<string, string>>({});

  return (
    <form
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--_components---input--bottom-margin)',
        maxWidth: '28rem',
      }}
    >
      <Input
        id="name"
        label="Full name"
        placeholder="Jane Smith"
        error={errors.name}
      />
      <Input
        id="email"
        label="Work email"
        type="email"
        placeholder="jane@company.com"
        error={errors.email}
      />
      <Input
        id="company"
        label="Company"
        placeholder="Acme Corp"
      />
      <div style={{ marginTop: 'var(--_layout---spacing--margin-xs)' }}>
        <Button variant="primary" size="md" type="submit">
          Request access
        </Button>
      </div>
    </form>
  );
};
```

### Section Divider Pattern

When two adjacent sections share the same `--_color---neutral--200` background, use a `1px solid var(--_color---neutral--400)` border rather than a colour change to separate them. Never introduce a new background colour solely as a divider.

```tsx
<hr
  style={{
    border: 'none',
    borderTop: '1px solid var(--_color---neutral--400)',
    margin: '0',
  }}
/>
```

---

## Appendix F: Anti-Pattern Quick Reference

A condensed lookup table of the most common mistakes and their corrections. For full rationale, see Section 9.

| ❌ Anti-pattern | ✅ Correct approach |
|---|---|
| `font-family: 'Inter', sans-serif` | `font-family: var(--_typography---fonts--primary-font)` |
| `font-weight: 700` on headings | `font-weight: 584` |
| `font-weight: 600` on headings | `font-weight: 584` |
| `font-weight: 500` on headings | `font-weight: 584` |
| `font-weight: 400` on eyebrow | `font-weight: 492` |
| `letter-spacing: -0.01em` on eyebrow | `letter-spacing: 0.05em` |
| `border-radius: 9999px` on buttons | `border-radius: var(--_components---button--border-radius)` |
| `border-radius: 50px` on buttons | `border-radius: var(--_components---button--border-radius)` |
| `background: #f5f5f5` | `background: var(--colors--background)` |
| `background: #fafafa` | `background: var(--colors--background)` |
| `color: #1a1a1a` | `color: var(--colors--text)` |
| `color: #333333` | `color: var(--_color---neutral--900)` |
| `color: #f9a600` on light bg | Never use amber as text on light backgrounds |
| `box-shadow: 0 4px 8px rgba(0,0,0,0.1)` | `box-shadow: var(--_utility---shadow--card)` |
| `line-height: 1.5` on body text | `line-height: 1.25` |
| `line-height: 1.6` on body text | `line-height: 1.25` |
| `transition: all 200ms` | `transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease` |
| `padding: 12px 16px` (arbitrary) | `padding: var(--_components---button--vertical-padding) var(--_components---button--horizontal-padding)` |
| `margin: 24px` (arbitrary) | Use nearest `--_layout---spacing--*` token |
| `color: #f9a600` on white | Contrast fails — use as background only, never text |
| `<div onClick={...}>` as button | `<button>` element with proper props |
| Eyebrow as `<h3>` or `<h4>` | `<p>` or `<span>` — eyebrow is decorative, not structural |
Runway

You may also like

atlassian.com

github.com

Customer.io
