# Craft · Design system migration spec

> Source: https://www.craft.do  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a premium, calm productivity UI that successfully balances utility with expressive, illustrative design.

## 1. Identity DNA

Craft presents itself as a refined digital notebook for modern thinkers, an identity built on the principles of elegance, thoughtfulness, and productive calm. Its design system is a structured framework that supports expressive creativity without sacrificing clarity or focus.

**One-liner:** A premium, calm productivity workspace blending structure with expressive creativity.
**Keywords:** elegant · thoughtful · productive · structured · calm
**Analogy:** A refined digital notebook for modern thinkers.

## 2. Color

The palette is defined by a stark, high-contrast foundation of ink-black on clean white, ensuring exceptional readability for text and UI elements. This binary core is softened and decorated by the inclusion of soft, muted pastels within illustrative components.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--bg-quiet` | `#EBEBEB` | quiet area |
| `--ink` | `#030302` | body text |
| `--ink-soft` | `#4A4A4A` | secondary text |
| `--muted` | `#E1E1E1` | placeholder |
| `--muted-soft` | `#8C8C8C` | weak hint |
| `--line` | `rgba(3,3,2,0.09)` | divider |

**Color principle:** High-contrast ink on clean backgrounds for readability, accented by soft pastels in illustrations.

The guiding principle is clarity through contrast, using decorative color sparingly and purposefully to accent, never to dominate.

## 3. Typography

The typographic voice pairs elegant transitional-serif fonts for display headlines with clean geometric-sans for all body and interface copy. This duality establishes a thoughtful, editorial tone for content while maintaining the crisp clarity required for functional navigation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 500 | -1.2px | Hero headlines and primary section titles. |

**Type rules:**
- Use serif for display headlines to convey elegance and thoughtfulness.
- Use sans-serif for all body copy, navigation, and UI elements for clarity.
- Maintain tight negative letter-spacing on display fonts.

## 4. Spacing

Generous whitespace defines the vertical rhythm, creating a calm and breathable reading experience.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace to create a calm, breathable reading experience.

## 5. Surfaces

Depth is conveyed not through heavy shadows but through a delicate interplay of subtle drop shadows and a nearly transparent border. These elements provide just enough separation to lift surfaces from the background without visual weight.

- **Radius:** sm 4px · md 14px · lg 24px · pill 999px
- **Shadows:**
  - 0px 20px 40px 0px rgba(0, 0, 0, 0.05)
  - 0px 3px 10px 0px rgba(0, 0, 0, 0.08)
- **Borders:** 1px solid rgba(3,3,2,0.09)

## 6. Layout

The structural skeleton is a clean, centered vertical layout with a strong typographic hierarchy. Spacious sections and generous margins guide the eye downward, creating a focused and linear path through the content.

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

**Skeleton:** A clean, centered vertical layout with a strong typographic hierarchy and spacious sections.

## 7. Motion & Interaction

Motion in Craft is refined and minimal, philosophy rooted in utility rather than flourish. It employs smooth, predictable color and opacity transitions on interactive states to provide immediate, crisp feedback without distraction.

- **Durations:** micro 150ms · small 200ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and opacity transitions on hover states.

- **Hover:** Subtle background color shifts or opacity changes.
- **Click:** Immediate, crisp response.
- **Transition:** 0.2s cubic-bezier(0.4, 0, 0.2, 1) for most interactive elements.
- **Keyboard:** Standard focus rings implied by accessibility standards.

## 8. Voice & Don'ts

The editorial voice is inviting, thoughtful, and empowering, favoring clear, benefit-oriented statements over technical jargon. This tone mirrors the system's calm aesthetic, focusing on direct encouragement and immediate value.

- **Tone:** Inviting, thoughtful, and empowering.
- **Headline style:** Clear, benefit-oriented statements using elegant serif typography.
- **CTA style:** Direct and encouraging, focusing on immediate value (e.g., 'Try Craft Free').
- **Avoid:** Jargon-heavy or overly technical language. / Aggressive or loud promotional tones.

### Don'ts
- ❌ Don't use a single accent color for everything — screenshot shows diverse pastel colors in illustrations.
- ❌ Don't use heavy drop shadows — screenshot shows subtle, soft shadows for depth.
- ❌ Don't use all-caps for body text — screenshot shows uppercase only for small category labels.
- ❌ Don't use a dark mode interface — screenshot shows a predominantly light, bright background.
- ❌ Don't use sharp, square corners — screenshot shows highly rounded corners (up to 24px or pill shapes).
- ❌ Don't use rigid, grid-heavy layouts — screenshot shows a more organic, flowing arrangement in illustrations.

The system deliberately avoids aggressive or loud promotional tones, sharp corners, heavy shadows, and the overuse of a single high-chroma accent color.

## System Prompt (paste into AI tool)

```
This design represents a premium, calm productivity tool blending structured organization with expressive creativity. It utilizes a high-contrast palette centered on ink-black (#030302) against clean white (#FFFFFF) surfaces. The typography pairs elegant transitional-serif fonts for display headlines with clean geometric-sans for body text and UI. Key hex colors include #030302, #FFFFFF, and a subtle border color of rgba(3,3,2,0.09). Critical donts include: do not use aggressive drop shadows, do not use sharp corners, and do not rely on a single high-chroma accent color. The layout emphasizes generous whitespace and a centered vertical flow, creating a breathable, focused user experience.
```
