Dark developer-console AI hub: a deep navy #0b0f19 canvas, cool gray Source Sans Pro ladder, the yellow hugging-face emoji as the only brand mark, full-pill buttons, and a multicolor emoji category-pill system over a live faceted model browser.
Browse Hugging Face in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: huggingface.co (live DOM, computed styles), 2026-07-13 (desktop 1512px, dark theme served). Coverage: public homepage (hero + task/library browser + live model list). Dashboard: pending login (needs-dashboard). Responsive: breakpoints from Tailwind utilities only; mobile rendering not verified.
A dark, dense "AI community hub" — a deep navy canvas (#0b0f19) that reads like a developer console rather than a marketing brochure. The single warm brand note is the yellow hugging-face emoji logo; everything else is a cool Tailwind gray ladder. Recognition comes from two things: the emoji mascot, and a cloud of small colorful category pills (each ML task, library and provider gets its own Tailwind hue with an emoji glyph) sitting beside a live, real-time list of trending models. It deliberately avoids gradients, glow and hero imagery — the "hero" is functional product UI (a faceted model browser) shown in-place. Set in Source Sans Pro throughout, it feels utilitarian and friendly at once. Feels: dark, dense, technical, friendly.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #0b0f19 | Page background, input fills |
| surface-900 | #0f1928 | Deepest panel tint |
| surface-800 | #101828 | Cards, Sign-Up button bg |
| surface-750 | #111728 | Inset panels, pill fills |
| border-subtle | #141c2e | Hairline borders, input border (most-used border) |
| border-default | #1e2939 | Card/pill dividers |
| border-strong | #4a5565 | Outline-button border |
| Token | Hex | Role / usage |
|---|---|---|
| text | #e5e7eb | Primary text, body (most-used color on page) |
| text-strong | #ffffff | Headings on dark, button labels |
| text-2 | #d1d5dc | Nav links, secondary |
| text-3 | #b3bcc9 | Tertiary labels |
| muted | #99a1af | Meta text, captions |
| faint | #6a7282 | Disabled / timestamps |
| Token | Hex | Role / usage |
|---|---|---|
| brand-yellow | #fe9a00 | Hugging-face mascot, brand mark |
| orange | #ff6900 | Task/provider category |
| blue | #2b7fff | Links, primary interactive; tints #50a2ff #8ec5ff #dbeafe |
| purple | #8e51ff / #615fff | Category |
| red | #fb2c36 | Category |
| green | #7ccf00 | Category |
| pink | #f6339a | Category |
| amber-tint | #fef3c6 | Soft badge bg |
Rule: chrome is a cool gray ladder on navy; saturated color appears only on category pills, emoji glyphs and links — never on large surfaces.
"Source Sans Pro", ui-sans-serif, system-ui, sans-serif (single family everywhere; emoji fonts appended).#e5e7eb.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 48 / 48 | 700 | normal |
| Section (h2) | 20–24 | 600 | normal |
| Body | 16 / 24 | 400 | normal |
| Nav / UI | 16 | 400 | normal |
| Meta / caption | 13–14 | 400 | normal |
| Pill label | 14 | 500 | normal |
Patterns: Source Sans Pro is slightly condensed and humanist; weight tops at 700 on the hero, 400–600 elsewhere. No negative tracking, no uppercase eyebrows.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.