---
version: alpha
name: Hugging Face
website: "https://huggingface.co"
description: >-
  A community-driven AI platform whose marketing chrome runs Source Sans Pro across every text tier and pairs a near-black hero canvas ("#0b0f19") with the load-bearing white workspace ("#ffffff"). The hero leans hard on type — a 48px weight-700 wordmark headline over IBM Plex Mono code samples — and the page below switches to a white floor populated with multi-hued repo category pills (blue "#388bfd", green "#3fb950", red "#f85149", amber "#d29922"). Card geometry sits at 8px corners with 8px and 16px gutters; the system reads as a research notebook rather than a SaaS marketing page.

seo:
  title: "Hugging Face Design System for React — Source Sans Pro, dark hero, 17 components"
  metaDescription: "Hugging Face's design system as a DESIGN.md file. Dark hero #0b0f19, white workspace #ffffff, Source Sans Pro + IBM Plex Mono, 17 components. For React, Next.js, and AI tooling."
  highlights:
    - "Two-surface alternation — a near-black hero ('#0b0f19') flips to a pure white workspace ('#ffffff') the moment the page enters the content tier, no transitional gray"
    - "Source Sans Pro carries the entire chrome — 48px/700 hero down to 12px/600 micro-labels — paired with IBM Plex Mono ('15.04px') for inline repo IDs and code"
    - "Repo category pills run four hues against white — blue '#388bfd', green '#3fb950', amber '#d29922', red '#f85149' — used as signal-only, never decorative"
    - "Card radii sit at 8px with 25.6px pill radii reserved for tag chips and the 17px-tracking 'huge-radius' badge that wraps avatars"
    - "8px is both the dominant spacing increment (59 hits) and the dominant card radius (41 hits) — one number governs the rhythm at two scales"
  tags:
    - "AI & LLM Platforms"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Hugging Face's homepage is a research dashboard that pretends to be a marketing page. The fold opens on a near-black canvas ("#0b0f19") with a single 48px Source Sans Pro wordmark headline — "The AI community building the future." — over a wall of IBM Plex Mono code samples showing actual `transformers` API calls. There is no hero illustration, no gradient mesh, no product mockup card. The page leans on the type and the code, and that is the entire brand voice. The dark band only runs for one viewport; below the fold the canvas inverts to pure white ("#ffffff") and stays there for the remainder of the page, populated with model cards, dataset rows, and Spaces grids that read like a notebook index rather than a SaaS landing template.

    This DESIGN.md packages the whole surface into one machine-readable file. Inside: 22 color tokens grouped into hero-dark, workspace-light, and category-signal layers, 12 typography roles split between Source Sans Pro (display through caption) and IBM Plex Mono (repo IDs and code), 6 radii anchored at 8px, 9 spacing values pivoting on 8px and 16px, and 17 components covering the dark hero band, white workspace cards, category pills, repo rows, and the model carousel. The schema follows the Google Labs DESIGN.md specification — every token quotes its hex and every numeric component value is a string.

    Pipe the file into Claude, Cursor, or Copilot when you need a build that looks like Hugging Face rather than a generic AI startup. The agent reproduces the dark-to-white surface flip, the wordmark-headline-over-code-block hero, the multi-hue repo pills used only as signal, and the 8px card rhythm — without inventing gradient washes or oversized hero illustrations. Or treat it as an audit reference: any drift from the two-surface rule or the Source-Sans-only display ladder shows up immediately against the token list.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://huggingface.co"
      title: "Hugging Face — official site"
      description: "The platform where the machine learning community collaborates on models, datasets, and applications."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Hugging Face's primary brand color?"
      answer: "Hugging Face's marketing chrome does not have a single saturated brand voltage in the traditional sense — the hero is a near-black canvas at '#0b0f19' and the workspace is pure white at '#ffffff', and the brand voltage is the contrast between them. The signature yellow of the hugging-face emoji mark appears only as a small logo glyph at the top-left, not as a CTA color. Where saturation does appear, it is on the repo category pills: blue '#388bfd' for Models, green '#3fb950' for Datasets, amber '#d29922' for changed-file labels, and red '#f85149' for deletions and warnings — borrowed straight from the GitHub Primer diff palette."
    - id: "typography"
      title: "What typography does Hugging Face use, and what should I use as a fallback?"
      answer: "The entire chrome runs Source Sans Pro — display, headings, body, captions, and button labels all sit in the same family. The hero h1 is 48px weight 700 with normal letter-spacing, h3 sub-section heads are 20px weight 600, body paragraphs are 16px weight 400 at a 24px line-height, and micro-labels drop to 12px weight 600. Code, repo IDs, and inline command samples switch to IBM Plex Mono at '15.04px' with a 24px line-height. If Source Sans Pro is unavailable, Inter is the closest open-source substitute at the same metrics. For Plex Mono, JetBrains Mono works at the same size and leading."
    - id: "two-surface-rule"
      title: "Why does Hugging Face flip between dark and white in one page?"
      answer: "The system has two surfaces and no third option. The dark hero band ('#0b0f19') runs from the top of the page through the first content row of trending repos, and the white workspace ('#ffffff') runs from that point to the footer. The flip is hard — there is no transitional gray gradient, no shadow seam. The dark band carries the wordmark headline, IBM Plex Mono code samples, and the yellow emoji logo. The white band carries every interactive surface: model cards, dataset rows, Spaces tiles, category pills, and the enterprise CTA. The pacing is exactly one viewport of dark to wake the page, then white for the remaining ~3500px of scroll."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React app?"
      answer: "Yes — every token is structured to feed into Claude, Cursor, or any AI agent that reads DESIGN.md tokens. The agent reproduces the dark-hero-to-white-workspace flip, the Source Sans Pro display ladder, IBM Plex Mono for repo IDs, the 8px card geometry, and the four-hue repo category pill system. Every color quotes its hex, every typography role names a fontFamily plus the four metrics, every component references tokens through '{colors.x}' / '{typography.x}' / '{rounded.x}' / '{spacing.x}' syntax. Paste the values straight into a Tailwind config, into CSS custom properties, or feed the whole file into a coding agent as system context."
    - id: "category-pill-colors"
      title: "How are the repo category pill colors used?"
      answer: "The four pill hues — blue '#388bfd', green '#3fb950', amber '#d29922', red '#f85149' — map one-to-one to repo content categories: Models in blue, Datasets in green, Pull-request and changed-file labels in amber, deletions and error states in red. They never appear outside the pill or label context. The white workspace never tints; the dark hero never carries colored pills. This is signal-only color, copied directly from the GitHub Primer diff palette ('--d2h-dark-*' tokens are visible in the extracted CSS variables), and it reads to any developer who has seen a unified-diff before."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "A handful of items documented in the Known Gaps section. The actual product surface (model pages, the dataset viewer, Spaces, the Inference API console, the discussion threads) adds many components beyond the marketing surface — repo file trees, commit graphs, model-card markdown renderers, Gradio embeds — that are out of scope here. The yellow emoji-face glyph at the top-left is treated as a logo asset rather than a system token. Dark-mode tokens for the workspace tier (the GitHub-style '--d2h-dark-*' values do exist in the extracted CSS but are not surfaced as a separate theme) would need a second pass. Animation timings on the hero code-sample carousel are not extracted."

colors:
  hero-canvas: "#0b0f19"
  workspace-canvas: "#ffffff"
  ink: "#000000"
  ink-soft: "#161b22"
  ink-elevated: "#21262d"
  ink-border: "#30363d"
  muted: "#6e7681"
  surface-light: "#e6edf3"
  hairline-light: "#e1e1e1"
  on-hero: "#ffffff"
  category-blue: "#388bfd"
  category-green: "#3fb950"
  category-amber: "#d29922"
  category-red: "#f85149"
  ins-label: "#399839"
  ins-soft: "#b4e2b4"
  ins-highlight: "#97f295"
  del-soft: "#e9aeae"
  del-highlight: "#ffb6ba"
  del-bg: "#fee8e9"
  change-soft: "#d0b44c"
  change-bg: "#fdf2d0"
  selected-bg: "#c8e1ff"
  moved-label: "#3572b0"

typography:
  display-xl:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0
  heading-lg:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0
  heading-sm:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  heading-xs:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.55
    letterSpacing: 0
  body-lg:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  body-md:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0
  label-md:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0
  caption:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0
  code-md:
    fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 15.04px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  nav-link:
    fontFamily: "Source Sans Pro, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  pill: "25.6px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "6px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "28px"
  "2xl": "32px"

components:
  top-nav:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.on-hero}"
    typography: "{typography.nav-link}"
    padding: "2px 8px"
    height: "56px"
  hero-band:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.on-hero}"
    typography: "{typography.display-xl}"
    padding: "32px"
  hero-wordmark-heading:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.on-hero}"
    typography: "{typography.display-xl}"
    height: "96px"
  hero-code-sample:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.code-md}"
    rounded: "{rounded.md}"
    padding: "16px"
  button-primary:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
    border: "0"
  button-secondary:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.on-hero}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
  workspace-band:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "32px"
  repo-row:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px"
  category-pill-models:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.category-blue}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "2px 8px"
  category-pill-datasets:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.category-green}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "2px 8px"
  category-pill-spaces:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.category-amber}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "2px 8px"
  category-pill-warning:
    backgroundColor: "{colors.del-bg}"
    textColor: "{colors.category-red}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "2px 8px"
  badge-uppercase:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "2px 6px"
    letterSpacing: "0.05em"
  enterprise-cta-band:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.on-hero}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.md}"
    padding: "32px"
  text-input:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 12px 8px 32px"
    height: "36px"
  nav-link:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.on-hero}"
    typography: "{typography.nav-link}"
    padding: "2px 8px"
    height: "28px"
  footer:
    backgroundColor: "{colors.workspace-canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body-sm}"
    padding: "32px"
---

## Overview

Hugging Face's homepage is **two-surface architecture**: a near-black hero band (`{colors.hero-canvas}` — `#0b0f19`) running exactly one viewport tall, then a hard flip to pure white (`{colors.workspace-canvas}` — `#ffffff`) for the remaining ~3500px of scroll. There is no transitional gray, no shadow seam, no gradient mesh between them. The dark band carries the 48px Source Sans Pro wordmark headline and a wall of IBM Plex Mono code samples showing actual `transformers` and `datasets` API calls. The white band carries every interactive surface — model cards, dataset rows, Spaces tiles, the enterprise CTA.

Where most AI marketing pages anchor on a single saturated brand voltage and decorate the rest with neutrals, Hugging Face inverts the convention: the brand voltage IS the dark-to-white surface flip, and saturation is reserved for four signal-only repo category pills — blue `#388bfd` for Models, green `#3fb950` for Datasets, amber `#d29922` for changed-file labels, red `#f85149` for warnings. The signature yellow emoji-face logo sits only at the top-left wordmark; it never colors a button or a band.

**Signal-only saturation**: the four pill hues are lifted straight from the GitHub Primer diff palette (the extracted CSS variables include `--d2h-dark-ins-label-color: #3fb950`, `--d2h-dark-del-label-color: #f85149`, `--d2h-dark-change-label-color: #d29922`). The system reads this way to every developer who has seen a unified-diff before — color carries semantic meaning about content type, not visual emphasis.

**Key Characteristics:**
- Two-surface architecture: hero-dark `{colors.hero-canvas}` (`#0b0f19`) flipping to workspace-white `{colors.workspace-canvas}` (`#ffffff`) with no transitional gray.
- Source Sans Pro carries the entire chrome — every heading, body, label, and button across the marketing surface uses the same family.
- IBM Plex Mono at `15.04px` weight 400 with a 24px line-height handles inline repo IDs and code samples in the hero band.
- Four-hue repo category pill system: blue `#388bfd`, green `#3fb950`, amber `#d29922`, red `#f85149` — signal-only, never decorative.
- 8px is the dominant card radius (41 hits in extraction) AND the dominant spacing increment (59 hits) — one number drives both rhythms.
- 48px Source Sans Pro weight-700 hero wordmark — the page's only display-tier headline, never repeated below the fold.

## Colors

### Surface
- **Hero Canvas** (`{colors.hero-canvas}` — `#0b0f19`) — frequency 2. Used as bg (1), gradient (1). The dark hero band that runs from the top of the page through the first content row. Carries the wordmark headline and code samples. Single-CSS-variable provenance (`--d2h-dark-bg-color`).
- **Workspace Canvas** (`{colors.workspace-canvas}` — `#ffffff`) — frequency 133. Used as text (71), bg (10), gradient (52). The white surface that carries every interactive element below the hero. Wired through 13 CSS variables including `--color-white`, `--color-gray-50`, `--color-sky-50`, `--color-emerald-50` — every "50" Tailwind scale collapses to pure white.

### Text
- **Ink** (`{colors.ink}` — `#000000`) — frequency 364. Used as text (300), bg (2), shadow (62). The dominant text color across the workspace tier. Headings, body paragraphs, and nav labels on white all sit at pure black.
- **Ink Soft** (`{colors.ink-soft}` — `#161b22`) — borderline-black tone wired through `--color-slate-900` and `--color-gray-900`. Reserved for very dark surfaces and elevated dark cards.
- **Ink Elevated** (`{colors.ink-elevated}` — `#21262d`) — slightly lighter than ink-soft, wired through `--color-gray-800`. Used for dark-mode line borders and elevated dark surfaces in the diff renderer.
- **Ink Border** (`{colors.ink-border}` — `#30363d`) — the dark-tier border tone (`--d2h-dark-border-color`, `--d2h-dark-empty-placeholder-border-color`).
- **Muted** (`{colors.muted}` — `#6e7681`) — wired through `--color-gray-500` and `--color-neutral-500`. The mid-gray for captions, secondary labels, code-sample comment text in the hero.

### Hairlines
- **Surface Light** (`{colors.surface-light}` — `#e6edf3`) — wired through 13 CSS variables including `--color-gray-100`, `--color-blue-100`, `--color-sky-100`. The lightest cool-gray, used for surface-elevated badges on the white tier.
- **Hairline Light** (`{colors.hairline-light}` — `#e1e1e1`) — the 1px border tone used in card rows and table dividers (`--d2h-empty-placeholder-border-color`, `--d2h-file-header-border-color`).

### Category signal
- **Category Blue** (`{colors.category-blue}` — `#388bfd`) — frequency 0 raw, but anchored through `--d2h-dark-selected-color`, `--d2h-dark-info-border-color`, `--d2h-dark-info-bg-color`. Reserved for Model repo pills and informational labels.
- **Category Green** (`{colors.category-green}` — `#3fb950`) — Datasets repo pill, "Insertion" label in the diff renderer (`--d2h-dark-ins-label-color`).
- **Category Amber** (`{colors.category-amber}` — `#d29922`) — Changed-file label in diffs, used for Spaces-tier badges (`--d2h-dark-change-del-color`, `--d2h-dark-change-label-color`).
- **Category Red** (`{colors.category-red}` — `#f85149`) — Deletion label and warning badges (`--d2h-dark-del-border-color`, `--d2h-dark-del-label-color`).

### Diff palette (legacy GitHub Primer)
- **Ins Label** (`{colors.ins-label}` — `#399839`) — light-mode insertion label.
- **Ins Soft** (`{colors.ins-soft}` — `#b4e2b4`) — insertion border tone.
- **Ins Highlight** (`{colors.ins-highlight}` — `#97f295`) — insertion highlight background.
- **Del Soft** (`{colors.del-soft}` — `#e9aeae`) — deletion border tone.
- **Del Highlight** (`{colors.del-highlight}` — `#ffb6ba`) — deletion highlight background.
- **Del Bg** (`{colors.del-bg}` — `#fee8e9`) — wired through `--color-red-50`, `--color-red-100`. The error-tier surface fill.
- **Change Soft** (`{colors.change-soft}` — `#d0b44c`) — change-marker label.
- **Change Bg** (`{colors.change-bg}` — `#fdf2d0`) — change-marker surface fill.
- **Selected Bg** (`{colors.selected-bg}` — `#c8e1ff`) — wired through `--color-blue-200`. Light-mode selected-line background.
- **Moved Label** (`{colors.moved-label}` — `#3572b0`) — moved-file marker.

## Typography

The system runs **Source Sans Pro** across every text role — display, headings, body, labels, captions, buttons, navigation. There is no display-family / body-family split. The variation comes from weight (400 / 600 / 700) and size (12px → 48px) rather than from a second typeface. Code switches to **IBM Plex Mono** at `15.04px` with a 24px line-height for repo IDs and inline command samples. Both faces appear with `letterSpacing: normal` — no negative tracking on display, no widened tracking on uppercase caption.

The hero h1 is `{typography.display-xl}` (48px / 700 / line-height 1) — the only display-tier headline on the page. Below the fold, headings ladder from `{typography.heading-lg}` (30px / 700) for section heads down to `{typography.heading-xs}` (18px / 600) for card titles. Body paragraphs sit at `{typography.body-md}` (16px / 400) with a 24px line-height, and labels drop to `{typography.label-md}` (14px / 600). The 12px caption (`{typography.caption}`) is used for repo metadata — star counts, model size, last-modified timestamps.

Where most AI brands run a weight-300 display headline for restraint (Stripe, Mistral), Hugging Face runs weight 700 — the hero wordmark carries actual visual weight, no soft elegance.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 700 | 1 | Hero h1 ("The AI community building the future.") |
| `{typography.heading-lg}` | 30px | 700 | 1.2 | "The Home of Machine Learning" section heads |
| `{typography.heading-md}` | 24px | 600 | 1.33 | Enterprise CTA headline |
| `{typography.heading-sm}` | 20px | 600 | 1.4 | "Trending on Hub" sub-section heads |
| `{typography.heading-xs}` | 18px | 600 | 1.55 | Repo card titles |
| `{typography.body-lg}` | 18px | 400 | 1.55 | Hero sub-paragraph, intro body |
| `{typography.body-md}` | 16px | 400 | 1.5 | Default running-text, nav menu items |
| `{typography.body-sm}` | 14px | 400 | 1.25 | Repo metadata, secondary text |
| `{typography.label-md}` | 14px | 600 | 1.43 | Button labels, pill labels |
| `{typography.caption}` | 12px | 600 | 1 | Uppercase badges, micro-labels |
| `{typography.code-md}` | 15.04px | 400 | 1.6 | IBM Plex Mono — code samples, repo IDs |

## Layout

### Spacing System
The system has an 8px base. `{spacing.sm}` (8px) is the dominant increment — 59 occurrences in the extraction, more than every other value combined. `{spacing.base}` (16px) and `{spacing.md}` (12px) follow at 17 hits each. The unusual `{spacing.xs}` (6px) appears in `2px 6px` and `0px 6px` pill padding pairs — small horizontal offset for inline badges.

`{spacing.xxs}` (2px) is the vertical padding inside category pills (`padding: 2px 8px` — `2px 6px` — `2px 12px 0px`). `{spacing.lg}` (24px) and `{spacing.2xl}` (32px) drive section padding and card internal padding respectively.

### Grid & Container
The hero band is centered and bounded by Tailwind's standard container scale (`--container-7xl: 80rem` is wired in :root). The workspace tier uses an asymmetric 3-up grid for trending repos: Models column / Datasets column / Spaces column, each carrying ~5 repo rows. Below that, a 2-up grid pairs the "Open Source community" pitch with code samples, and a logo carousel at the footer runs at 6-up.

### Whitespace
8px is both the radius and the spacing increment, so cards, gaps, and corners all snap to the same 8px lattice. Cards sit on the white tier with `8px` rounded corners, separated by `8px` and `16px` gutters. Section padding is `32px`.

## Elevation & Depth

The system uses **flat-on-flat** elevation. Cards on the white workspace tier have no shadow; depth comes from the 1px `{colors.hairline-light}` border (`#e1e1e1`) and from contrast against the white canvas itself. The extracted shadow hits at the `#000000` token (62 shadow occurrences) are mostly inline-shadow Tailwind defaults rather than authored card shadows.

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body sections, hero band, top nav |
| Hairline | 1px `{colors.hairline-light}` border | Repo rows, model cards, dataset rows |
| Dark inversion | `{colors.hero-canvas}` background on white tier | Enterprise CTA card, code-window mockups |
| Highlight | `{colors.selected-bg}` background | Selected diff line, focused list row |

The dominant depth move on the page is **dark-card-on-white-tier**: the enterprise CTA band in the lower third of the page inverts to `{colors.hero-canvas}` (`#0b0f19`) as a standalone rounded card inside the white workspace, which creates a much stronger elevation read than a shadow would.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | `0px` | Hero band edges, full-bleed sections |
| `{rounded.xs}` | `4px` | Tiny inline accents, micro-tags |
| `{rounded.sm}` | `6px` | Compact dropdown items, small buttons |
| `{rounded.md}` | `8px` | The dominant card radius (41 hits in extraction) — repo rows, buttons, text inputs |
| `{rounded.lg}` | `12px` | Larger content cards, code-sample containers |
| `{rounded.pill}` | `25.6px` | Repo category pills, badge pills (17 hits) |
| `{rounded.full}` | `9999px` | Avatar circles, the huge `3.35544e+07px` value reduces to pill at any scale |

The 25.6px pill radius is unusual — most systems use either `9999px` or a small explicit value like `16px` for pills. Hugging Face's 25.6px reads as a deliberate "fat pill" — large enough to wrap multi-word labels comfortably without going fully circular.

## Components

### `top-nav`
The pinned 56px nav bar sitting against the hero canvas `{colors.hero-canvas}`. Carries the yellow emoji-face mark + "Hugging Face" wordmark at left, then a horizontal menu (Models / Datasets / Spaces / Posts / Docs / Pricing) in `{typography.nav-link}` (16px / 400). Right cluster has a search input and the "Sign Up" `{component.button-primary}`.

### `hero-band`
The dark hero band running one viewport tall. Background `{colors.hero-canvas}`, padding `32px`, carrying the wordmark headline `{component.hero-wordmark-heading}` at left and a code-sample stack at right. No CTA inside — the hero relies on the wordmark headline alone.

### `hero-wordmark-heading`
The 48px Source Sans Pro weight-700 headline on the dark canvas. `{typography.display-xl}` with `letterSpacing: normal` (no negative tracking). The page's only display-tier headline.

### `hero-code-sample`
Inline IBM Plex Mono code window inside the hero band. Background `{colors.hero-canvas}` (same as the band — no contrasting fill), text `{colors.muted}` (`#6e7681`), padding `16px`, rounded `{rounded.md}`. The code reads as part of the dark canvas, not as a separate card — pulled out only by its monospace face.

### Buttons
**`button-primary`** — White button on the dark hero canvas. Background `{colors.workspace-canvas}` (`#ffffff`), text `{colors.ink}` (`#000000`), `{typography.label-md}` (14px / 600), padding `8px 16px`, rounded `{rounded.md}` (8px), height `36px`. The primary CTA inverts the page's surface contrast — white on dark.

**`button-secondary`** — Dark button used on the white workspace tier as the inverse. Background `{colors.hero-canvas}`, text `{colors.on-hero}` (`#ffffff`). Same dimensions and radius as primary.

### Workspace cards
**`workspace-band`** — The white workspace tier itself. Background `{colors.workspace-canvas}`, padding `32px`. Carries every interactive component below the hero.

**`repo-row`** — Single-line model/dataset/space row used in the trending grids. Background `{colors.workspace-canvas}`, hairline border, padding `12px`, rounded `{rounded.md}`. Carries an avatar at left, repo name + author in `{typography.body-md}`, metadata in `{typography.body-sm}` (size, downloads, likes), and a `{component.category-pill-models}` indicating category.

### Category pills
**`category-pill-models`** — Blue-text pill for Model repos. Background `{colors.workspace-canvas}`, text `{colors.category-blue}` (`#388bfd`), `{typography.label-md}`, padding `2px 8px`, rounded `{rounded.pill}` (25.6px).

**`category-pill-datasets`** — Green-text pill for Dataset repos. Same geometry, text `{colors.category-green}` (`#3fb950`).

**`category-pill-spaces`** — Amber-text pill for Spaces. Same geometry, text `{colors.category-amber}` (`#d29922`).

**`category-pill-warning`** — Red-text pill for deprecated or warning labels. Background flips to `{colors.del-bg}` (`#fee8e9`), text `{colors.category-red}` (`#f85149`).

### Badges
**`badge-uppercase`** — Small uppercase-tracked tag. Background `{colors.surface-light}`, text `{colors.ink}`, `{typography.caption}` (12px / 600), rounded `{rounded.pill}`, padding `2px 6px`, letterSpacing `0.05em`. Used for "NEW", "PRO", trending markers.

### Enterprise CTA
**`enterprise-cta-band`** — Dark inverted card sitting inside the white workspace. Background `{colors.hero-canvas}`, text `{colors.on-hero}`, `{typography.heading-md}`, rounded `{rounded.md}`, padding `32px`. The page's strongest visual elevation through surface inversion rather than shadow.

### Inputs
**`text-input`** — Standard search/text input. Background `{colors.workspace-canvas}`, text `{colors.ink}`, `{typography.body-md}`, rounded `{rounded.md}`, padding `8px 12px 8px 32px` (asymmetric left padding for the search icon), height `36px`.

### Footer
**`footer`** — Bottom footer on the white workspace tier. Background `{colors.workspace-canvas}`, text `{colors.muted}`, `{typography.body-sm}`, padding `32px`. Carries a logo carousel at top and a multi-column link list below.

## Do's and Don'ts

### Do
- Anchor the hero on `{colors.hero-canvas}` (`#0b0f19`) for exactly one viewport, then flip to `{colors.workspace-canvas}` (`#ffffff`) for the rest of the page. The two-surface architecture is the brand.
- Run Source Sans Pro across every text role. Weight (400 / 600 / 700) and size carry the hierarchy — never reach for a second display family.
- Use IBM Plex Mono only for code, repo IDs, and command samples. Never use it for body or labels.
- Reserve the four category-pill hues for repo-type signal: blue Models, green Datasets, amber Spaces/changed, red warnings. Map them one-to-one to content category.
- Snap card radii to `{rounded.md}` (8px) and gutters to `{spacing.sm}` (8px) or `{spacing.base}` (16px) — the 8px lattice is the rhythm.
- Use surface inversion (`{component.enterprise-cta-band}`) rather than shadows for major card elevation on the white tier.

### Don't
- Don't put a transitional gray band between the hero and the workspace. The flip from `#0b0f19` to `#ffffff` is hard — adding a `#161b22` or `#21262d` interstitial breaks the two-surface rule.
- Don't color CTA buttons with the category pill hues. `#388bfd` blue is a Models signal, not a primary-action color — using it on a button confuses the semantics.
- Don't add negative letter-spacing to display headlines. Source Sans Pro at 48px weight 700 is designed for `letterSpacing: normal` — the extracted value is exactly `normal`, and tracking it tighter reads as off-brand.
- Don't use the dark hero canvas as a card background on the white tier without a `{rounded.md}` corner — full-bleed dark on white reads as a layout error, not as the enterprise CTA.
- Don't reach for `#000000` as a surface fill. The token has 364 occurrences but only 2 are bg uses — it's a text-and-shadow color, and filling a card with it breaks the workspace tier.
- Don't introduce a fifth category pill hue. The four-hue set (blue / green / amber / red) is closed — adding purple or teal pills dilutes the signal-only semantics.
- Don't use the 25.6px `{rounded.pill}` radius on rectangular buttons. It's reserved for pill-shaped category tags; on rectangular buttons it reads as bloated.

## Known Gaps

- The actual product surface (model pages, the dataset viewer, Spaces, the Inference API console, discussion threads, Gradio embeds) adds many components beyond this marketing surface — repo file trees, commit graphs, model-card markdown renderers — that are out of scope here.
- The yellow emoji-face glyph at the top-left wordmark is treated as a logo asset rather than a system token. No yellow tone is surfaced as a color token because it never appears on a CTA or band.
- The GitHub Primer diff palette (`--d2h-dark-*` CSS variables) is fully present in the extracted CSS but only the category-signal subset is surfaced as a system token here. The full dark-mode workspace tier would need a second pass.
- Animation timings on the hero code-sample carousel and on the trending-repo refresh transitions are not extracted.
- Form validation states beyond the default text input are not extracted — error and success states would need a sign-up or feedback flow to confirm.
- The `3.35544e+07px` radius value (17 hits in extraction) is the JavaScript-overflow representation of `9999px` after a computed-style round-trip — it reduces to `{rounded.full}` at any rendered scale.