Hugging Face

---
version: alpha
name: Hugging Face-design-analysis
description: Hugging Face's design language is a friendly, community-first ML platform anchored on the signature yellow `#ffd21e` against clean white and near-black surfaces. The interface is dense with model cards, datasets, and leaderboards, but the warm yellow and rounded, approachable shapes keep it welcoming. Typography is clean and legible, tuned for a technical but broad audience.

colors:
  primary: "#ffd21e"
  primary_dark: "#ff9d0a"
  accent_purple: "#7c3aed"
  canvas: "#ffffff"
  surface: "#fefefe"
  surface_2: "#f6f6f6"
  canvas_dark: "#0b0f19"
  surface_dark: "#1c2536"
  fg_default: "#32363f"
  fg_muted: "#6b7280"
  border_default: "#e5e7eb"
  on_primary: "#0b0f19"
  link: "#2563eb"

typography:
  display-xxl:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Source Sans Pro", system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Hugging Face

## 1. Visual Theme & Atmosphere

Hugging Face is the friendly face of machine learning: a warm, approachable platform where the yellow `#ffd21e` smile mark sits over a clean white canvas. Despite dense technical content — model cards, datasets, leaderboards, code — the rounded shapes and warm accent keep the experience welcoming to newcomers and experts alike.

## 2. Color System

- **HF yellow** `#ffd21e` — logo, primary buttons, and moments of brand delight.
- A deeper amber `#ff9d0a` for hover/pressed; a purple `#7c3aed` appears in gradients and accents.
- Light: `#ffffff` canvas, `#f6f6f6` surfaces, `#32363f` text, `#6b7280` muted, hairlines `#e5e7eb`.
- Dark mode uses a navy-black `#0b0f19` with `#1c2536` surfaces.

## 3. Typography

Source Sans Pro (system fallback) with a clean, legible scale. Body 16px/1.5; model and dataset names are set medium and link-colored. The tone is technical-but-approachable, with generous line height in documentation.

## 4. Components & Shape

The signature element is the model card — a bordered white card with a model name, tags, and a download count. Buttons are 8px rounded; the primary fills yellow with dark text (a distinctive inversion). Emoji-like icons and the rounded smile mark soften the otherwise dense data views. Tag chips and "spaces" cards are prominent.

## 5. Layout & Spacing

A hybrid: marketing pages are airy and centered, while the model hub is a dense card grid with a left filter sidebar. Spacing follows an 8px rhythm, tightening to 16px gaps in dense grids and loosening to 32px in docs.

## 6. Motion

Playful but restrained: cards lift slightly on hover, the smile mark animates in marketing, and gradients shift softly. Durations 200-300ms with a friendly ease.