Typography
scale ratio 1.157- Roobertdisplay + body400 700 800100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Roobert | 68.4px | 800 | 1 | 0em |
| title | Roobert | 21.38px | 400 | 2 | 0em |
| body | Roobert | 18.52px | 400 | 0em | |
| label | Arial | 13.33px | 400 | 0em |
Type scale
Aa18.5Aa21.5Aa22Aa24Aa28.5Aa33.5Aa34Aa51.5Aa57Aa68.5
- Body size
- 18.5px / null
- Display size
- 68.4px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 8.46:1
- Muted on bg
- undefined:1
- Accent on bg
- 1.00:1
- Dark mode
- none
Declared accent tokens
- --accent#FFC500painted
- --brand-yellow#FFC500painted
Space, shape & depth
Spacing scale
- 2.5
- 3
- 5.5
- 9.5
- 10
- 10.5
- 13
- 14.5
- 18.5
- 20
- 24
- 28.5
- 30
- 40
Corner radii
23pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 60px
Components
exact computed valuescard
- rounded
- 2.9px
- padding
- 0px
- backgroundColor
- #E9E4D9
- border
- 1px solid #312F27
input
- rounded
- 37.3px
- height
- 28.7px
- padding
- 2.3px 4.7px
Layout & motion
- Container
- 800px
- Grid columns
- 3
- Hero
- centered
- Navigation
- top-fixed+transparent
- Page height
- 15,396px
- Easing
- ease-in-out
- Durations
- 150ms 250ms 300ms
- Transitions
- 52
- Keyframes
- 1
- Stack
- three.js, cloudflare
Page sections (18)
section labels are heuristic
01nav
02hero
03content?
04feature detail?The System.
05feature detail?The Design.
07feature detail?Catalog
08feature detail?Your games?
09feature detail?Big Screen Optional.
10feature detail?Playdate for Education
11feature detail?All for just $229.
12feature detail?Playdate Cover
13features?Cost
14feature detail?The Idea.
15feature detail?Who Made It?
16cta?Stay in Touch!
17faqNeed Help?
18footer
How Playdate compares
- Body text
- 18.5px: larger than 87% of indexed sites (median 16px).
- Largest heading
- 68.4px: larger than 68% of indexed sites (median 60px).
- Type scale
- 1.16×: flatter than 95% of indexed sites (median 1.28×).
- Container
- 800px: narrower than 90% of indexed sites (median 1242px).
- Text contrast
- 8.5:1: lower than 95% of indexed sites (median 17.6:1).
- Page length
- 15,396px: longer than 92% of indexed sites (median 8,217px).
- Corner radius
- Mostly 3px, shared by 5 of 274 indexed sites (2%).
- Roobert
- One of 2 indexed sites that load Roobert (1%).
- 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 Playdate use?
Playdate uses Roobert for headings and body text.
What are Playdate's brand colors?
Playdate's website uses a light scheme: background #FFC500, surface #EFEFEF, text #312F27 and borders #312F27.
How is Playdate's website laid out?
The most common corner radius is 3px, body text is 18.5px with null line height, and the page container is 800px wide.
