Design System Preview:
Runway

Cinematic, minimal, editorial design tokens from DESIGN.md

01 / Color Palette

Color Palette & Roles

Primary

Runway Black
#000000
Primary page background, maximum-emphasis text
Deep Black
#030303
Layered dark surfaces
Dark Surface
#1a1a1a
Card backgrounds, elevated dark containers
Pure White
#ffffff
Primary text on dark, light-section backgrounds

Surface & Background

Near White
#fefefe
Lightest surface variant
Cool Cloud
#e9ecf2
Light section backgrounds, cool blue-gray tint
Border Dark
#27272a
Dark-mode border color

Cool Neutrals & Text

Charcoal
#404040
Primary body text on light surfaces
Cool Slate
#767d88
Secondary body text, cool blue-gray
Mid Slate
#7d848e
Tertiary text, metadata
Muted Gray
#a7a7a7
De-emphasized content, timestamps
Cool Silver
#c9ccd1
Light borders and dividers
Light Silver
#d0d4d4
Lightest border/divider variant
Tailwind Gray
#6b7280
Supplementary text
Footer Gray
#999999
Footer links, deeply muted content
02 / Typography Scale

Typography Rules

Single typeface system: DM Sans (abcNormal substitute). One font, complete expression.

Display Hero
Display / Hero -- 48px / 400 / 1.00 / -1.2px
Section Heading
Section Heading -- 40px / 400 / 1.00 / -1px
Sub-heading
Sub-heading -- 36px / 400 / 1.00 / -0.9px
Card Title
Card Title -- 24px / 400 / 1.00 / normal
Feature Title
Feature Title -- 20px / 400 / 1.00 / normal
Body text for standard paragraphs, navigation links, and button labels. DM Sans provides geometric precision across all UI copy.
Body / Button -- 16px / 400 / 1.30 / -0.16px
SECTION LABEL
Caption / Label -- 14px / 500 / 1.25 / 0.35px / uppercase
Compact description text for metadata and small copy blocks.
Small -- 13px / 400 / 1.30 / -0.16px
MICRO TAG LABEL
Micro / Tag -- 11px / 450 / 1.30 / normal / uppercase
03 / Card Examples

Cards & Containers

Bordered Card

Cool Silver Border

Standard content card with 1px solid cool-silver border and 8px radius. The default container for research articles and feature sections.

Dark Surface Card

Cinematic Container

Dark surface card on #1a1a1a with border-dark containment. Used for featured content on dark sections.

Minimal Card

Transparent Container

Minimal bordered card with transparent background and subtle border. The interface retreats to let content speak.

04 / Spacing Scale

Spacing System

Base unit: 8px. Cinema-grade breathing between sections.

4px
6px
8px
12px
16px
20px
24px
28px
32px
48px
64px
78px
05 / Border Radius Scale

Border Radius

Subtle radius only. Not pill-shaped.

4px
Sharp / Buttons
6px
Subtle / Links
8px
Comfortable / Cards
16px
Generous / Alerts
06 / Elevation & Depth

Depth & Elevation

Zero shadows. Depth comes from section alternation and photography, never from box-shadow.

Flat
No shadow, no border. The dominant state for everything.
Level 0
Bordered
1px solid border. Alert containers only.
Level 1
Dark Section
Dark bg with light text. Hero, features, footer.
Level 2
Light Section
White or Cool Cloud bg with dark text. Content sections.
Level 3