# Typewolf · Design system migration spec

> Source: https://www.typewolf.com  ·  Curated by OpenDesign  ·  en

> An excellent reference for how to build a sophisticated, typography-first editorial site using a highly restrained color palette and elegant serif fonts.

## 1. Identity DNA

The design system for Typewolf functions like a refined, well-curated library for typography enthusiasts. It is built on a foundation of restrained elegance, where every element serves to support the discovery and appreciation of type.

**One-liner:** A refined editorial platform for discovering and curating modern typography.
**Keywords:** Typography · Curation · Reference · Editorial · Typography
**Analogy:** A refined, well-curated library for typography enthusiasts.

## 2. Color

The color system is a warm, muted, desaturated palette anchored by soft grayish-pink backgrounds and deep brownish-ink text. This creates a refined and quiet atmosphere, using white cards and subtle shadows for layered depth.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#e6ddde` | main background |
| `--bg-soft` | `#f8f5f5` | card background |
| `--ink` | `#2e2c2c` | body text |
| `--ink-soft` | `#443235` | secondary text |
| `--muted` | `#654a4e` | placeholder |
| `--muted-soft` | `#916a70` | weak hint |
| `--line` | `rgba(101, 74, 78, 0.3)` | divider |

**Color principle:** Warm, muted earthy palette anchored by deep brownish-ink, using white cards and subtle shadows for layered depth.

The guiding principle is to maintain warmth and subtlety, allowing typographic content to remain the primary focus.

## 3. Typography

The typographic voice is established by a transitional-serif for major display and heading text, maintaining a refined editorial aesthetic. This is contrasted with a humanist-sans for navigation labels, small meta text, and uppercase UI elements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 700 | -2px | Main logo 'Typewolf' heading |
| heading-1 | 32px | 1.2 | 400 | -0.5px | Section headings like 'Alternative Lists' |
| heading-2 | 28px | 1.2 | 400 | -0.5px | Card titles like 'By the Numbers' |
| body | 16px | 1.5 | 400 | 0px | General body text and descriptions |
| label | 13px | 1.3 | 900 | -0.4px | Navigation links and category labels in uppercase |

**Type rules:**
- Use transitional-serif for all major display and heading text to maintain the refined editorial aesthetic.
- Use humanist-sans for navigation labels, small meta text, and uppercase UI elements.
- Maintain tight negative letter-spacing for large display text and navigation labels.

## 4. Spacing

Spacing is governed by a consistent 4px grid rhythm, providing ample breathing room between sections and within components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent spacing based on a 4px grid, providing ample breathing room between sections and within components.

## 5. Surfaces

Surfaces achieve depth through clean white cards elevated by a single, subtle, warm box-shadow. Borders are used sparingly, defined by a thin, semi-transparent rule that does not compete with the soft shadows.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(145, 106, 112, 0.15) 0px 6px 24px 0px
- **Borders:** 1px solid rgba(101, 74, 78, 0.3)

## 6. Layout

The layout skeleton is a centered, single-column arrangement anchored by a prominent header. This flows into a responsive 2-column grid of content cards, creating an editorial and slightly organic structure despite its underlying order.

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

**Skeleton:** A centered, single-column layout with a prominent header, followed by a responsive 2-column grid of content cards.

## 7. Motion & Interaction

The motion philosophy is one of restraint, using only smooth background and color transitions on hover states. Subtle elevation changes via box-shadow transitions provide feedback without visual noise, all standardized to a 0.3s ease-out timing.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth background and color transitions on hover states.
  - Subtle elevation changes via box-shadow transitions.

- **Hover:** Subtle changes in background color or text color to indicate interactivity.
- **Click:** Immediate visual feedback with smooth transitions.
- **Transition:** Standardized 0.3s ease-out transitions for background, color, and box-shadow properties.
- **Keyboard:** Standard browser default focus outlines, as no custom focus states are visually prominent.

## 8. Voice & Don'ts

The editorial voice is knowledgeable, refined, and authoritative, speaking directly to a design-literate audience. It uses elegant, serif headlines with tight letter-spacing and understated, uppercase sans-serif text links for calls-to-action.

- **Tone:** Knowledgeable, refined, and authoritative, speaking directly to a design-literate audience.
- **Headline style:** Elegant, often using transitional-serif fonts with tight letter-spacing.
- **CTA style:** Understated, using bold, uppercase sans-serif text links rather than prominent buttons.
- **Avoid:** Flashy animations / Vibrant neon colors / Overly dense layouts / Technical jargon / Playful or cartoonish elements

### Don'ts
- ❌ Don't use vibrant, high-saturation colors — the palette relies on warm, muted, desaturated earth tones.
- ❌ Don't use geometric sans-serif for all text — the primary display font is a transitional serif.
- ❌ Don't use heavy drop shadows or 3D effects — elevation is achieved through very subtle, warm box-shadows.
- ❌ Don't use a strictly strict, rigid grid — the layout feels editorial and slightly organic despite the underlying structure.
- ❌ Don't use uppercase for body copy — uppercase is reserved strictly for small navigation labels and meta tags.
- ❌ Don't center all text alignment — while the hero is centered, much of the subsequent content uses left or mixed alignment.

The system deliberately avoids flashy animations, vibrant neon colors, overly dense layouts, and playful or cartoonish elements.

## System Prompt (paste into AI tool)

```
This is a refined editorial platform focused on typography curation and discovery. The design DNA is anchored by a warm, muted, desaturated earthy palette, using a soft grayish-pink background and deep brownish-ink for text. The primary typography relies heavily on a transitional serif for elegant display headings, contrasted with a bold humanist sans for uppercase navigation and metadata. White card components with subtle warm shadows create layered depth without harsh borders. Key critical donts: do not use vibrant neon colors, do not use geometric sans-serifs for primary display text, do not use heavy 3D effects, do not use uppercase for body copy, do not create overly dense layouts. The overall aesthetic is sophisticated, quiet, and highly focused on readability and typographic excellence.
```
