Color Palette
Background / Surface Colors
Model Category Accent Colors
Blue 7 (Multimodal)
#615FFF
Text Colors (Gray Scale)
Dark Blue 3 (Primary)
#101828
Blue (Muted)
#99A1AF · ×155
Light Gray 2
#D1D5DC · ×36
Fill / Semantic Colors
Blue 3 (Links)
#155DFC · ×8
Orange (Warning)
#FFA600 · ×8
Typography
PRIMARY · SOURCE SANS 3
Source Sans
The AI community building the future. Models, datasets, and spaces for everyone.
Regular · 400
Semibold · 600
Bold · 700
MONO · IBM PLEX MONO
IBM Plex Mono
model_id = "meta-llama/Llama-3.2-11B"
Regular · 400
Medium · 500
The AI Community
Display 48px · Bold 700 · line-height: 48px · no letter-spacing token
Build the future with open AI
Heading 30px · Bold · line-height: 36px
Models · Datasets · Spaces
Heading 24px · Bold · line-height: 32px
Explore the hub
Subheading 20px · Semibold · line-height: 28px
We're on a journey to advance and democratize artificial intelligence through open source and open science.
Body 18px · Regular · line-height: 28px
Upload a model, create a dataset, or deploy a Space to share your work with the community.
Body 16px · Regular · line-height: 25px
Last updated 2 minutes ago · 850k+ models · 200k+ datasets · 350k+ spaces
Caption 14px · Regular · line-height: 20px
MODELS · SPACES · DATASETS
Label 12px · Semibold · no letter-spacing token defined
from transformers import AutoModelForCausalLM
Code · IBM Plex Mono · 13.4px · line-height: 22.56px
Letter Spacing — No tokens defined
No letter-spacing tokens were detected in the Hugging Face design system. The extractor returned an empty letterSpacing: {} object. All text uses the browser default tracking of 0px — hierarchy is expressed through size, weight, and color variation alone.
Spacing
Spacing Scale
25 tokens — 2px → 128px
Borders
Border Radii — 13 tokens (incl. asymmetric & percentage)
Notable: HF uses asymmetric radii (0/0/16/16px, 0/12/12/0px, 32/32/0/0px) and percentage radii (50%, 50%/50%/0/0, 0/0/50%/50%) — the most geometrically varied radius vocabulary in the set, revealing complex organic shapes used for model cards, avatars, and hero elements.
Border Width
--border-width-hairline
1px · ×338
At ×338, the hairline border is used more frequently than in any other system in this set. HF heavily relies on 1px dividers to organize its dense content-listing interface — model cards, dataset rows, search results, sidebar items.
Shadow / Elevation
Shadow Tokens
4 tokens — all pure black, minimal opacity
sm — Whisper lift
×25
5% black · 1px — standard card elevation, input fields
md — Raised
×17
10% black · 1–3px dual-stop — dropdowns, popovers
lg — Inner press
×1
5% black inset 2px — pressed/active input state indicator
xl — Float
×1
10% black · 20–25px — modal dialogs, floating panels
Z-Index
5 layers — all positive, starting at 1. No negative background layer and no INT_MAX values — the most conservative z-index system in this series.
| Layer | Value | Usage |
|---|
| z-1 (Base) | 1 | Slightly elevated base elements, positioned content |
| z-2 (Raised) | 2 | Cards, inline elevated surfaces |
| z-3 (Navigation) | 10 | Sticky nav bars, persistent sidebars, floating search |
| z-4 (Popover) | 20 | Dropdowns, tooltip overlays, hover cards |
| z-5 (Modal) | 40 | Modal dialogs, toasts, critical top-level overlays |
Breakpoints
📐
No breakpoints defined
The Hugging Face design token extraction returned an empty breakpoint: {} object. No responsive breakpoint tokens were found in the page's CSS custom properties. Responsive behavior is likely handled through Tailwind utility classes or CSS media queries defined inline rather than through CSS custom properties.
Opacity
Opacity Tokens
8 tokens — 0.1 → 0.9 (widest range in this series)
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #99A1AF (Blue/Muted) | #E5E7EB (Light Gray) | 2.1:1 | Fail |
| #99A1AF (Blue/Muted) | #000000 (Black) | 8.07:1 | AAA |
| #99A1AF (Blue/Muted) | #FFFFFF (White) | 2.6:1 | Fail |
| #99A1AF (Blue/Muted) | #101828 (Dark Blue 3) | 6.82:1 | AA |
| #6A7282 (Blue 2) | #E5E7EB (Light Gray) | 3.91:1 | AA Large |
| #6A7282 (Blue 2) | #FFFFFF (White) | 4.84:1 | AA |
| #6A7282 (Blue 2) | #F3F4F6 (White 2) | 4.39:1 | AA Large |
| #4A5565 (Dark Blue) | #E5E7EB (Light Gray) | 6.1:1 | AA |
| #4A5565 (Dark Blue) | #FFFFFF (White) | 7.56:1 | AAA |
| #364153 (Dark Blue 2) | #E5E7EB (Light Gray) | 8.32:1 | AAA |
| #364153 (Dark Blue 2) | #FFFFFF (White) | 10.3:1 | AAA |
| #364153 (Dark Blue 2) | #F3F4F6 (White 2) | 9.36:1 | AAA |
| #D1D5DC (Light Gray 2) | #000000 (Black) | 14.26:1 | AAA |
| #D1D5DC (Light Gray 2) | #101828 (Dark Blue 3) | 12.05:1 | AAA |
CSS Variables Reference
Light Gray (most used)--color-light-gray#E5E7EB · ×858
Black--color-black#000000 · ×756
White--color-white#FFFFFF · ×301
White 2 (Page bg)--color-white-2#F3F4F6 · ×81
Dark Blue 3 (Dark surface)--color-dark-blue-3#101828 · ×15
Dark Gray 2--color-dark-gray-2#0B0F19 · ×3
White 3--color-white-3#F9FAFB · ×1
Orange 2--color-orange-2#FF6900
Purple--color-purple#8E51FF
Blue 4--color-blue-4#2B7FFF
Green--color-green#7CCF00
Orange 3--color-orange-3#FE9A00
Blue 7--color-blue-7#615FFF
Blue (Muted text)--color-blue#99A1AF · ×155
Blue 2 (Secondary)--color-blue-2#6A7282 · ×60
Dark Blue (Body)--color-dark-blue#4A5565 · ×48
Light Gray 2--color-light-gray-2#D1D5DC · ×36
Dark Blue 2 (Strong)--color-dark-blue-2#364153 · ×36
Blue 3 (Links)--color-blue-3#155DFC · ×8
Red (Error/Danger)--color-red#FF3939 · ×8
Orange (Warning)--color-orange#FFA600 · ×8
Mid Gray--color-mid-gray#86898F · ×8
Dark Gray--color-dark-gray#4A4E57 · ×6
Purple 2--color-purple-2#861FFF · ×1
Yellow--color-yellow#FFD702 · ×1
Blue 6--color-blue-6#097EFF · ×1
Red 3--color-red-3#FF3270 · ×1
Source Sans 3 (UI)--font-family-baseSource Sans Pro
IBM Plex Mono (Code)--font-family-2IBM Plex Mono
Regular--font-weight-regular400
Semibold--font-weight-semibold600
Bold--font-weight-bold700
10.4px → 12px → 13.4px2xs → xs → sm
14px → 15.04px → 16pxbase → lg → xl
18px → 20px → 24px2xl → 3xl → 4xl
30px → 48px5xl → 6xl
No letter-spacing tokensletterSpacing: {}browser default
Motion instant (150ms)--duration-instant0.15s · ×55
Motion fast (200ms)--duration-fast0.2s · ×6
No easing tokenseasing: {}browser default
Hairline--border-width-hairline1px · ×338
full--radius-full8px · ×41
r9--radius-r925.6px · ×12
r13 (Pill)--radius-r139999px · ×17
Ghost (10%)--opacity-100.1 · ×1
Faint (25%)--opacity-250.25 · ×5
Dim (50%)--opacity-500.5 · ×10
Strong (85%)--opacity-850.85 · ×5
Near-opaque (90%)--opacity-900.9 · ×7
Base--z-11
Raised--z-22
Navigation--z-310
Popover--z-420
Modal--z-540
Hugging Face Design System · Generated 15/04/2026 · 31 color tokens · 2 font families · 3 font weights · 11 font sizes · 14 line heights · 0 letter-spacing · 25 spacing steps · 13 radius · 1 border width · 4 shadows · 2 durations · 0 easings · 5 z-index layers · 0 breakpoints · 8 opacity tokens