Untitled Design System
Runwai treats its marketing site as a curatorial space — closer in feeling to the programme guide of a film festival than to a typical AI-tooling site. Photography sets the temperature: cinematic, atmospheric stills (a forest at dusk, a lone figure under an indigo night sky) anchor full-bleed hero modules in `{colors.scrim}`, while the rest of the document drops onto pure `{colors.canvas}` for unbroken reading. The colour story is restraint to the point of austerity — black ink on paper-white, with five tiers of grey carrying every nuance from caption to divider, and a single slate-blue (`{colors.slate-soft}` / `{colors.slate}`) reserved for secondary text on rare occasions. Typography does almost all of the heavy lifting. A single proprietary sans, `abcNormal`, carries every level from 11px micro-caps to 48px editorial display, with negative letter-spacing on every heading (`-0.9px` to `-1.2px`) tightening the headline silhouette into something that reads as deliberate and quiet rather than punchy. There is no decorative ornament, no card glow, no gradient buttons — every primary action is a black solid pill (`{colors.primary}` background, `{colors.on-primary}` text, `{rounded.full}` corners), reused with absolute consistency across hero CTAs, pricing subscriptions, and form submissions. The layout discipline is editorial: hairline dividers (`{colors.hairline}`), uppercase eyebrows (`{typography.eyebrow}`), and an 8-px spacing grid that resolves to large 64–96px section gutters. Sections cycle through a tight rhythm — dark photographic hero → white reading band → research grid on canvas → photographic full-width interlude → dark CTA strip → black footer — letting black ink and black-and-white photography do the dramatic work that other sites delegate to colour.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Runwai treats its marketing site as a curatorial space — closer in feeling to the programme guide of a film festival than to a typical AI-tooling site. Photography sets the temperature: cinematic, atmospheric stills (a forest at dusk, a lone figure under an indigo night sky) anchor full-bleed hero modules in `{colors.scrim}`, while the rest of the document drops onto pure `{colors.canvas}` for unbroken reading. The colour story is restraint to the point of austerity — black ink on paper-white, with five tiers of grey carrying every nuance from caption to divider, and a single slate-blue (`{colors.slate-soft}` / `{colors.slate}`) reserved for secondary text on rare occasions. Typography does almost all of the heavy lifting. A single proprietary sans, `abcNormal`, carries every level from 11px micro-caps to 48px editorial display, with negative letter-spacing on every heading (`-0.9px` to `-1.2px`) tightening the headline silhouette into something that reads as deliberate and quiet rather than punchy. There is no decorative ornament, no card glow, no gradient buttons — every primary action is a black solid pill (`{colors.primary}` background, `{colors.on-primary}` text, `{rounded.full}` corners), reused with absolute consistency across hero CTAs, pricing subscriptions, and form submissions. The layout discipline is editorial: hairline dividers (`{colors.hairline}`), uppercase eyebrows (`{typography.eyebrow}`), and an 8-px spacing grid that resolves to large 64–96px section gutters. Sections cycle through a tight rhythm — dark photographic hero → white reading band → research grid on canvas → photographic full-width interlude → dark CTA strip → black footer — letting black ink and black-and-white photography do the dramatic work that other sites delegate to colour.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
default
default
Do's & Don'ts
Do
Don't
Layout
### Spacing System
• Base unit: 8px (with 4px and 6px micro-steps for inline element gaps).
• Tokens (front matter): {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 64px · {spacing.section-lg} 96px.
• Card internal padding sits at {spacing.lg} (24px). Section vertical rhythm alternates between {spacing.section} (64px) for tight reading bands and {spacing.section-lg} (96px) for editorial breaks between major modules. Inline button padding is {spacing.sm} vertical / {spacing.lg} horizontal.
### Grid & Container
• Marketing pages render inside a centred container that caps near 1280px on widescreen breakpoints; the document maintains generous left/right gutters (~{spacing.xxl}) at every breakpoint above 1024px.
• The pricing surface is a 5-column equal-width grid (Free / Standard / Pro / Unlimited / Enterprise) on widescreen; each column is a vertical strip separated by 1-pixel {colors.hairline-soft} rules rather than gaps.
• Research/products listings use a 12-column underlying grid where each row presents a 5/7 split: media thumbnail on the left (5 columns), aligned text block on the right (7 columns).
• Studios pages break the discipline deliberately: a dense, irregular masonry of editorial poster tiles, captioned in {typography.body-tight}, with no consistent column count — the page is meant to read as a programme grid.
### Whitespace Philosophy
Whitespace at Runwai is structural, not decorative. Sections are separated by 64–96px verticals; cards inside a section are separated by 16–24px gaps. There are no card shadows or coloured surfaces standing in for layout — {colors.canvas} carries through, and rhythm comes from line-height and section spacing alone. The studios pages are the exception; their dense poster grids feel almost cluttered by contrast, which is the point — they read like a printed catalogue.
Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| {rounded.none} | 0px | Pricing-grid cells, table rows, form fields, footer link blocks |
| {rounded.xs} | 4px | Small inline accents, focus rings, secondary link chips |
| {rounded.sm} | 6px | Tag chips, secondary link buttons |
| {rounded.md} | 8px | Research-card thumbnails, studios poster tiles, media containers |
| {rounded.lg} | 16px | Alert banners, hero-photograph containers, full-bleed CTA panels |
| {rounded.full} | 9999px | Every primary button (CTA pills), studios tag pills |
### Photography Geometry
• Hero stills are full-bleed, no rounding — they extend to the page edges to feel cinematic rather than card-like.
• Contained hero panels (mid-page interludes) take {rounded.lg} corners, signalling "module" rather than "page".
• Research thumbnails are 16:9 with {rounded.md} corners and a {colors.surface-cool} placeholder fill.
• Studios poster tiles vary in aspect ratio (square, 4:5, landscape) and use {rounded.md} corners; the deliberate aspect-ratio inconsistency is what gives the studios grid its programme-catalogue feel.
• Avatar/logo lockups in the partner row are rendered without rounding, in flat black wordmarks on {colors.canvas}, evenly spaced.
Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| 2xl | 1600px | Full editorial container; pricing 5-up; research rows 5/7 split |
| xl | 1536px | Same layout, marginally tighter gutters |
| lg | 1280px | Default desktop reading view |
| md | 1200px | Pricing grid still 5-up but tier text tightens |
| sm | 1024px | Pricing collapses to 3 → 2 tier rows; research rows stack at certain breakpoints |
| xs | 768px | Top nav collapses to a hamburger; section padding drops to {spacing.section} |
| xxs | 640px | Single-column reading; hero display drops to {typography.display-sm}; pricing tiers stack 1-up |
### Touch Targets
• Every {button-primary} is 40px tall — at the lower edge of the 44×44 WCAG target. On mobile the buttons grow to 48px height (still {rounded.full}, still {typography.button}).
• {nav-link} items get {spacing.sm} vertical padding inside the mobile menu, expanding the tap target without changing typography.
• Pricing-tier {button-primary} extends full-column-width on mobile.
### Collapsing Strategy
• Nav. Centred desktop menu collapses into a single hamburger that opens an overlay sheet; the right-side {button-primary} "Try Runwai" stays visible above the hamburger as the persistent action.
• Pricing. 5-column slab collapses to single-column stacked cards at xxs; the featured {colors.hairline} infill is preserved on the Pro card so the tonal cue survives the stack.
• Research grid. 5/7 split collapses to image-on-top, text-below at sm; thumbnail rounding ({rounded.md}) is preserved.
• Footer. 6-column link grid collapses to 2-column at sm and 1-column at xxs; the lowercase runwai wordmark stays bottom-left, legal links stack underneath.
### Image Behavior
• Hero photographs swap to a tighter crop on mobile (vertical-leaning) so the focal subject stays centred at xxs widths.
• {media-thumbnail} containers preserve their 16:9 ratio at every breakpoint; the {colors.surface-cool} placeholder fill paints during lazy-load.
• Studios poster tiles preserve their original aspect ratios at every breakpoint — the masonry simply re-flows into fewer columns.
Iteration Guide
1. Focus on ONE component at a time. Start with {button-primary} and {nav-bar} — they appear on every page and anchor the system.
2. Reference component names and tokens directly ({colors.ink}, {button-primary-on-dark}, {rounded.full}) — do not paraphrase or substitute hex values.
3. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag drift automatically.
4. Add new variants as separate components: entries (-pressed, -disabled, -focused) — never bury them inside prose.
5. Default body copy to {typography.body} and emphasis to {typography.body-strong}. Reserve {typography.eyebrow} and {typography.micro-caps} for their two specific roles (section openers and footer columns).
6. Keep {colors.primary} scarce — if more than one black-pill action appears in a single viewport, neutralise the secondary one to {button-ghost}.
7. When introducing photography, lay it into {colors.scrim} and let the next white band break against it. Avoid mid-section photographic accents that don't span the full content width — they read as off-system.
Use with MCP
Don't have the MCP? Install it here