JL
Design systems

Runway

Pure black ground, colorless chrome

Design SystemDark theme

Color

  • runway-black

    #000000

  • deep-black

    #030303

  • dark-surface

    #1a1a1a

  • pure-white

    #ffffff

  • near-white

    #fefefe

  • cool-cloud

    #e9ecf2

  • border-dark

    #27272a

  • charcoal

    #404040

  • near-charcoal

    #3f3f3f

  • cool-slate

    #767d88

  • mid-slate

    #7d848e

  • muted-gray

    #a7a7a7

  • cool-silver

    #c9ccd1

  • light-silver

    #d0d4d4

  • tailwind-gray

    #6b7280

  • dark-link

    #0c0c0c

  • footer-gray

    #999999

Typography

sans
abcNormal, "abcNormal Fallback", Inter, "DM Sans", system-ui, sans-serif

Display

  • display-hero

    48px / 1 · 400 · -1.2px

    display-hero

  • heading-section

    40px / 1 · 400 · -1px

    heading-section

  • heading-sub

    36px / 1 · 400 · -0.9px

    heading-sub

  • card-title

    24px / 1 · 400 · 0

    card-title

  • feature-title

    20px / 1 · 400 · 0

    feature-title

Text

  • body

    16px / 1.5 · 400 · -0.16px

    body

  • body-strong

    16px / 1.3 · 600 · -0.16px

    body-strong

  • label

    14px / 1.25 · 500 · 0.35px

    label

  • button

    14px / 1.25 · 600 · 0

    button

  • small

    13px / 1.3 · 400 · -0.16px

    small

  • micro

    11px / 1.3 · 450 · 0

    micro

Spacing

  • space-4

    4px

  • space-6

    6px

  • space-8

    8px

  • space-12

    12px

  • space-16

    16px

  • space-20

    20px

  • space-24

    24px

  • space-28

    28px

  • space-32

    32px

  • space-48

    48px

  • space-64

    64px

  • space-78

    78px

Radius

  • radius-sharp

    4px

  • radius-subtle

    6px

  • radius-comfortable

    8px

  • radius-generous

    16px

Elevation

  • shadow-none

    none

Components

  • Buttons

    Buttons are barely there: 14px weight-600 text in a 4px-radius box with a minimal border, transparent or dark, that blends into the editorial flow.

    • Do set the label in button (14px, weight 600) in pure-white on dark grounds and dark-link on light ones.
    • Do give the button radius-sharp (4px) and a 1px border: border-dark on dark, cool-silver on light.
    • Do fill a button with dark-surface only where a solid button is needed on a black ground.
    • Do set navigation-style links in body-strong and section labels in label (uppercase, 0.35px tracking, cool-slate).
    • Don't use a pill shape, a bold weight above 600, a shadow or a bright colour fill.
    • The source gives no button fill or border colour: it says buttons are likely transparent or dark with minimal border. The previews infer these from that sentence.
    • Known low-contrast pair kept exact: cool-slate labels are 5.06:1 on black.

  • Cards

    Cards are mostly photographs: a mixed-size editorial grid of images with 8px corners and a title over or under each, plus a dark container, an alert-style container, a monochrome trust bar and a large mission-statement block.

    • Do make the image the card: a photograph at radius-comfortable (8px) with its title in card-title (24px, 400) beneath or overlaid.
    • Do lay research articles in a mixed grid: one large card at about 50% width beside two smaller cards stacked.
    • Do keep a container on dark-surface with a 1px border-dark and radius-comfortable; give alert-style containers radius-generous (16px).
    • Do set a trust bar in monochrome, with generous spacing.
    • Do set the mission statement at heading-sub (36px, line-height 1.0, -0.9px) on runway-black, centred.
    • Don't add a shadow or a gradient; the source uses zero shadows.
    • Don't use a pill radius.

  • Inputs

    Inputs are the one component the source does not specify, so this preview composes a field from the system's own dark surface, border and radius tokens, and it is an assumption.

    • Do build a field on dark-surface with a 1px border-dark, radius-comfortable (8px), pure-white text in body and a mid-slate placeholder; on light sections use pure-white, cool-silver and dark-link.
    • Do set the label in label (uppercase, 0.35px tracking, cool-slate).
    • Do keep the interface nearly invisible: no heavy borders, no shadows, no bright colours.
    • Don't treat these values as the brand's: the source documents no input, no focus style and no error state.
    • Known low-contrast pairs kept exact: border-dark against dark-surface is 1.17:1, and cool-slate on dark-surface is 4.19:1.

  • Navigation

    Navigation is a minimal horizontal bar that sits transparent over the hero, with a wordmark slot and links in 16px, and a full-width dark footer in muted grey.

    • Do keep the bar transparent over the hero, with the wordmark in white on dark or black on light and links in body or body-strong.
    • Do keep it extremely subtle so it does not compete with the visual content; the source shifts link text to white or higher opacity on hover without giving a value.
    • Do collapse the links to a hamburger on mobile.
    • Do set the footer as a full-width dark section on runway-black with footer-gray links in label headings. footer-gray on black is 7.37:1; the source also sets it on light surfaces, where it fails.
    • Don't add a border, shadow or fill to the bar.