# Variable Fonts · Design system migration spec

> Source: https://variable-fonts.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a clean, typography-focused design system that prioritizes readability and professional authority.

## 1. Identity DNA

Variable-fonts.com operates as a refined design library, its system structured with the precision of a well-indexed archive. Every element serves the central purpose of showcasing typographic specimens with clarity and authority.

**One-liner:** A clean, typography-focused resource hub for variable fonts and brand case studies.
**Keywords:** Typography · Variable Fonts · Foundry · Expertise · Design
**Analogy:** A refined design library and resource hub

## 2. Color

The palette is a deliberate exercise in restraint: a high-contrast neutral canvas where white and deep navy ink provide the foundational contrast. A single functional blue accent marks primary actions, creating a clear, unambiguous signal within the quiet field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FCFCFD` | card background |
| `--bg-quiet` | `#E7EAEA` | quiet area |
| `--ink` | `#1E242C` | body text |
| `--ink-soft` | `#576579` | secondary text |
| `--muted` | `#576579` | placeholder |
| `--accent` | `#1A73E8` | single accent |
| `--line` | `rgba(231, 234, 238, 1)` | divider |

**Color principle:** Clean, high-contrast neutral canvas with a single functional blue accent

The principle is functional hierarchy through color, where the accent serves navigation, not decoration.

## 3. Typography

The typographic voice is built on standard grotesque-sans categories, using system fallback stacks like Helvetica and Arial for reliable rendering across platforms. This choice grounds the site in a neutral, authoritative tone, letting the variable font specimens themselves become the expressive focal point.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Main page headings |
| h2 | 24px | 1.3 | 500 | 0 | Card titles and subheadings |
| body | 16px | 1.5 | 400 | 0 | Body text and navigation |

**Type rules:**
- 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

## 4. Spacing

A standard 4px grid establishes a consistent spatial rhythm, with 24px gutters providing generous breathing room between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Standard 4px grid system with consistent 24px gutters

## 5. Surfaces

Depth is conveyed through subtlety, not emphasis. Shadows are whisper-thin and functional, appearing only on interactive cards to suggest lift, while borders are faint and structural, delineating space without creating visual noise.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 1px 6px rgba(0, 0, 0, 0.06)
  - 0px 11px 15px rgba(0, 0, 0, 0.05)
- **Borders:** 1px solid #E7EAEA

## 6. Layout

The structural skeleton is a responsive 3-column card grid that elegantly collapses to a single column on mobile. This spacious, left-aligned layout prioritizes content discovery and maintains generous whitespace, allowing typography to dominate the composition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 3 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Responsive 3-column card grid that stacks on mobile

## 7. Motion & Interaction

Motion is minimal and strictly functional, adhering to a philosophy of silent service. All transitions use a consistent 0.3s duration, providing immediate visual feedback for hovers and loads without introducing any unnecessary flourish that would interrupt reading.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle shadow and transform transitions on card hover
  - Smooth fade-ins for content loading

- **Hover:** Increase shadow depth and slight scale on interactive cards
- **Click:** Immediate visual feedback with subtle state changes
- **Transition:** Consistent 0.3s transitions for interactive elements
- **Keyboard:** Standard focus states for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and educational. Headlines are bold and subject-focused, while calls to action are clear and direct, supporting the site's role as a serious reference hub.

- **Tone:** Professional, authoritative, and educational
- **Headline style:** Bold, direct, and subject-focused
- **CTA style:** Clear and action-oriented (e.g., 'Speak to sales')
- **Avoid:** Avoid overly casual language or slang / Avoid cluttered layouts that distract from typography / Avoid unnecessary animations that disrupt reading

### Don'ts
- ❌ 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

What it deliberately doesn't do is entertain; it avoids decorative serifs, heavy shadows, cluttered layouts, and any element that would distract from the core act of typographic study.

## System Prompt (paste into AI tool)

```
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.
```