Typography
scale ratio 1.732- DM Serif Displaydisplay50054%
- Georgiabody40036%
- Fira Sansother40010%
- Lucida Grandecss: Fira Sansmono4000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | DM Serif Display | 54px | 500 | 1.2 | 0em |
| body | Georgia | 18px | 400 | 1.5 | 0em |
| body-sm | Fira Sans | 16px | 400 | 1.5 | 0em |
| label | Georgia | 10px | 400 | 1.5 | 0em |
| mono | Lucida Grande | 12px | 400 | 1.7 | 0em |
Type scale
Aa10Aa16Aa18Aa20Aa54
- Body size
- 18px / 1.5
- Display size
- 54px
- Display tracking
- 0em
- Case
- lower
Color
light schemePalette by painted area
- Text on bg
- 18.42:1
- Muted on bg
- 15.13:1
- Accent on bg
- 4.97:1
- Dark mode
- follows system
Declared accent tokens
- --sk-bg-accent#D43008painted
Space, shape & depth
Spacing scale
- 3.5
- 5
- 6.5
- 7
- 8
- 10
- 13.5
- 40
- 48
- 100
- 120
Corner radii
4pill
Shadows (0)
none
- Borders
- regular, 2px
- Section padding
- 100px
Components
exact computed valuesinput
- rounded
- 56px
- height
- 34px
- padding
- 7px 7px
- backgroundColor
- #F2F2F2
Layout & motion
- Container
- 1200px
- Grid columns
- 3
- Hero
- left-aligned
- Navigation
- top-fixed
- Page height
- 3,439px
- Easing
- ease
- Durations
- 200ms
- Transitions
- 8
- Keyframes
- 1
- Stack
- sveltekit, vercel
Page sections (7)
section labels are heuristic
01nav
02heroweb development for the rest of us
03logosused by companies you’ve heard of
04gallery?
05feature detail?join our friendly community
06content?
07content?
How Svelte compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 54px: smaller than 60% of indexed sites (median 60px).
- Type scale
- 1.73×: steeper than 95% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 18.4:1: higher than 57% of indexed sites (median 17.6:1).
- Page length
- 3,439px: shorter than 85% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- DM Serif Display
- The only site in the index that loads DM Serif Display.
- Fira Sans
- The only site in the index that loads Fira Sans.
- 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 Svelte use?
Svelte uses DM Serif Display for headings. Georgia is used for body text. Fira Sans is used for other.
What are Svelte's brand colors?
Svelte's website uses a light scheme: background #FFFFFF, text #141414, muted text #262626.
How is Svelte's website laid out?
The most common corner radius is 4px, body text is 18px with 1.5 line height, and the page container is 1200px wide.
