Hugging Face

Hugging Face sets large Source Sans Pro headlines in a heavy weight on a light bone white canvas. Void (#000000) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 3.35544e+07px and 25.6px on smaller elements.

huggingface.co ↗

Colors

Void

#000000

Primary actions and links

Soft Void

#0b0f19

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void 2

#000000

Headlines and body copy

Type scale

DisplayThe AI community building the future.Source Sans Pro · 48px · 700

HeadingModelsSource Sans Pro · 18px · 600

SubheadingThe collaboration platformSource Sans Pro · 20px · 600

BodyThe platform where the machine learning community collaborates on models, datasets, and apSource Sans Pro · 18px · 400

NavHugging FaceSource Sans Pro · 16px · 400

Buttons

Explore ModelsView pricing

Style reference measured from the public page at huggingface.co on 2026-10-12 for design education. Hugging Face and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Hugging Face — Style Reference
> Hugging Face sets large Source Sans Pro headlines in a heavy weight on a light bone white canvas. Void (#000000) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 3.35544e+07px and 25.6px on smaller elements.

**Theme:** light · **Source:** https://huggingface.co (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void | `#000000` | `--color-accent` | Primary actions and links |
| Soft Void | `#0b0f19` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void 2 | `#000000` | `--color-ink` | Headlines and body copy |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Source Sans Pro | 48px | 700 | 1.00 | 0 |
| Heading | Source Sans Pro | 18px | 600 | 1.56 | 0 |
| Subheading | Source Sans Pro | 20px | 600 | 1.40 | 0 |
| Body | Source Sans Pro | 18px | 400 | 1.56 | 0 |
| Nav | Source Sans Pro | 16px | 400 | 1.50 | 0 |

Font families on the page: Source Sans Pro, IBM Plex Mono. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 8px, 3.35544e+07px, 25.6px, 12px, 4px
- Primary button: background `#000000`, text `#ffffff`, radius 8px, padding 4px 14px, 16px / 400

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer