laowang/awesome-design-md
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
necatiozmen
2026-03-31 19:37:25 +03:00
commit 1145c998a1
128 changed files with 51549 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
design-md/runwayml/DESIGN.md Normal file
View File

@@ -0,0 +1,244 @@
# Design System: Runway
## 1. Visual Theme & Atmosphere
Runway's interface is a cinematic reel brought to life as a website — a dark, editorial, film-production-grade design where full-bleed photography and video ARE the primary UI elements. This is not a typical tech product page; it's a visual manifesto for AI-powered creativity. Every section feels like a frame from a film: dramatic lighting, sweeping landscapes, and intimate human moments captured in high-quality imagery that dominates the viewport.
The design language is built on a single typeface — abcNormal — a clean, geometric sans-serif that handles everything from 48px display headlines to 11px uppercase labels. This single-font commitment creates an extreme typographic uniformity that lets the visual content speak louder than the text. Headlines use tight line-heights (1.0) with negative letter-spacing (-0.9px to -1.2px), creating compressed text blocks that feel like film titles rather than marketing copy.
What makes Runway distinctive is its complete commitment to visual content as design. Rather than illustrating features with icons or diagrams, Runway shows actual AI-generated and AI-enhanced imagery — cars driving through cinematic landscapes, artistic portraits, architectural renders. The interface itself retreats into near-invisibility: minimal borders, zero shadows, subtle cool-gray text, and a dark palette that puts maximum focus on the photography.
**Key Characteristics:**
- Cinematic full-bleed photography and video as primary UI elements
- Single typeface system: abcNormal for everything from display to micro labels
- Dark-dominant palette with cool-toned neutrals (#767d88, #7d848e)
- Zero shadows, minimal borders — the interface is intentionally invisible
- Tight display typography (line-height 1.0) with negative tracking (-0.9px to -1.2px)
- Uppercase labels with positive letter-spacing for navigational structure
- Weight 450 (unusual intermediate) for small uppercase text — precision craft
- Editorial magazine layout with mixed-size image grids
## 2. Color Palette & Roles
### Primary
- **Runway Black** (`#000000`): The primary page background and maximum-emphasis text.
- **Deep Black** (`#030303`): A near-imperceptible variant for layered dark surfaces.
- **Dark Surface** (`#1a1a1a`): Card backgrounds and elevated dark containers.
- **Pure White** (`#ffffff`): Primary text on dark surfaces and light-section backgrounds.
### Surface & Background
- **Near White** (`#fefefe`): The lightest surface — barely distinguishable from pure white.
- **Cool Cloud** (`#e9ecf2`): Light section backgrounds with a cool blue-gray tint.
- **Border Dark** (`#27272a`): The single dark-mode border color — barely visible containment.
### Neutrals & Text
- **Charcoal** (`#404040`): Primary body text on light surfaces and secondary text.
- **Near Charcoal** (`#3f3f3f`): Slightly lighter variant for dark-section secondary text.
- **Cool Slate** (`#767d88`): Secondary body text — a distinctly blue-gray cool neutral.
- **Mid Slate** (`#7d848e`): Tertiary text, metadata descriptions.
- **Muted Gray** (`#a7a7a7`): De-emphasized content, timestamps.
- **Cool Silver** (`#c9ccd1`): Light borders and dividers.
- **Light Silver** (`#d0d4d4`): The lightest border/divider variant.
- **Tailwind Gray** (`#6b7280`): Standard Tailwind neutral for supplementary text.
- **Dark Link** (`#0c0c0c`): Darkest link text — nearly black.
- **Footer Gray** (`#999999`): Footer links and deeply muted content.
### Gradient System
- **None in the interface.** Visual richness comes entirely from photographic content — AI-generated and enhanced imagery provides all the color and gradient the design needs. The interface itself is intentionally colorless.
## 3. Typography Rules
### Font Family
- **Universal**: `abcNormal`, with fallback: `abcNormal Fallback`
*Note: abcNormal is a custom geometric sans-serif. For external implementations, Inter or DM Sans serve as close substitutes.*
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | abcNormal | 48px (3rem) | 400 | 1.00 (tight) | -1.2px | Maximum size, film-title presence |
| Section Heading | abcNormal | 40px (2.5rem) | 400 | 1.00–1.10 | -1px to 0px | Feature section titles |
| Sub-heading | abcNormal | 36px (2.25rem) | 400 | 1.00 (tight) | -0.9px | Secondary section markers |
| Card Title | abcNormal | 24px (1.5rem) | 400 | 1.00 (tight) | normal | Article and card headings |
| Feature Title | abcNormal | 20px (1.25rem) | 400 | 1.00 (tight) | normal | Small headings |
| Body / Button | abcNormal | 16px (1rem) | 400–600 | 1.30–1.50 | -0.16px to normal | Standard body, nav links |
| Caption / Label | abcNormal | 14px (0.88rem) | 500–600 | 1.25–1.43 | 0.35px (uppercase) | Metadata, section labels |
| Small | abcNormal | 13px (0.81rem) | 400 | 1.30 (tight) | -0.16px to -0.26px | Compact descriptions |
| Micro / Tag | abcNormal | 11px (0.69rem) | 450 | 1.30 (tight) | normal | Uppercase tags, tiny labels |
### Principles
- **One typeface, complete expression**: abcNormal handles every text role. The design achieves variety through size, weight, case, and letter-spacing rather than font-family switching.
- **Tight everywhere**: Nearly every size uses line-height 1.0–1.30 — even body text is relatively compressed. This creates a dense, editorial feel.
- **Weight 450 — the precision detail**: Some small uppercase labels use weight 450, an uncommon intermediate between regular (400) and medium (500). This micro-craft signals typographic sophistication.
- **Negative tracking as default**: Even body text uses -0.16px to -0.26px letter-spacing, keeping everything slightly tighter than default.
- **Uppercase as structure**: Labels at 14px and 11px use `text-transform: uppercase` with positive letter-spacing (0.35px) to create navigational signposts that contrast with the tight lowercase text.
## 4. Component Stylings
### Buttons
- Text: weight 600 at 14px abcNormal
- Background: likely transparent or dark, with minimal border
- Radius: small (4px) for button-like links
- The button design is extremely restrained — no heavy fills or borders detected
- Interactive elements blend into the editorial flow
### Cards & Containers
- Background: transparent or Dark Surface (`#1a1a1a`)
- Border: `1px solid #27272a` (dark mode) — barely visible containment
- Radius: small (4–8px) for functional elements; 16px for alert-style containers
- Shadow: zero — no shadows on any element
- Cards are primarily photographic — the image IS the card
### Navigation
- Minimal horizontal nav — transparent over hero content
- Logo: Runway wordmark in white/black
- Links: abcNormal at 16px, weight 400–600
- Hover: text shifts to white or higher opacity
- Extremely subtle — designed to not compete with visual content
### Image Treatment
- Full-bleed cinematic photography and video dominate
- AI-generated content shown at large scale as primary visual elements
- Mixed-size image grids creating editorial magazine layouts
- Dark overlays on hero images for text readability
- Product screenshots with subtle rounded corners (8px)
### Distinctive Components
**Cinematic Hero**
- Full-viewport image or video with text overlay
- Headline in 48px abcNormal, white on dark imagery
- The image is always cinematic quality — film-grade composition
**Research Article Cards**
- Photographic thumbnails with article titles
- Mixed-size grid layout (large feature + smaller supporting)
- Clean text overlay or below-image caption style
**Trust Bar**
- Company logos (leading organizations across industries)
- Clean, monochrome treatment
- Horizontal layout with generous spacing
**Mission Statement**
- "We are building AI to simulate the world through imagination, art and aesthetics"
- On a dark background with white text
- The emotional close — artistic and philosophical
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 48px, 64px, 78px
- Section vertical spacing: generous (48–78px)
- Component gaps: 16–24px
### Grid & Container
- Max container width: up to 1600px (cinema-wide)
- Hero: full-viewport, edge-to-edge
- Content sections: centered with generous margins
- Image grids: asymmetric, magazine-style mixed sizes
- Footer: full-width dark section
### Whitespace Philosophy
- **Cinema-grade breathing**: Large vertical gaps between sections create a scrolling experience that feels like watching scenes change.
- **Images replace whitespace**: Where other sites use empty space, Runway fills it with photography. The visual content IS the breathing room.
- **Editorial grid asymmetry**: The image grid uses intentionally varied sizes — large hero images paired with smaller supporting images, creating visual rhythm.
### Border Radius Scale
- Sharp (4px): Buttons, small interactive elements
- Subtle (6px): Links, small containers
- Comfortable (8px): Standard containers, image cards
- Generous (16px): Alert-style containers, featured elements
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Everything — the dominant state |
| Bordered (Level 1) | `1px solid #27272a` | Alert containers only |
| Dark Section (Level 2) | Dark bg (#000000 / #1a1a1a) with light text | Hero, features, footer |
| Light Section (Level 3) | White/Cool Cloud bg with dark text | Content sections, research |
**Shadow Philosophy**: Runway uses **zero shadows**. This is a film-production design decision — in cinema, depth comes from lighting, focus, and composition, not drop shadows. The interface mirrors this philosophy: depth is communicated through dark/light section alternation, photographic depth-of-field, and overlay transparency — never through CSS box-shadow.
## 7. Do's and Don'ts
### Do
- Use full-bleed cinematic photography as the primary visual element
- Use abcNormal for all text — maintain the single-typeface commitment
- Keep display line-heights at 1.0 with negative letter-spacing for film-title density
- Use the cool-gray neutral palette (#767d88, #7d848e) for secondary text
- Maintain zero shadows — depth comes from photography and section backgrounds
- Use uppercase with letter-spacing for navigational labels (14px, 0.35px spacing)
- Apply small border-radius (4–8px) — the design is NOT pill-shaped
- Let visual content (photos, videos) dominate — the UI should be invisible
- Use weight 450 for micro labels — the precision matters
### Don't
- Don't add decorative colors to the interface — the only color comes from photography
- Don't use heavy borders or shadows — the interface must be nearly invisible
- Don't use pill-shaped radius — Runway's geometry is subtly rounded, not circular
- Don't use bold (700+) weight — 400–600 is the full range, with 450 as a precision tool
- Don't compete with the visual content — text overlays should be minimal and restrained
- Don't use gradient backgrounds in the interface — gradients exist only in photography
- Don't use more than one typeface — abcNormal handles everything
- Don't use body line-height above 1.50 — the tight, editorial feel is core
- Don't reduce image quality — cinematic photography IS the design
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked images, reduced hero text |
| Tablet | 640–768px | 2-column image grids begin |
| Small Desktop | 768–1024px | Standard layout |
| Desktop | 1024–1280px | Full layout, expanded hero |
| Large Desktop | 1280–1600px | Maximum cinema-width container |
### Touch Targets
- Navigation links at comfortable 16px
- Article cards serve as large touch targets
- Buttons at 14px weight 600 with adequate padding
### Collapsing Strategy
- **Navigation**: Collapses to hamburger on mobile
- **Hero**: Full-bleed maintained, text scales down
- **Image grids**: Multi-column → 2-column → single column
- **Research articles**: Feature-size cards → stacked full-width
- **Trust logos**: Horizontal scroll or reduced grid
### Image Behavior
- Cinematic images scale proportionally
- Full-bleed hero maintained across all sizes
- Image grids reflow to fewer columns
- Video content maintains aspect ratio
## 9. Agent Prompt Guide
### Quick Color Reference
- Background Dark: "Runway Black (#000000)"
- Background Light: "Pure White (#ffffff)"
- Primary Text Dark: "Charcoal (#404040)"
- Secondary Text: "Cool Slate (#767d88)"
- Muted Text: "Muted Gray (#a7a7a7)"
- Light Border: "Cool Silver (#c9ccd1)"
- Dark Border: "Border Dark (#27272a)"
- Card Surface: "Dark Surface (#1a1a1a)"
### Example Component Prompts
- "Create a cinematic hero section: full-bleed dark background with a cinematic image overlay. Headline at 48px abcNormal weight 400, line-height 1.0, letter-spacing -1.2px in white. Minimal text below in Cool Slate (#767d88) at 16px."
- "Design a research article grid: one large card (50% width) with a cinematic image and 24px title, next to two smaller cards stacked. All images with 8px border-radius. Titles in white (dark bg) or Charcoal (#404040, light bg)."
- "Build a section label: 14px abcNormal weight 500, uppercase, letter-spacing 0.35px in Cool Slate (#767d88). No border, no background."
- "Create a trust bar: company logos in monochrome, horizontal layout with generous spacing. On dark background with white/gray logo treatments."
- "Design a mission statement section: Runway Black background, white text at 36px abcNormal, line-height 1.0, letter-spacing -0.9px. Centered, with generous vertical padding."
### Iteration Guide
1. Visual content first — always include cinematic photography
2. Use abcNormal for everything — specify size and weight, never change the font
3. Keep the interface invisible — no heavy borders, no shadows, no bright colors
4. Use the cool slate grays (#767d88, #7d848e) for secondary text — not warm grays
5. Uppercase labels need letter-spacing (0.35px) — never tight uppercase
6. Dark sections should be truly dark (#000000 or #1a1a1a) — no medium grays as surfaces

25
design-md/runwayml/README.md Normal file
View File

@@ -0,0 +1,25 @@
# Runwayml — Design System
> Design.md extracted from the public [runwayml](https://runwayml.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files
| File | Description |
|------|-------------|
| `DESIGN.md` | Complete design system documentation (9 sections) |
| `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Runwayml design language.
## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode
![Runwayml Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-dark-screenshot.png)
### Light Mode
![Runwayml Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-screenshot.png)

664
design-md/runwayml/preview-dark.html Normal file
View File

@@ -0,0 +1,664 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Runway (Dark)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap" rel="stylesheet">
<style>
:root {
--color-black: #000000;
--color-deep-black: #030303;
--color-dark-surface: #1a1a1a;
--color-white: #ffffff;
--color-near-white: #fefefe;
--color-cool-cloud: #e9ecf2;
--color-charcoal: #404040;
--color-near-charcoal: #3f3f3f;
--color-cool-slate: #767d88;
--color-mid-slate: #7d848e;
--color-muted-gray: #a7a7a7;
--color-cool-silver: #c9ccd1;
--color-light-silver: #d0d4d4;
--color-tailwind-gray: #6b7280;
--color-dark-link: #0c0c0c;
--color-footer-gray: #999999;
--color-border-dark: #27272a;
--font-primary: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Dark mode — Runway's native cinematic theme */
--bg-page: #000000;
--bg-card: #1a1a1a;
--bg-nav: rgba(0,0,0,0.92);
--text-primary: #ffffff;
--text-secondary: #a7a7a7;
--text-muted: #767d88;
--text-tertiary: #7d848e;
--border-color: #27272a;
--border-subtle: #1a1a1a;
--section-label-color: #767d88;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-primary);
font-size: 16px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-primary);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--text-primary);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 400;
letter-spacing: -0.16px;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-cta {
background: var(--color-white);
color: var(--color-black);
padding: 8px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 600;
cursor: pointer;
letter-spacing: -0.16px;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
background: var(--color-black);
}
.hero h1 {
font-family: var(--font-primary);
font-size: 48px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -1.2px;
margin-bottom: 24px;
color: var(--color-white);
}
.hero p {
color: var(--color-cool-slate);
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.16px;
margin-bottom: 40px;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; }
.btn-primary {
background: var(--color-white);
color: var(--color-black);
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 600;
cursor: pointer;
letter-spacing: -0.16px;
}
.btn-ghost {
background: transparent;
color: var(--color-white);
padding: 12px 24px;
border: 1px solid var(--color-border-dark);
border-radius: 4px;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 400;
cursor: pointer;
letter-spacing: -0.16px;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 78px 40px;
}
.section-title {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.35px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-primary);
font-size: 40px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -1px;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-color);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.16px;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; letter-spacing: -0.16px; }
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-color); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-bordered { border: 1px solid var(--border-color); }
.card-surface {
background: var(--color-deep-black);
border: 1px solid var(--border-color);
}
.card-minimal {
background: transparent;
border: 1px solid var(--border-color);
}
.card h3 {
font-family: var(--font-primary);
font-size: 24px;
font-weight: 400;
line-height: 1.0;
letter-spacing: normal;
margin-bottom: 12px;
}
.card p { color: var(--text-secondary); font-size: 13px; line-height: 1.3; letter-spacing: -0.16px; }
.card-label {
font-family: var(--font-primary);
font-size: 11px;
font-weight: 450;
text-transform: uppercase;
letter-spacing: normal;
color: var(--text-muted);
margin-bottom: 16px;
}
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: rgba(118,125,136,0.15);
border: 1px solid var(--border-color);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-bordered { border: 1px solid var(--border-color); }
.elevation-dark-section {
background: var(--color-dark-surface);
border: 1px solid var(--border-color);
}
.elevation-light-section {
background: var(--color-cool-cloud);
color: var(--color-black);
border: none;
}
.elevation-light-section .elevation-desc { color: var(--color-charcoal); }
.elevation-light-section .elevation-level { color: var(--color-cool-slate); }
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.16px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.3; letter-spacing: -0.16px; }
.elevation-level {
font-family: var(--font-primary);
font-size: 11px;
font-weight: 450;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: normal;
margin-top: 12px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 36px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand">Runway</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Try Runway</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br>Runway</h1>
<p>Cinematic, minimal, editorial design tokens from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-primary">Explore Tokens</button>
<button class="btn-ghost">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Runway Black</div>
<div class="color-swatch-hex">#000000</div>
<div class="color-swatch-role">Primary page background, maximum-emphasis text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #030303; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Black</div>
<div class="color-swatch-hex">#030303</div>
<div class="color-swatch-role">Layered dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #1a1a1a; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Surface</div>
<div class="color-swatch-hex">#1a1a1a</div>
<div class="color-swatch-role">Card backgrounds, elevated dark containers</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark, light-section backgrounds</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fefefe; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Near White</div>
<div class="color-swatch-hex">#fefefe</div>
<div class="color-swatch-role">Lightest surface variant</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #e9ecf2;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cool Cloud</div>
<div class="color-swatch-hex">#e9ecf2</div>
<div class="color-swatch-role">Light section backgrounds, cool blue-gray tint</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Border Dark</div>
<div class="color-swatch-hex">#27272a</div>
<div class="color-swatch-role">Dark-mode border color</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Cool Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #404040;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Charcoal</div>
<div class="color-swatch-hex">#404040</div>
<div class="color-swatch-role">Primary body text on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #767d88;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cool Slate</div>
<div class="color-swatch-hex">#767d88</div>
<div class="color-swatch-role">Secondary body text, cool blue-gray</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #7d848e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mid Slate</div>
<div class="color-swatch-hex">#7d848e</div>
<div class="color-swatch-role">Tertiary text, metadata</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #a7a7a7;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Muted Gray</div>
<div class="color-swatch-hex">#a7a7a7</div>
<div class="color-swatch-role">De-emphasized content, timestamps</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #c9ccd1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cool Silver</div>
<div class="color-swatch-hex">#c9ccd1</div>
<div class="color-swatch-role">Light borders and dividers</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #d0d4d4;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Light Silver</div>
<div class="color-swatch-hex">#d0d4d4</div>
<div class="color-swatch-role">Lightest border/divider variant</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #6b7280;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Tailwind Gray</div>
<div class="color-swatch-hex">#6b7280</div>
<div class="color-swatch-role">Supplementary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #999999;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Footer Gray</div>
<div class="color-swatch-hex">#999999</div>
<div class="color-swatch-role">Footer links, deeply muted content</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<p style="color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;">Single typeface system: DM Sans (abcNormal substitute). One font, complete expression.</p>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 48px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;">Display Hero</div>
<div class="type-sample-label">Display / Hero -- 48px / 400 / 1.00 / -1.2px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 40px; font-weight: 400; line-height: 1.0; letter-spacing: -1px;">Section Heading</div>
<div class="type-sample-label">Section Heading -- 40px / 400 / 1.00 / -1px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 36px; font-weight: 400; line-height: 1.0; letter-spacing: -0.9px;">Sub-heading</div>
<div class="type-sample-label">Sub-heading -- 36px / 400 / 1.00 / -0.9px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 24px; font-weight: 400; line-height: 1.0;">Card Title</div>
<div class="type-sample-label">Card Title -- 24px / 400 / 1.00 / normal</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 20px; font-weight: 400; line-height: 1.0;">Feature Title</div>
<div class="type-sample-label">Feature Title -- 20px / 400 / 1.00 / normal</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px;">Body text for standard paragraphs, navigation links, and button labels. DM Sans provides geometric precision across all UI copy.</div>
<div class="type-sample-label">Body / Button -- 16px / 400 / 1.30 / -0.16px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 14px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.35px; color: var(--text-muted);">SECTION LABEL</div>
<div class="type-sample-label">Caption / Label -- 14px / 500 / 1.25 / 0.35px / uppercase</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px; color: var(--text-secondary);">Compact description text for metadata and small copy blocks.</div>
<div class="type-sample-label">Small -- 13px / 400 / 1.30 / -0.16px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 11px; font-weight: 450; line-height: 1.3; text-transform: uppercase; color: var(--text-muted);">MICRO TAG LABEL</div>
<div class="type-sample-label">Micro / Tag -- 11px / 450 / 1.30 / normal / uppercase</div>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">03 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-bordered">
<div class="card-label">Bordered Card</div>
<h3>Dark Border Containment</h3>
<p>Standard content card with 1px solid border-dark and 8px radius. The default container for research articles and feature sections.</p>
</div>
<div class="card card-surface">
<div class="card-label">Deep Surface Card</div>
<h3>Cinematic Container</h3>
<p>Deep black surface card on #030303 with border containment. Layered depth through background variation.</p>
</div>
<div class="card card-minimal">
<div class="card-label">Minimal Card</div>
<h3>Transparent Container</h3>
<p>Minimal bordered card with transparent background. The interface retreats to let content speak.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">04 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;">Base unit: 8px. Cinema-grade breathing between sections.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">6px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 112px; height: 112px;"></div><div class="spacing-label">28px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">48px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">64px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 224px; height: 224px;"></div><div class="spacing-label">78px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">05 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<p style="color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;">Subtle radius only. Not pill-shaped.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp / Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Subtle / Links</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable / Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Generous / Alerts</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">06 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<p style="color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;">Zero shadows. Depth comes from section alternation and photography, never from box-shadow.</p>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. The dominant state for everything.</div></div>
<div class="elevation-level">Level 0</div>
</div>
<div class="elevation-card elevation-bordered">
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid #27272a. Alert containers only.</div></div>
<div class="elevation-level">Level 1</div>
</div>
<div class="elevation-card elevation-dark-section">
<div><div class="elevation-name">Dark Section</div><div class="elevation-desc">Dark bg with light text. Hero, features, footer.</div></div>
<div class="elevation-level">Level 2</div>
</div>
<div class="elevation-card elevation-light-section">
<div><div class="elevation-name">Light Section</div><div class="elevation-desc">White or Cool Cloud bg with dark text. Content sections.</div></div>
<div class="elevation-level">Level 3</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>

665
design-md/runwayml/preview.html Normal file
View File

@@ -0,0 +1,665 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design System Preview: Runway (Light)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&display=swap" rel="stylesheet">
<style>
:root {
--color-black: #000000;
--color-deep-black: #030303;
--color-dark-surface: #1a1a1a;
--color-white: #ffffff;
--color-near-white: #fefefe;
--color-cool-cloud: #e9ecf2;
--color-charcoal: #404040;
--color-near-charcoal: #3f3f3f;
--color-cool-slate: #767d88;
--color-mid-slate: #7d848e;
--color-muted-gray: #a7a7a7;
--color-cool-silver: #c9ccd1;
--color-light-silver: #d0d4d4;
--color-tailwind-gray: #6b7280;
--color-dark-link: #0c0c0c;
--color-footer-gray: #999999;
--color-border-dark: #27272a;
--font-primary: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
/* Light mode */
--bg-page: #ffffff;
--bg-card: #fefefe;
--bg-nav: rgba(255,255,255,0.95);
--text-primary: #000000;
--text-secondary: #404040;
--text-muted: #767d88;
--text-tertiary: #7d848e;
--border-color: #c9ccd1;
--border-subtle: #e9ecf2;
--section-label-color: #767d88;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-page);
color: var(--text-primary);
font-family: var(--font-primary);
font-size: 16px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
}
/* NAV */
.nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 40px;
background: var(--bg-nav);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-brand {
font-family: var(--font-primary);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--text-primary);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
font-weight: 400;
letter-spacing: -0.16px;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-cta {
background: var(--color-black);
color: var(--color-white);
padding: 8px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 600;
cursor: pointer;
letter-spacing: -0.16px;
}
/* HERO */
.hero {
position: relative;
text-align: center;
padding: 120px 40px 100px;
background: var(--color-black);
color: var(--color-white);
}
.hero h1 {
font-family: var(--font-primary);
font-size: 48px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -1.2px;
margin-bottom: 24px;
}
.hero p {
color: var(--color-cool-slate);
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.16px;
margin-bottom: 40px;
}
.hero-buttons { display: flex; gap: 16px; justify-content: center; }
.btn-primary {
background: var(--color-white);
color: var(--color-black);
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 600;
cursor: pointer;
letter-spacing: -0.16px;
}
.btn-ghost {
background: transparent;
color: var(--color-white);
padding: 12px 24px;
border: 1px solid var(--color-border-dark);
border-radius: 4px;
font-size: 14px;
font-family: var(--font-primary);
font-weight: 400;
cursor: pointer;
letter-spacing: -0.16px;
}
/* SECTIONS */
.section {
max-width: 1200px;
margin: 0 auto;
padding: 78px 40px;
}
.section-title {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.35px;
color: var(--section-label-color);
margin-bottom: 12px;
}
.section-heading {
font-family: var(--font-primary);
font-size: 40px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -1px;
margin-bottom: 48px;
}
.section-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0 40px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* COLOR PALETTE */
.color-group { margin-bottom: 40px; }
.color-group-title {
font-size: 20px;
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.16px;
margin-bottom: 20px;
color: var(--text-secondary);
}
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.color-swatch {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.color-swatch-block {
height: 80px;
position: relative;
}
.color-swatch-info {
padding: 12px;
background: var(--bg-card);
}
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; letter-spacing: -0.16px; }
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.color-swatch-role { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* TYPOGRAPHY */
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.type-sample:last-child { border-bottom: none; }
.type-sample-text { margin-bottom: 8px; }
.type-sample-label {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
}
/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card {
background: var(--bg-card);
border-radius: 8px;
padding: 28px;
}
.card-bordered { border: 1px solid var(--border-color); }
.card-dark {
background: var(--color-dark-surface);
border: 1px solid var(--color-border-dark);
color: var(--color-white);
}
.card-dark p { color: var(--color-cool-slate); }
.card-minimal {
background: transparent;
border: 1px solid var(--border-subtle);
}
.card h3 {
font-family: var(--font-primary);
font-size: 24px;
font-weight: 400;
line-height: 1.0;
letter-spacing: normal;
margin-bottom: 12px;
}
.card p { color: var(--text-secondary); font-size: 13px; line-height: 1.3; letter-spacing: -0.16px; }
.card-label {
font-family: var(--font-primary);
font-size: 11px;
font-weight: 450;
text-transform: uppercase;
letter-spacing: normal;
color: var(--text-muted);
margin-bottom: 16px;
}
/* SPACING */
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.spacing-item { text-align: center; }
.spacing-box {
background: var(--color-cool-cloud);
border: 1px solid var(--border-color);
border-radius: 2px;
margin-bottom: 8px;
}
.spacing-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
/* RADIUS */
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.radius-item { text-align: center; }
.radius-box {
width: 80px;
height: 80px;
background: var(--bg-card);
border: 1px solid var(--border-color);
margin-bottom: 8px;
}
.radius-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
}
.radius-context {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ELEVATION */
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.elevation-card {
background: var(--bg-card);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.elevation-flat { border: none; background: var(--bg-page); }
.elevation-bordered { border: 1px solid var(--border-color); }
.elevation-dark-section {
background: var(--color-black);
color: var(--color-white);
border: none;
}
.elevation-dark-section .elevation-desc { color: var(--color-cool-slate); }
.elevation-light-section {
background: var(--color-cool-cloud);
border: none;
}
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.16px; }
.elevation-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.3; letter-spacing: -0.16px; }
.elevation-level {
font-family: var(--font-primary);
font-size: 11px;
font-weight: 450;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: normal;
margin-top: 12px;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav { padding: 12px 20px; }
.nav-links a:not(.nav-cta-wrapper) { display: none; }
.hero { padding: 80px 20px 60px; }
.hero h1 { font-size: 36px; }
.section { padding: 60px 20px; }
.section-heading { font-size: 28px; }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.card-grid { grid-template-columns: 1fr; }
.hero-buttons { flex-direction: column; align-items: center; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-brand">Runway</div>
<div class="nav-links">
<a href="#colors">Colors</a>
<a href="#typography">Typography</a>
<a href="#cards">Cards</a>
<a href="#spacing">Spacing</a>
<a href="#elevation">Elevation</a>
<button class="nav-cta">Try Runway</button>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<h1>Design System Preview:<br>Runway</h1>
<p>Cinematic, minimal, editorial design tokens from DESIGN.md</p>
<div class="hero-buttons">
<button class="btn-primary">Explore Tokens</button>
<button class="btn-ghost">View Source</button>
</div>
</section>
<hr class="section-divider">
<!-- COLORS -->
<section class="section" id="colors">
<div class="section-title">01 / Color Palette</div>
<h2 class="section-heading">Color Palette & Roles</h2>
<div class="color-group">
<h3 class="color-group-title">Primary</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Runway Black</div>
<div class="color-swatch-hex">#000000</div>
<div class="color-swatch-role">Primary page background, maximum-emphasis text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #030303; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Deep Black</div>
<div class="color-swatch-hex">#030303</div>
<div class="color-swatch-role">Layered dark surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #1a1a1a; border-bottom: 1px solid #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Dark Surface</div>
<div class="color-swatch-hex">#1a1a1a</div>
<div class="color-swatch-role">Card backgrounds, elevated dark containers</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #ffffff; border-bottom: 1px solid #c9ccd1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Pure White</div>
<div class="color-swatch-hex">#ffffff</div>
<div class="color-swatch-role">Primary text on dark, light-section backgrounds</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Surface & Background</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #fefefe; border-bottom: 1px solid #c9ccd1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Near White</div>
<div class="color-swatch-hex">#fefefe</div>
<div class="color-swatch-role">Lightest surface variant</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #e9ecf2;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cool Cloud</div>
<div class="color-swatch-hex">#e9ecf2</div>
<div class="color-swatch-role">Light section backgrounds, cool blue-gray tint</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #27272a;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Border Dark</div>
<div class="color-swatch-hex">#27272a</div>
<div class="color-swatch-role">Dark-mode border color</div>
</div>
</div>
</div>
</div>
<div class="color-group">
<h3 class="color-group-title">Cool Neutrals & Text</h3>
<div class="color-grid">
<div class="color-swatch">
<div class="color-swatch-block" style="background: #404040;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Charcoal</div>
<div class="color-swatch-hex">#404040</div>
<div class="color-swatch-role">Primary body text on light surfaces</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #767d88;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cool Slate</div>
<div class="color-swatch-hex">#767d88</div>
<div class="color-swatch-role">Secondary body text, cool blue-gray</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #7d848e;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Mid Slate</div>
<div class="color-swatch-hex">#7d848e</div>
<div class="color-swatch-role">Tertiary text, metadata</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #a7a7a7;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Muted Gray</div>
<div class="color-swatch-hex">#a7a7a7</div>
<div class="color-swatch-role">De-emphasized content, timestamps</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #c9ccd1;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Cool Silver</div>
<div class="color-swatch-hex">#c9ccd1</div>
<div class="color-swatch-role">Light borders and dividers</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #d0d4d4;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Light Silver</div>
<div class="color-swatch-hex">#d0d4d4</div>
<div class="color-swatch-role">Lightest border/divider variant</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #6b7280;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Tailwind Gray</div>
<div class="color-swatch-hex">#6b7280</div>
<div class="color-swatch-role">Supplementary text</div>
</div>
</div>
<div class="color-swatch">
<div class="color-swatch-block" style="background: #999999;"></div>
<div class="color-swatch-info">
<div class="color-swatch-name">Footer Gray</div>
<div class="color-swatch-hex">#999999</div>
<div class="color-swatch-role">Footer links, deeply muted content</div>
</div>
</div>
</div>
</div>
</section>
<hr class="section-divider">
<!-- TYPOGRAPHY -->
<section class="section" id="typography">
<div class="section-title">02 / Typography Scale</div>
<h2 class="section-heading">Typography Rules</h2>
<p style="color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;">Single typeface system: DM Sans (abcNormal substitute). One font, complete expression.</p>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 48px; font-weight: 400; line-height: 1.0; letter-spacing: -1.2px;">Display Hero</div>
<div class="type-sample-label">Display / Hero -- 48px / 400 / 1.00 / -1.2px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 40px; font-weight: 400; line-height: 1.0; letter-spacing: -1px;">Section Heading</div>
<div class="type-sample-label">Section Heading -- 40px / 400 / 1.00 / -1px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 36px; font-weight: 400; line-height: 1.0; letter-spacing: -0.9px;">Sub-heading</div>
<div class="type-sample-label">Sub-heading -- 36px / 400 / 1.00 / -0.9px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 24px; font-weight: 400; line-height: 1.0;">Card Title</div>
<div class="type-sample-label">Card Title -- 24px / 400 / 1.00 / normal</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 20px; font-weight: 400; line-height: 1.0;">Feature Title</div>
<div class="type-sample-label">Feature Title -- 20px / 400 / 1.00 / normal</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px;">Body text for standard paragraphs, navigation links, and button labels. DM Sans provides geometric precision across all UI copy.</div>
<div class="type-sample-label">Body / Button -- 16px / 400 / 1.30 / -0.16px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 14px; font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.35px; color: var(--text-muted);">SECTION LABEL</div>
<div class="type-sample-label">Caption / Label -- 14px / 500 / 1.25 / 0.35px / uppercase</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: -0.16px; color: var(--text-secondary);">Compact description text for metadata and small copy blocks.</div>
<div class="type-sample-label">Small -- 13px / 400 / 1.30 / -0.16px</div>
</div>
<div class="type-sample">
<div class="type-sample-text" style="font-size: 11px; font-weight: 450; line-height: 1.3; text-transform: uppercase; color: var(--text-muted);">MICRO TAG LABEL</div>
<div class="type-sample-label">Micro / Tag -- 11px / 450 / 1.30 / normal / uppercase</div>
</div>
</section>
<hr class="section-divider">
<!-- CARDS -->
<section class="section" id="cards">
<div class="section-title">03 / Card Examples</div>
<h2 class="section-heading">Cards & Containers</h2>
<div class="card-grid">
<div class="card card-bordered">
<div class="card-label">Bordered Card</div>
<h3>Cool Silver Border</h3>
<p>Standard content card with 1px solid cool-silver border and 8px radius. The default container for research articles and feature sections.</p>
</div>
<div class="card card-dark">
<div class="card-label">Dark Surface Card</div>
<h3>Cinematic Container</h3>
<p>Dark surface card on #1a1a1a with border-dark containment. Used for featured content on dark sections.</p>
</div>
<div class="card card-minimal">
<div class="card-label">Minimal Card</div>
<h3>Transparent Container</h3>
<p>Minimal bordered card with transparent background and subtle border. The interface retreats to let content speak.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- SPACING -->
<section class="section" id="spacing">
<div class="section-title">04 / Spacing Scale</div>
<h2 class="section-heading">Spacing System</h2>
<p style="color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;">Base unit: 8px. Cinema-grade breathing between sections.</p>
<div class="spacing-row">
<div class="spacing-item"><div class="spacing-box" style="width: 16px; height: 16px;"></div><div class="spacing-label">4px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 24px; height: 24px;"></div><div class="spacing-label">6px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 32px; height: 32px;"></div><div class="spacing-label">8px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 48px; height: 48px;"></div><div class="spacing-label">12px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 64px; height: 64px;"></div><div class="spacing-label">16px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 80px; height: 80px;"></div><div class="spacing-label">20px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 96px; height: 96px;"></div><div class="spacing-label">24px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 112px; height: 112px;"></div><div class="spacing-label">28px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 128px; height: 128px;"></div><div class="spacing-label">32px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 160px; height: 160px;"></div><div class="spacing-label">48px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 192px; height: 192px;"></div><div class="spacing-label">64px</div></div>
<div class="spacing-item"><div class="spacing-box" style="width: 224px; height: 224px;"></div><div class="spacing-label">78px</div></div>
</div>
</section>
<hr class="section-divider">
<!-- BORDER RADIUS -->
<section class="section">
<div class="section-title">05 / Border Radius Scale</div>
<h2 class="section-heading">Border Radius</h2>
<p style="color: var(--text-muted); margin-bottom: 32px; font-size: 13px; letter-spacing: -0.16px;">Subtle radius only. Not pill-shaped.</p>
<div class="radius-row">
<div class="radius-item"><div class="radius-box" style="border-radius: 4px;"></div><div class="radius-label">4px</div><div class="radius-context">Sharp / Buttons</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 6px;"></div><div class="radius-label">6px</div><div class="radius-context">Subtle / Links</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 8px;"></div><div class="radius-label">8px</div><div class="radius-context">Comfortable / Cards</div></div>
<div class="radius-item"><div class="radius-box" style="border-radius: 16px;"></div><div class="radius-label">16px</div><div class="radius-context">Generous / Alerts</div></div>
</div>
</section>
<hr class="section-divider">
<!-- ELEVATION -->
<section class="section" id="elevation">
<div class="section-title">06 / Elevation & Depth</div>
<h2 class="section-heading">Depth & Elevation</h2>
<p style="color: var(--text-muted); margin-bottom: 48px; font-size: 13px; letter-spacing: -0.16px;">Zero shadows. Depth comes from section alternation and photography, never from box-shadow.</p>
<div class="elevation-grid">
<div class="elevation-card elevation-flat">
<div><div class="elevation-name">Flat</div><div class="elevation-desc">No shadow, no border. The dominant state for everything.</div></div>
<div class="elevation-level">Level 0</div>
</div>
<div class="elevation-card elevation-bordered">
<div><div class="elevation-name">Bordered</div><div class="elevation-desc">1px solid border. Alert containers only.</div></div>
<div class="elevation-level">Level 1</div>
</div>
<div class="elevation-card elevation-dark-section">
<div><div class="elevation-name">Dark Section</div><div class="elevation-desc">Dark bg with light text. Hero, features, footer.</div></div>
<div class="elevation-level">Level 2</div>
</div>
<div class="elevation-card elevation-light-section">
<div><div class="elevation-name">Light Section</div><div class="elevation-desc">White or Cool Cloud bg with dark text. Content sections.</div></div>
<div class="elevation-level">Level 3</div>
</div>
</div>
</section>
<div style="height: 80px;"></div>
</body>
</html>