Typography
scale ratio 1.320- Interdisplay + body400 500 600 70097%
- SF Pro (system-ui)css: system-uiother5003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 56px | 700 | 1.143 | -0.007em |
| headline | Inter | 16px | 600 | 1.5 | 0em |
| title | Inter | 21px | 500 | 1.143 | 0em |
| body | Inter | 14px | 500 | 1.714 | 0em |
| body-sm | SF Pro (system-ui) | 12px | 500 | 1.4 | 0em |
| label | Inter | 14px | 600 | 2.714 | 0em |
| mono | Inter | 12px | 500 | 1.5 | 0em |
Type scale
Aa11Aa12Aa13Aa14Aa16Aa21Aa24Aa32Aa56
- Body size
- 14px / 1.714
- Display size
- 56px
- Display tracking
- -0.007em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 10.94:1
- Muted on bg
- 5.62:1
- Accent on bg
- 3.03:1
- Dark mode
- follows system
Declared accent tokens
- --vp-c-brand#F56565painted
- --vp-button-brand-bg#F56565painted
- --docsearch-primary-color#5468FFnot on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 64
- 80
- 129.5
- 144
Corner radii
6812pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 89px
Components
exact computed valuesbutton-primary
View all icons
- backgroundColor
- #F56565
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 20px
- height
- 40px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 600
button-secondary
Sponsor
- textColor
- #3C3C43
- rounded
- 9999px
- padding
- 0px 12px
- height
- 32px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #E2E2E3
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #F6F6F7
- border
- 1px solid #E2E2E3
Layout & motion
- Container
- 1152px
- Grid columns
- 10
- Hero
- left-over-media
- Navigation
- top-fixed+transparent
- Page height
- 2,778px
- Easing
- ease
- Durations
- 150ms 250ms 300ms 500ms
- Transitions
- 78
- Keyframes
- 1
- Stack
- vue, vercel
Page sections (6)
01nav
02heroBeautiful & consistent icons
03featuresActive community
04logosAvailable For:
05logosMeet the team
06footer
How Lucide compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 59% of indexed sites (median 1.28×).
- Container
- 1152px: narrower than 69% of indexed sites (median 1242px).
- Text contrast
- 10.9:1: lower than 91% of indexed sites (median 17.6:1).
- Page length
- 2,778px: shorter than 88% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 Lucide use?
Lucide uses Inter for headings and body text.
What are Lucide's brand colors?
Lucide's website uses a light scheme: background #FFFFFF, surface #F6F6F7, text #3C3C43, muted text #67676C and borders #E2E2E3.
How is Lucide's website laid out?
The most common corner radius is 0px, body text is 14px with 1.714 line height, and the page container is 1152px wide.
