# Hugging Face · Design system migration spec

> Source: https://huggingface.co  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of balancing a playful mascot with a highly technical, utility-driven interface for a professional developer community.

## 1. Identity DNA

The system operates like a bustling digital town square for machine learning engineers and researchers—a place where technical rigor meets collaborative spirit. Its identity is built on the duality of being open-source and technically precise, yet fundamentally friendly and inviting. This is not a polished corporate lobby; it is a functional workshop where ideas are built, shared, and put to use.

**One-liner:** A friendly, high-utility platform for the AI community to collaborate on models, datasets, and apps.
**Keywords:** Collaborative · Technical · Friendly · Open-source · AI
**Analogy:** A bustling digital town square for machine learning engineers and researchers.

## 2. Color

The palette is one of deliberate high contrast, establishing immediate clarity and focus. Clean white backgrounds provide the canvas, framed by subtle gray borders that define space without adding weight, while the deep navy gradient anchors the hero section with a sense of depth and technical gravity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F3F4F6` | card background |
| `--bg-quiet` | `#F8F9FA` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#3D4654` | secondary text |
| `--muted` | `#6B7280` | placeholder |
| `--muted-soft` | `#9CA3AF` | weak hint |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Clean white backgrounds with subtle gray borders, anchored by a dark navy gradient in the hero.

The principle is a professional yet approachable environment, using color not for decoration but for hierarchy and legibility.

## 3. Typography

Typographic choices reinforce the platform's dual nature, pairing a humanist sans-serif for the body to ensure readability in long-form text and documentation with bold display weights for declarative, community-focused headlines. The type scale is functional, supporting everything from prominent hero statements to the precise metadata and labels essential for navigating models and datasets.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headlines |
| h1 | 32px | 1.2 | 700 | 0px | Section titles |
| h2 | 20px | 1.4 | 600 | 0px | Subheadings |
| body | 16px | 1.5 | 400 | 0px | Main text |
| caption | 12px | 1.4 | 400 | 0px | Metadata and labels |

## 4. Spacing

Spatial rhythm is governed by a consistent 8px grid, with a 4px micro-spacing for tight internal element padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 8px grid with tight 4px micro-spacing.

## 5. Surfaces

Depth is communicated through restraint. Shadows are soft and subtle—barely perceptible lifts for cards and dropdowns—while borders are fine, 1px lines that delineate surfaces without creating harsh divisions.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 1px 2px 0px
  - rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
  - rgba(0, 0, 0, 0.1) 0px 20px 25px -5px
- **Borders:** 1px solid #E5E7EB

## 6. Layout

The layout skeleton is a standard responsive 12-column grid, providing a structured yet flexible framework for content-dense pages. This grid collapses cleanly to a single column on mobile, maintaining generous whitespace and a clear content hierarchy across all viewports.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard responsive 12-column grid collapsing to single column on mobile.

## 7. Motion & Interaction

Motion is minimal and strictly functional, used to communicate state change and provide interactive feedback rather than for spectacle. Transitions are brief and consistent, focusing on usability through subtle color shifts and transform cues on hover and click.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color transitions on hover
  - Scale and translate transforms on interactive elements

- **Hover:** Lighten background or change border color with 0.15s ease.
- **Click:** Subtle scale down transform.
- **Transition:** All properties transition with 0.15s cubic-bezier(0.4, 0, 0.2, 1).
- **Keyboard:** Visible focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is friendly, collaborative, and technically precise, favoring bold, declarative statements that emphasize community and building over corporate jargon. Calls to action are direct and action-oriented, while the language in the primary UI deliberately avoids complex academic terminology to remain accessible.

- **Tone:** Friendly, collaborative, and technically precise.
- **Headline style:** Bold, declarative statements emphasizing community and building.
- **CTA style:** Direct and action-oriented (e.g., 'Explore', 'Browse').
- **Avoid:** Overly corporate jargon / Aggressive sales language / Complex academic terminology in primary UI

### Don'ts
- ❌ Don't use aggressive neon accents — the palette relies on navy, gray, and white.
- ❌ Don't use heavy drop shadows — only subtle elevation is present on cards.
- ❌ Don't use centered text for long paragraphs — alignment is left-justified.
- ❌ Don't use fully rounded corners on all elements — a mix of 8px and pill shapes is used.
- ❌ Don't use complex illustrations — UI relies on clean icons and a single mascot.
- ❌ Don't use dark mode by default — the primary experience is light with a dark hero.

What the system deliberately avoids is just as telling: aggressive neon accents, heavy shadows, centered long-form text, and a default dark mode, all in service of its core identity as a clear, trustworthy utility.

## System Prompt (paste into AI tool)

```
Hugging Face is a friendly, open-source AI community platform with a clean, developer-focused UI. It uses a high-contrast palette of white backgrounds (#FFFFFF), light grays (#F3F4F6), and a deep navy hero gradient (#1A202C), with black (#000000) text for maximum readability. Typography relies on humanist-sans for the body and bold display weights for headlines. Key design elements include the playful hugging mascot, rounded search bars, and categorized 'chips' for filtering tasks. Critical don'ts: avoid aggressive neon colors, use subtle shadows only, and maintain left-aligned text for readability. The layout is a clean 12-column grid with generous whitespace, emphasizing community trust and technical utility.
```
