Typography
scale ratio 1.209- SF Pro (system-ui)css: system-uibody400 500 60081%
- Cahuengadisplay50011%
- Spectralother4008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Cahuenga | 32px | 500 | 1.24 | 0em |
| body | SF Pro (system-ui) | 15px | 400 | 1.4 | 0em |
| body-sm | SF Pro (system-ui) | 13px | 400 | 1.4 | 0em |
| label | SF Pro (system-ui) | 15px | 600 | 1.333 | 0em |
Type scale
Aa11Aa13Aa15Aa17Aa20Aa24Aa32
- Body size
- 15px / 1.4
- Display size
- 32px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 11.94:1
- Muted on bg
- 4.48:1
- Accent on bg
- 2.91:1
- Dark mode
- follows system
Declared accent tokens
- --color-accent#FF6719painted
- --color-accent-themed#FF6719painted
- --color-button-primary-bg#FF6719painted
- --color-chat-outgoing-bg-primary#0076FFnot on page
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
Corner radii
4812pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Start your Substack
- backgroundColor
- #FF6719
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 0px 16px
- height
- 40px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 15px
- fontWeight
- 600
- shadow
- rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset
button-secondary
Verify age
- backgroundColor
- #161718
- textColor
- #EEEEEE
- rounded
- 8px
- padding
- 0px 8px
- height
- 32px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 13px
- fontWeight
- 600
- shadow
- rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 0px 0px inset
card
- rounded
- 12px
- padding
- 32px
- border
- 1px solid #0000001A
- shadow
- rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
input
- rounded
- 12px
- height
- 40px
- padding
- 0px 40px
- backgroundColor
- #FFFFFF
- border
- 1px solid #0000001A
Layout & motion
- Container
- n/a
- Grid columns
- n/a
- Hero
- unknown
- Navigation
- none-detected
- Page height
- 36,203px
- Easing
- cubic-bezier(0.19, 1, 0.22, 1)
- Durations
- 250ms 500ms
- Transitions
- 1126
- Keyframes
- 0
- Stack
- react, cloudflare
How Substack compares
- Body text
- 15px: smaller than 76% of indexed sites (median 16px).
- Largest heading
- 32px: smaller than 85% of indexed sites (median 60px).
- Type scale
- 1.21×: flatter than 77% of indexed sites (median 1.28×).
- Text contrast
- 11.9:1: lower than 89% of indexed sites (median 17.6:1).
- Page length
- 36,203px: longer than 99% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Cahuenga
- The only site in the index that loads Cahuenga.
- Spectral
- The only site in the index that loads Spectral.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Substack use?
Substack uses SF Pro (system-ui) (loaded as "system-ui") for body text. Cahuenga is used for headings. Spectral is used for other.
What are Substack's brand colors?
Substack's website uses a light scheme: background #FFFFFF, text #363737, muted text #777777 and borders #0000001A.
How is Substack's website laid out?
The most common corner radius is 12px, body text is 15px with 1.4 line height, and the page container is nullpx wide.
