Design tokens (YAML front matter)

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

Source Sans Pro — headlines, body, navigation, buttons. Open source.
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.

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.

Hugging Face

Palette

At a glance

Design System · Hugging Face

Design System Inspiration of Hugging Face

Overview