Typography
scale ratio 1.303- GT Americacss: gtAmericadisplay + body300 400 500 70075%
- Publicocss: publicoother400 50010%
- Neue Haas Grotesk Displaycss: neue-haas-grotesk-displayother9007%
- Plexcss: plexother400 5006%
- Vcrcss: vcrmono4003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Neue Haas Grotesk Display | 60px | 900 | 0.85 | -0.04em |
| headline | GT America | 40px | 700 | 1 | -0.025em |
| title | GT America | 20px | 500 | 1.5 | 0em |
| body | GT America | 16px | 400 | 1.25 | 0em |
| body-sm | GT America | 14px | 300 | 1.5 | 0em |
| label | GT America | 15px | 400 | 1.25 | 0em |
Type scale
Aa10Aa11Aa12Aa14Aa15Aa16Aa18Aa20Aa28Aa40Aa60
- Body size
- 16px / 1.5
- Display size
- 60px
- Display tracking
- -0.04em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.52:1
- Muted on bg
- 9.28:1
- Accent on bg
- 15.09:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 60
Corner radii
4681216pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 64px
Components
exact computed valuesbutton-primary
Start building
- backgroundColor
- #F1F1F1
- textColor
- #141414
- rounded
- 9999px
- padding
- 10px 20px
- height
- 46px
- fontFamily
- GT America
- fontSize
- 16px
- fontWeight
- 500
button-secondary
AI Gateway
- backgroundColor
- #F3B01C
- textColor
- #141414
- rounded
- 9999px
- padding
- 6px 10px
- height
- 28px
- fontFamily
- GT America
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 16px
- padding
- 16px
- backgroundColor
- #292929
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
Layout & motion
- Container
- 1344px
- Grid columns
- 7
- Hero
- left-aligned
- Navigation
- top-sticky+transparent
- Page height
- 4,616px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 93
- Keyframes
- 0
- Stack
- next.js, tailwind, vercel
Page sections (10)
section labels are heuristic
02feature detail?All gas no breakages
03logosTrusted by
04features?Solved.
05code sample?Ready for agentic workloads (and everything else)
06testimonials
07features?We learned how to build and run distributed systems at exabyte scale so you don’
08feature detail?Enterprise Ready
09logosBuild a production app this afternoon
10footer
How Convex compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.30×: steeper than 56% of indexed sites (median 1.28×).
- Container
- 1344px: wider than 83% of indexed sites (median 1242px).
- Text contrast
- 16.5:1: lower than 63% of indexed sites (median 17.6:1).
- Page length
- 4,616px: shorter than 81% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- GT America
- One of 3 indexed sites that load GT America (1%).
- Publico
- The only site in the index that loads Publico.
- 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 Convex use?
Convex uses GT America (loaded as "gtAmerica") for headings and body text. Publico (loaded as "publico") is used for other. Neue Haas Grotesk Display (loaded as "neue-haas-grotesk-display") is used for other.
What are Convex's brand colors?
Convex's website uses a dark scheme: background #2A1B1B, surface #141414, text #FFFFFF, muted text #C2C2C2 and borders #272424.
How is Convex's website laid out?
The most common corner radius is 4px, body text is 16px with 1.5 line height, and the page container is 1344px wide.
