Typography
scale ratio 1.209- Helveticacss: TWK Everettdisplay50052%
- Intercss: __Inter_f367f3body400 50046%
- Material Symbols Outlinedother2001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Helvetica | 96px | 500 | 1 | -0.05em |
| headline | Inter | 24px | 400 | 0em | |
| title | Inter | 24px | 500 | 1.4 | -0.025em |
| body | Inter | 18px | 400 | 1.4 | -0.025em |
| body-sm | Inter | 16px | 400 | 0em | |
| label | Inter | 12px | 400 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa22.5Aa24Aa28Aa32Aa48Aa56Aa88Aa96Aa120
- Body size
- 18px / 1.4
- Display size
- 96px
- Display tracking
- -0.05em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.94:1
- Muted on bg
- 7.65:1
- Accent on bg
- 17.69:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 8
- 16
- 24
- 32
- 48
- 80
- 120
Corner radii
4610pill
Shadows (0)
none
- Borders
- heavy, 4px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Start for free
- backgroundColor
- #EAFF96
- textColor
- #343434
- rounded
- 6px
- padding
- 13px 16px
- height
- 42px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
button-secondary
Learn more
- backgroundColor
- #1D1D1D
- textColor
- #E3FF73
- rounded
- 4px
- padding
- 8px 12px
- height
- 28px
- fontFamily
- Inter
- fontSize
- 12px
- fontWeight
- 500
card
- rounded
- 10px
- padding
- 48px
- backgroundColor
- #D6FB41
Layout & motion
- Container
- 1200px
- Grid columns
- n/a
- Hero
- left-aligned
- Navigation
- top-static+transparent
- Page height
- 5,579px
- Easing
- ease
- Durations
- 150ms 300ms 1000ms 2000ms
- Transitions
- 72
- Keyframes
- 1
- Stack
- next.js, cloudflare
Page sections (9)
section labels are heuristic
01nav
02banner?CodeSandbox is now part of We have joined forces to launch and bring code interp
03heroe l a c s r o f t l i u b s e x o b d n a S
04logos?
05features?Customizable hibernation
06feature detail?Built for AI agents and more
07logosStart with your favorite stack.
08feature detail?Join the future of building
09footer
How CodeSandbox compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.21×: flatter than 77% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 16.9:1: lower than 58% of indexed sites (median 17.6:1).
- Page length
- 5,579px: shorter than 76% of indexed sites (median 8,217px).
- Corner radius
- Mostly 10px, shared by 9 of 274 indexed sites (3%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Material Symbols Outlined
- The only site in the index that loads Material Symbols Outlined.
- 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 CodeSandbox use?
CodeSandbox uses Helvetica (loaded as "TWK Everett") for headings. Inter (loaded as "__Inter_f367f3") is used for body text. Material Symbols Outlined is used for other.
What are CodeSandbox's brand colors?
CodeSandbox's website uses a dark scheme: background #0E0E0E, surface #161616, text #F0F0F0, muted text #A3A3A3 and borders #252525.
How is CodeSandbox's website laid out?
The most common corner radius is 10px, body text is 18px with 1.4 line height, and the page container is 1200px wide.
