A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media.
cinematic dark surfaces with warm action color and platform switching themeTypography
ABC Normal-style display sans (open substitute in source)
Large editorial headings, platform labels, navigation, and body copy
Inter, Helvetica Neue, Arial, sans-serifFallback: Helvetica Neue, Arial, ui-sans-serif, system-ui, sans-serif
System monospace
Technical metadata, counts, command cues, and code-like labels
SFMono-Regular, Menlo, Consolas, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
Palette
Dark canvas
#0b0d12Primary dark page background
Dark surface
#141821Card, code, and specimen surfaces
Dark raised
#1e2530Hover, selected, and raised control surface
Dark border
#303846Hairline structure on dark mode
Dark text
#f7f8faPrimary dark-mode content
Dark muted
#a9afbaSecondary dark-mode content
Light canvas
#f4f6f8Primary light page background
Light surface
#ffffffLight card and specimen surface
Light raised
#edf0f5Hover, selected, and raised light surface
Light border
#d9dee7Hairline structure on light mode
Accent
#ff7f50Primary action and selected state
Accent secondary
#7d8cffFocus, secondary action, or supporting signal
Warm
#ffc766Attention and editorial emphasis
Ready
#76e3a8Success, ready, or healthy state
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Display | 76px | 400 | 0.94 | -0.075em |
| Hero mobile | 38px | 400 | 1.02 | -0.05em |
| Section heading | 48px | 500 | 1.04 | -0.06em |
| Product heading | 24px | 600 | 1.2 | -0.025em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface label | 14px | 500 | 1.4 | -0.01em |
| Metadata | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Iconography
Keep icons geometric and secondary to the platform label. Never reconstruct the Runway wordmark or download the brand asset pack for this unofficial kit.
System metrics
Radius
Spacing
Motion
Elevation
Panel
0 18px 50px rgba(0, 0, 0, 0.18)Large preview and focused content frame
Overlay
0 24px 80px rgba(0, 0, 0, 0.32)Menu, dialog, or floating command surface
Focus ring
0 0 0 3px #ff7f5055Keyboard focus indication
Surfaces & shape
Dark canvas
#0b0d12Dark-first page and specimen background
Dark panel
#141821Primary dark content surface
Light canvas
#f4f6f8Light page and specimen background
Light panel
#ffffffPrimary light content surface
Guidelines
Imagery
Prefer original gradient fields, abstract world-model diagrams, and empty media frames. The reference captures are live-site evidence only and are not reused inside elements.
Layout
Use an 1180px rail, a dark hero with a two-column desktop composition, and stacked platform/news sections below 900px. Mobile keeps the promo strip above the hero and turns grids into a single narrative.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
8 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
An unofficial, original Perplexity-inspired interface study with 13 focused specimens supported by the live product and content experience.