# Capacities · Design system migration spec

> Source: https://capacities.io  ·  Curated by OpenDesign  ·  en

> Worth including as a premier example of 'Calm Tech' design, successfully blending the spatial logic of a productivity tool with the refined aesthetics of an editorial or studio site.

## 1. Identity DNA

Capacities is conceived as a minimalist design studio where ideas are treated as tangible objects. The system is built for a single, clear purpose: to be a home for everything you think, learn, and create.

**One-liner:** A home for everything you think, learn, and create.
**Keywords:** knowledge management · object-based · connected notes · studio for your mind
**Analogy:** A minimalist design studio where ideas are treated as tangible objects.

## 2. Color

The color system is built on a foundation of warm, earthy neutrals—a near-black ink paired with a soft, off-white background—and punctuated by a single, sophisticated gold accent for key highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFBFA` | main background |
| `--bg-soft` | `#FFF9EB` | card background |
| `--bg-quiet` | `#F5F4F2` | quiet area |
| `--ink` | `#1C1917` | body text |
| `--ink-soft` | `#57534E` | secondary text |
| `--muted` | `#A8A29E` | placeholder |
| `--muted-soft` | `#E7E5E4` | weak hint |
| `--accent` | `#F59E0B` | single accent |
| `--line` | `rgba(0,0,0,0.06)` | divider |

**Color principle:** Warm, earthy neutrals grounded in near-black, with a single warm gold accent.

The principle is one of restrained contrast, where warmth grounds the interface and a single metallic note draws the eye to primary actions.

## 3. Typography

The typographic voice is calm and intellectual, pairing a geometric sans-serif for commanding display headlines with a humanist sans-serif for comfortable, readable body text. This hierarchy ensures a clear distinction between headline impact and textual flow.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 700 | -2px | Hero headline |
| h2 | 40px | 1.15 | 700 | -1px | Section headline |
| h3 | 24px | 1.3 | 600 | -0.5px | Sub-section headline |
| body | 16px | 1.6 | 400 | 0 | Body text |
| small | 14px | 1.5 | 400 | 0 | Captions and metadata |

**Type rules:**
- Display headlines use tight negative tracking
- Body text maintains a comfortable 1.6 line-height for readability
- Mono font is reserved exclusively for code blocks and technical snippets

## 4. Spacing

All elements align to a consistent 4px grid, establishing a precise rhythm that is balanced by exceptionally generous section padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Consistent 4px grid with generous section padding (128px) to create breathing room.

## 5. Surfaces

Depth is achieved not through heavy ornamentation, but through a vocabulary of very soft, diffused drop shadows and subtle, warm-gray borders. These elements gently lift cards and floating UI previews from the warm background.

- **Radius:** sm 6px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 2px rgba(0,0,0,0.04)
  - 0 4px 12px rgba(0,0,0,0.08)
  - 0 20px 40px -4px rgba(0,0,0,0.12)
- **Borders:** Very subtle, 1px solid borders in a warm light gray.

## 6. Layout

The layout begins with a singular, centered column for the hero statement, then expands into a structured, multi-column feature grid. This skeleton provides focus before revealing the product's breadth.

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

**Skeleton:** Single column centered hero transitioning into a multi-column feature grid.

## 7. Motion & Interaction

Motion is functional and discreet, philosophy is one of minimal, purposeful animation. Subtle hover transitions and quick opacity fades for overlays provide feedback without diverting attention.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle hover transitions on interactive elements
  - Opacity fades for modal or overlay appearances

- **Hover:** Subtle background color change or opacity shift.
- **Click:** Immediate visual feedback via color darkening or slight scale reduction.
- **Transition:** Smooth, 0.15s to 0.2s ease-out transitions for most state changes.
- **Keyboard:** Standard focus rings following OS defaults.

## 8. Voice & Don'ts

The editorial voice is direct, benefit-driven, and confident, avoiding technical jargon and aggressive sales language in favor of clear, action-oriented statements. It communicates with the calm authority of a well-crafted tool.

- **Tone:** Calm, intellectual, and confident.
- **Headline style:** Direct, benefit-driven statements that are easy to scan.
- **CTA style:** Action-oriented and clear, using simple verbs like 'Start Free' or 'Discover Product'.
- **Avoid:** Overly technical jargon / Aggressive sales language / Excessive punctuation / Vague or buzzword-heavy descriptions

### Don'ts
- ❌ Don't use a pure cold white — the screenshot shows a warm, off-white background (#FBFBFA).
- ❌ Don't use sharp corners — the cards and buttons in the screenshot have distinct rounding (8px-12px).
- ❌ Don't use bright, neon accents — the screenshot uses a warm, muted gold (#F59E0B) as the primary accent.
- ❌ Don't use dense, cramped layouts — the screenshot shows generous whitespace and padding (128px).
- ❌ Don't use decorative serifs for headlines — the screenshot shows a clean, geometric sans-serif display font.
- ❌ Don't use heavy drop shadows — the screenshot uses very soft, diffused shadows for depth.

The system deliberately omits decorative serifs, clinical cold whites, neon accents, and dense, cramped layouts to preserve its refined, studio-like atmosphere.

## System Prompt (paste into AI tool)

```
Capacities is a clean, refined productivity tool designed as a 'studio for your mind.' It uses a warm, off-white background (#FBFBFA) paired with near-black ink (#1C1917) and a single gold accent (#F59E0B) for highlights. The typography features a geometric sans for display and a humanist sans for body text, creating a calm and intellectual tone. The layout is spacious, with a 1280px container, 128px section padding, and generous use of whitespace. Cards are soft and elevated with subtle shadows. Critical donts: never use a cold, clinical white; never use sharp corners on cards; never use aggressive or neon colors; avoid dense, cramped layouts; never use decorative serifs for headlines; and never use heavy, harsh drop shadows.
```