Typography
scale ratio 1.351- SF Pro (system-ui)css: ui-sans-serifdisplay + body400 500 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SF Pro (system-ui) | 60px | 600 | 1 | -0.02em |
| body | SF Pro (system-ui) | 18px | 400 | 1.5 | 0em |
| body-sm | SF Pro (system-ui) | 14px | 400 | 1.4 | 0em |
| label | SF Pro (system-ui) | 16px | 500 | 1.25 | 0em |
Type scale
Aa6Aa9Aa10Aa11Aa12Aa13Aa14Aa16Aa18Aa20Aa24Aa36Aa60
- Body size
- 18px / 1.333
- Display size
- 60px
- Display tracking
- -0.02em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.52:1
- Muted on bg
- 10.09:1
- Accent on bg
- 3.36:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 6
- 8
- 12
- 16
- 23
- 24
- 32
- 48
- 96
- 160
Corner radii
246812pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Get Obsidian for
- backgroundColor
- #7C3AED
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 16px 24px
- height
- 60px
- fontFamily
- SF Pro (system-ui)
- fontSize
- 20px
- fontWeight
- 500
- shadow
- rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 1px 3px
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #1F1F1F
- shadow
- rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px
Layout & motion
- Container
- 1120px
- Grid columns
- 2
- Hero
- left-aligned
- Navigation
- top-fixed+transparent
- Page height
- 6,683px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 250ms 1000ms 2000ms
- Transitions
- 16
- Keyframes
- 0
- Stack
- tailwind, cloudflare, github-pages, fastly
Page sections (8)
01nav
02nav
03heroSharpen your thinking.
04featuresSpark ideas.
05feature detailSync securely.
06feature detailPublish instantly.
07ctaIt’s your time to shine.
08footer
How Obsidian compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 69% of indexed sites (median 1.28×).
- Container
- 1120px: narrower than 73% of indexed sites (median 1242px).
- Text contrast
- 16.5:1: lower than 63% of indexed sites (median 17.6:1).
- Page length
- 6,683px: shorter than 64% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Obsidian use?
Obsidian uses SF Pro (system-ui) (loaded as "ui-sans-serif") for headings and body text.
What are Obsidian's brand colors?
Obsidian's website uses a dark scheme: background #0F0F0F, surface #1F1F1F, text #EEEEEE, muted text #BCBCBC and borders #404040.
How is Obsidian's website laid out?
The most common corner radius is 12px, body text is 18px with 1.333 line height, and the page container is 1120px wide.
