Typography
scale ratio 1.494- Arialbody40078%
- Manropedisplay400 60019%
- IBM Plex Monomono4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Manrope | 40px | 400 | 1.3 | 0em |
| body | Arial | 12px | 400 | 1.333 | 0em |
| body-sm | IBM Plex Mono | 11.67px | 400 | 0em | |
| label | Manrope | 16px | 400 | 0em |
Type scale
Aa11.5Aa12Aa16Aa28Aa40
- Body size
- 12px / 1.333
- Display size
- 40px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 8.93:1
- Muted on bg
- 4.94:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 12
Corner radii
816pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 26px
Components
exact computed valuesbutton-secondary
Explore icons
- textColor
- #3C402B
- rounded
- 8px
- padding
- 0px 32px
- height
- 56px
- fontFamily
- Manrope
- fontSize
- 16px
- fontWeight
- 600
- border
- 1px solid #3C402B
- shadow
- rgba(60, 64, 43, 0.2) 2px 2px 0px 0px
input
- rounded
- 0px
- height
- 48px
- padding
- 0px 0px
Layout & motion
- Container
- 1366px
- Grid columns
- 2
- Hero
- split
- Navigation
- none-detected
- Page height
- 38,988px
- Easing
- ease
- Durations
- 150ms 200ms
- Transitions
- 10
- Keyframes
- 0
- Stack
- react, google-tag-manager
Page sections (3)
section labels are heuristic
01hero
How Phosphor Icons compares
- Body text
- 12px: smaller than 96% of indexed sites (median 16px).
- Largest heading
- 40px: smaller than 79% of indexed sites (median 60px).
- Type scale
- 1.49×: steeper than 88% of indexed sites (median 1.28×).
- Container
- 1366px: wider than 93% of indexed sites (median 1242px).
- Text contrast
- 8.9:1: lower than 93% of indexed sites (median 17.6:1).
- Page length
- 38,988px: longer than 99% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Manrope
- One of 3 indexed sites that load Manrope (1%).
- IBM Plex Mono
- One of 4 indexed sites that load IBM Plex Mono (1%).
- 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 Phosphor Icons use?
Phosphor Icons uses Arial for body text. Manrope is used for headings. IBM Plex Mono is used for code.
What are Phosphor Icons's brand colors?
Phosphor Icons's website uses a light scheme: background #EEEAE3, text #3C402B, muted text #656461 and borders #3C402B.
How is Phosphor Icons's website laid out?
The most common corner radius is 8px, body text is 12px with 1.333 line height, and the page container is 1366px wide.
Similar to Phosphor Icons
Neue Montreal / Bethany Elingston / IBM Plex Mono#FFFFFF
Eight Sleepeightsleep.com
Source Sans Pro / IBM Plex Mono#FFFFFF
Hugging Facehuggingface.co
Cinetype / IBM Plex Sans / PP Formula#FFFCFC
Hexhex.tech
Inter / Manrope / Source Code Pro#FDFDFD
Supabasesupabase.com
GT Planar / Berkeley Mono / Inter#F7F7F7
Buildwithfernbuildwithfern.com