Hugging Face
huggingface.coThe reference for letting a single warm-yellow mascot (🤗 on #ffd210) and one dark #101828 panel carry all the brand warmth while everything else stays in spreadsheet-dense grayscale.
Developer Tool flagship
Design tokens
background
surface
text
textMuted
accent
border
- display
- Source Sans Pro
- body
- Source Sans Pro
- mono
- IBM Plex Mono
Do / Don't
Reference it for
- Single dark navy hero panel (#101828) floated on an all-white page as a stage for the brand, white text inside, everything outside it grayscale
- Heavy black display sans at ~96px set tight ('The AI community building the future.') doing all the heavy lifting against the dark panel
- Restraint colour strategy: exactly one warm accent (#ffd210 mascot) so it never competes; UI chrome stays #4a5565 / #6a7282 grayscale
- Two-CTA hero row: a solid dark primary button (8px radius) plus an underlined inline 'or Browse 2M+ models' text link
- Live product-as-content: a real, scrollable faceted model list (Tasks / Parameters / Libraries chips + ranked rows) rendered into the hero instead of a marketing illustration
- IBM Plex Mono reserved strictly for model names and technical labels (moonshotai/Kimi-K2.5, 120B) against a humanist sans for everything else
- Compact data rows with inline metadata icons (downloads, likes, 'Updated 2 days ago') reading like a spreadsheet, dividers as hairline #e5e7eb
- Tight 8px radius across cards, inputs, buttons; barely-there elevation (rgba(0,0,0,0.05) 0 1px 2px)
Do not copy
- The 🤗 hugging-face emoji mascot and its #ffd210 yellow (the entire brand identity)
- The 'Hugging Face' wordmark and emoji-as-logo lockup
- Real model names and org handles (moonshotai, openai/gpt-oss, nvidia, Qwen) shown in the list
- The '2,555,000 Models' / '2M+ models' live counters tied to their actual platform scale
- The specific Tasks/Libraries/Inference-Providers taxonomy, which is HF-domain specific
- Source Sans Pro as the literal house face (treat it as a generic humanist-sans slot)