---
version: alpha
name: HuggingFace-Inspired-design-analysis
description: An inspired interpretation of Hugging Face's design language — an open-source community hub with a plain white Tailwind-style interface, a deep navy hero, Source Sans Pro for everything and IBM Plex Mono for model names, warm yellow emoji branding and dense, scannable model and dataset lists.

colors:
  primary: "#000000"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  canvas-soft: "#f9fafb"
  hero: "#0b0f19"
  ink: "#000000"
  body: "#4b5563"
  mute: "#6b7280"
  hairline: "#e5e7eb"
  brand-yellow: "#ffd21e"
  brand-orange: "#ff9d00"
  link: "#2563eb"

typography:
  display:
    fontFamily: '"Source Sans Pro", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif'
    fontSize: 48px
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: 0px
  heading-md:
    fontFamily: '"Source Sans Pro", system-ui, sans-serif'
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: 0px
  heading-sm:
    fontFamily: '"Source Sans Pro", system-ui, sans-serif'
    fontSize: 18px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: 0px
  body-lg:
    fontFamily: '"Source Sans Pro", system-ui, sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0px
  body-md:
    fontFamily: '"Source Sans Pro", system-ui, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px
  mono:
    fontFamily: '"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0px

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 25px
  full: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "4px 14px"
  card-model:
    backgroundColor: "{colors.canvas}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.lg}"
    shadow: "0 1px 2px rgba(0,0,0,0.05)"
---

# Design System Inspiration of Hugging Face

## Overview

Hugging Face is the GitHub of machine learning, and its interface is built for scanning thousands of models, datasets and Spaces quickly. The design is deliberately plain: a white canvas, black text, Tailwind-gray borders, small soft shadows and one typeface (Source Sans Pro) doing almost all the work. Personality comes from the 🤗 hugging-face emoji logo and its warm yellow, from colorful Space thumbnails, and from the community's own content.

The homepage opens on a deep navy hero (`{colors.hero}` `#0b0f19`) with a bold white headline ("The AI community building the future."), then switches to white for the Models / Datasets / Spaces showcase. About 60% of painted area is white and 35% is the navy hero band.

**Key Characteristics:**
- Utility-first, Tailwind-flavored UI: white, gray-200 borders, `0 1px 2px` shadows, 8–12px radii.
- One sans (Source Sans Pro) at weights 400 / 600 / 700; IBM Plex Mono for model IDs like `meta-llama/Llama-3-8B`.
- Dense list rows with small metadata (task, downloads, likes, updated time) rather than large marketing cards.
- Yellow emoji branding; color is otherwise supplied by content thumbnails and task-category badges.
- Black, small, 8px-radius buttons.

## Colors

### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): Default background for lists, model pages and docs.
- **Canvas Soft** (`{colors.canvas-soft}` — `#f9fafb`): Sidebars, filter panels and gradient-to-white card headers.
- **Hero Navy** (`{colors.hero}` — `#0b0f19`): The homepage hero and dark-mode base.

### Text
- **Ink** (`{colors.ink}` — `#000000`): Headings and primary labels.
- **Body** (`{colors.body}` — `#4b5563`): Descriptions and card text.
- **Mute** (`{colors.mute}` — `#6b7280`): Metadata — download counts, timestamps, task names.

### Brand
- **Hugging Yellow** (`{colors.brand-yellow}` — `#ffd21e`): The emoji face; used in the logo, illustrations and highlight gradients.
- **Orange** (`{colors.brand-orange}` — `#ff9d00`): The deeper stop in brand gradients and the "Pro" badge family.
- **Link Blue** (`{colors.link}` — `#2563eb`): Inline links in docs and model cards.

### Lines
- **Hairline** (`{colors.hairline}` — `#e5e7eb`): Every card border, table divider and input border.

## Typography

### Font Family
1. **Source Sans Pro** — headlines, body, navigation, buttons. Open source.
2. **IBM Plex Mono** — repository IDs, code snippets, file names, parameter counts. Open source.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display}` | 48px | 700 | 48px | Hero headline (white on navy). |
| `{typography.heading-md}` | 20px | 600 | 28px | Feature titles ("The collaboration platform"). |
| `{typography.heading-sm}` | 18px | 600 | 28px | Section labels (Models, Datasets, Spaces). |
| `{typography.body-lg}` | 18px | 400 | 28px | Lead paragraphs. |
| `{typography.body-md}` | 16px | 400 | 24px | Body text, buttons, nav. |
| `{typography.mono}` | 14px | 400 | 20px | `owner/model-name` IDs, code. |

### Principles
- Bold is reserved for the hero; elsewhere 600 is the heading weight.
- Repository identifiers are always mono so they read as copyable names.
- Metadata stays small and gray so lists remain scannable.

## Layout

### Grid & Container
- **Max width**: 1280px for the main frame; 1024px and 1152px for narrower marketing sections; 672px for centered text.
- **Lists**: model and dataset listings are single-column rows inside a 2- or 3-column showcase on the homepage.
- **Model pages**: tabs (Model card, Files, Community) across the top, a markdown README on the left and a sticky metadata and inference sidebar on the right.

### Spacing
4px base. Rows use 8–12px vertical padding; sections use 64px.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Page background. |
| 1 | `0 1px 2px rgba(0,0,0,0.05)` + hairline | Cards, list rows, inputs (most common). |
| 2 | `0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)` | Hovered cards, menus. |
| 3 | `0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)` | Dropdowns and modals. |
| Inset | `inset 0 2px 4px rgba(0,0,0,0.05)` | Search and code inputs. |

These are Tailwind's `shadow-sm`, `shadow` and `shadow-xl` values.

## Shapes
- `{rounded.md}` 8px — buttons and small cards (most common).
- `{rounded.lg}` 12px — showcase cards and panels.
- `{rounded.sm}` 4px — tags and badges.
- `{rounded.full}` — avatars and organization logos.

## Components

### Buttons
**`button-primary`** — black fill, white label, `{rounded.md}`, padding `4px 14px`, 16px regular ("Explore Models", "View pricing"). Small and quiet.

**`button-secondary`** — white fill, 1px hairline border, ink label, same shape.

### Model / Dataset Row
Avatar or icon · mono repository ID · a line of gray metadata (task icon + name, "Updated 3 days ago", ⬇ downloads, ♥ likes). Rows separate with hairlines; hover lightens to `{colors.canvas-soft}`.

### Space Card
A colorful gradient or emoji thumbnail on top, title and author underneath, a like count in the corner, `{rounded.lg}` corners. Spaces bring most of the color to the page.

### Tags
Small rounded chips for tasks, libraries, languages and licenses, each with a tiny colored icon.

### Navigation
A 65px white top bar: logo, a search field ("Search models, datasets, users…"), then Models · Datasets · Spaces · Docs · Pricing and a sign-in link.

## Do's and Don'ts

### Do
- Keep the UI neutral and let content thumbnails carry the color.
- Use mono for every repository, file and model identifier.
- Use small black 8px buttons; avoid oversized CTAs.
- Show metadata (downloads, likes, updated) on every list item.
- Use the yellow emoji as the single brand mark.

### Don't
- Don't add a saturated brand color to buttons or headings.
- Don't use heavy shadows; stay within Tailwind `sm`–`xl`.
- Don't set long body text in mono.
- Don't replace dense lists with big marketing tiles inside the product.

## Responsive Behavior
- The nav collapses to logo, search icon and a menu button on mobile.
- Showcase columns stack; list rows keep their metadata line but wrap it.
- Model pages move the sidebar under the README.

## Known Gaps
- Measured from the logged-out homepage at 1440px; product pages were not measured individually.
- Yellow and orange brand values are taken from the logo artwork, not from computed page styles.