# Vol · Design system migration spec

> Source: https://vol.co  ·  Curated by OpenDesign  ·  en

> A masterclass in editorial minimalism, using extreme typography lightness and generous whitespace to create a premium feel.

## 1. Identity DNA

Vol's design system is built on the analogy of a high-end independent publishing house, where curation and restraint define the experience. Every element is considered for its role in a gallery-like presentation, prioritizing clarity and whitespace over visual noise. The result is a refined, minimalist framework for showcasing design books and curated products.

**One-liner:** A refined editorial platform for design books and curated products with a clean, monochromatic aesthetic.
**Keywords:** editorial · refined · publishing · curation · minimalist
**Analogy:** A high-end independent publishing house with a gallery-like presentation.

## 2. Color

The color system is a disciplined exercise in high-contrast monochromatics, built entirely on ink and white. This strict palette forces hierarchy through value and typography, creating a clean canvas for photographic content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#949494` | quiet area |
| `--ink` | `#272727` | body text |
| `--ink-soft` | `#717171` | secondary text |
| `--muted` | `#949494` | placeholder |
| `--muted-soft` | `#cdcccc` | weak hint |
| `--line` | `rgba(39,39,39,0.15)` | divider |

**Color principle:** High-contrast monochromatic base relying on white space and typography for hierarchy.

The core principle is absolute restraint: let contrast, not color, do the talking.

## 3. Typography

Typographic voice is defined by extreme lightness, using **weight 300** across all primary text. Generous tracking on uppercase labels and tight negative spacing on large display headlines create a refined, publishing-inspired rhythm.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 300 | -1px | hero headlines |
| heading | 50px | 1.2 | 300 | -1px | section titles |
| body | 20px | 1.4 | 300 | 0px | main body text |

**Type rules:**
- Extremely light weights (300) for all primary typography.
- Large, generous tracking on uppercase navigation and labels.
- Tight negative letter-spacing for large display typography.

## 4. Spacing

Generous vertical whitespace establishes a calm, editorial pace between major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical whitespace between major content blocks to emphasize a calm, editorial pace.

## 5. Surfaces

Surfaces are defined by depth through absence, not shadow. The system employs only thin **1px solid borders** in dark ink, maintaining a flat, graphic quality that defers to photography and type.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin 1px solid borders in dark ink on a light background.

## 6. Layout

The layout skeleton begins with a full-width photographic hero, immediately followed by a centered, spacious grid. This structure prioritizes generous margins and clear content blocks over dense information packing.

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

**Skeleton:** Full-width photographic hero followed by a centered, spacious grid for product or editorial content.

## 7. Motion & Interaction

Motion philosophy is one of quiet reinforcement, using low-velocity transitions that never demand attention. All micro-interactions follow a consistent **0.2s ease-in-out** timing, creating a smooth, predictable rhythm.

- **Durations:** micro 200ms · small 200ms · medium 200ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Subtle 0.2s ease-in-out transitions for standard UI elements like fills and borders.
  - Staggered 0.2s delays for icon transforms.

- **Hover:** Subtle color or border transitions over 0.2 seconds.
- **Click:** Standard pointer cursor with no aggressive tactile feedback.
- **Transition:** Smooth, low-velocity transitions for all interactive elements.
- **Keyboard:** Standard browser focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is sophisticated, understated, and highly professional, mirroring the system's visual restraint. It pairs commanding, light-weight headlines with clean, understated calls to action.

- **Tone:** Sophisticated, understated, and highly professional.
- **Headline style:** Large, light-weight, and commanding.
- **CTA style:** Understated uppercase tracking or solid, clean pill shapes.
- **Avoid:** Loud neon accents / Playful or rounded grotesque fonts / Dense, cluttered information layouts

### Don'ts
- ❌ Don't use saturated neon colors — screenshot shows a strictly monochromatic, high-contrast palette.
- ❌ Don't use heavy, bold font weights — screenshot shows a consistent use of light weights (300) for all text.
- ❌ Don't use small, cramped spacing — screenshot shows generous vertical whitespace between sections.
- ❌ Don't use complex gradients — screenshot shows solid white backgrounds and flat photographic elements.
- ❌ Don't use aggressive drop shadows — screenshot shows completely flat surfaces without any depth effects.
- ❌ Don't use playful, rounded display fonts — screenshot shows refined, light-weight sans-serif and transitional typography.

They deliberately reject saturation, boldness, and density in favor of a pristine, gallery-like quiet.

## System Prompt (paste into AI tool)

```
A refined editorial and publishing platform (vol.co) featuring a minimalist, monochromatic design. The design DNA is built on a high-contrast palette of white (#ffffff) and deep ink (#272727), supported by a secondary gray (#949494). Typography is consistently light-weight (300), utilizing humanist-sans and transitional-serif categories. Key rules: maintain extreme whitespace, avoid bold font weights, and reject any saturated neon colors or complex gradients. The interaction model is calm, using smooth 0.2s ease-in-out transitions for all standard UI elements.
```
