Typography
scale ratio 1.181- TASA Orbiterdisplay + body400 70084%
- Geist Monomono40016%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | TASA Orbiter | 48px | 400 | 1.02 | -0.035em |
| headline | TASA Orbiter | 40px | 700 | 1.1 | -0.035em |
| title | TASA Orbiter | 20px | 700 | 1.2 | -0.02em |
| body | TASA Orbiter | 15px | 400 | 1.55 | -0.01em |
| body-sm | Geist Mono | 11px | 400 | 1.25 | 0.12em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa15Aa16Aa20Aa30Aa34Aa34.5Aa40Aa48
- Body size
- 15px / 1.55
- Display size
- 48px
- Display tracking
- -0.035em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.81:1
- Muted on bg
- 7.26:1
- Accent on bg
- 9.91:1
- Dark mode
- none
Declared accent tokens
- --accent#FFDB2Apainted
- --motion-plus-accent#52CD86painted
Space, shape & depth
Spacing scale
- 3
- 4
- 5
- 6
- 8
- 9
- 10
- 12
- 14
- 16
- 18
- 20
- 24
- 32
Corner radii
346pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 144px
Components
exact computed valuesbutton-primary
- backgroundColor
- #EDEBE5
- textColor
- #080808
- rounded
- 0px
- padding
- 12px 18px
- height
- 48px
- fontFamily
- Geist Mono
- fontSize
- 11px
- fontWeight
- 400
- border
- 1px solid #FBD509
button-secondary
- textColor
- #979D97
- rounded
- 0px
- padding
- 12px 18px
- height
- 48px
- fontFamily
- Geist Mono
- fontSize
- 11px
- fontWeight
- 400
- border
- 1px solid #EDEBE529
card
- rounded
- 6px
- padding
- 0px
- backgroundColor
- #080B08
- border
- 1px solid #EDEBE51A
input
- rounded
- 0px
- height
- 56px
- padding
- 0px 0px
Layout & motion
- Container
- 1200px
- Grid columns
- 2
- Hero
- unknown
- Navigation
- top-fixed+blur+transparent
- Page height
- 13,745px
- Easing
- ease
- Durations
- 150ms 160ms 200ms 400ms
- Transitions
- 183
- Keyframes
- 0
- Stack
- shadcn/ui, cloudflare
Page sections (13)
section labels are heuristic
01hero
02nav
03logos
05logosSmall by default
06logos?Motion+ unlocks the full animation workflow.
08logos?Partnered with the best.
09features?Made with Motion.
10features?Latest from Motion.
11logosChoose where to start.
12features?Our most popular guides and examples.
13footer
How Motion compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.18×: flatter than 90% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 16.8:1: lower than 60% of indexed sites (median 17.6:1).
- Page length
- 13,745px: longer than 89% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- TASA Orbiter
- The only site in the index that loads TASA Orbiter.
- Geist Mono
- One of 14 indexed sites that load Geist Mono (5%).
- 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 Motion use?
Motion uses TASA Orbiter for headings and body text. Geist Mono is used for code.
What are Motion's brand colors?
Motion's website uses a dark scheme: background #080808, surface #141214, text #EDEBE5, muted text #979D97 and borders #343034.
How is Motion's website laid out?
The most common corner radius is 0px, body text is 15px with 1.55 line height, and the page container is 1200px wide.
