Color

## Color Palette

Black ink on paper-white, with five tiers of grey carrying every nuance from caption to divider, and a single slate-blue reserved for tertiary metadata.

Brand & Action

Primary

#000000

Every primary CTA, footer canvas.

On Primary

#ffffff

Type on primary surfaces.

Surface

Canvas

#ffffff

Primary reading-page background.

Canvas Warm

#fefefe

Studios tiles, half-tone lift.

Hairline

#e7eaf0

Featured pricing infill, dividers.

Hairline Soft

#c9ccd1

Column separators, form rules.

Surface Cool

#d0d4d4

Media thumbnail placeholder.

Scrim

#1a1a1a

Cinematic dark stage.

Footer

#030303

Footer canvas.

Text

Ink

#030303

Headings, primary copy.

Ink Soft

#1a1a1a

Nav links, body emphasis.

Graphite

#404040

Standard body copy.

Slate

#676f7b

Tertiary metadata.

Slate Soft

#727a85

Footer headings on dark.

Mute

#6b7280

Disabled, fine-print.

Stone

#939393

Footer eyebrow caps.

Ash

#999999

Captions, fine-print.

Typography

## Typography

A single proprietary sans, abcNormal, carries every level from 11px micro-caps to 48px editorial display. Inter substitutes when abcNormal is unavailable.

display48 · 400 · 1.0 · -1.2px
Runwai Pricing
display-sm40 · 400 · 1.0 · -1px
Looking to get in touch?
heading-md36 · 400 · 1.0 · -0.9px
Our latest Research
heading-sm24 · 400 · 1.0 · 0
Card titles and sub-section heads
subtitle20 · 400 · 1.0
Hero sub-copy and lead paragraphs
body16 · 400 · 1.5
Default body copy across marketing sections, form fields, and footer link list.
body-strong16 · 600 · 1.5
Inline emphasis and Get Started label text.
body-tight16 · 400 · 1.3 · -0.16px
Tight-leading body for marketing cards and CTA cards.
link-sm14 · 600 · 1.43
Nav links, button labels, Learn More text links
eyebrow14 · 500 · 1.43 · 0.35px
Section Eyebrow Label
meta13 · 400 · 1.3 · -0.26px
Tertiary metadata — dates, fine print, table footnotes.
micro-caps11 · 450 · 1.3 · 0.2px
PRESS · RESOURCES · COMPANY
button14 · 600 · 1.43
Try Runwai

Buttons

## Button Variants

Every primary action is a black solid pill. Ghost and text-link variants take secondary roles. No size variants, no gradients, no shadows.

Pricing

## Pricing 5-Column Slab

A 5-tier slab with no coloured borders, no shadow, no badge ribbon. The featured tier is signalled by a single tonal step (hairline infill).

Free

For exploring the platform.

$0

per user / month

- 125 credits
- Basic features
- Community support

Standard

For individual creators.

$15

per user / month

- 625 credits
- Standard tools
- Email support

Pro

For professionals.

$35

per user / month

- 2,250 credits
- Pro tools
- Priority support

Unlimited

For heavy creators.

$95

per user / month

- Unlimited credits
- Explore mode
- Dedicated support

Enterprise

Custom for teams.

Custom

contact us

- Custom volumes
- SOC 2 + SSO
- Account manager

Research

## Research Cards

A 5/7 split: media thumbnail on the left, aligned text block on the right. Hairline-divided rows in editorial cadence.

### Gen-Foundation Models

We are building foundational simulation World Models for the next era of creative tooling. Cinematic motion, controllable scenes, and editable continuity.

Learn More

### Frames

The most stylistically controllable image-generation system. Built for filmmakers, designers, and visual artists who need consistent aesthetics.

Learn More

Studios

## Studios Tiles

A dense, irregular masonry of editorial poster tiles, captioned in body-tight. Tiles are deliberately heterogeneous in aspect ratio.

A short film exploring memory and architecture, rendered with Gen-3.

Film

An editorial campaign for a contemporary fashion house — entirely model-generated.

Campaign

Music video produced with controllable scene continuity across cuts.

Music

Hero Photo

## Cinematic Atmospheric Interlude

Mid-document interludes use a contained scrim panel with rounded.lg corners. They function as pacing breaks, not promotional units.

World Models

### We are building foundational simulation World Models

A new generation of AI systems that understand and re-render the visual world.

Forms

## Form Elements

Bottom-rule-only fields — no full border, no background fill, no focus ring. Focused state deepens the bottom rule from hairline-soft to ink.

Full Name
Email
Message

We'll get back to you within 2 business days.

Layout

## Spacing Scale

An 8px base with 4 / 6 / 12px micro-steps for inline gaps. Section vertical rhythm alternates between 64px and 96px for editorial breaks.

xxs · 4
xs · 8
sm · 12
md · 16
lg · 24
xl · 32
xxl · 48
section · 64
section-lg · 96

Shape

## Border Radius

Pricing cells, table rows, and form fields use 0. Cards round at 8px. Hero panels and alert banners at 16px. Buttons go full pill.

none · 0
xs · 4
sm · 6
md · 8
lg · 16
full · pill

Elevation

## Elevation & Depth

No drop shadows. Depth is created by photographic layering and tonal surface shifts.

Flat — 1px hairline, default for cards and rows
Photographic — scrim panel, rounded.lg
Subtle Surface Lift — hairline infill

Responsive

## Responsive Behavior

Seven breakpoints from 2xl (1600) to xxs (640). Pricing 5-up collapses to single-column at xxs; the featured infill is preserved on stack.

Name | Width | Key Changes
--- | --- | ---
2xl | 1600px | Full editorial container; pricing 5-up; research 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 stacks.
xs | 768px | Top nav collapses to a hamburger; section padding drops to 64px.
xxs | 640px | Single-column reading; hero drops to display-sm; pricing stacks 1-up.

390
600
800
1024
1280
1600