# Tana · Design system migration spec

> Source: https://tana.inc  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of blending editorial elegance (serif headlines) with modern SaaS utility (clean UI, rounded cards).

## 1. Identity DNA

Tana's visual identity is built on a precise tension: the classicism of an editorial masthead applied to the interactive canvas of a modern software tool. It functions like a well-appointed study, where the weight of a serif headline provides gravitas, and the clarity of a sans-serif interface ensures focused, productive work.

**One-liner:** A premium productivity tool that uses editorial typography and warm, human photography to make meetings feel like active work.
**Keywords:** Productivity · Meetings · Notes · AI · Collaboration · Workflow
**Analogy:** A sleek, high-end productivity application that blends classic editorial typography with modern app UI patterns.

## 2. Color

The color system is a disciplined exercise in restraint, built on a high-contrast monochrome foundation. Deep charcoal ink sits against a warm, off-white field, with soft peach accents appearing only to mark specific zones or interactive states.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFBFB` | main background |
| `--bg-soft` | `#FFF2EF` | card background |
| `--ink` | `#0C0805` | body text |
| `--ink-soft` | `#3A3A3A` | secondary text |
| `--muted` | `#6A6A6A` | placeholder |
| `--line` | `rgba(12,8,5,0.1)` | divider |

**Color principle:** Warm, high-contrast monochrome palette with soft peach accents, prioritizing readability and premium feel.

This strict palette ensures content and functionality remain the primary focus, with color serving as a subtle signal rather than a dominant decoration.

## 3. Typography

The typographic voice is defined by a clear hierarchy between display and body text, assigning distinct roles to each category. A **Didone Serif** (Source Serif 4) provides the authoritative, elegant headlines, while a **Humanist Sans** (Inter) delivers the neutral, highly legible interface and body copy.

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.05 | 400 | -2.16px | Main hero headline |
| headline | 48px | 1.1 | 400 | -1.44px | Section headlines |
| body | 17px | 1.5 | 400 | 0px | Paragraphs and descriptions |
| nav | 15px | 1.5 | 400 | 0px | Navigation links |

**Type rules:**
- Use Didone Serif (Source Serif 4) for large display text and headlines.
- Use Humanist Sans (Inter) for body copy, UI elements, and navigation.
- Maintain tight negative letter spacing for display text.

## 4. Spacing

A strict 4px base rhythm governs all spatial decisions, creating a consistent and harmonious grid throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Use 4px base increments for consistent rhythm, ensuring generous padding (24px-48px) in cards and sections.

## 5. Surfaces

Depth is communicated through soft, elevated shadows that lift surfaces from the background without harsh edges. Borders, when used, are whisper-thin and semi-transparent, providing delineation with minimal visual noise.

- **Radius:** sm 6px · md 14px · lg 20px · pill 999px
- **Shadows:**
  - rgba(20, 22, 36, 0.1) 0px 6px 18px -12px
  - rgba(20, 22, 36, 0.28) 0px 40px 96px -28px
- **Borders:** Subtle 1px borders using rgba(12,8,5,0.1) for separation.

## 6. Layout

The foundational layout is a centered, single-column column for primary focus areas like the hero. This skeleton expands into a grid for denser content, but always returns to a clear, vertical flow anchored by generous whitespace.

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

**Skeleton:** Centered single-column layout for hero sections, expanding to grid for content.

## 7. Motion & Interaction

Motion is treated as functional feedback, not flourish. Transitions are brief and smooth, relying on opacity and subtle scale changes to confirm interactions without disrupting the user's cognitive flow.

- **Durations:** micro 120ms · small 160ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover and click.

- **Hover:** Subtle opacity reduction or background color change.
- **Click:** Scale down slightly (transform) or opacity change.
- **Transition:** All properties transitioned over 120ms-160ms for UI elements.
- **Keyboard:** Standard focus rings using subtle shadows or borders.

## 8. Voice & Don'ts

The editorial voice is confident and direct, using short, impactful statements. It favors benefit-oriented language and occasional italic emphasis over superlatives or decorative punctuation.

- **Tone:** Confident, professional, and slightly editorial.
- **Headline style:** Short, impactful statements, often using a single emphasized word in italics.
- **CTA style:** Direct and benefit-oriented, e.g., 'Start free trial'.
- **Avoid:** Excessive punctuation / ALL CAPS for body text / Overly technical jargon

### Don'ts
- ❌ Don't use vibrant, high-chroma accent colors — screenshot shows a mostly monochrome palette with warm, soft accents.
- ❌ Don't use a geometric or technical sans-serif for headlines — screenshot shows elegant serif typography.
- ❌ Don't use dark mode as the default — screenshot shows a light, off-white background (#FBFBFB).
- ❌ Don't use sharp, square corners — screenshot shows large border-radii (14px, 20px) on all cards and buttons.
- ❌ Don't clutter the layout with dense grids — screenshot shows generous whitespace and a focused, centered hero.
- ❌ Don't use playful or cartoonish illustrations — screenshot relies on high-quality, cinematic photography.

The system deliberately avoids vibrant chromatic accents, sharp geometric corners, and dark-mode defaults to preserve its warm, human, and premium character.

## System Prompt (paste into AI tool)

```
Tana is a premium productivity tool that blends classic editorial design with modern app UI. The visual system uses a didone-serif (Source Serif 4) for large display headlines and a humanist-sans (Inter) for all body copy and UI elements. The primary color palette is a high-contrast monochrome (ink #0C0805 on off-white #FBFBFB) with a soft peach/warm accent (#FFF2EF) in specific sections. Critical constraints: Never use vibrant, high-chroma accent colors; always use soft, rounded corners (14px-20px radius); and ensure generous vertical whitespace (24px-96px) to maintain a premium, editorial feel. The tone is confident and professional, using short, impactful headlines with occasional italic emphasis.
```
