W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Hugging Face
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/huggingface/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/huggingface/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Hugging Face
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Source Sans 3 ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Hugging Face
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Hugging Face
A clear hierarchy in Hugging Face's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Hugging Face
[email protected]font · heading
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Source Sans 3
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ hug-orange #FF9D00 accent-hover
→ hug-orange-deep #CC7E00 background-dark
→ hub-night #0B0F19 background-light
→ hub-canvas #FFFFFF border-light
→ hub-border #E5E7EB error
→ hub-error #DC2626 identity
→ hug-yellow #FFD21E mark
→ hug-yellow #FFD21E on-identity
→ hub-ink #111827 primary
→ hug-yellow #FFD21E primary-hover
→ hug-yellow-deep #E6B800 success
→ hub-success #16A34A surface-dark
→ hub-night-surface #1F2937 surface-light
→ hub-surface #F9FAFB text-primary-dark
→ hub-canvas #FFFFFF text-primary-light
→ hub-ink #111827 text-secondary-light
→ hub-ink-secondary #374151 text-tertiary-light
→ hub-ink-tertiary #6B7280 warning
→ hug-orange #FF9D00 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Source Sans 3 prose
→ body Source Sans 3 Palette mode mappings (from huggingface)
Light mode (14 roles)
accent
→ hug-orange accent-hover
→ hug-orange-deep background
→ hub-canvas border
→ hub-border error
→ hub-error primary
→ hug-yellow primary-hover
→ hug-yellow-deep success
→ hub-success surface
→ hub-surface surface-elevated
→ hub-surface-elevated text-primary
→ hub-ink text-secondary
→ hub-ink-secondary text-tertiary
→ hub-ink-tertiary warning
→ hug-orange Dark mode (14 roles)
accent
→ hug-orange accent-hover
→ hug-orange-deep background
→ hub-night border
→ hub-night-border error
→ hub-error primary
→ hug-yellow primary-hover
→ hug-yellow-deep success
→ hub-success surface
→ hub-night-surface surface-elevated
→ hub-ink-secondary text-primary
→ hub-canvas text-secondary
→ hub-surface-elevated text-tertiary
→ hub-ink-tertiary warning
→ hug-orange Rules (8 typed constraints)
error · 5 rules
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 rules
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 rule
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.