Typography
scale ratio 1.398- Notion Intercss: NotionInterdisplay + body400 500 600 70088%
- Lyon Textother40012%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Notion Inter | 96px | 600 | 1.042 | -0.048em |
| headline | Notion Inter | 22px | 700 | 1.273 | -0.011em |
| title | Notion Inter | 16px | 700 | 1.5 | 0em |
| body | Lyon Text | 18px | 400 | 1.556 | 0em |
| body-sm | Notion Inter | 14px | 500 | 1.429 | 0em |
| label | Notion Inter | 16px | 500 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa22Aa42Aa54Aa96
- Body size
- 18px / 1.556
- Display size
- 96px
- Display tracking
- -0.048em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.47:1
- Muted on bg
- 6.53:1
- Accent on bg
- 4.57:1
- Dark mode
- none
Declared accent tokens
- --tatami-color-accent#62AEF0not on page
- --tatami-color-card-accent#097FE8painted
- --tatami-color-accent-strong#097FE8painted
- --tatami-color-background-surface-accent#62AEF0not on page
Space, shape & depth
Spacing scale (base 4px)
- 3
- 4
- 5
- 6
- 8
- 10
- 12
- 15
- 16
- 24
- 32
Corner radii
812pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Get Notion free
- backgroundColor
- #0075DE
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 4px 14px
- height
- 36px
- fontFamily
- Notion Inter
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 12px
- padding
- 24px
- backgroundColor
- #FFFFFF
- border
- 1px solid #0000001A
Layout & motion
- Container
- 1229px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- top-static
- Page height
- 4,687px
- Easing
- cubic-bezier(0.42, 0, 1, 1)
- Durations
- 150ms 200ms 300ms
- Transitions
- 74
- Keyframes
- 2
- Stack
- next.js, contentful, vercel, cloudflare
Page sections (8)
section labels are heuristic
01nav
02content?
03heroWhere teams and agents together.
04content?
05features?Keep work moving 24/7 with agents.
06testimonialsTrusted by teams that ship.
07cta?Get started today.
08footer
How Notion compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.40×: steeper than 79% of indexed sites (median 1.28×).
- Container
- 1229px: narrower than 54% of indexed sites (median 1242px).
- Text contrast
- 19.5:1: higher than 70% of indexed sites (median 17.6:1).
- Page length
- 4,687px: shorter than 80% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Notion Inter
- The only site in the index that loads Notion Inter.
- Lyon Text
- The only site in the index that loads Lyon Text.
- 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 Notion use?
Notion uses Notion Inter (loaded as "NotionInter") for headings and body text. Lyon Text is used for other.
What are Notion's brand colors?
Notion's website uses a light scheme: background #FFFFFF, surface #F6F5F4, text #000000F2, muted text #615D59 and borders #0000001A.
How is Notion's website laid out?
The most common corner radius is 12px, body text is 18px with 1.556 line height, and the page container is 1229px wide.
