Typography
scale ratio 1.219- Geistdisplay + body400 450 50094%
- Spline Sansother400 500 6003%
- Geist Monomono4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Geist | 48px | 450 | 1.167 | -0.06em |
| headline | Geist | 56px | 450 | 1.143 | -0.06em |
| title | Geist | 24px | 450 | 1.25 | -0.05em |
| body | Geist | 14px | 400 | 1.429 | 0em |
| body-sm | Spline Sans | 12px | 400 | 1.417 | 0em |
| mono | Geist Mono | 12px | 400 | 1.333 | 0.06em |
Type scale
Aa11Aa12Aa12.5Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa48Aa56
- Body size
- 14px / 1.429
- Display size
- 48px
- Display tracking
- -0.06em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.10:1
- Muted on bg
- 6.08:1
- Accent on bg
- 18.10:1
- Dark mode
- none
Declared accent tokens
- --generate-accent#1CC294not on page
- --generate-accent-solid#00A376not on page
Space, shape & depth
Spacing scale
- 2
- 3
- 4
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 14
- 16
- 20
- 24
Corner radii
6121416pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 256px
Components
exact computed valuesbutton-primary
Start building
- backgroundColor
- #EEEEEE
- textColor
- #000000
- rounded
- 9999px
- padding
- 0px 14px
- height
- 34px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #EEEEEE
button-secondary
Talk to sales
- textColor
- #EEEEEE
- rounded
- 9999px
- padding
- 0px 14px
- height
- 34px
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #2E2E2E
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #101010
Layout & motion
- Container
- 1320px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- top-sticky+blur
- Page height
- 8,577px
- Easing
- ease
- Durations
- 200ms 250ms 350ms 400ms
- Transitions
- 155
- Keyframes
- 8
- Stack
- next.js, radix-ui, google-tag-manager, vercel
Page sections (12)
section labels are heuristic
01nav
02features?
03heroThe tool for
04logos
05features?From prompt to production in one file
06feature detail?Where ideas become production-ready experiences
07stats?Everything you need for 3D design
08feature detail?Agents build. Designers refine.
09features?One scene. Web, Apple and Android.
10testimonialsWhy teams build with Spline
11cta?Start building in 3D
12footer
How Spline compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.22×: flatter than 73% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 18.1:1: higher than 56% of indexed sites (median 17.6:1).
- Page length
- 8,577px: longer than 53% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- Spline Sans
- The only site in the index that loads Spline Sans.
- 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 Spline use?
Spline uses Geist for headings and body text. Spline Sans is used for other. Geist Mono is used for code.
What are Spline's brand colors?
Spline's website uses a dark scheme: background #000000, text #EEEEEE, muted text #8A8A8A and borders #2E2E2E.
How is Spline's website laid out?
The most common corner radius is fully rounded (pill), body text is 14px with 1.429 line height, and the page container is 1320px wide.
