Typography
scale ratio 1.246- Interbody400 50081%
- Orbitrondisplay700 90013%
- Pragmata Procss: PragmataPro VF Variable Regularother400 5006%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Orbitron | 48px | 900 | 1.02 | -0.03em |
| headline | Orbitron | 34px | 900 | 1.08 | -0.01em |
| title | Inter | 12px | 500 | 1.3 | 0.08em |
| body | Inter | 16px | 400 | 1.5 | 0em |
| body-sm | Inter | 15px | 400 | 1.55 | 0em |
| label | Inter | 16px | 500 | 1.2 | 0em |
| mono | Pragmata Pro | 13px | 400 | 1.538 | 0em |
Type scale
Aa11Aa12Aa12.5Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa34Aa48
- Body size
- 16px / 1.55
- Display size
- 48px
- Display tracking
- -0.03em
- Case
- upper
Color
dark schemePalette by painted area
- Text on bg
- 19.30:1
- Muted on bg
- 10.92:1
- Accent on bg
- 19.30:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 5
- 6
- 8
- 9
- 10
- 11
- 12
- 14
- 16
- 20
- 40
- 64
- 140
Corner radii
246810pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 140px
Components
exact computed valuesbutton-primary
Get Started
- backgroundColor
- #FFFFFF
- textColor
- #000000
- rounded
- 4px
- padding
- 5px 9px
- height
- 26.6px
- fontFamily
- Pragmata Pro
- fontSize
- 12px
- fontWeight
- 500
- shadow
- rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset
button-secondary
Copy
- backgroundColor
- #FFFFFFE6
- textColor
- #000000
- rounded
- 4px
- padding
- 5px 9px
- height
- 28.6px
- fontFamily
- Pragmata Pro
- fontSize
- 12px
- fontWeight
- 500
- border
- 1px solid #FFFFFF
input
- rounded
- 4px
- height
- 40px
- padding
- 0px 14px
Layout & motion
- Container
- 1200px
- Grid columns
- 3
- Hero
- left-over-media
- Navigation
- none-detected
- Page height
- 20,182px
- Easing
- ease
- Durations
- 150ms 200ms 250ms 400ms
- Transitions
- 111
- Keyframes
- 3
- Stack
- framer, google-tag-manager, cloudfront
Page sections (13)
section labels are heuristic
01hero
02feature detail?Build games, apps, and interactive UI
03features?Give notes
04feature detail?Pro tools to draw, rig, and animate
06features?Rive, written in plain text
07features?Scripts your engineers can sign off on
08features?Turn your Figma file into a working app
09feature detail?Use the right tool for the job
10features?Ship faster, spend less, build better
How Rive compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 63% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 19.3:1: higher than 68% of indexed sites (median 17.6:1).
- Page length
- 20,182px: longer than 97% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Orbitron
- The only site in the index that loads Orbitron.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Rive use?
Rive uses Inter for body text. Orbitron is used for headings. Pragmata Pro (loaded as "PragmataPro VF Variable Regular") is used for other.
What are Rive's brand colors?
Rive's website uses a dark scheme: background #0E0E0E, surface #030304, text #FFFFFF, muted text #FFFFFFBF and borders #FFFFFF14.
How is Rive's website laid out?
The most common corner radius is 0px, body text is 16px with 1.55 line height, and the page container is 1200px wide.
