# Writer · Design system migration spec

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

> A strong example of modern B2B SaaS design that balances editorial authority with functional clarity.

## 1. Identity DNA

The Writer design system is structured as an enterprise-grade command center for AI-driven content. Its identity DNA is defined by keywords of Enterprise AI, Scalability, Trust, and Professionalism, all expressed through a stark, high-contrast monochrome core with a single, deliberate violet accent.

**One-liner:** An enterprise AI platform for scaling brand-consistent execution with autonomous agents.
**Keywords:** Enterprise AI · Scalability · Trust · Professionalism
**Analogy:** An enterprise-grade command center for AI-driven content and workflow execution.

## 2. Color

The color system is defined by a clean, high-contrast monochrome palette featuring a single dominant violet accent for emphasis and action. This strict adherence to a one-chroma approach ensures visual focus and reinforces the platform's authoritative tone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E4E9FF` | card background |
| `--bg-quiet` | `#F3F3F3` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#2D2D2D` | secondary text |
| `--muted` | `#BDBDBD` | placeholder |
| `--muted-soft` | `#D2D4D7` | weak hint |
| `--accent` | `#5551FF` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome core with a single high-chroma violet accent for primary CTAs and emphasis.

The governing principle is the exclusive use of a high-chroma violet as the sole non-monochrome color, with no secondary accents permitted.

## 3. Typography

Typography employs a clear dual-category approach: a transitional serif for headlines to convey authority and elegance, paired with a clean geometric sans for body text and UI to ensure high readability. Extensive uppercase tracking is applied to labels and navigation to add structural clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -2px | Hero and section headlines |
| body | 16px | 1.2 | 400 | 0px | Primary body text and UI elements |

**Type rules:**
- Headlines use a transitional serif for authority and elegance.
- Body text and UI use a clean geometric sans for high readability.
- Uppercase tracking is used extensively for labels and navigation to add structure.

## 4. Spacing

A strict 8px baseline grid underpins the entire system, with generous vertical whitespace used to maintain a premium, uncluttered feel.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px baseline grid with generous vertical whitespace to maintain a premium, uncluttered feel.

## 5. Surfaces

Depth is communicated through subtle, purposeful means. Clean, rounded-corner cards and inputs are defined by light 1px borders and minimal box-shadows, preventing visual noise while establishing clear hierarchy.

- **Radius:** sm 4px · md 12px · lg 12px · pill 999px
- **Shadows:**
  - rgb(243, 243, 243) 0px 2px 4px 0px
  - rgba(191, 203, 255, 0.25) 0px 1px 8px 0px
- **Borders:** Subtle 1px borders used to define inputs and card edges without adding visual noise.

## 6. Layout

The layout skeleton prioritizes content clarity through a centered single-column flow for primary reading. This transitions into clean two-column layouts for feature showcases, all supported by generous padding.

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

**Skeleton:** Centered single-column flow for content, with two-column layouts for feature showcases.

## 7. Motion & Interaction

Motion is treated as functional feedback rather than decoration. The philosophy centers on smooth, restrained micro-animations focused on color shifts and subtle transforms for interactive states.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Subtle scale and opacity shifts on hover states.

- **Hover:** Color transitions for text links and background shifts for buttons.
- **Click:** Subtle scale-down transform on primary action buttons.
- **Transition:** Standard 0.2s to 0.35s transitions for all state changes.
- **Keyboard:** Visible focus outlines maintained for accessibility on all interactive elements.

## 8. Voice & Don'ts

The editorial voice is authoritative, professional, and direct. Headlines are large and impactful, often using a single highlighted word to draw focus, while CTAs are action-oriented and clear.

- **Tone:** Authoritative, professional, and direct.
- **Headline style:** Large, impactful serif text with a single highlighted word to draw focus.
- **CTA style:** Action-oriented and clear, emphasizing direct value or trial.
- **Avoid:** Casual slang / Overly complex jargon / Cluttered or noisy layouts

### Don'ts
- ❌ Don't use a dark mode — the design strictly follows a high-contrast light-background paradigm.
- ❌ Don't use highly rounded sans-serif fonts for headlines — the screenshot specifically uses a transitional serif.
- ❌ Don't remove uppercase tracking from labels — navigation and labels rely heavily on `text-transform: uppercase`.
- ❌ Don't use soft pastel backgrounds — the palette stays strictly monochrome with one vibrant accent.
- ❌ Don't use heavy drop shadows — the design relies on subtle box-shadows for minimal depth.
- ❌ Don't mix in secondary accent colors — the violet (#5551FF) is the sole high-chroma color used.

The system deliberately avoids dark mode, casual slang, overly complex jargon, and any cluttered or noisy layouts.

## System Prompt (paste into AI tool)

```
This is a premium enterprise AI platform for B2B SaaS. The design DNA is characterized by a stark, high-contrast monochrome core (#FFFFFF and #000000) with a single high-chroma violet accent (#5551FF). Typography combines an authoritative transitional-serif for display with a clean geometric-sans for body and UI. Critical constraints include: never introduce secondary high-chroma colors, maintain generous whitespace, and ensure all labels use uppercase tracking. Avoid dark mode and overly decorative or playful elements. Always prioritize clarity and professional restraint.
```
