Typography
scale ratio 1.246- Source Sans Prodisplay + body400 600 70092%
- IBM Plex Monomono4008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Source Sans Pro | 48px | 700 | 1 | 0em |
| headline | Source Sans Pro | 30px | 700 | 1.2 | 0em |
| title | Source Sans Pro | 20px | 600 | 1.4 | 0em |
| body | Source Sans Pro | 16px | 400 | 1.5 | 0em |
| body-sm | Source Sans Pro | 13.4px | 400 | 1.373 | 0em |
| mono | IBM Plex Mono | 15.04px | 400 | 1.596 | 0em |
Type scale
Aa12Aa13.5Aa14Aa15Aa16Aa18Aa20Aa24Aa30Aa48
- Body size
- 16px / 1.5
- Display size
- 48px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 4.84:1
- Accent on bg
- 17.75:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 24
- 32
- 40
- 48
- 73
- 80
Corner radii
4681225.5pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 96px
Components
exact computed valuesbutton-primary
Sign Up
- backgroundColor
- #101828
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 4px 12px
- height
- 30px
- fontFamily
- Source Sans Pro
- fontSize
- 16px
- fontWeight
- 400
button-secondary
- backgroundColor
- #7F22FE
- textColor
- #000000
- rounded
- 8px
- padding
- 0px 0px
- height
- 62px
- fontFamily
- Source Sans Pro
- fontSize
- 16px
- fontWeight
- 400
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
card
- rounded
- 25.6px
- padding
- 24px
- backgroundColor
- #FFFFFFCC
- border
- 1px solid #F3F4F6
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
Layout & motion
- Container
- 1280px
- Grid columns
- 4
- Hero
- left-aligned
- Navigation
- top-static+transparent
- Page height
- 5,986px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms
- Transitions
- 24
- Keyframes
- 1
- Stack
- tailwind, cloudfront
Page sections (9)
section labels are heuristic
01nav
02logos
03heroThe AI community building the future.
04features?Datasets
05features?The Home of Machine Learning
06feature detail?Accelerate your ML
07features?More than 400,000 organizations are using Hugging Face
08feature detail?Our Open Source
09footer
How Hugging Face compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 63% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 5,986px: shorter than 72% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Source Sans Pro
- The only site in the index that loads Source Sans Pro.
- IBM Plex Mono
- One of 4 indexed sites that load IBM Plex Mono (1%).
- 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 Hugging Face use?
Hugging Face uses Source Sans Pro for headings and body text. IBM Plex Mono is used for code.
What are Hugging Face's brand colors?
Hugging Face's website uses a light scheme: background #FFFFFF, surface #FFFFFFCC, text #000000, muted text #6A7282 and borders #F3F4F6.
How is Hugging Face's website laid out?
The most common corner radius is 8px, body text is 16px with 1.5 line height, and the page container is 1280px wide.
Similar to Hugging Face
Cinetype / IBM Plex Sans / PP Formula#FFFCFC
Hexhex.tech
Arial / Manrope / IBM Plex Mono#EEEAE3
Phosphor Iconsphosphoricons.com
Neue Montreal / Bethany Elingston / IBM Plex Mono#FFFFFF
Eight Sleepeightsleep.com
Inter#F8FAFC
Akiflowakiflow.com
ABC Oracle / Exposure / ABC Favorit Mono#FFFFFF
Arc (arc.net)arc.net