Typography
- Menlocss: ui-monospacemono400 500 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Menlo | 16px | 700 | 1.5 | 0em |
| headline | Menlo | 16px | 600 | 1.5 | 0em |
| body | Menlo | 16px | 400 | 1.5 | 0em |
Type scale
Aa16
- Body size
- 16px / 1.5
- Display size
- 16px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 9.78:1
- Muted on bg
- 4.54:1
- Accent on bg
- 4.97:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 9.5
- 12
- 16
- 24
- 40
- 48
- 56
- 80
Corner radii
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 50px
Components
exact computed valuesbutton-primary
Vitess
- backgroundColor
- #111111
- textColor
- #FAFAFA
- rounded
- 0px
- padding
- 16px 0px
- height
- 56px
- fontFamily
- Menlo
- fontSize
- 16px
- fontWeight
- 600
- border
- 1px solid #414141
button-secondary
Get in touch
- backgroundColor
- #F35815
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 8px
- height
- 32px
- fontFamily
- Menlo
- fontSize
- 16px
- fontWeight
- 600
Layout & motion
- Container
- 1280px
- Grid columns
- 5
- Hero
- left-aligned
- Navigation
- top-static
- Page height
- 8,124px
- Easing
- ease
- Durations
- 150ms
- Transitions
- 12
- Keyframes
- 0
- Stack
- tailwind, cloudflare
Page sections (8)
section labels are heuristic
01nav
03testimonialsPerformance
04features?Uptime
05features?Cost
06features?Security
07features?
08footerOpen source
How PlanetScale compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 16px: smaller than 97% of indexed sites (median 60px).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 9.8:1: lower than 92% of indexed sites (median 17.6:1).
- Page length
- 8,124px: shorter than 51% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does PlanetScale use?
PlanetScale uses Menlo (loaded as "ui-monospace") for code.
What are PlanetScale's brand colors?
PlanetScale's website uses a light scheme: background #FAFAFA, text #414141, muted text #737373 and borders #414141.
How is PlanetScale's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1280px wide.
