Typography
scale ratio 1.320- ABC Normalcss: abcNormaldisplay + body400 450 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | ABC Normal | 56px | 400 | 1.1 | -0.015em |
| title | ABC Normal | 24px | 500 | 1.15 | -0.007em |
| body | ABC Normal | 14px | 400 | 1.55 | 0em |
| body-sm | ABC Normal | 12px | 400 | 1.4 | 0em |
| label | ABC Normal | 16px | 400 | 1.3 | -0.01em |
Type scale
Aa11Aa12Aa13Aa14Aa16Aa20Aa24Aa40Aa56
- Body size
- 14px / 1.55
- Display size
- 56px
- Display tracking
- -0.015em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.56:1
- Muted on bg
- 10.37:1
- Accent on bg
- 15.13:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 23
- 24
- 28
- 32
- 40
- 56
Corner radii
681216
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 140px
Components
exact computed valuesbutton-primary
Try Runway
- backgroundColor
- #262626
- textColor
- #FFFFFF
- rounded
- 6px
- padding
- 6px 10px
- height
- 32px
- fontFamily
- ABC Normal
- fontSize
- 14px
- fontWeight
- 600
Layout & motion
- Container
- 1225px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-fixed+transparent
- Page height
- 5,144px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms
- Transitions
- 57
- Keyframes
- 0
- Stack
- next.js, tailwind, google-tag-manager, vercel
Page sections (6)
section labels are heuristic
01banner?
02nav
03heroIntelligent tools for scaling content and teams.
04features?Three platforms built on-top of the same Real-World Intelligence models
05content?
06footer
How Runway compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 59% of indexed sites (median 1.28×).
- Container
- 1225px: narrower than 55% of indexed sites (median 1242px).
- Text contrast
- 19.6:1: higher than 71% of indexed sites (median 17.6:1).
- Page length
- 5,144px: shorter than 78% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- ABC Normal
- The only site in the index that loads ABC Normal.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Runway use?
Runway uses ABC Normal (loaded as "abcNormal") for headings and body text.
What are Runway's brand colors?
Runway's website uses a light scheme: background #FFFFFF, text #0C0C0C, muted text #404040.
How is Runway's website laid out?
The most common corner radius is 6px, body text is 14px with 1.55 line height, and the page container is 1225px wide.
