Hugging Face. Friendly ML workshop on white paper.
- AI
- Light theme
- 12 colors
- 2 typefaces
Hugging Face operates as a friendly, utilitarian machine-learning workshop: nearly all-white canvas, hairline gray dividers, and compact, data-dense rows that feel like reading a spreadsheet. The brand voice arrives through a single warm yellow emoji logo (🤗) and one dark navy panel per page that acts as a stage for that mascot — everything else stays in grayscale so the yellow never has to compete. Typography is one workhorse humanist sans (Source Sans Pro) carrying the full hierarchy from 10px metadata to 96px display, with IBM Plex Mono punching in only for model names and technical labels. Components are flat, low-elevation, and rounded at a tight 8px — the interface reads more like a research tool than a marketing site, letting the 2M+ models and datasets be the visual content.
Hugging Face design system
Brand1
The 🤗 emoji logo mark — the only warm color in the system, appears as a small brand stamp
Accent1
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Neutrals10
Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Deepest panel surface used in gradients and product UI previews; Hero panel and product preview gradient — subtle two-stop from slate to near-black
Dark hero panel background, dark navigation wells — the high-contrast stage for the mascot
Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Metadata, timestamps, helper text, nav links, muted icon fills
Tertiary text, inactive icons, disabled controls, the quietest neutral
Slightly stronger dividers, placeholder text on inputs
Hairline dividers, card borders, input borders, the dominant structural line color
Secondary surface, subtle card backgrounds, tag fills
Page background, card surfaces, input fields
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink Black on Hugging Yellow
14.48 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
