Hugging Face

---
name: huggingface-co-design-system
source: https://huggingface.co/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#000000"
  text-muted: "#6a7282"
  surface: "#30363d"
  accent: "#0b0f19"  # deep-blue
  accent-2: "#141c2e"  # deep-blue
  accent-3: "#e5e7eb"  # pale-blue
fonts:
  primary: "Source Sans Pro"
  mono: "IBM Plex Mono"
---

# Hugging Face – The AI community building the future. — Design System

Extracted from **https://huggingface.co/** on 2026-07-03.

> We’re on a journey to advance and democratize artificial intelligence through open source and open science.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 113 light against 83 dark. The palette is chromatic: 12 saturated values against 4 neutrals, led by deep-blue (`#0b0f19`). **Source Sans Pro** carries the interface; **IBM Plex Mono** handles code and data. Geometry mixes sharp corners (.1rem) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 68% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 113:83). Don't flip individual sections to the opposite mode.
- `.3125rem` is the workhorse radius (x18); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.
- `IBM Plex Mono` is the monospace — keep it for code, data, and metadata roles.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 113 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-600` | `#6a7282` | 19 | **text-muted** — most-used mid-luminance neutral |
| `neutral-800` | `#30363d` | 16 | **surface** — neutral closest to canvas luminance |
| `neutral-950` | `#000000` | 48 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `deep-blue` | `#0b0f19` | 139 | **accent** — most-used chromatic color |
| `deep-blue-2` | `#141c2e` | 70 | **accent-2** — supporting chromatic color |
| `pale-blue` | `#e5e7eb` | 49 | **accent-3** — supporting chromatic color |
| `blue` | `#3080ff` | 27 | — |
| `blue-2` | `#364153` | 22 | — |
| `red` | `#f85149` | 21 | — |
| `blue-3` | `#193cb8` | 15 | — |
| `blue-4` | `#155dfc` | 15 | — |
| `blue-5` | `#625fff` | 14 | — |
| `red-2` | `#fb2c36` | 14 | — |
| `pink` | `#f6339a` | 13 | — |
| `blue-6` | `#99a1af` | 13 | — |

### Modern color values (kept verbatim)

- `oklch(97.1% .013 17.38)`
- `oklch(93.6% .032 17.717)`
- `oklch(88.5% .062 18.334)`
- `oklch(80.8% .114 19.571)`
- `oklch(70.4% .191 22.216)`
- `oklch(63.7% .237 25.331)`
- `oklch(57.7% .245 27.325)`
- `oklch(50.5% .213 27.518)`
- `oklch(44.4% .177 26.899)`
- `oklch(39.6% .141 25.723)`
- `oklch(25.8% .092 26.042)`
- `oklch(98% .016 73.684)`

### Dark mode

The source defines 38 dark-mode variants (via dark selector). Both halves of the system, first 30:

| Token | Light | Dark |
| --- | --- | --- |
| `--scrollbarBG` | — | `#020011` |
| `--thumbBG` | — | `#374151` |
| `--lightningcss-dark` | — | `initial` |
| `--tw-shadow-color` | — | `#ffffff0d` |
| `--tw-ring-color` | — | `var(--color-gray-500)` |
| `--tw-ring-offset-color` | — | `#0b0f19` |
| `--tw-gradient-to` | — | `#1e2939b3` |
| `--tw-gradient-from` | — | `var(--color-gray-800)` |
| `--tw-gradient-via` | — | `#0b0f19` |
| `--tw-gradient-position` | — | `to bottom` |
| `--tw-gradient-to-position` | — | `70%` |
| `--tw-shadow` | — | `0 0 #0000!important` |
| `--tw-ring-shadow` | — | `var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,oklch(62.3% .188 259.81/.5))` |
| `--tw-brightness` | — | `brightness(0%)` |
| `--tw-drop-shadow-size` | — | `drop-shadow(0 3px 3px var(--tw-drop-shadow-color,#0000001f))` |
| `--tw-drop-shadow` | — | `drop-shadow(var(--drop-shadow-md))` |
| `--tw-grayscale` | — | `grayscale(100%)` |
| `--tw-invert` | — | `invert(100%)` |
| `--tw-prose-body` | — | `var(--tw-prose-invert-body)` |
| `--tw-prose-headings` | — | `var(--tw-prose-invert-headings)` |
| `--tw-prose-lead` | — | `var(--tw-prose-invert-lead)` |
| `--tw-prose-links` | — | `var(--tw-prose-invert-links)` |
| `--tw-prose-bold` | — | `var(--tw-prose-invert-bold)` |
| `--tw-prose-counters` | — | `var(--tw-prose-invert-counters)` |
| `--tw-prose-bullets` | — | `var(--tw-prose-invert-bullets)` |
| `--tw-prose-hr` | — | `var(--tw-prose-invert-hr)` |
| `--tw-prose-quotes` | — | `var(--tw-prose-invert-quotes)` |
| `--tw-prose-quote-borders` | — | `var(--tw-prose-invert-quote-borders)` |
| `--tw-prose-captions` | — | `var(--tw-prose-invert-captions)` |
| `--tw-prose-kbd` | — | `var(--tw-prose-invert-kbd)` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**Source Sans Pro** is the primary interface face; **IBM Plex Mono** is the monospace. Full list by usage:

| Family | Usage |
| --- | --- |
| Source Sans Pro | 115 |
| IBM Plex Mono | 46 |
| KaTeX_Main | 8 |
| KaTeX_SansSerif | 7 |
| Charter | 6 |
| KaTeX_Math | 4 |
| KaTeX_Size1 | 4 |
| KaTeX_Caligraphic | 3 |

**Size scale (px):** `8`, `10`, `12`, `12.8`, `13.71`, `14`, `14.22`, `14.4`, `16`, `16.8`, `19.2`, `20`

**Weights in use:** `200` (x14), `300` (x14), `400` (x39), `600` (x35), `700` (x40), `900` (x16)

**Line-heights (unitless):** `1`, `1.2`, `1.33`, `1.5`, `1.56`, `1.6`, `1.71`, `1.75`

**Letter-spacing values:** `.2em`

## Spacing

Most-used values (px): `1`, `2`, `3`, `4`, `5`, `8`, `10`, `12`, `16`, `22`, `23`, `27`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `.1rem` | 1 |
| `radius-md` | `3px` | 4 |
| `radius-lg` | `.3125rem` | 18 |
| `radius-xl` | `.45rem` | 1 |
| `radius-2xl` | `1.6rem` | 1 |
| `radius-3xl` | `100%` | 1 |
| `radius-full` | `50%` | 2 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 10px 20px #0000000a,0 2px 6px #0000000a,0 0 1px #0000000a` (x3)
- `shadow-md` — `0 5px 5px #00000008,0 2px 2px #00000008,0 0 1px #00000008` (x2)
- `shadow-lg` — `0 3.5px 3.5px #00000002,0 2px 2px #00000002,0 0 1px #00000002` (x1)
- `shadow-xl` — `0 24px 32px #0000000a,0 16px 24px #0000000a,0 4px 8px #0000000a,0 0 1px #0000000a` (x1)

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #0b0f19 */
  color: var(--color-canvas); /* #ffffff — contrast 19.2:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 600;
}

.modal {
  background: var(--color-surface); /* #30363d */
  border-radius: .3125rem;
  box-shadow: var(--shadow-xl); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #000000 */
}

.input-error {
  border-color: #f85149; /* mined token: red */
  /* error text: #f85149 on canvas — contrast 3.4:1, below AA; darken for message text */
}
```

## Observations

- 4 of 16 extracted colors are neutrals.
- 4 distinct shadows; the softest reaches 0px blur.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-200: oklch(88.5% .062 18.334);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-800: oklch(44.4% .177 26.899);
  --color-red-900: oklch(39.6% .141 25.723);
  --color-red-950: oklch(25.8% .092 26.042);
  --color-orange-50: oklch(98% .016 73.684);
  --color-orange-100: oklch(95.4% .038 75.164);
  --color-orange-200: oklch(90.1% .076 70.697);
  --color-orange-300: oklch(83.7% .128 66.29);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-700: oklch(55.3% .195 38.402);
  --color-orange-800: oklch(47% .157 37.304);
  --color-orange-900: oklch(40.8% .123 38.172);
  --color-orange-950: oklch(26.6% .079 36.259);
  --color-amber-50: oklch(98.7% .022 95.277);
  --color-amber-100: oklch(96.2% .059 95.617);
  --color-amber-200: oklch(92.4% .12 95.746);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-amber-500: oklch(76.9% .188 70.08);
  --color-amber-600: oklch(66.6% .179 58.318);
  --color-amber-700: oklch(55.5% .163 48.998);
  --color-amber-800: oklch(47.3% .137 46.201);
  --color-amber-900: oklch(41.4% .112 45.904);
  --color-amber-950: oklch(27.9% .077 45.635);
  --color-lime-200: oklch(93.8% .127 124.321);
  --color-lime-400: oklch(84.1% .238 128.85);
  --color-lime-500: oklch(76.8% .233 130.85);
  --color-lime-600: oklch(64.8% .2 131.684);
  --color-lime-700: oklch(53.2% .157 131.589);
  --color-emerald-50: oklch(97.9% .021 166.113);
  --color-emerald-100: oklch(95% .052 163.051);
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-deep-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.