Skip to content
DesignMunkDesignMunk Submit a site

Runway Careers

runway.com
Building real-world intelligence that understands, simulates, and acts in the world
AI Developer Tools Next.js Tailwind Careers abc
Share Visit site
runway.com DESKTOP · 1440
Runway Careers

AI Breakdown

Design export

# Design brief: the Runway Careers design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/12090318/runway-com-careers-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12090318/runway-com-careers-featured.webp
- On DesignMunk: https://designmunk.com/runway-careers-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Runway: Careers Laid Out Like a Research Index

## Overview

Runway's site adopts a calm, editorial tone: white surfaces, graphite text, and one vivid accent. The target audience spans researchers, engineers, and creatives, so the UI balances precision with accessibility. Layouts are spacious rather than dense, using generous vertical rhythm and minimal ornament. When no token applies, bias to neutral backgrounds, dark text, and simple borders for structure.

## Colors

- **Primary (#404040):** Core copy and most headings; readable graphite that avoids pure black for a softer editorial feel.
- **Secondary (#040404):** High-emphasis elements like key CTAs or masthead text when stronger contrast is required.
- **Tertiary (#2B22FA):** Accent for links, promotional banners, and high-intent actions; use sparingly for focus.
- **Neutral (#FFFFFF):** Page surface and cards; default canvas for the system.
- **Border (#E5E7EB):** Subtle dividers, table rules, and card outlines; supports structure when shadows are absent.
- **Brand-Emu (#746C6C):** Secondary metadata and subdued labels; keeps hierarchy without adding color noise.
- **Surface ({colors.neutral} -> #FFFFFF):** Component backgrounds consistent with the page canvas.
- **On-surface ({colors.primary} -> #404040):** Default text color on any white surface.

## Typography

The system uses Abc Normal for all levels: editorial, low-contrast grotesque with even texture.
- Headline LG (56px/1.2, 400, -0.045em): For hero statements and section intros; tight tracking yields a compact, confident word shape.
- Headline MD (24px/1.21, 400), SM (20px/1.2, 400), XS (18px/1.22, 400): Subheads, list headers, and card titles.
- Body MD (16px, 400): Primary body copy and UI labels.
Availability: Abc Normal is self-hosted (type: custom) and not agent-loadable. Substitutes with similar tone: Inter (Google) for a neutral grotesque, IBM Plex Sans (Google) for a slightly more mechanical feel, or Manrope (Google) for open counters and contemporary proportions.

## Layout

Spacing steps favor airy sections with precise micro-steps: 6, 14, 24, 32, 98px. Use 98px for block-to-block section gaps, 24–32px for internal group spacing, 14px for compact stacks, and 6px for tight label-to-control pairs. Grids tend toward a wide single column that breaks into two or more columns for lists (roles, benefits) while maintaining large outer margins.

## Elevation & Depth

All measured shadows are none. Hierarchy is conveyed through type scale, weight, and spacing, supported by 1px borders in #E5E7EB and occasional tonal contrast between #FFFFFF surfaces and full-bleed imagery. Keep depth minimal; rely on whitespace to separate sections.

## Shapes

Corners are succinct and functional: 8px on cards and surfaces to soften edges without feeling playful; 9999px for pill buttons and tags, signaling interactivity. Links are unrounded and inline.

## Components

Buttons
- Primary button: Pill shape (radius 9999px), 36px height, 10px 16px 11px padding, text color #FFFFFF. Use a solid fill (typically #040404 for maximum contrast or #2B22FA for branded emphasis) depending on context and surrounding density.
- Secondary button: Same pill and sizing, text #FFFFFF. Use as the dark alternative when the primary action is already indigo or when visual parity is desired.
- Link button: Text-only, color #404040, no radius; aligns with inline navigation and low-friction actions.

Card
- Background #FFFFFF, text #404040, 8px radius, 16px padding. Add a 1px #E5E7EB border when a grouping needs definition.

Distinctive page components

### Hiring Promo Banner
- Full-width strip at the very top for events (AI Summit). Background can adopt the accent #2B22FA; text remains #FFFFFF with a compact 14–16px size and tight vertical padding (sm–md).

### Global Product Nav
- Multi-item top navigation with product families (Creative, Dev, Robotics, Research, Resources). Use 16px text in #404040 with hover accent #2B22FA. Spacing between items: md (24px).

### Careers Hero
- Headline set in Headline LG (56px, -0.045em) in #404040 on #FFFFFF, followed by a 16px subcopy line. Optionally pair with a wide photographic band below. Outer vertical margin: xl (98px).

### Job Listing Item
- Title in 20–24px, department and location in #746C6C, and an Apply link styled as a primary or link button. Separate items with a 1px #E5E7EB divider and md (24px) vertical spacing.

### Benefits List / Card Group
- Each benefit can be a card (8px radius, 16px padding) with a 20px title and 16px body; use grid columns that breathe with lg (32px) gaps.

### Awards Row
- Compact badges or lines of text set in 16px, separated by #E5E7EB dividers. Keep backgrounds #FFFFFF to maintain the editorial tone.

### Press Links List
- Publication name then article title, each entry spaced by md (24px) with a light divider. Links may use #2B22FA to signal external content.

### Footer Directory
- Dense multi-column link groups. Use 16px for items, group headers at 18–20px, and maintain lg (32px) column gaps with subtle #E5E7EB separators.

## Do's and Don'ts

- Do set hero headlines at 56px/1.2 with -0.045em tracking and keep the canvas #FFFFFF.
- Do use pill buttons at a strict 36px height with 10px 16px 11px padding; choose #040404 or #2B22FA fills to control emphasis.
- Do rely on #E5E7EB borders for structure; shadows should remain none.
- Don't introduce additional brand colors or gradients; the accent is strictly #2B22FA.
- Don't overuse bold weight; hierarchy comes from size, spacing, and subtle color shifts (#746C6C for metadata).
- Don't round inline text links; the link button has 0px radius by design.

## Agent Prompt Guide

Quick reference — Text: #404040, Background: #FFFFFF, Border: #E5E7EB, Accent: #2B22FA.

1) Build the careers hero
- Create a full-width section on #FFFFFF with 98px top and bottom padding.
- Set the headline in 'Abc Normal', fallback Inter, 56px, weight 400, line-height 1.2, letter-spacing -0.045em, color #404040.
- Add a 16px subcopy line below in #404040 at 60% opacity or #746C6C.
- Include a primary pill button 36px high, padding 10px 16px 11px, white text (#FFFFFF) on #040404.

2) Render a job listing group
- Use a single column container with 24px vertical gaps between items and a 1px #E5E7EB divider.
- Job title: 20–24px 'Abc Normal'/Inter, color #404040.
- Department and location: 16px, color #746C6C.
- Apply action: link style in #2B22FA or a pill button (36px) on #040404.

3) Benefits as cards
- Create a responsive grid with 32px gaps.
- Each card: background #FFFFFF, 1px #E5E7EB border, 8px radius, 16px padding.
- Title 20px #404040; body 16px #404040.

4) Press list with accent links
- Stack entries with 24px gaps; set publication/date in #746C6C (16px) and titles as links in #2B22FA (16–18px).
- Add a subtle top and bottom border #E5E7EB to frame the section.

5) Top promo banner
- Full-width bar with background #2B22FA, 14–16px text in #FFFFFF, and a right-aligned pill button 36px high using #FFFFFF text on #040404 for contrast.

## Similar Brands

DeepMind — similarly white, text-led layouts with sober typography; Runway uses a brighter accent and more recruiting utility blocks.
OpenAI — clean grayscale UI with selective color accents; Runway leans more into editorial spacing and pill CTAs.
Anthropic — restrained palette and minimal shadows; Runway's typography is tighter and tracking is more assertive in headlines.
Figma — neutral canvas with structured lists; Runway is quieter on color and uses more border-driven separation.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #404040;
  --color-secondary: #040404;
  --color-tertiary: #2b22fa;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-emu: #746c6c;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.045em;
  --text-headline-md-size: 24px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --font-abcnormal: "abcNormal";

  /* Rounded */
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 98px;

  /* Components */
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 10px 16px 11px;
  --button-primary-height: 36px;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 10px 16px 11px;
  --button-secondary-height: 36px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #404040;
  --color-secondary: #040404;
  --color-tertiary: #2b22fa;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-emu: #746c6c;
  --color-surface: #ffffff;
  --color-on-surface: #404040;
  --font-headline-lg: "abcNormal";
  --font-headline-md: "abcNormal";
  --font-headline-sm: "abcNormal";
  --font-headline-xs: "abcNormal";
  --font-body-md: "abcNormal";
  --text-headline-lg: 56px;
  --text-headline-md: 24px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.045em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 98px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.251,
                    0.251,
                    0.251
                ],
                "hex": "#404040"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.169,
                    0.133,
                    0.98
                ],
                "hex": "#2b22fa"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-emu": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.455,
                    0.424,
                    0.424
                ],
                "hex": "#746c6c"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.251,
                    0.251,
                    0.251
                ],
                "hex": "#404040"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 98,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "abcNormal",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.045,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "abcNormal",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "abcNormal",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "abcNormal",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "abcNormal",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Runway Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
zaro.ai
Zaro AI
Zaro
reloop.sh
Reloop Communication
Reloop
fellow.ai
Fellow AI
Fellow
thedrive.ai
The Drive AI AI
The Drive AI