Typography
scale ratio 1.357- Roobertdisplay50076%
- ABC Diatypebody400 70024%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Roobert | 60px | 500 | 1.1 | 0em |
| title | Roobert | 30px | 500 | 1.2 | 0em |
| body | Roobert | 24px | 500 | 1.25 | 0em |
| body-sm | ABC Diatype | 16px | 400 | 1.5 | 0em |
| label | ABC Diatype | 12px | 700 | 1 | 0em |
| mono | ABC Diatype | 11px | 400 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa20Aa24Aa30Aa40Aa60
- Body size
- 24px / 1.25
- Display size
- 60px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 19.65:1
- Muted on bg
- undefined:1
- Accent on bg
- 1.45:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 28
- 32
- 36
- 40
- 80
Corner radii
pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 153px
Components
exact computed valuesbutton-secondary
Graphic Design
- textColor
- #000000
- rounded
- 9999px
- padding
- 8px 12px
- height
- 28px
- fontFamily
- ABC Diatype
- fontSize
- 12px
- fontWeight
- 700
- border
- 1px solid #000000
input
- rounded
- 0px
- height
- 42px
- padding
- 4px 0px
Layout & motion
- Container
- 1280px
- Grid columns
- 4
- Hero
- left-aligned
- Navigation
- top-static
- Page height
- 13,370px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 500ms 1000ms
- Transitions
- 227
- Keyframes
- 0
- Stack
- react, tailwind, cloudflare
Page sections (18)
section labels are heuristic
01nav
02hero
03feature detail?What 50 years in business has taught Springetts about building brands that thriv
04features?Motion North welcomes global design and animation talent to Manchester
05feature detail?Inspiration
06features?Tatiana Egoshina finds beauty in bad typography, Italian folklore and happy acci
07feature detail?Explore by discipline
08features?Trending
09feature detail?Insight
10features?SEA turns 30 with a new anniversary book celebrating design that lasts
11features?Latest jobs
12features?Creative Boom IRL
13features?Upcoming events
14feature detail?Join our community
15feature detail?Watch Creative Boom
16features?The Spark: Malika Favre on Coffee, Dinner Party Dreams and a Cheeky Confession
17content?
18footerSocial
How Creative Boom compares
- Body text
- 24px: larger than 98% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.36×: steeper than 72% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 19.6:1: higher than 71% of indexed sites (median 17.6:1).
- Page length
- 13,370px: longer than 88% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Roobert
- One of 2 indexed sites that load Roobert (1%).
- ABC Diatype
- One of 3 indexed sites that load ABC Diatype (1%).
- 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 Creative Boom use?
Creative Boom uses Roobert for headings. ABC Diatype is used for body text.
What are Creative Boom's brand colors?
Creative Boom's website uses a light scheme: background #FBF7EF, surface #FFFFFF, text #000000 and borders #FFFFFF.
How is Creative Boom's website laid out?
The most common corner radius is fully rounded (pill), body text is 24px with 1.25 line height, and the page container is 1280px wide.
