# Hugging Face

> `huggingface@1.0.0`

Hugging Face is the open community platform for machine-learning models, datasets, and Spaces — the canonical host for open-source AI artifacts. The brand voice is warm, community-first, and emoji- native: the yellow hug-mark (🤗) is the identity anchor, a saturated warm orange supports it, and the marketing surface reads as a bright near-white canvas with deep slate text. The brand is light-first and Source Sans Pro carries body and display.


**Tags:** `huggingface`, `ai`, `ml`, `community`, `warm`, `yellow`, `light-first`

## Atoms

### Palette

**Hugging Face** · `huggingface@1.0.0` · Proprietary — All Rights Reserved

> Hugging Face's brand palette, captured from the official brand assets page at huggingface.co/brand (Primary Yellow #FFD21E, Secondary Orange #FF9D00, Neutral Gray #6B7280) and supplemented by the live marketing-site surface colors used on huggingface.co. The brand reads as warm, approachable, and emoji-native: the yellow hug-mark is the identity anchor, the orange is the secondary warm, and a near-white canvas with deep slate text carries the long-form model-and-dataset content. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Source Sans 3** `(source-sans-3@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Source Sans 3** `(source-sans-3@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `hug-yellow` | Hug Yellow | `#FFD21E` |
| `hug-yellow-deep` | Hug Yellow Deep | `#E6B800` |
| `hug-orange` | Hug Orange | `#FF9D00` |
| `hug-orange-deep` | Hug Orange Deep | `#CC7E00` |
| `hug-neutral` | Hug Neutral | `#6B7280` |
| `hub-canvas` | Hub Canvas | `#FFFFFF` |
| `hub-surface` | Hub Surface | `#F9FAFB` |
| `hub-surface-elevated` | Hub Surface Elevated | `#F3F4F6` |
| `hub-border` | Hub Border | `#E5E7EB` |
| `hub-ink` | Hub Ink | `#111827` |
| `hub-ink-secondary` | Hub Ink Secondary | `#374151` |
| `hub-ink-tertiary` | Hub Ink Tertiary | `#6B7280` |
| `hub-night` | Hub Night | `#0B0F19` |
| `hub-night-surface` | Hub Night Surface | `#1F2937` |
| `hub-night-border` | Hub Night Border | `#374151` |
| `hub-success` | Hub Success | `#16A34A` |
| `hub-error` | Hub Error | `#DC2626` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `hub-canvas` | `#FFFFFF` |
| `surface` | `hub-surface` | `#F9FAFB` |
| `surface-elevated` | `hub-surface-elevated` | `#F3F4F6` |
| `text-primary` | `hub-ink` | `#111827` |
| `text-secondary` | `hub-ink-secondary` | `#374151` |
| `text-tertiary` | `hub-ink-tertiary` | `#6B7280` |
| `primary` | `hug-yellow` | `#FFD21E` |
| `primary-hover` | `hug-yellow-deep` | `#E6B800` |
| `accent` | `hug-orange` | `#FF9D00` |
| `accent-hover` | `hug-orange-deep` | `#CC7E00` |
| `success` | `hub-success` | `#16A34A` |
| `warning` | `hug-orange` | `#FF9D00` |
| `error` | `hub-error` | `#DC2626` |
| `border` | `hub-border` | `#E5E7EB` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `hub-night` | `#0B0F19` |
| `surface` | `hub-night-surface` | `#1F2937` |
| `surface-elevated` | `hub-ink-secondary` | `#374151` |
| `text-primary` | `hub-canvas` | `#FFFFFF` |
| `text-secondary` | `hub-surface-elevated` | `#F3F4F6` |
| `text-tertiary` | `hub-ink-tertiary` | `#6B7280` |
| `primary` | `hug-yellow` | `#FFD21E` |
| `primary-hover` | `hug-yellow-deep` | `#E6B800` |
| `accent` | `hug-orange` | `#FF9D00` |
| `accent-hover` | `hug-orange-deep` | `#CC7E00` |
| `success` | `hub-success` | `#16A34A` |
| `warning` | `hug-orange` | `#FF9D00` |
| `error` | `hub-error` | `#DC2626` |
| `border` | `hub-night-border` | `#374151` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `hug-yellow` | `#FFD21E` |
| `on-identity` | `hub-ink` | `#111827` |
| `primary` | `hug-yellow` | `#FFD21E` |
| `primary-hover` | `hug-yellow-deep` | `#E6B800` |
| `accent` | `hug-orange` | `#FF9D00` |
| `accent-hover` | `hug-orange-deep` | `#CC7E00` |
| `mark` | `hug-yellow` | `#FFD21E` |
| `success` | `hub-success` | `#16A34A` |
| `warning` | `hug-orange` | `#FF9D00` |
| `error` | `hub-error` | `#DC2626` |
| `text-primary-light` | `hub-ink` | `#111827` |
| `text-primary-dark` | `hub-canvas` | `#FFFFFF` |
| `background-light` | `hub-canvas` | `#FFFFFF` |
| `background-dark` | `hub-night` | `#0B0F19` |
| `surface-light` | `hub-surface` | `#F9FAFB` |
| `surface-dark` | `hub-night-surface` | `#1F2937` |
| `text-secondary-light` | `hub-ink-secondary` | `#374151` |
| `text-tertiary-light` | `hub-ink-tertiary` | `#6B7280` |
| `border-light` | `hub-border` | `#E5E7EB` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `roles.colors.mark`

- **allowed:** hug-yellow, hub-ink, hub-canvas
- **forbidden:** hug-orange, hub-success, hub-error, hub-night

> The hug-mark renders in its signature Hug Yellow (#FFD21E), in monochrome ink on light surfaces, or in monochrome canvas on dark surfaces — per the four logo variants published at huggingface.co/brand (HF Logo, HF Logo with Title, HF Logo Monochrome, HF Logo Pirate). The secondary orange is a supporting accent, not a mark fill. 

#### `colorChoice` → `roles.colors.primary`

- **allowed:** hug-yellow, hug-yellow-deep
- **forbidden:** hug-orange, hub-ink, hub-canvas

> Hugging Face's published brand page names Hug Yellow as the primary and Hug Orange as the secondary. Swapping them inverts the brand hierarchy — the yellow is the identity, the orange supports it. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo

> Hugging Face publishes specific monochrome and pirate logo variants; consumers must use those variants rather than apply effects to the full-color mark. Stretching, rotating, or drop-shadowing the hug breaks the warm, hand-drawn voice. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Hub Ink (#111827) on Hub Canvas (#FFFFFF) reads at ~17:1 — well above WCAG AA. Long-form model cards and dataset docs depend on holding that floor. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Hugging Face's Hub canvas pairs deep slate ink with bright surfaces, comfortably clearing AA; consumers must hold this floor across the adapted palette. 

### ⚠️ warning (2)

#### `contextRestriction` → `roles.colors.primary`

- **forbiddenContexts:** body-text, small-icon-on-light

> Hug Yellow (#FFD21E) on white reads at ~1.6:1 contrast — far below the AA 4.5:1 floor for body text. The yellow is for brand-mark surfaces and large emphasis blocks, never for small text or thin iconography on a light canvas. 

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 600, 700

> The live huggingface.co surface renders display headings at 400 / 600 / 700 on Source Sans Pro. The substitute Source Sans 3 family carries the same weight band; intermediate weights are not part of the published display set. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** hub-ink, hub-canvas, hug-orange
- **doesNotPairWith:** hub-error, hub-success

> Hug Yellow reads cleanest against deep ink, bright canvas, or alongside its warm secondary orange. Adjacent saturated reds or greens fight the warm-on-bright voice and read as product-state semantics rather than brand identity. 

## Provenance

- **Source:** <https://huggingface.co/brand>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Hugging Face and the hug-mark are trademarks of Hugging Face, Inc. Primary, secondary, and neutral brand colors captured directly from the official brand-assets page at huggingface.co/brand. Typography and surface tokens captured from the deployed stylesheet on huggingface.co. 
- **Imported:** `2026-05-19`
- **Notes:** Hugging Face publishes a brand-assets page (huggingface.co/brand) that documents the primary, secondary, and neutral hex values and the logo variants (HF Logo, HF Logo with Title, Monochrome, Pirate) — but does not document a full typography or surface system. Surface and ink tokens are therefore supplemented from the live huggingface.co stylesheet on 2026-05-19. Source Sans Pro is the proprietary body face declared on the marketing site; Source Sans 3 is the open-source rendering substitute used here via the source-sans-3@1 atom. 

---

*Generated by the brand-atoms converter. Source: `huggingface@1.0.0` from the encyclopedia.*