Runway Dev Design System

Overview

Runway Dev presents a cinematic, developer-focused visual identity built on deep charcoal atmospherics and dramatic typographic scale. The design language feels like stepping onto a film set: moody dark backgrounds ({colors.canvas} at #1b1e23) provide theatrical contrast for crisp white headlines rendered in the proprietary ABC New Normal typeface at an imposing 72px ({typography.display-xl}). This is not a utilitarian SaaS palette—it's a brand that positions AI media generation as a creative, almost artistic endeavor, and every visual choice reinforces that positioning.

The brand's electrical voltage lives in a single, carefully restrained accent: {colors.primary} at #89ddff, a luminous cyan that appears sparingly—on interactive links, code syntax highlights, and occasional UI micro-acents—never overwhelming the dark-ground composition. Primary calls-to-action invert the expected pattern: they're solid white buttons ({component.button-primary}) with near-black text ({colors.on-surface}), creating maximum pop against the hero's photographic backdrop while maintaining the system's high-contrast philosophy.

The defining typographic move is the deliberate restraint of weight across the entire hierarchy. Despite the massive 72px headline scale, the weight never exceeds 400 (regular) for display text and 600 for buttons—there is no bold, no heavy, no black. Hierarchy is achieved through extreme size differential (72px → 60px → 20px → 16px), aggressive negative letter-spacing on display text (-2.16px at {typography.display-xl}), and color value shifts (pure {colors.ink} for headlines, {colors.body} for supporting text). This creates an editorial, fashion-magazine sensibility that distinguishes Runway Dev from typical developer documentation sites.

Shape language favors the practical: {rounded.md} at 8px dominates buttons and inputs, {rounded.lg} at 12px handles cards and code blocks, and {rounded.pill} appears only on badge/tag components. There is no playful over-rounding—the system trusts its atmospheric depth and typographic drama rather than geometric friendliness. The one exception is the mobile menu trigger, which uses the same 8px radius as primary buttons, maintaining consistency in touch targets.

The site operates in a single dominant mode—dark—with light surfaces ({colors.surface-soft}) reserved exclusively for elevated interactive elements (primary buttons, certain cards). A secondary "developer dialect" emerges in code blocks and technical sections, switching to monospaced {typography.caption} at 13px in SF Mono, signaling the transition from marketing narrative to implementation detail.

Key Characteristics:

• Deep charcoal canvas ({colors.canvas} — #1b1e23) with pure white ({colors.ink} — #ffffff) headlines creates 17.5:1 contrast for maximum readability
• Single electric-cyan brand accent ({colors.primary} — #89ddff) used sparingly for links and interactive hints
• Dramatic 72px display type ({typography.display-xl}) with -2.16px letter-spacing and weight 400—never bold
• White primary CTAs ({component.button-primary}) with dark text ({colors.on-surface}) inverted against dark backgrounds
• ABC New Normal proprietary typeface with Inter fallback stack throughout all UI elements
• Monospaced code voice ({typography.caption}) in SF Mono for technical content at 13px
• 8px default radius ({rounded.DEFAULT}) on all buttons and inputs; 12px ({rounded.lg}) on containers
• Cinematic hero treatment with full-bleed photography behind translucent overlay text
• Subtle motion system using cubic-bezier(0.2, 0, 0, 1) easing at 250ms duration

Colors

Brand & Accent

• Primary ({colors.primary} — #89ddff): Electric cyan used for hyperlinks, active states, code syntax highlighting, and brand-referencing accents throughout the interface. Appears in text color role approximately 25 times across the page.
• Primary Hover ({colors.primary-hover} — #a0e4ff): Lightened cyan state for interactive hover feedback on links and primary-accented elements.
• Primary Active ({colors.primary-active} — #6fc8f5): Deepened cyan for pressed/active states, providing tactile confirmation on interaction.
• Accent ({colors.accent} — #89ddff): Alias for primary; the system uses a single brand color without secondary brand tones.

Surface

• Canvas ({colors.canvas} — #1b1e23): The primary page background—a deep charcoal-blue that reads as near-black but carries slight warmth. Used for the main body, hero band, and most section backgrounds.
• Surface ({colors.surface} — #131416): Darker elevation level for nested cards and container elements that need to recede slightly from the canvas.
• Surface Elevated ({colors.surface-elevated} — #1b1e22): Nearly identical to canvas but semantically distinct for raised panels, dropdowns, and modal backdrops.
• Surface Dark ({colors.surface-dark} — #000000): Pure black used for the deepest layer—code block backgrounds, the trusted-by marquee section, footer, and input fields.
• Surface Soft ({colors.surface-soft} — #ffffff): Pure white reserved exclusively for elevated foreground elements: primary button fills, signature cards requiring maximum prominence, and inverted-content areas.

Text

• Ink ({colors.ink} — #ffffff): Pure white, the dominant text color for all headings, navigation labels, and primary body copy on dark backgrounds. Carries the entire informational hierarchy.
• Body ({colors.body} — #818a9d): Medium-gray tone for secondary text—paragraphs below headlines, descriptions, supporting copy that should recede. Provides ~5.5:1 contrast against canvas.
• Muted ({colors.muted} — #a1afc5): Lighter gray for tertiary information—timestamps, metadata, placeholder text, captions beneath primary content.
• Muted Soft ({colors.muted-soft} — #cdd1d6): Very light gray approaching white, used for truly subordinate text like the "TRUSTED BY" label and decorative elements.
• On Primary ({colors.on-primary} — #0b0b0c): Near-black text for rendering on the cyan primary background (badges, small primary-filled elements) or white button surfaces.
• On Dark ({colors.on-dark} — #ffffff): White text guaranteed for any dark surface context; functionally identical to ink but semantically distinct for component-level usage.
• On Surface ({colors.on-surface} — #0b0b0c): The primary text color for content rendered on white/light surfaces—used inside {component.button-primary} and any white card backgrounds.
• On Surface Medium ({colors.on-surface-medium} — #666e7a): Secondary text color for light-surface contexts—supporting text within white cards or modals.
• On Surface Soft ({colors.on-surface-soft} — #9ba8b5): Tertiary text for light surfaces, providing hierarchy differentiation on white backgrounds.
• Near White ({colors.near-white} — #eeeeee): Off-white used for the trusted-by logo marks and very subtle text that needs visibility without competing with primary content.

Hairlines & Borders

• Hairline ({colors.hairline} — #2a2f38): Subtle border for dividers and outlines on dark surfaces—barely visible, provides structural definition without drawing attention.
• Hairline Soft ({colors.hairline-soft} — #3a4150): Slightly more visible border for input fields and focus rings on dark backgrounds.
• Border on Light ({colors.border-on-light} — #e5e7eb): Standard light gray border for elements rendered on white surfaces—button outlines, card borders in inverted contexts.
• Border Strong ({colors.border-strong} — #ffffff): White border used for the secondary (outline) button style ({component.button-secondary}), creating clear containment against the dark canvas.

Semantic

• Link ({colors.link} — #89ddff): Interactive link color, identical to primary cyan. All clickable text references use this token rather than raw primary to maintain semantic clarity.
• Link Active ({colors.link-active} — #a0e4ff): Lightened link state for hover/active feedback on textual navigation and inline links.
• Error ({colors.error} — #f87171): Red tone for form validation errors and destructive action feedback (extracted from standard semantic palette; not visually confirmed in screenshot).
• Success ({colors.success} — #4ade80): Green for confirmation states and positive system feedback (standard semantic token).
• Warning ({colors.warning} — #fbbf24): Amber/yellow for caution states and attention-requiring notices (standard semantic token).
• Info ({colors.info} — #89ddff): Informational tone, mapped to brand primary for consistency in notification systems.

Typography

Font Family

Runway Dev's typographic voice is built entirely on ABC New Normal, a proprietary typeface served via CloudFront CDN (observed in @font-face declarations pointing to d3phaj0sisr2ct.cloudfront.net). Three weights are loaded: Normal (400), Regular (500), and Neutral (600)—the naming convention suggests this is a custom build or variant of ABC's typeface family optimized for screen rendering at large sizes. The font displays characteristics of a neo-grotesque sans-serif: clean, modern, with slightly geometric proportions but humanist warmth in its curve terminals.

The fallback stack is comprehensive and well-ordered: "Normal, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans', Meiryo, ui-sans-serif, sans-serif". This prioritizes Inter (the closest Google Fonts equivalent to ABC New Normal's personality) before falling back to system fonts covering macOS, Windows, CJK, and Japanese audiences—a global-first approach appropriate for an AI platform serving international developers.

For code and technical content, the system switches to SF Mono with Cascadia Code, Fira Code, Menlo, and Consolas as fallbacks—reflecting a developer-tool aesthetic that prioritizes legibility for monospaced content at small sizes (13px).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 400 | 0.95 (-2.16px) | -2.16px | Hero headline (H1) — "The AI Media Platform for Developers" | | {typography.display-lg} | 60px | 400 | 0.95 (-2.4px) | -2.4px | Section headlines (H2) — major section openers | | {typography.title-md} | 20px | 500 | 1.4 | 0 | Subsection headers (H3), card titles, feature labels | | {typography.title-sm} | 16px | 500 | 1.5 | -0.16px | Small titles, navigation items with emphasis | | {typography.body-md} | 16px | 400 | 1.5 | -0.16px | Primary paragraph text, descriptions, body copy | | {typography.body-sm} | 14px | 400 | 1.5 | 0 | Secondary body text, fine print, metadata | | {typography.caption} | 13px | 400 | 1.46 | 0 | Code snippets, technical annotations, timestamps (monospaced) | | {typography.button} | 16px | 600 | 1.25 | 0 | Primary button labels, CTA text, sign-up/log-in | | {typography.button-nav} | 16px | 500 | 1.25 | 0 | Navigation links, menu items, secondary actions | | {typography.label-md} | 12px | 500 | 1.33 | 0.04em | Badges, tags, small labels with slight expansion | | {typography.label-uppercase} | 12px | 500 | 1.33 | 0.08em | Uppercase labels ("TRUSTED BY"), category markers, section identifiers |

Principles

The typography system's most distinctive principle is weight discipline: despite the massive scale range (72px down to 12px—a 6x differential), the weight spectrum is remarkably compressed. Display text stays at 400 (regular), body at 400, and only interactive elements (buttons, nav links) step up to 500-600. There is no 700 (bold), no 800 (extra bold), no 900 (black). This restraint gives the design its editorial, high-fashion character—relying on sheer size and tight letter-spacing to create impact rather than weight aggression.

Negative letter-spacing is the system's secret weapon for display typography. At 72px, {typography.display-xl} applies -2.16px tracking (approximately -3% of em width), pulling the characters tighter together for a sophisticated, magazine-cover feel. At 60px, tracking increases to -2.4px (also ~-3%). This counteracts the natural optical loosening that occurs at large sizes and gives headlines their distinctive "locked-up" appearance. Body text at 16px uses a subtle -0.16px (approximately -1%) to maintain visual cohesion without compromising readability.

Color-as-hierarchy works in tandem with size. Headlines render in pure {colors.ink} (#ffffff), while supporting paragraphs drop to {colors.body} (#818a9d)—a mid-gray that recedes significantly. Tertiary information falls further to {colors.muted} (#a1afc5). This three-step value progression (white → gray → lighter gray) does as much work as the size differential in establishing reading order.

The monospaced dialect ({typography.caption} at 13px in SF Mono) signals a mode shift from marketing to technical content. When users encounter this type treatment, they intuitively understand they've entered "developer documentation" territory—even within a marketing page. The monospace voice is paired with {colors.surface-dark} (pure black) backgrounds and {colors.muted-soft} text, creating a terminal-like aesthetic that reinforces the platform's technical credibility.

Note on Font Substitutes

ABC New Normal is a proprietary typeface not available on Google Fonts. For implementations without access to the licensed font files, Inter (available at https://fonts.google.com/specimen/Inter) serves as the closest visual substitute—it shares the same neo-grotesque skeleton, similar x-height, and excellent screen rendering at large sizes. Define the CSS variable --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif and map all {typography.*} tokens to this stack. For the monospaced voice, JetBrains Mono or Fira Code (both on Google Fonts) can substitute for SF Mono, with the CSS variable --font-family-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace.

Layout

Spacing System

• Base unit: 4px ({spacing.xxs}), with the system scaling through 6px, 8px, 12px, 16px, 20px, 24px, 40px, and reaching 100px for heroic spacing.
• Tokens: {spacing.xxs} (4px — icon internal padding, micro-gaps), {spacing.xs} (6px — tight element spacing), {spacing.sm} (8px — inline gaps between related elements), {spacing.md} (12px — standard component internal padding), {spacing.lg} (16px — card padding, section gaps), {spacing.xl} (20px — button padding, element grouping), {spacing.xxl} (24px — generous card internal spacing), {spacing.section} (40px — vertical section rhythm), {spacing.section-lg} (100px — hero band vertical padding).
• Section padding (vertical): {spacing.section-lg} (100px) — used on the hero band to create cinematic breathing room above and below the headline block.
• Card internal padding: {spacing.xxl} (24px) for standard {component.card} and {component.card-elevated}; {spacing.xl} (20px) for {component.code-block}.
• Gutters: The main content container sits at 1440px max-width with implicit gutters handled by the container's internal padding; article-level content narrows to 1224px.

Grid & Container

The layout employs a wide-format editorial grid optimized for desktop-first developer audiences. Key container dimensions extracted from CSS:

• Page-level section container: 1440px max-width (used for header, main sections)
• Article/content container: 1224px max-width (used for prose-heavy content blocks)
• Navigation container: 538px (constrained width for the centered nav link group)

The hero section uses an asymmetric two-column layout at desktop: the left column (approximately 50-55% width) holds the headline, subtext, and CTA group stacked vertically; the right column contains the full-bleed hero image/photograph. This creates a cinematic split-composition where text has generous horizontal breathing room while imagery commands visual dominance on the right.

Below the hero, the trusted-by section uses a single-column centered layout with a horizontal scrolling/fading marquee of partner logos, constrained within the 1440px container but with logos extending beyond via overflow.

Whitespace Philosophy

Runway Dev practices generous, confident whitespace rooted in its cinematic identity. The 100px vertical padding on the hero band ({spacing.section-lg}) is nearly double what typical SaaS landing pages allocate—this isn't efficiency-driven spacing, it's atmosphere-building spacing. The system trusts that dark empty space enhances focus rather than wasting real estate. Between the hero headline (72px) and the subtext paragraph, there's natural line-height-based separation (~68px from baseline to baseline) without requiring explicit margin tokens. Section-to-section transitions use 40px ({spacing.section}) as a consistent rhythmic pulse—not so much that the page feels disconnected, but enough that each section announces itself.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [runway Dev]   Models ▾  Products ▾  For Agents  Enterprise  Learn   │
│                                    Docs ↗            [Log In] [Sign Up]│
│                                                                      │
│  ← 1440px max-width container, 64px height →                        │
└──────────────────────────────────────────────────────────────────────┘

The top navigation follows a logo-left, center-nav, right-utilities pattern. The Runway Dev wordmark anchors the left edge. Navigation links (Models, Products, For Agents, Enterprise, Learn, Docs) occupy the center-left area within a 538px constrained group, with chevron indicators on dropdown triggers. The right side flushes utility actions: a bordered "Log In" outline button ({component.button-secondary} style) and a filled "Sign Up" primary button ({component.button-primary}). A mobile hamburger menu trigger (icon button with 8px radius and 1px white border) appears at smaller breakpoints.

Hero Section

┌──────────────────────────────────────────────────────────────────────┐
│  ┌─────────────────────────┐  ┌──────────────────────────────────┐  │
│  │                         │  │                                  │  │
│  │  The AI Media Platform  │  │                                  │  │
│  │  for Developers         │  │     [FULL-BLEED PHOTOGRAPHIC     │  │
│  │                         │  │      HERO IMAGE / VIDEO          │  │
│  │  The best image, video  │  │      WITH DARK OVERLAY           │  │
│  │  and audio models...    │  │                                  │  │
│  │                         │  │                                  │  │
│  │  [Get API key] [Explore]│  │                                  │  │
│  └─────────────────────────┘  └──────────────────────────────────┘  │
│                                                                      │
│  ← 100px vertical padding (section-lg) →                            │
└──────────────────────────────────────────────────────────────────────┘

The hero is the system's signature moment: a split-composition hero where the left text column (roughly 50% width) overlays a darkened version of the background image, while the right column reveals the full-fidelity cinematic photograph. The headline uses {typography.display-xl} (72px, white, -2.16px tracking). The subtext sits below in {colors.body} gray at {typography.body-md} (16px). The CTA pair—{component.button-primary} ("Get API key", white fill) and {component.button-secondary} ("Explore models", transparent with white border)—stacks horizontally with {spacing.sm} (8px) gap between them.

Trusted By Marquee Section

┌──────────────────────────────────────────────────────────────────────┐
│                           TRUSTED BY                                 │
│                                                                      │
│  [Adobe] [Cloudflare] [ElevenLabs] [Expedia] [Runware] [Gamma]      │
│  [FreePik] [Krea] ... (scrolling/fading marquee)                    │
│                                                                      │
│  ← 40px vertical padding (section), #000000 background →           │
└──────────────────────────────────────────────────────────────────────┘

The social proof section inverts to {colors.surface-dark} (pure black) background. A centered {typography.label-uppercase} label ("TRUSTED BY") renders in {colors.muted-soft} (#cdd1d6) with 0.08em letter-spacing. Below, partner logos (Adobe, Cloudflare, ElevenLabs, Expedia, Runware, Gamma, FreePik, Krea) display in {colors.near-white} (#eeeeee) at reduced opacity, arranged in a horizontal marquee that likely implements the _trustedByMarquee_l78jm_1 keyframe animation detected in the CSS.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Page body, hero band, section backgrounds | | 1 (Hairline) | 1px {colors.hairline} border or inset shadow | Input fields, subtle dividers, code block edges | | 2 (Soft raise) | {extensions.shadows.sm} — 0 2px 8px rgba(0,0,0,0.3) | Cards, dropdown panels, tooltips | | 3 (Modal/Dropdown) | {extensions.shadows.md} — 0 8px 16px rgba(0,0,0,0.5) | Modals, mega menus, elevated overlays | | 4 (Dialog) | {extensions.shadows.lg} — 0 16px 32px rgba(0,0,0,0.6) | Confirmation dialogs, critical overlays | | Focus ring | Inset 1px {colors.hairline-soft} or glow | Input focus states, keyboard navigation indicators |

Philosophy: Runway Dev's depth system is shadow-conservative and color-blocking-forward. Rather than layering multiple shadow elevations to create hierarchy, the system relies on background-color contrast between {colors.canvas}, {colors.surface}, and {colors.surface-dark} to establish layers. Shadows appear only when an element truly floats above content (dropdowns, modals, toasts). The extracted shadow values are neutral/black-toned (rgba(0, 0, 0, ...)), avoiding the colored-shadow trend—the brand keeps its cyan {colors.primary} strictly for intentional accent moments, not atmospheric effects.

The inset shadow ({extensions.shadows.inset} — inset 0 0 0 1px rgb(27, 30, 35)) is a distinctive choice for input fields, creating a "recessed" appearance that suggests tappability without the visual weight of an external border. This technique, combined with the pure black {colors.surface-dark} input background, gives form elements a premium, tool-like quality.

Decorative Depth

The hero section employs photographic depth as its primary decorative technique: a full-bleed, cinematically-lit portrait photograph (visible in the screenshot showing a person's face with warm directional lighting) serves as the background layer. The left text column sits atop a darkened/overlay version of this image (likely rgba(0, 0, 0, 0.3) backdrop-filter or gradient overlay, detected in the background-color data), ensuring white text remains legible while the image bleeds through with atmospheric warmth. This is not flat-design minimalism—it's editorial photo-compositing where imagery and typography coexist in layered depth.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small badges, tag corners, minor inner elements | | {rounded.DEFAULT} / {rounded.md} | 8px | Dominant radius — all buttons (primary, secondary, icon), input fields, mobile menu trigger | | {rounded.lg} | 12px | Cards ({component.card}, {component.card-elevated}), code blocks ({component.code-block}), larger containers | | {rounded.xl} | 20px | Hero image/container corners, featured panels, signature rounded rectangles | | {rounded.pill} / {rounded.full} | 999px / 9999px | Badge/tags ({component.badge}), fully rounded elements |

The radius vocabulary is intentionally tight and pragmatic. Eight pixels ({rounded.md}) does 80% of the work across the entire interface—buttons, inputs, icon containers all share this single radius, creating strong visual consistency. The system resists the temptation to introduce intermediate values (no 6px, no 10px, no 16px); each jump (4→8→12→20→999) represents a meaningful categorical shift in geometry rather than incremental variation.

Photography Geometry

The hero photograph uses large-radius corner rounding ({rounded.xl} at 20px) on its container, softening the rectangular frame to match the overall friendly-but-professional aesthetic. The image itself appears to use a cinematic aspect ratio (approximately 16:9 or wider) and employs full-bleed treatment within its container—no margins, no borders, edge-to-edge fill. The photograph features shallow depth-of-field (bokeh) with warm directional lighting, suggesting professional portrait/fashion photography rather than stock imagery. At smaller breakpoints, this image will likely crop to maintain focus on the subject's face (rule-of-thirds composition observed in the screenshot).

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The fixed/sticky header container spanning the full viewport width at 64px height. Background is transparent (rgba(0, 0, 0, 0)) allowing the hero image or page content to show through, though it may acquire a backdrop-blur or solid {colors.canvas} background on scroll (not visible in static screenshot). Contains the logo, navigation links, and utility buttons. Text color {colors.ink} (white) ensures readability regardless of underlying content.

{component.nav-link} — Navigation menu items ("Models", "Products", "For Agents", "Enterprise", "Learn", "Docs"). Transparent background with white text at {typography.button-nav} (16px, weight 500). Dropdown triggers include a chevron indicator (likely a Lucide icon). No padding override—uses inherited spacing. On mobile, these collapse into a drawer/menu panel.

{component.mobile-menu-trigger} — The hamburger/menu icon button visible at smaller breakpoints. Transparent background, white icon (Lucide Menu), 40×40px size with {rounded.md} (8px) radius and 1px white border ({colors.border-strong}). Icon is 20-24px centered within the touch target.

{component.button-primary} — The principal call-to-action: solid {colors.surface-soft} (white) background with {colors.on-surface} (near-black #0b0b0c) text. Uses {typography.button} (16px, weight 600), {rounded.md} (8px) radius, and 10px 20px horizontal/vertical padding. Examples: "Sign Up" in the header, "Get API key" in the hero. Shadow is none—flat design relying on contrast rather than elevation. State variants: {component.button-primary-hover} (background lightens to {colors.near-white}), {component.button-primary-active} (background shifts to {colors.muted-soft}).

{component.button-secondary} — Outlined/ghost button style: transparent background with 1px {colors.border-strong} (white) border, white ({colors.ink}) text. Same typography and radius as primary. Examples: "Log In" in header, "Explore models" in hero. The white border provides visibility against the dark canvas without the visual weight of a filled button. State variants: {component.button-secondary-hover} (background gains rgba(255, 255, 255, 0.08) fill), {component.button-secondary-active} (background at rgba(255, 255, 255, 0.12)).

{component.button-ghost} — Text-only button with no border, no background, just {colors.ink} text at {typography.button-nav} weight. Used for less-prominent actions where a button shape would add unnecessary visual noise. State variant: {component.button-button-ghost-hover} adds subtle rgba(255, 255, 255, 0.05) background.

{component.button-icon} — Square icon-only button (40×40px) with transparent background, white icon, {rounded.md} (8px) radius. Used for toolbar actions, close buttons, and utility controls where only an icon is needed.

Cards & Containers

{component.hero-band} — The full-width hero section container. Background {colors.canvas} (#1b1e23), though visually overlaid with the hero photograph. Vertical padding {spacing.section-lg} (100px) creates the cinematic top/bottom margins. Contains the headline, subtext, and CTA group in its left column.

{component.hero-headline} — The H1 "The AI Media Platform for Developers" text. Transparent background, {colors.ink} (white) text, {typography.display-xl} (72px, weight 400, -2.16px tracking). This is the system's most dramatic typographic moment—designed to capture attention immediately and communicate the platform's scope with editorial authority.

{component.hero-subtext} — The descriptive paragraph below the headline ("The best image, video and audio models..."). {colors.body} (#818a9d) text at {typography.body-md} (16px), providing contextual detail without competing with the headline.

{component.hero-cta-group} — Container for the hero's action buttons. Transparent background, {spacing.xl} (20px) top margin to separate from subtext, internal flex layout with {spacing.sm} (8px) gap between {component.button-primary} and {component.button-secondary}.

{component.trusted-by-section} — Full-width social proof band. Background {colors.surface-dark} (pure black), creating strong visual break from the hero. Padding {spacing.section} (40px) vertical. Contains the uppercase label and logo marquee.

{component.trusted-by-label} — "TRUSTED BY" uppercase text. {colors.muted-soft} (#cdd1d6) color, {typography.label-uppercase} (12px, weight 500, 0.08em letter-spacing), centered horizontally.

{component.logo-marquee} — Horizontal scrolling/fading container for partner logos. Transparent background, {spacing.lg} (16px) vertical padding. Each {component.logo-item} displays a partner wordmark in {colors.near-white} (#eeeeee) at reduced opacity (estimated 50-70%). Implements _trustedByMarquee_l78jm_1 keyframe animation for continuous horizontal scroll.

{component.logo-item} — Individual partner logo (Adobe, Cloudflare, ElevenLabs, etc.). Transparent background, {colors.near-white} text/color, {spacing.md} (12px) horizontal padding for spacing between logos. Maintains aspect ratio of original logomark.

{component.card} — Standard content card. Background {colors.surface} (#131416), white text, {rounded.lg} (12px) radius, {spacing.xxl} (24px) internal padding. Used for feature showcases, pricing tiers, or content blocks that need to float above the canvas.

{component.card-elevated} — Elevated card variant. Background {colors.surface-elevated} (#1b1e22)—subtly lighter than {component.card} for situations needing more prominence. Same radius and padding as standard card. May carry {extensions.shadows.sm} when truly floating.

{component.code-block} — Technical code display container. Background {colors.surface-dark} (pure black), {colors.muted-soft} (#cdd1d6) text in {typography.caption} (13px SF Mono), {rounded.lg} (12px) radius, {spacing.xl} (20px) padding. Includes the {extensions.shadows.inset} (inset 1px border) for recessed appearance. Syntax highlighting uses {colors.primary} (cyan) for keywords/functions.

Inputs & Forms

{component.text-input} — Standard text input field. Background {colors.surface-dark} (black), {colors.ink} (white) text, {typography.body-md} (16px), {rounded.md} (8px) radius, 10px 14px padding, 44px height. Features the distinctive {extensions.shadows.inset} (inset 0 0 0 1px rgb(27, 30, 35)) creating a recessed border effect. Placeholder text likely uses {colors.muted} or {colors.muted-soft}.

{component.text-input-focus} — Focused state of text input. Maintains black background and white text, but the inset border likely intensifies or transitions to {colors.primary} (cyan) glow/ring for focus indication (implementation detail per stack conventions).

Navigation & Structural

{component.footer} — Page footer (partially inferred from structural patterns). Background {colors.surface-dark} (black), {colors.body} (#818a9d) text at {typography.body-sm} (14px), {spacing.section} (40px) vertical padding. Contains footer links, legal text, and additional navigation.

{component.footer-link} — Footer navigation link. Transparent background, {colors.muted} (#a1afc5) text at {typography.body-sm}. Likely transitions to {colors.ink} or {colors.primary} on hover.

Signature Components

{component.badge} — Small status/pill badge. Background rgba(137, 221, 255, 0.1) (10% opacity cyan), {colors.primary} (cyan) text, {typography.label-md} (12px, weight 500), {rounded.pill} (fully rounded), 4px 10px padding. Used for version tags ("v3"), status indicators ("Beta"), or category labels.

{component.divider} — Horizontal rule/divider line. Transparent background, 1px height, {colors.hairline} (#2a2f38) color (implied). Used to separate sections or content groups without drawing excessive attention.

Do's and Don'ts

Do

• Do use {typography.display-xl} (72px, weight 400) for the hero headline and never exceed weight 400 for display text—the system achieves impact through scale and tight letter-spacing, not boldness.
• Do reserve {colors.primary} (#89ddff) exclusively for interactive elements (links, focus states, code highlights) and avoid using it for large blocks of text or backgrounds—the brand color is an accent, not a surface.
• Do apply {rounded.md} (8px) radius consistently to all buttons, inputs, and icon containers—this single value creates the system's cohesive interactive-element language.
• Do pair white {component.button-primary} buttons with dark canvas backgrounds for maximum contrast pop; the inverted button treatment is a signature Runway Dev pattern.
• Do use {colors.body} (#818a9d) for all supporting/descriptive text below headlines—this value step-down is critical for establishing visual hierarchy without changing size.
• Do implement the {typography.caption} (13px SF Mono) treatment for any code snippets or technical annotations, signaling the shift to "developer mode" content.
• Do maintain 100px ({spacing.section-lg}) vertical padding on the hero section—the generous whitespace is intentional atmosphere, not wasted space.
• Do use {colors.surface-dark} (#000000) for code block and input field backgrounds, combined with the inset shadow ({extensions.shadows.inset}) for the characteristic "recessed tool" appearance.
• Do keep the trusted-by/logo marquee on a pure black ({colors.surface-dark}) background with {colors.near-white} (#eeeeee) logos at reduced opacity for elegant social proof presentation.
• Do apply -2.16px letter-spacing (from {typography.display-xl}) to any 72px headline text—the tight tracking is essential for the editorial look.
• Do use cubic-bezier(0.2, 0, 0, 1) easing for all transitions (detected in extracted CSS) to maintain the system's snappy, modern motion feel.

Don't

• Don't use font-weight 700 (bold) or higher anywhere in the system—if emphasis is needed, increase size or switch to {colors.primary} color instead; the weight cap at 600 (for buttons only) is intentional.
• Don't apply {colors.primary} (#89ddff) as a button background color—the primary brand color is too light for filled buttons on dark backgrounds; use {colors.surface-soft} (white) instead.
• Don't introduce new border radius values beyond the defined scale (4px, 8px, 12px, 20px, 999px)—each existing token serves a specific geometric category and intermediate values fragment the visual language.
• Don't place light text ({colors.ink} or {colors.body}) directly on {colors.surface-soft} (white) surfaces without switching to the {colors.on-surface}* color family—contrast ratios will fail accessibility checks.
• Don't add drop shadows to the primary {component.button-primary}—it remains deliberately flat, relying on its white-fill contrast against dark backgrounds rather than elevation for prominence.
• Don't use the monospaced {typography.caption} for non-technical content—reserving SF Mono for code/data preserves its semantic signal.
• Don't reduce the hero headline below 60px ({typography.display-lg}) for any secondary section heading—the dramatic scale is non-negotiable for maintaining the system's editorial voice.
• Don't apply gradients or colorful backdrops to section backgrounds—the surface palette is strictly neutral (charcoal, darker charcoal, black, white); brand color appears only in text/border/icon roles.
• Don't crowd the hero CTA group—maintain the {spacing.xl} (20px) top margin separating it from the subtext paragraph.
• Don't forget the inset shadow on {component.text-input}—the recessed border ({extensions.shadows.inset}) is a signature detail that distinguishes Runway Dev's form elements from generic inputs.
• Don't mix the ABC New Normal typeface with serif or display fonts in the same context—the system's coherence depends on the single sans-serif family carrying all vocal weights.

Motion & Animation

Transition Tokens

--transition-colors: color 0.25s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s cubic-bezier(0.2, 0, 0, 1);
--transition-border: border-color 0.25s cubic-bezier(0.2, 0, 0, 1);
--transition-backdrop: backdrop-filter 0.25s cubic-bezier(0.2, 0, 0, 1), -webkit-backdrop-filter 0.25s cubic-bezier(0.2, 0, 0, 1);
--transform: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
--filter: filter 0.25s cubic-bezier(0.2, 0, 0, 1);
--all: all 0.25s cubic-bezier(0.2, 0, 0, 1); /* fallback */

All detected transitions share the 250ms duration and cubic-bezier(0.2, 0, 0, 1) easing—a deceleration curve that starts quickly and smooths out, giving interactions a snappy-yet-refined feel. The 0.2 initial value provides immediate response (no perceived lag), while the 0, 1 termination creates gentle settling. This is notably different from the material-design-standard ease-out or cubic-bezier(0.4, 0, 0.2, 1)—Runway Dev's curve is more abrupt, matching its developer-tool persona.

Keyframe Animations

• _codeExampleFadeIn_1vrg5_1 — Fade-in reveal for code example blocks, likely combining opacity 0→1 with subtle Y-axis translation (8px↑) for an "entering from below" effect when code sections scroll into view.
• _trustedByMarquee_l78jm_1 — Continuous horizontal scroll animation for the partner logo marquee in the trusted-by section. Likely translates logos leftward in an infinite loop with seamless wrapping, creating the "living ticker" effect common in social-proof sections.

Interaction Patterns

• Button hover lift: {component.button-primary-hover} and {component.button-secondary-hover} implement background-color transitions (white → near-white for primary; transparent → 8% white for secondary) using --transition-colors.
• Focus ring reveal: {component.text-input-focus} likely transitions the inset border from subtle {colors.hairline-soft} to {colors.primary} (cyan) glow or intensified opacity, using --transition-border.
• Scroll-triggered reveals: The _codeExampleFadeIn_ keyframe suggests IntersectionObserver-driven animations where code blocks, cards, or sections fade-and-slide into view as the user scrolls.
• Nav backdrop blur: The --transition-backdrop token (detected in CSS) indicates the top navigation likely acquires a backdrop-filter: blur() effect on scroll, transitioning from transparent to frosted-glass opaque.
• Marquee continuous scroll: Partner logos in {component.logo-marquee} animate horizontally at constant velocity using _trustedByMarquee_, creating an infinite carousel effect.
• Link color shift: Inline links using {colors.link} transition to {colors.link-active} (brighter cyan) on hover via --transition-colors.
• Dropdown menu reveal: Navigation dropdowns (Models ▾, Products ▾) likely use --transform (Y-axis scale/translate) combined with opacity for smooth expand/collapse.

Imagery Style

• Photographic hero: The above-fold hero features a cinematic portrait photograph with professional lighting (warm key light from camera-left, creating dimensional modeling on the subject's face). Shallow depth-of-field (bokeh) blurs the background, focusing attention on the eyes and facial expression.
• Warm color grading: The photograph carries warm amber/orange tonality (skin tones, hair highlights) that contrasts beautifully with the cool charcoal canvas and cyan accent color—this warm-vs-cool interplay is a deliberate compositional choice.
• Dark overlay compositing: The left text column sits atop a darkened version of the hero image (estimated 30-50% black overlay or gradient fade), ensuring 72px white headline text maintains 7:1+ minimum contrast for accessibility while allowing image texture to bleed through atmospherically.
• Human-centric subject matter: The choice of a human face (rather than abstract visuals, product screenshots, or illustrations) positions Runway Dev as a creative-human tool—AI serving artistic vision, not replacing it. This is a brand-strategy decision communicated through imagery selection.
• No illustration system detected: Unlike many SaaS products that use flat/vector illustration libraries, Runway Dev relies on photography as its primary visual asset, suggesting a mature brand that invests in original creative assets rather than stock illustration.
• Logo mark treatment: Partner logos in the trusted-by section are rendered in monochromatic near-white (#eeeeee) at reduced opacity (approximately 50-60%), creating a unified "grayed out" ensemble where no single partner's brand color competes with Runway Dev's own identity.
• Full-bleed, edge-to-edge: Images extend to container edges without borders, frames, or shadow treatments—the photograph is the background, not an inserted element.
• Aspect ratio: Hero image appears to use a widescreen cinematic ratio (approximately 2:1 or 16:9), emphasizing horizontal sweep and filmic quality.
• No visible patterns/textures: Beyond the hero photograph, the UI relies on flat color surfaces—no noise textures, grain overlays, or geometric pattern backgrounds detected in the extracted CSS.

Icon System

• Library: Lucide (detected via iconLibs: ["lucide"] in framework analysis and consistent stroke-style iconography visible in navigation chevrons and the mobile menu trigger).
• Specific icons observed:
  • ChevronDown — Navigation dropdown indicators (Models ▾, Products ▾)
  • ArrowUpRight — External link indicator (Docs ↗)
  • Menu / X — Mobile hamburger menu trigger (toggleable)
  • Additional Lucide icons likely used throughout lower sections (not visible in above-fold screenshot): Code, Terminal, Play, Settings, ExternalLink, Github, etc.
• Treatment: Stroke-based icons (not filled), currentColor coloring (inherits parent text color, typically {colors.ink} white on dark backgrounds), 1.5px or 2px stroke width (standard Lucide default), sharp/miter joins.
• Size alignment:
  • Inline/navigation icons: 16px–18px, aligned with {typography.button-nav} (16px) text baseline, vertically centered
  • Button icons: 20px–24px, centered within {component.button-icon} (40×40px) or {component.mobile-menu-trigger} (40×40px) touch targets
  • Standalone/decorative icons: 24px–32px for feature illustrations or section markers
• Stroke consistency: All icons use uniform stroke width within context—navigation icons are thinner (matching text weight), while standalone feature icons may use slightly bolder strokes for visibility.

Recommended Frontend Stack

- Framework:      Astro 4.x (detected from astro-island, astro-slot, astro-static-slot class names
                  and Astro-specific client-directive patterns in extracted HTML)
- Styling:        Vanilla CSS / CSS Modules (no Tailwind detected — tailwindLikely: false;
                  transitions and shadows use raw CSS custom properties)
- Fonts:          ABC New Normal via CloudFront CDN (@font-face declarations point to
                  d3phaj0sisr2ct.cloudfront.net/auth/ABCNewNormal-*.woff2); fallback to
                  Inter (Google Fonts) for environments without font file access
- Animation:      CSS transitions + @keyframes (detected _codeExampleFadeIn and
                  _trustedByMarquee animations; likely supplemented with IntersectionObserver
                  JS for scroll triggers)
- Icons:          Lucide React / Lucide Icons (imported as components, currentColor stroke)
- Component lib:  Custom/Astro components (no Radix/shadcn detection; uses custom
                  _container_*, _tertiary_* BEM-like class naming convention)
- Build:          Vite (Astro's default bundler, consistent with the project structure)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; hero stacks text above image (image hidden or moves below); nav collapses to hamburger menu; CTA buttons stack vertically; logo marquee scrolls horizontally with touch | | Tablet | 640px – 1024px | Two-column hero begins (text ~50%, image ~50%); navigation may show abbreviated links; some grid columns reduce from 3 to 2 | | Desktop | 1024px – 1440px | Full layout: 1440px container, split hero, full navigation visible, logo marquee at full width | | Wide | > 1440px | Content centers within 1440px max-width; additional horizontal padding appears on sides; hero image may expand further right |

Touch Targets

• {component.button-primary}: ~44px height (10px padding × 2 + 24px text ≈ 44px), exceeds WCAG AAA 44×44px minimum ✓
• {component.button-secondary}: Same dimensions as primary, ~44px height ✓
• {component.mobile-menu-trigger}: 40×40px — slightly under 44px recommendation; consider increasing to 44–48px for optimal touch accessibility
• {component.text-input}: 44px height (explicitly set) ✓ meets WCAG AAA
• {component.nav-link}: Text-only links rely on line-height (~20px) for touch area; consider increasing padding to 12px vertical for mobile
• {component.button-icon}: 40×40px — adequate for icon buttons; 44px would be preferable for primary icon actions

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal nav link bar (Models, Products, For Agents, Enterprise, Learn, Docs) collapses into a slide-out drawer or dropdown panel triggered by {component.mobile-menu-trigger} (hamburger icon). The "Log In" and "Sign Up" buttons remain visible in the header or move into the mobile menu.
• Hero columns: The asymmetric two-column hero (text left, image right) stacks vertically on mobile: headline → subtext → CTA buttons (now vertically stacked) → hero image (full-width below, possibly cropped to 4:3 or 16:9). The 72px headline scales down (likely to 40–48px via media query) while maintaining the -2.16px proportional letter-spacing.
• CTA button group: Horizontal button pair ([Get API key] [Explore models]) switches to vertical stacking with {spacing.sm} (8px) gap becoming vertical margin, primary button on top.
• Logo marquee: The horizontal scrolling partner logo strip remains horizontally scrollable on mobile (overflow-x: auto with CSS scroll-snap) or reduces to a 2–3 column grid if static.
• Container padding: The 1440px/1224px max-width containers reduce horizontal padding at mobile (likely 16px–20px gutter) to prevent text from touching screen edges.
• Typography scale: {typography.display-xl} (72px) likely steps down to 40–48px on mobile; {typography.display-lg} (60px) to 32–36px; body text remains 16px for readability.

Image Behavior

• Hero photograph: On mobile, the full-bleed hero image either (a) moves below the text stack as a full-width banner (cropping to show the subject's face, likely top-center focal point), or (b) remains as a background with increased dark overlay (60-70% opacity) to ensure text legibility over the complex photographic detail at small sizes.
• Partner logos: Logo marks in {component.logo-marquee} maintain aspect ratio but reduce physical size (from ~120px width to ~80px) on mobile; horizontal scroll or wrap to multiple lines.
• No avatars or user-generated imagery detected in the above-fold screenshot; if present lower on the page, they would likely use {rounded.pill} (circle) or {rounded.lg} (12px square) with object-fit: cover.

Iteration Guide

1. Initialize the project using Astro 4.x with vanilla CSS modules (or your preferred CSS-in-JS solution that supports custom properties). Avoid Tailwind—the extracted CSS shows no utility-class patterns and uses semantic BEM-like naming (public-header-nav-link, _container_122gb_1, _tertiaryWhite_122gb_149).

2. Define CSS custom properties for every token in the YAML frontmatter using --token-name syntax (e.g., --color-primary: #89ddff; --radius-default: 8px; --font-display: "Normal", Inter, sans-serif;). Reference these variables in all component styles—never hard-code hex values or pixel measurements that have a corresponding token.

3. Load the ABC New Normal typeface via the provided @font-face URLs (pointing to d3phaj0sisr2ct.cloudfront.net). If font files are inaccessible, substitute Inter from Google Fonts (@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');) and update the font-family stacks accordingly. Load SF Mono (or JetBrains Mono/Fira Code fallback) for the code voice.

4. Build the component library in this order: (a) foundational tokens (colors, spacing, radii, typography), (b) layout primitives (containers, grid), (c) atoms (buttons in all variants, inputs, badges), (d) molecules (nav-bar, hero-band, card, code-block, cta-group), (d) organisms (header-with-nav, hero-section, trusted-by-section, footer).

5. Implement state variants as separate CSS class modifiers or sibling selectors (e.g., .button-primary:hover, .button-primary:active) mapping to the {component.button-primary-hover} and {component.button-primary-active} frontmatter entries. Do not nest variants inside default component definitions—keep them as peers for clarity.

6. Apply motion tokens using the --transition-* custom properties defined in the Motion section. Ensure all color, background, border, transform, and filter transitions use the shared 250ms cubic-bezier(0.2, 0, 0, 1) timing function. Implement _codeExampleFadeIn and _trustedByMarquee keyframes for scroll-reveal and marquee behaviors respectively.

7. Construct the hero section first as your integration test: it exercises the largest typography ({typography.display-xl}), the inverted button pattern ({component.button-primary} with white fill), the photographic depth treatment (image + dark overlay + text column), and the generous spacing ({spacing.section-lg} at 100px). If the hero looks correct, the rest of the system will likely cohere.

8. Test responsive behavior at four breakpoints (375px mobile, 768px tablet, 1024px desktop, 1440px+ wide). Verify: (a) navigation collapses to hamburger, (b) hero stacks vertically with scaled-down headline, (c) CTA buttons stack vertically, (d) container padding adjusts, (e) touch targets meet 44px minimum.

9. Run accessibility audits focusing on: (a) contrast ratios (white on charcoal = 17.5:1 ✓, {colors.body} #818a9d on {colors.canvas} #1b1e23 = ~5.5:1 ✓, {colors.primary} #89ddff on white = ~2.2:1 ✗—ensure primary is only used on dark backgrounds or as large text), (b) focus visible indicators on all interactive elements, (c) aria-labels on icon-only buttons.

10. Validate token coverage by searching for any hardcoded values in your CSS/JS. Every color should reference a --color-* variable, every radius a --radius-*, every spacing a --space-*. If you find a bare #ffffff, 8px, or 16px in component styles that isn't a calculated derivative (e.g., calc(var(--space-md) / 2)), replace it with the appropriate token reference.

Font Setup (for substitution scenarios):

If ABC New Normal font files are unavailable, add this to your global stylesheet:

:root {
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}

/* Import Inter from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

Then map all {typography.*} fontFamily values to var(--font-family-base) except {typography.caption} which uses var(--font-family-mono).

Known Gaps

• Hover state styling: Per the no-hover policy, specific hover background colors, transforms, and border changes for buttons, links, and cards are inferred from the state-variant frontmatter entries but not visually confirmed from the static screenshot.
• Loading/skeleton states: No loading skeletons, spinners, or pending-state treatments were visible in the above-fold content. These would need to be designed following the system's motion tokens (250ms, cubic-bezier(0.2, 0, 0, 1)) and color palette (likely {colors.hairline-soft} shimmer on {colors.surface} background).
• Form validation states: Only {component.text-input-focus} is documented; error states (red border/icon), disabled states (reduced opacity), and success states (green accent) follow standard semantic color tokens but lack visual specification.
• Dropdown menu internals: The "Models ▾" and "Products ▾" navigation dropdowns are detected but their expanded panel styling (background, shadow, item hover, keyboard navigation) is not visible in the screenshot.
• Authenticated/post-login surfaces: Dashboard, API key management, model playground, and account settings pages are not represented—these may introduce new sub-systems (data tables, status indicators, usage charts) beyond the marketing-page scope of this spec.
• Sub-brand or enterprise tier theming: No evidence of palette variations for enterprise customers, different pricing tiers, or co-branded white-label deployments.
• Exact hero image overlay value: The darkening overlay on the hero photograph's text column is inferred as rgba(0, 0, 0, 0.3) from background-color data, but the precise opacity/gradient configuration for optimal text legibility requires visual testing.
• Mobile menu panel design: The collapsed navigation drawer/panel triggered by {component.mobile-menu-trigger} is structurally implied but not visually documented—its animation direction (slide-from-right vs slide-from-top), backdrop treatment, and internal layout are undetermined.
• Footer complete structure: The footer is partially inferred from layout patterns; exact link columns, newsletter signup (if present), legal text, and social icons are not visible in the above-fold screenshot.
• CSS variable naming conflicts: The source uses BEM-like class names with hash suffixes (_container_122gb_1, _tertiaryWhite_122gb_149) suggesting a build-time CSS Modules or scoped-style transformation—implementations using vanilla CSS should adopt a cleaner naming convention (e.g., .rdev-button-primary, .rdev-card) while preserving the token-value relationships exactly.