# Windsurf · Design system migration spec

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

> A strong example of a modern, professional developer tool landing page that prioritizes clarity, readability, and a focused user journey.

## 1. Identity DNA

The design system for Windsurf is architected as a command center—a clean, functional interface for managing fleets of AI coding agents. Its visual language is one of operational clarity, built on a minimalist white canvas with a precise hierarchy. Every element serves the workflow, ensuring the developer remains in control.

**One-liner:** Manage fleets of local and cloud agents from one surface.
**Keywords:** agent · desktop · workflow · developer · IDE
**Analogy:** A command center for managing fleets of AI coding agents.

## 2. Color

The color system is deliberately restrained, using a high-contrast ink-and-paper palette to ensure maximum readability. A single vibrant blue accent is reserved exclusively for primary actions and interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F8F8` | card background |
| `--ink` | `#191919` | body text |
| `--ink-soft` | `rgba(0,0,0,0.4)` | secondary text |
| `--muted` | `#A5A5A5` | placeholder |
| `--muted-soft` | `rgba(25,25,25,0.56)` | weak hint |
| `--accent` | `#317CFF` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Clean white canvas with high-contrast ink and a single vibrant blue accent for primary actions.

The governing principle is restraint: no competing bright colors are permitted, preserving the interface's focused, tool-like quality.

## 3. Typography

Typography employs a dual-sans-serif strategy for clarity and technical precision. Geometric sans-serif is used for display and headings, while a humanist sans-serif ensures comfortable readability in body text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.5px | Hero headlines |
| heading | 40px | 1.1 | 500 | -0.96px | Section titles |
| body-lg | 20px | 1.5 | 400 | -0.16px | Subheadings and lead paragraphs |
| body | 16px | 1.5 | 400 | normal | General body text |
| caption | 13px | 1.4 | 400 | normal | UI labels, metadata, and secondary text |

**Type rules:**
- Use geometric sans for display and headings to convey modern technical precision.
- Use humanist sans for body text to maintain high readability.
- Use monospace for any technical terms, code snippets, or UI status indicators.
- Maintain tight tracking (-1.5px) for large display text to create a strong visual block.

## 4. Spacing

Spacing is governed by a consistent 4px vertical rhythm, creating a predictable and orderly visual grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical rhythm based on a 4px grid, with generous whitespace in hero sections.

## 5. Surfaces

Surfaces are defined by subtlety and near-flatness. Very soft, almost imperceptible shadows and consistent 1px borders provide just enough depth to separate content without adding visual noise.

- **Radius:** sm 4px · md 8px · lg 10px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.05) 0px 1px 2px 0px
  - rgba(0,0,0,0.1) 0px 2px 6px -2px
  - rgba(0,0,0,0.1) 0px 10px 15px -3px
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The layout skeleton opens with expansive, full-width hero sections for strong initial statements. Subsequent content is organized into contained blocks, establishing a clear hierarchy from announcement to detail.

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

**Skeleton:** Full-width hero sections followed by contained content blocks.

## 7. Motion & Interaction

Motion philosophy is functional and minimal. All transitions are smooth, quick, and focused on providing immediate feedback for UI state changes, such as hover and menu interactions.

- **Durations:** micro 150ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity and background-color transitions on hover states.
  - Smooth transitions for opening and closing menus or drawers.

- **Hover:** Subtle background-color or opacity change for buttons and interactive elements.
- **Click:** Immediate visual feedback with a slight scale or opacity reduction.
- **Transition:** All interactive elements should have a 0.15s to 0.25s transition for a smooth feel.
- **Keyboard:** Clear focus indicators for all interactive elements, typically a 2px blue outline.

## 8. Voice & Don'ts

Voice and copy are professional, technical, and direct, focusing squarely on efficiency and control. Headlines are large and concise, often incorporating monospace for technical terms to maintain clarity.

- **Tone:** Professional, technical, and direct, focusing on efficiency and control.
- **Headline style:** Large, bold, and concise, often using monospace for technical terms.
- **CTA style:** Action-oriented and clear, such as 'Download for MacOS' or 'Try Devin'.
- **Avoid:** Vague marketing jargon / Overly playful or casual language / Complicated sentences

### Don'ts
- ❌ Don't use multiple competing bright colors — screenshot shows a restrained palette of white, black, and a single blue accent.
- ❌ Don't use decorative serif fonts for display — screenshot shows a clean geometric sans for all headlines.
- ❌ Don't use heavy box shadows or 3D effects — screenshot shows subtle, soft shadows that are almost imperceptible.
- ❌ Don't use tight, cramped layouts — screenshot shows generous whitespace around all major content blocks.
- ❌ Don't use small, hard-to-read text for metadata — screenshot shows 13-16px text with clear line heights.
- ❌ Don't use rounded, pill-shaped containers for everything — screenshot shows mostly subtle 4-10px border radii.

The system deliberately avoids vague marketing jargon, overly playful language, and decorative visual effects that would compromise its professional, tool-first identity.

## System Prompt (paste into AI tool)

```
The design is a clean, professional SaaS product page for a developer tool called Devin Desktop. It uses a minimalist white canvas with a single vibrant blue (#317CFF) accent for primary actions. Typography consists of geometric and humanist sans-serif fonts, with large, tight-tracked headlines for strong visual impact. Key design elements include generous whitespace, subtle 1px borders, and very soft shadows. Critical design constraints: avoid using multiple accent colors, never use decorative serifs, and maintain high contrast between ink and background for maximum readability. The tone is technical and efficient, targeting engineering teams.
```
