CURATED · OPEN · FREE

Variable Fonts

A clean, typography-focused resource hub for variable fonts and brand case studies.

TypographyEditorialCleanCurationReference

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://variable-fonts.com

📦 Browse pack contents →

Identity DNA

TypographyVariable FontsFoundryExpertiseDesign

A refined design library and resource hub

Color

#1A73E8Accent

#1E242CInk

#576579Ink soft

#FFFFFFBG

#FCFCFDBG soft

#E7EAEABG quiet

rgba(231, 234, 238, 1)Line

Clean, high-contrast neutral canvas with a single functional blue accent

Typography

grotesque-sans · monospace

display56px · 500
h224px · 500
body16px · 400

Use standard system fallback stacks (Helvetica, Arial) for consistent UI rendering · Maintain a modular scale for clear typographic hierarchy · Keep body text weight at 400 for optimal readability

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

Standard 4px grid system with consistent 24px gutters

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

1px solid #E7EAEA

0px 1px 6px rgba(0, 0, 0, 0.06) · 0px 11px 15px rgba(0, 0, 0, 0.05)

Layout

1280container

3columns

24pxgutter

768 / 1024breakpoints

Responsive 3-column card grid that stacks on mobile

Motion & Interaction

220msmicro

300mssmall

500msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Subtle shadow and transform transitions on card hover · Smooth fade-ins for content loading

Increase shadow depth and slight scale on interactive cards · Immediate visual feedback with subtle state changes

Components

button Functional blue accent button with white text and slight border-radius
card Image-heavy cards with 16px rounded corners and subtle hover shadows
chip Simple text-based category chips separated by dots
input Minimal search input field
hero Large, left-aligned typographic hero section

Voice & Don'ts

Tone Professional, authoritative, and educational
Headlines Bold, direct, and subject-focused
CTAs Clear and action-oriented (e.g., 'Speak to sales')

Don't use overly decorative serif fonts — screenshot shows a clean grotesque-sans system
Don't add heavy drop shadows — screenshot shows only very subtle box shadows
Don't center all text — screenshot shows left-aligned headings and body copy
Don't use multiple accent colors — screenshot shows a single functional blue
Don't use tight line-heights for long text — screenshot shows comfortable 1.5 line-heights
Don't use rounded corners on all elements — screenshot shows a mix of sharp and rounded cards
Avoid: Avoid overly casual language or slang
Avoid: Avoid cluttered layouts that distract from typography
Avoid: Avoid unnecessary animations that disrupt reading

Inside the pack — real screenshots

Variable Fonts — 桌面首屏（hero） — 桌面首屏（hero）

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

Captured from the live site · real computed styles

System prompt

This is a professional typography resource hub and foundry website. It uses a clean, high-contrast palette centered on white (#FFFFFF) and deep navy ink (#1E242C), with a single functional blue accent (#1A73E8) for primary actions. The typography relies on standard grotesque-sans categories for both display and body text, utilizing Helvetica and Arial fallback stacks. The layout is a spacious, left-aligned structure with generous whitespace. Critical design rules: maintain the strict single-accent color system, preserve the clean typographic hierarchy, and use subtle, functional shadows instead of heavy decorative ones. Avoid cluttered UI or overly playful elements that would detract from the authoritative, educational tone.

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