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

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.

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.

NameWidthKey Changes
2xl1600pxFull editorial container; pricing 5-up; research 5/7 split.
xl1536pxSame layout, marginally tighter gutters.
lg1280pxDefault desktop reading view.
md1200pxPricing grid still 5-up but tier text tightens.
sm1024pxPricing collapses to 3 → 2 tier rows; research stacks.
xs768pxTop nav collapses to a hamburger; section padding drops to 64px.
xxs640pxSingle-column reading; hero drops to display-sm; pricing stacks 1-up.
390
600
800
1024
1280
1600