Design system

Runway Style Guide

The single source of truth for how Runway looks and feels. Everything here is rendered from the real tokens and components — see docs/STYLE-GUIDE.md for the full rationale and accessibility checklist.

Runway.

Paper plane at dawn: indigo structure, a coral→amber horizon, aqua for lift. Held to WCAG 2.1 AA.

Color tokens

Reference tokens, never raw hex. Contrast levels are verified against WCAG 2.1 AA (4.5:1 text, 3:1 large text / UI).

Neutrals

--background

#f5f4fb

App canvas

--surface

#ffffff

Cards, nav

--ink

#171a33

Primary text

--muted

#63667f

Secondary text

--border

#e6e5f0

Hairlines

Structural brand — indigo

--brand

#3a3d7a

Buttons, links

--brand-ink

#2a2c5c

Hover / pressed

--brand-wash

#eef0f9

Tinted surface

Horizon accent

Fills only. Coral, amber, and aqua fail contrast as text (2.8 / 1.8 / 2.6:1 on white). For coral/amber/aqua text, use the -ink variants below.

--accent

#ff6b5c

Coral — fill

--accent-2

#ffb03a

Amber — fill

--lift

#2fb3a6

Aqua — fill

--accent-ink

#b83322

Coral text · 5.9:1

--accent-2-ink

#8a5a00

Amber text · 5.9:1

--lift-ink

#0f6f66

Aqua text · 6.0:1

Semantic status

Good — on track

Bad — over budget

Warn — heads up

Typography

System font stack. Body never drops below text-sm (14px); headings run h1→h2→h3 in order.

Eyebrow — kicker

Page title — text-2xl bold

Section heading — text-lg semibold

Card heading — semibold

Body copy — text-sm. Warm, plain-spoken, second person. Feel the consequence, don't lecture.

Secondary / caption — text-sm muted.

ava@demo.school — font-mono text-xs for IDs & figures $1,240.00

Space, radius & elevation

Tailwind's 4px scale. Runway is mostly flat — lift with a hairline border; reserve shadow for hover.

Radius

rounded-md

Nav / small

rounded-lg

Buttons / tiles

rounded-xl

Cards

rounded-2xl

Hero

Elevation

Hairline (default)

shadow-md (hover)

Components

Compose from components/ui.tsx and components/brand.tsx — don't re-roll these.

Buttons

Primary action SecondaryTab to a button to see the focus ring.

Badges

neutralbrandgoodbadwarn

Stat tiles

Balance

$1,240

after round 3

Saved

+$320

Debt

-$580

Runway

6 wks

tight

Card

A standard card

primitive

Rounded-xl, hairline border, surface background, p-5. The default container for content across every role view.

Ace — mascot & coaching cue

Ace says

Contributing a little every round beats one big deposit later — time does the heavy lifting.

Accessibility — WCAG 2.1 AA

Non-negotiable on every screen. Full checklist in docs/STYLE-GUIDE.md §6.

Contrast

Text ≥4.5:1 (≥3:1 large); UI & focus ≥3:1. Use only the §2.3 pairings.

Keyboard focus

Every control shows the global :focus-visible ring. Never bare outline:none.

Not color alone

Status carries a word or icon, not just a hue.

Semantics

Real button/a, ordered headings, labels on inputs, aria on graphics.

Motion

Honors prefers-reduced-motion (handled globally).

Reflow

Usable to 200% zoom / 320px wide, no horizontal scroll.