Typography
scale ratio 1.260- N8n Baumer Uniwidthcss: n8n Baumer Uniwidthdisplay + body400 50093%
- N8n Baumer Monocss: n8n Baumer Monomono4007%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | N8n Baumer Uniwidth | 64px | 500 | 0.85 | -0.01em |
| headline | N8n Baumer Uniwidth | 40px | 500 | 1.05 | -0.01em |
| title | N8n Baumer Uniwidth | 16px | 500 | 1.25 | 0em |
| body | N8n Baumer Uniwidth | 16px | 400 | 1.25 | 0em |
| body-sm | N8n Baumer Uniwidth | 14px | 400 | 1.286 | 0em |
| label | N8n Baumer Mono | 14px | 400 | 1.286 | 0.02em |
Type scale
Aa14Aa16Aa18Aa24Aa32Aa40Aa48Aa64
- Body size
- 16px / 1.25
- Display size
- 64px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.34:1
- Muted on bg
- undefined:1
- Accent on bg
- 1.51:1
- Dark mode
- none
Declared accent tokens
- --color-surface-button-primary-default#FFBCCApainted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 10
- 12
- 16
- 24
- 32
- 48
- 64
- 96
- 101
Corner radii
4824pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #FFBCCA
- textColor
- #212121
- rounded
- 9999px
- padding
- 12px 16px
- height
- 42px
- fontFamily
- N8n Baumer Mono
- fontSize
- 14px
- fontWeight
- 400
button-secondary
Talk to sales
- backgroundColor
- #D9D9D9
- textColor
- #161616
- rounded
- 9999px
- padding
- 12px 16px
- height
- 42px
- fontFamily
- N8n Baumer Mono
- fontSize
- 14px
- fontWeight
- 400
card
- rounded
- 24px
- padding
- 24px
- backgroundColor
- #212121
Layout & motion
- Container
- 1190px
- Grid columns
- 2
- Hero
- centered-over-media
- Navigation
- top-fixed+transparent
- Page height
- 13,121px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms
- Transitions
- 43
- Keyframes
- 0
- Stack
- nuxt, tailwind, google-tag-manager, cloudflare
Page sections (13)
section labels are heuristic
01nav
02hero. w o l f k r o w its Understand agent. the Build
03logos
04content?
06content?
07feature detail?Move fast + break nothing
08features?Enterprise-ready for teams of any size
09content?
10feature detail?Vodafone delivers £2.2M security operations win
11testimonials
12feature detail?Build workflows the way you actually think
13footer
How n8n.io compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.26×: flatter than 60% of indexed sites (median 1.28×).
- Container
- 1190px: narrower than 65% of indexed sites (median 1242px).
- Text contrast
- 17.3:1: lower than 54% of indexed sites (median 17.6:1).
- Page length
- 13,121px: longer than 87% of indexed sites (median 8,217px).
- Corner radius
- Mostly 24px, shared by 7 of 274 indexed sites (3%).
- N8n Baumer Uniwidth
- The only site in the index that loads N8n Baumer Uniwidth.
- N8n Baumer Mono
- The only site in the index that loads N8n Baumer Mono.
- 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 n8n.io use?
n8n.io uses N8n Baumer Uniwidth (loaded as "n8n Baumer Uniwidth") for headings and body text. N8n Baumer Mono (loaded as "n8n Baumer Mono") is used for code.
What are n8n.io's brand colors?
n8n.io's website uses a light scheme: background #FAFAFA, surface #F0F0F0, text #161616 and borders #D9D9D9.
How is n8n.io's website laid out?
The most common corner radius is 24px, body text is 16px with 1.25 line height, and the page container is 1190px wide.
