CURATED · OPEN · FREE

Hugging Face

A friendly, high-utility platform for the AI community to collaborate on models, datasets, and apps.

aicommunityplayful

↓ Download design system (16 MB)Open in OpenDesign

Visit: https://huggingface.co

📦 Browse pack contents →

Identity DNA

CollaborativeTechnicalFriendlyOpen-sourceAI

A bustling digital town square for machine learning engineers and researchers.

Color

#000000Ink

#3D4654Ink soft

#FFFFFFBG

#F3F4F6BG soft

#F8F9FABG quiet

#6B7280Muted

rgba(229, 231, 235, 1)Line

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

Typography

humanist-sans · monospace

display56px · 700
h132px · 700
h220px · 600
body16px · 400
caption12px · 400

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 8px grid with tight 4px micro-spacing.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid #E5E7EB

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle color transitions on hover · Scale and translate transforms on interactive elements

Lighten background or change border color with 0.15s ease. · Subtle scale down transform.

Components

button Dark navy filled buttons with white text and pill radius, or transparent with borders.
card White cards with light gray borders and 12px border-radius, used for features and organization listings.
chip Small, rounded tags with light gray backgrounds for categories like tasks and libraries.
input Rounded search fields with subtle gray borders and internal padding.
hero Dark navy to black gradient background with large white text and prominent mascot.

Voice & Don'ts

Tone Friendly, collaborative, and technically precise.
Headlines Bold, declarative statements emphasizing community and building.
CTAs Direct and action-oriented (e.g., 'Explore', 'Browse').

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.
Avoid: Overly corporate jargon
Avoid: Aggressive sales language
Avoid: Complex academic terminology in primary UI

Inside the pack — real screenshots

Hugging Face — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko