# Anytype · Design system migration spec

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

> This design is an excellent example of a premium, trustworthy aesthetic for a SaaS product, using typography and layout rather than color for impact.

## 1. Identity DNA

The Anytype design system is engineered like a digital Swiss vault for your notes and workflows. Its identity is built on a foundation of privacy, local-first principles, and user sovereignty, expressed through a visual language of clarity and control. Every component reinforces the core promise of a secure, self-contained workspace.

**One-liner:** A private, offline-first workspace for digital collaboration.
**Keywords:** privacy · local-first · collaboration · sovereignty · encryption
**Analogy:** a digital Swiss vault for your notes and workflows

## 2. Color

The color system establishes a high-contrast black and white foundation for maximum clarity and legibility. A single warm gradient provides subtle depth in the hero section, while a distinct serif highlight introduces a note of human warmth for strategic emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FFF2D2` | card background |
| `--bg-quiet` | `#FFBCC3` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast black and white foundation with a single warm gradient and a distinct serif highlight for emphasis.

The guiding principle is restraint: one gradient, one accent, and a strict monochromatic hierarchy ensure the interface remains focused and trustworthy.

## 3. Typography

Typography is the primary voice of the system, employing a humanist sans-serif for all functional text to maintain a clean, accessible hierarchy. The only exception is a reserved italicized serif, used exclusively for stylistic emphasis within the hero statement, creating a deliberate point of contrast.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 76px | 1.0 | 300 | -2.4px | Primary hero statement |
| display-emphasis | 76px | 1.0 | 400 | -2.4px | Highlighted serif emphasis within the hero |
| h2 | 24px | 1.0 | 500 | -0.12px | Section headings and feature titles |
| body | 18px | 1.44 | 400 | -0.28px | Main paragraph and descriptive text |
| small | 14px | 1.43 | 400 | -0.12px | Secondary information and navigation |

**Type rules:**
- Use the italicized serif for stylistic emphasis within the hero section only.
- Maintain a strict black and white primary text hierarchy.
- Use generous negative tracking for large display typography.

## 4. Spacing

A consistent 80px vertical rhythm governs the space between major sections, establishing a clear, measured cadence for content consumption.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 120 px
- **Rhythm:** 80px vertical rhythm between major sections

## 5. Surfaces

Surfaces are defined by thin, 1px black outlines that carve out the grid and hero container. This approach forgoes shadows and glows in favor of architectural clarity, using borders and generous whitespace to create structure and depth.

- **Radius:** sm 6px · md 16px · lg 16px · pill 100px
- **Borders:** Thin black outlines (1px) defining grid cells and a hero container with rounded corners

## 6. Layout

The layout skeleton begins with a large, framed hero section that anchors the page. This is followed by a structured, three-column grid for feature cards, separated by a subtle but clear system of outlined cells.

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

**Skeleton:** Large hero section followed by a three-column grid of features, separated by a subtle grid system.

## 7. Motion & Interaction

Motion is restrained and professional, used to confirm state changes rather than decorate. Smooth opacity transitions and standard cubic-bezier easing provide functional feedback for overlays, hover states, and color transitions without drawing attention to itself.

- **Durations:** micro 150ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for overlays and element fades.
  - Standard cubic-bezier easing for background color and border changes.
  - Longer duration (1s) for specific decorative or hero elements.

- **Hover:** Subtle color or opacity transitions.
- **Click:** Standard cursor pointer interaction for buttons and links.
- **Transition:** All properties transition with a standard 0.15s or 0.5s cubic-bezier curve.
- **Keyboard:** Standard focusable elements with default browser outlines.

## 8. Voice & Don'ts

The editorial voice is direct, reassuring, and focused on user control, using large, impactful statements to convey confidence. Clarity is paramount, avoiding technical jargon, aggressive sales language, and complex corporate speak.

- **Tone:** Direct, reassuring, and focused on user control and privacy.
- **Headline style:** Large, impactful statements with occasional serif italics for warmth.
- **CTA style:** Clear, action-oriented text inside high-contrast pill buttons.
- **Avoid:** technical jargon / aggressive sales language / complex corporate speak / bright neon colors

### Don'ts
- ❌ don't use multiple bright accent colors — the screenshot shows a predominantly black, white, and muted gradient palette
- ❌ don't use heavy drop shadows or glows — the screenshot shows flat, outlined elements with no shadows
- ❌ don't use a dense, cramped layout — the screenshot shows generous whitespace and a clear grid structure
- ❌ don't use thick, rounded containers — the screenshot shows thin (1px) black borders for most sections
- ❌ don't use an all-serif typography system — the screenshot shows a sans-serif foundation with serif used only for emphasis
- ❌ don't use a dark mode as the primary theme — the screenshot shows a white background with black text

The system deliberately avoids multiple high-chroma accent colors, heavy drop shadows, and dense layouts, committing fully to a palette and spatial rhythm built on restraint and clarity.

## System Prompt (paste into AI tool)

```
This is a clean, privacy-focused productivity app landing page. Use a black and white foundation with a warm, subtle gradient in the hero background. The primary typography is a humanist sans-serif (inter), used with generous negative tracking for headlines, and a serif font for italicized emphasis. The layout is structured and grid-based, using thin black borders to define sections. Maintain high contrast and ample whitespace. Do not use drop shadows, avoid dense layouts, and never use multiple high-chroma accent colors. Focus the design on clarity, sovereignty, and a refined, non-aggressive aesthetic.
```