# Things · Design system migration spec

> Source: https://culturedcode.com/things  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of refined, Apple-style minimalism applied to a consumer productivity tool, prioritizing clarity and ease of use over visual noise.

## 1. Identity DNA

The Things design system is built on the principle of a calm, organized workspace. Every element serves a functional purpose, with visual noise eliminated to support focused, mindful interaction.

**One-liner:** A premium, minimalist personal task manager emphasizing clarity and ease of use.
**Keywords:** minimalist · functional · clear · premium
**Analogy:** A calm, organized workspace.

## 2. Color

The color system is one of deliberate restraint, built around a soft neutral background and a single, functional blue accent. This approach ensures clarity and directs attention only where it is needed.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F2F5F7` | main background |
| `--ink` | `#303336` | body text |
| `--muted` | `#55606E` | placeholder |
| `--accent` | `#4F91FB` | single accent |
| `--line` | `rgba(0, 15, 36, 0.46)` | divider |

**Color principle:** High-contrast text on a soft, neutral background with a single functional blue accent.

The guiding principle is utility over decoration; color is a tool for hierarchy and interaction, not expression.

## 3. Typography

Typography uses a humanist sans-serif voice, set in two clear roles: heavy weight for commanding headings and a standard weight for comfortable, long-form reading. The scale establishes a clear information hierarchy from hero to metadata.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 800 | -1px | Main hero heading |
| heading | 32px | 1.2 | 700 | -0.5px | Section headings |
| body-lg | 20px | 1.4 | 400 | 0 | Lead paragraph |
| body | 16px | 1.5 | 400 | 0 | General body text |
| caption | 14px | 1.4 | 400 | 0 | Metadata and captions |

**Type rules:**
- Display headings use weight 800 with tight tracking.
- Body text uses weight 400 for maximum readability.
- Links use the blue accent color without underlines.

## 4. Spacing

Generous whitespace is the rhythm of the layout, creating a breathable canvas where content can be absorbed without strain.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 px
- **Rhythm:** generous whitespace to create a calm, breathable layout

## 5. Surfaces

Surfaces are defined by subtle depth through soft shadows and faint borders, creating a light, layered interface that feels present but unobtrusive. The visual language avoids heavy shadows or aggressive borders in favor of delicate cues.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 4px 12px rgba(0, 15, 36, 0.08)
- **Borders:** 1px solid rgba(0, 15, 36, 0.1)

## 6. Layout

The structural skeleton is a centered, single-column layout with wide margins, focusing content into a clear, readable channel. This constraint reinforces the system's emphasis on clarity and linear progression.

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

**Skeleton:** Centered single-column layout with wide margins

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, understated transitions that guide without distracting. Fade-ins and subtle hover states provide feedback while maintaining the overall sense of calm and control.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth fade-ins
  - Subtle hover state transitions

- **Hover:** Subtle color shifts or opacity changes
- **Click:** Immediate visual feedback
- **Transition:** Smooth transitions on interactive elements
- **Keyboard:** Standard focus outlines

## 8. Voice & Don'ts

The editorial voice is professional, helpful, and understated. Headlines are direct and descriptive, calls to action are clear, and the tone avoids excess punctuation or casual slang in favor of precise communication.

- **Tone:** Professional, helpful, and understated
- **Headline style:** Direct and descriptive
- **CTA style:** Clear and action-oriented
- **Avoid:** Excessive punctuation / All-caps shouting / Overly casual slang

### Don'ts
- ❌ Don't use dark mode — screenshot shows a light gray background (#F2F5F7) instead.
- ❌ Don't use decorative serif fonts — screenshot shows humanist-sans for all text instead.
- ❌ Don't use multiple bright accent colors — screenshot shows only blue (#4F91FB) as a single functional accent instead.
- ❌ Don't use tight, cramped spacing — screenshot shows generous vertical and horizontal margins instead.
- ❌ Don't use heavy drop shadows — screenshot shows soft, subtle shadows instead.
- ❌ Don't use aggressive, angular border-radius — screenshot shows soft, rounded corners (up to 18px) instead.

The system deliberately forgoes dark mode, decorative serif fonts, multiple bright accents, and cramped layouts in its commitment to functional minimalism.

## System Prompt (paste into AI tool)

```
The Things website uses a calm, minimalist design centered around a soft light gray background (#F2F5F7) and dark charcoal text (#303336). A single functional blue accent (#4F91FB) is used for links and interactive elements. The typography consists of humanist-sans-serif fonts, with heavy weight 800 for the main display heading and standard weight 400 for body text. The layout is single-column and highly breathable, using generous whitespace to emphasize clarity and focus. Critical constraints: Do not use dark mode; do not introduce serif typography; do not add multiple bright colors; avoid cramped layouts; avoid aggressive shadows; avoid sharp, angular borders.
```
