# Hugging Face — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces (dark theme)
| 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 |

### Text
| 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 |

### Accents (multicolor category system — one hue per task/library)
| 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.

## 3. Typography Rules

- Font stack: `"Source Sans Pro", ui-sans-serif, system-ui, sans-serif` (single family everywhere; emoji fonts appended).
- Body: 16px / 24px / 400 / `#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.

## 4. Component Stylings

### Buttons
- **Outline (hero primary, "Explore AI Apps")**: transparent bg, text `#ffffff`, 1px border `#4a5565`, full-pill radius, h 42px, padding `0 21.6px`. Hover raises a `shadow-xl` drop shadow.
- **Sign Up (nav)**: bg `#101828`, text `#ffffff`, 1px border `#141c2e`, full-pill radius, padding `4px 12px`.
- **Ghost / nav item ("Log In", "Models")**: transparent, text `#d1d5dc`, padding `2px 8px`, no radius fill; hover lightens text / faint surface.
- **Text link ("Browse 2M+ models")**: `#e5e7eb`, underline, inline.

### Inputs
- Search: bg `#0b0f19`, text `#e5e7eb`, 1px border `#141c2e`, radius 8px, h 36px, leading search icon (padding-left 32px). Focus: border brightens to blue `#2b7fff`.

### Category pills (signature)
- Small rounded-full chips, fill `#111728`, border `#1e2939`, text `#e5e7eb`, each prefixed by a colored emoji glyph; 14px/500. Grouped into Tasks / Libraries / Apps / Inference Providers clusters.

### Cards / model rows
- Model list: borderless rows on canvas, 8px radius on hover fill `#111728`; monospace-flavored model id (`author/name`) + gray meta line (task, params, downloads, likes) with tiny emoji stat icons.

### Nav
- h 65px, transparent over canvas, logo + wordmark left, search field, center nav links, right `Log In` ghost + `Sign Up` pill.

## 5. Layout Principles

- Wide fluid layout (no narrow centered column) — homepage is a two-pane split: left hero copy, right faceted model-browser panel.
- Spacing on Tailwind 4px grid; generous 24px panel padding.
- Hero anatomy: emoji mascot → 48px display headline → gray subhead → outline CTA + text link.
- Right panel: filter tabs (Main/Tasks/Libraries/…) → parameter slider → pill clusters, running alongside a scrolling live model list.
- Dense information design — the page shows real product data (2.5M+ models) rather than illustration.

## 6. Depth & Elevation

- Radii: inputs/cards `8px`, buttons full-pill, pills rounded-full.
- Elevation: mostly flat, structured by 1px borders on navy. The one real shadow is Tailwind `shadow-xl`: `0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1)` on hovered outline CTA.
- Borders (`#141c2e` subtle, `#1e2939` default) do the structural work.

## 7. Motion

- Restrained micro-transitions (~150ms) on color/background/border and button hover shadow. Tailwind transition utilities; no scroll-triggered animation library detected. The live model list updates content in place rather than animating.
- No large hero animation, no parallax, no GSAP/Lenis observed.

## 8. Backgrounds, Effects & WebGL

- Flat solid navy canvas — no canvas/WebGL, no background video, no gradient washes, no grain. Depth is entirely borders + one Tailwind drop shadow. The only "imagery" is the emoji mascot and colored category glyphs.

## 9. Do's and Don'ts

### Do
- Use the navy ladder: canvas `#0b0f19`, panels `#101828`/`#111728`, borders `#141c2e`/`#1e2939`.
- Keep text on the gray ladder `#e5e7eb` → `#99a1af` → `#6a7282`.
- Reserve saturated color for category pills, emoji glyphs and links; give each ML task/library its own hue.
- Set everything in Source Sans Pro, weights 400/500/600/700.
- Use full-pill buttons and 8px inputs/cards; structure with 1px borders, not shadows.
- Show real product data (model lists, faceted filters) rather than decorative hero art.
- Keep the yellow hugging-face emoji as the sole brand mark.

### Don't
- Don't add gradients, glow, aurora or background video — the canvas stays flat navy.
- Don't spread accent color onto large surfaces; pills only.
- Don't introduce a second type family or uppercase eyebrow tracking.
- Don't lean on drop shadows for structure — borders carry it (one `shadow-xl` on CTA hover is the ceiling).

## 10. Responsive Behavior

- Tailwind breakpoints (sm 640 / md 768 / lg 1024 / xl 1280). The two-pane hero collapses to stacked; nav search hides behind an icon on narrow widths.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#0b0f19` · Text `#e5e7eb` · Muted `#99a1af` · Border `#141c2e` · Accent blue `#2b7fff` / brand yellow `#fe9a00`
- Font: `"Source Sans Pro", ui-sans-serif, sans-serif` · Body: 16px · Radius: 8px card/input, full-pill buttons · Control height: 36–42px
- Focus: border brightens to `#2b7fff` · Hover: faint surface `#111728` + `shadow-xl` on CTA

<hugging-face_design_language>
Use the Hugging Face design language: dark developer-console aesthetic on a deep navy canvas #0b0f19, panels #101828/#111728 separated by 1px borders #141c2e/#1e2939 (never shadows). Text runs a cool gray ladder — primary #e5e7eb, secondary #d1d5dc, muted #99a1af, faint #6a7282 — all in Source Sans Pro, weights 400–700 (48px/700 hero). Saturated color is rationed to a multicolor category-pill system where each ML task, library and provider gets its own Tailwind hue (yellow #fe9a00, orange #ff6900, blue #2b7fff links, purple #8e51ff, green #7ccf00, pink #f6339a, red #fb2c36), each paired with an emoji glyph; the yellow hugging-face emoji is the only brand mark. Buttons are full-pill: outline (border #4a5565, white text, shadow-xl on hover) and a small #101828 Sign-Up pill; inputs are 8px-radius navy fields with a leading search icon that focus to a blue border. Layout is a wide, dense two-pane product surface showing real data (faceted model browser + live model list), not decorative hero art. Motion is ~150ms micro-transitions only. Feels: dark, dense, technical, friendly. Avoid: gradients/glow/aurora, accent color on large surfaces, a second type family, uppercase eyebrows, and shadows used for structure.
</hugging-face_design_language>