---
title: "Hugging Face design system"
variant: extended
source: https://huggingface.co/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/huggingface-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hugging Face · Design System

> A bright canvas for an open AI community

**Theme:** light · **Industry:** ai · **Source:** https://huggingface.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hugging Face pairs a clean white interface with dark, information-rich product panels to make its AI ecosystem feel approachable and capable. Friendly mascot imagery, real product previews, and restrained typography keep the long homepage community-focused rather than corporate.

## North star

Keep the interface calm and white, then let dark, detailed product showcases and friendly mascot moments provide the contrast and personality.

## Overview

The page is built on a predominantly white canvas, with black headings and muted gray copy providing a clear, quiet reading hierarchy. Its defining contrast is the broad, rounded near-black hero: product-interface details sit beside a large, friendly headline, while the yellow Hugging Face mascot adds warmth without changing the restrained base palette. Source Sans Pro carries navigation, headings, body copy, and controls in straightforward sentence case; IBM Plex Mono appears in code-like product details. The layout alternates centered section introductions with compact product grids and larger interface showcases, leaving generous white space between major stories. Thin pale-gray borders define cards and separators instead of heavy shadows. Pastel pink, lavender, and blue hues occur as soft media or gradient accents, while colorful logos and mascots belong to illustrations and product content rather than the core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and primary background for navigation, section bands, and open space. |
| Slate Mist | `#6a7282` | `--color-slate-mist` | semantic | Main muted text for supporting copy and secondary labels on white. |
| Ink | `#000000` | `--color-ink` | neutral | Primary headings, navigation, body text, and high-contrast links. |
| Midnight Panel | `#0b0f19` | `--color-midnight-panel` | surface | Signature dark product surface, especially the oversized hero interface showcase. |
| Cloud Hairline | `#f3f4f6` | `--color-cloud-hairline` | neutral | Subtle separators and borders around links, cards, and interface groupings. |
| Soft Steel | `#99a1af` | `--color-soft-steel` | semantic | Secondary muted text, especially quiet metadata and low-emphasis details. |
| Pale Border | `#e5e7eb` | `--color-pale-border` | neutral | Fine outlines on cards and search input; helps separate content without adding weight. |
| Deep Slate | `#4a5565` | `--color-deep-slate` | neutral | Low-emphasis dark interface and footer details, including subdued control text. |
| Mist Surface | `#f9fafb` | `--color-mist-surface` | surface | Near-white media or inset surface within product previews; not a dominant section band. |
| Night Button | `#101828` | `--color-night-button` | surface | Dark rounded sign-up button and dark interface details. |
| Ash Gray | `#a9adb5` | `--color-ash-gray` | semantic | Occasional low-contrast text detail; subordinate to the more prevalent gray text colors. |
| Petal Tint | `#feeaf5` | `--color-petal-tint` | accent | Soft pink gradient tint within media; not a primary interface or CTA color. |
| Lilac Haze | `#efeeff` | `--color-lilac-haze` | accent | Pale lavender gradient tint within visual media and product imagery. |
| Periwinkle Wash | `#d2dbff` | `--color-periwinkle-wash` | accent | Soft blue gradient tint appearing in media, rather than core interface controls. |
| Blush Glow | `#ffeeee` | `--color-blush-glow` | accent | Light red-pink gradient tint confined to media and decorative imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0b0f19` (Midnight Panel) · `--color-surface-2` → `#f9fafb` (Mist Surface) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#6a7282` (Slate Mist) · `--color-text-subtle` → `#99a1af` (Soft Steel) · `--color-border` → `#f3f4f6` (Cloud Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0b0f19` | 1.1:1 | fail |
| `#000000` | `#f9fafb` | 20.1:1 | AAA |
| `#6a7282` | `#ffffff` | 4.84:1 | AA |
| `#6a7282` | `#0b0f19` | 3.96:1 | AA-large |
| `#6a7282` | `#f9fafb` | 4.63:1 | AA |
| `#99a1af` | `#ffffff` | 2.6:1 | fail |
| `#99a1af` | `#0b0f19` | 7.36:1 | AAA |
| `#99a1af` | `#f9fafb` | 2.49:1 | fail |

### Gradients

- `linear-gradient(oklab(0.656 0.239812 -0.0239026 / 0.1) 0%, rgb(255, 255, 255) 50%, oklab(0.585 0.0288678 -0.231205 / 0.1) 100%)`
- `linear-gradient(to right bottom, oklab(0.87 0.0045783 -0.0648386 / 0.8) 0%, oklab(0.936 0.0304823 0.0097381 / 0.6) 50%, oklch(0.985 0.002 247.839) 100%)`
- `linear-gradient(oklch(0.21 0.034 264.665) 0%, rgb(11, 15, 25) 100%)`
- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Source Sans Pro | `--font-body` | webfont | 400, 600, 700 | Primary interface typeface for navigation, headings, copy, links, and buttons. | Source Sans 3 |
| IBM Plex Mono | `--font-mono` | webfont | 400 | Code-like snippets and compact technical details inside product previews. | IBM Plex Mono |

- **Source Sans Pro:** Use clean sentence case, regular body copy, and measured semibold or bold emphasis; avoid decorative tracking.
- **IBM Plex Mono:** Keep monospace usage limited to technical interface content; regular weight and readable line spacing.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1 | 0 | — | Source Sans Pro | Main hero headline; large, bold, tightly composed two-line statement. |
| h2 | 30px | 700 | 1.2 | 0 | — | Source Sans Pro | Major section headings, including community and product-story introductions. |
| h3 | 24px | 600 | 1.33 | 0 | — | Source Sans Pro | Feature and card titles within the showcase sections. |
| h4 | 20px | 700 | 1.25 | 0 | — | Source Sans Pro | Compact subsection and product-card headings. |
| body | 16px | 400 | 1.5 | 0 | — | Source Sans Pro | Explanatory copy, card descriptions, and supporting product text. |
| caption | 14px | 400 | 1.25 | 0 | — | Source Sans Pro | Small metadata, timestamps, labels, and supporting notes. |
| button | 14px | 600 | 1.43 | 0 | — | Source Sans Pro | Compact control labels and primary action text. |
| nav | 16px | 400 | 1.5 | 0 | — | Source Sans Pro | Header navigation links and footer category links. |
| link | 16px | 400 | 1.5 | 0 | — | Source Sans Pro | Model, dataset, and resource links across listings. |
| code | 15px | 400 | 1.6 | 0 | — | IBM Plex Mono | Technical snippets and code-like details inside product previews. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 24, 32, 40, 73 px.
- Section rhythm 73px · element gap 8px · card padding — · max content width 1248px.

A centered desktop composition uses a measured page maximum width of 1248px, with a compact horizontal navigation above the main content. The hero is a wide, dark product showcase; below it, three-column trending content gives way to centered section headings, cards, and larger interface previews. Later sections alternate product panels, open-source listings, and a full-bleed mascot illustration before a multi-column footer. Preserve the comfortable density and generous section rhythm; use the measured spacing system rather than crowding the content.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `12px` · media `8px` · nav `4px` · link `26px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `26px` · 2xl `32px` · pill `9999px`
- Shadow `hairline` (other, card): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `sm` (link): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `inset` (input): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset`
- Shadow `lg` (button): `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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8p`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page reads mostly flat: thin pale borders outline cards, input fields, and separators, with little reliance on shadow. The dark hero panel supplies the strongest depth through contrast and layered interface content rather than elevation effects. Where needed, keep shadows restrained and preserve the clean white space around card groups.

## Imagery

Use product UI captures and interface-like mockups as the main visual material, framed in broad rounded dark or light panels. The yellow Hugging Face mascot recurs as a friendly accent, including the large footer crowd illustration. Keep photography secondary; avoid replacing the actual product-preview character with generic stock imagery. Subtle pastel gradients and colorful model or partner marks belong inside media and illustrations.

## Components

### Header navigation

A compact horizontal bar on white, with the mascot and wordmark, search input, product links, and a dark pill-shaped sign-up action.

### Hero product showcase

A broad near-black panel pairs a large white headline and muted copy with a dense model-discovery interface preview.

### Trending columns

Three side-by-side model, Spaces, and dataset lists use compact metadata and lightweight separators beneath a centered section label.

### Feature preview cards

White product-story sections use thin pale outlines and interface captures to demonstrate collaboration, modalities, and profile features.

### Enterprise showcase

A dark product panel introduces paid compute and enterprise tools, followed by paired inference and compute cards.

### Open-source directory

A spacious multi-column listing presents tools and projects with small colored marks, concise labels, and restrained card boundaries.

### Mascot footer

A wide crowd illustration bridges the open-source content and a five-column footer of categorized text links.

### Measured component styles

- **Primary button** (“Explore Models”): background #000000 · text #ffffff · border 1px solid · radius 8px · padding 4px 14px · 400 16px Source Sans Pro
- **Secondary button** (“Single Sign-On”): transparent background · text #ffffff · border 1px solid #ffffff · radius 8px · padding 8px 16px · 600 14px Source Sans Pro
- **Link** (“google/embeddinggemma-2 Updated 6 days a”): transparent background · text #000000 · radius 0px · padding 8px · 400 16px Source Sans Pro
- **Input**: transparent background · text #000000 · border 1px solid #e5e7eb · radius 8px · padding 8px 12px 8px 32px · 400 16px Source Sans Pro · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“The collaboration platform Host and coll”): transparent background · text #000000 · border 1px solid #e5e7eb · radius 12px · padding 0px · 400 16px Source Sans Pro · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Tasks”): transparent background · text #000000 · radius 0px · padding 6px 12px · 400 16px Source Sans Pro

## Do

- Use white as the dominant page canvas.
- Reserve near-black panels for substantial product showcases.
- Set interface text in Source Sans Pro or its measured substitute.
- Use IBM Plex Mono only for technical snippets.
- Keep card outlines pale and visually quiet.
- Use the mascot and colorful marks as accents, not as substitutes for product UI.

## Don't

- Do not turn the full page into a dark theme.
- Do not invent bright brand colors for buttons or links.
- Do not use heavy shadows to separate ordinary cards.
- Do not compress the generous breaks between major sections.
- Do not style product previews as generic stock photography.
- Do not apply pastel gradient tints as broad interface backgrounds.

## Agent prompt

Build a new Hugging Face-style page on a Gallery White (#ffffff) canvas, with Ink (#000000) headings and Slate Mist (#6a7282) supporting copy. Use Source Sans Pro throughout the interface and reserve IBM Plex Mono for code-like product details. Create a compact navigation, then make the main product story a broad Midnight Panel (#0b0f19) with bright text and a realistic, information-rich UI preview. Follow it with centered section introductions, compact multi-column lists, and bordered product-preview cards using Cloud Hairline (#f3f4f6) and Pale Border (#e5e7eb). Keep the overall composition open and comfortably spaced. Use the yellow mascot and colorful logos within illustrations or product media; keep Petal Tint (#feeaf5), Lilac Haze (#efeeff), Periwinkle Wash (#d2dbff), and Blush Glow (#ffeeee) as restrained media accents, not core controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top navigation above a wide dark hero panel; headline and copy sit beside a dense product interface preview. | search entry point, primary and secondary discovery links | horizontal navigation, dark showcase panel, mascot accent |
| 2 | product-grid | Centered trending label followed by three columns for models, Spaces, and datasets. | browse by content type, scan trending entries | three-column lists, compact metadata, fine separators |
| 3 | feature-grid | Centered section heading and subtitle above a grid of product interface previews. | explore platform capabilities, view product examples | centered introduction, outlined preview cards, interface imagery |
| 4 | feature-split | Centered introduction, wide dark enterprise showcase, then paired inference and compute cards. | explore enterprise tools, compare paid capabilities | dark feature panel, paired product cards, compact action buttons |
| 5 | product-grid | Centered heading above a spacious multi-column directory of open-source tools. | discover open-source tools, scan project descriptions | multi-column listings, small colored marks, light card boundaries |
| 6 | gallery | Full-width decorative mascot crowd placed between project listings and footer navigation. | visual transition to footer | full-bleed illustration, repeating mascot motif |
| 7 | footer | Theme control at left and five link columns arranged beneath the mascot illustration. | navigate site resources, switch theme | multi-column link groups, small muted labels, open white canvas |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/huggingface-co