Typography
scale ratio 1.401- Interdisplay + body400 450 500 600 750 800100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 57.6px | 750 | 1 | -0.02em |
| body | Inter | 20px | 450 | 1.3 | 0em |
| body-sm | Inter | 16px | 450 | 1.2 | 0em |
Type scale
Aa10Aa12Aa13Aa14Aa15Aa16Aa20Aa24Aa28Aa40Aa57.5Aa110Aa151
- Body size
- 20px / 1.2
- Display size
- 57.6px
- Display tracking
- -0.02em
- Case
- mixed
Color
light schemePalette by painted area
- Text on bg
- 19.80:1
- Muted on bg
- 7.81:1
- Accent on bg
- 5.17:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 4
- 5
- 10
- 12
- 14.5
- 20
- 25
- 30
- 40
- 50
- 60
- 70
Corner radii
81014
Shadows (3)
- Borders
- none, 1px
- Section padding
- 115px
Components
exact computed valuesbutton-primary
Start the Generator
- backgroundColor
- #2563EB
- textColor
- #FFFFFF
- rounded
- 10px
- padding
- 0px 21px
- height
- 46px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 600
card
- rounded
- 14px
- padding
- 30px
- backgroundColor
- #F5F5F5
Layout & motion
- Container
- 1320px
- Grid columns
- 3
- Hero
- left-aligned
- Navigation
- top-fixed
- Page height
- 4,752px
- Easing
- cubic-bezier(0.6, 0.4, 0, 1)
- Durations
- 100ms 150ms 300ms
- Transitions
- 137
- Keyframes
- 2
- Stack
- jquery, google-tag-manager, cloudflare
Page sections (4)
01nav
03content
04footer
How Coolors compares
- Body text
- 20px: larger than 90% of indexed sites (median 16px).
- Largest heading
- 57.6px: smaller than 52% of indexed sites (median 60px).
- Type scale
- 1.40×: steeper than 80% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 19.8:1: higher than 74% of indexed sites (median 17.6:1).
- Page length
- 4,752px: shorter than 79% 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%).
- 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 Coolors use?
Coolors uses Inter for headings and body text.
What are Coolors's brand colors?
Coolors's website uses a light scheme: background #FFFFFF, surface #F5F5F5, text #0A0A0A, muted text #525252 and borders #00000012.
How is Coolors's website laid out?
The most common corner radius is 10px, body text is 20px with 1.2 line height, and the page container is 1320px wide.
