# Cap · Design system migration spec

> Source: https://cap.so  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, developer-focused SaaS landing page with excellent typography hierarchy and restraint.

## 1. Identity DNA

Cap's design language functions like a well-engineered dashboard: every element exists to reduce friction and clarify function. The system is built on a foundation of high-contrast clarity, where restrained color and generous space serve a tool built for developers, by developers.

**One-liner:** A clean, modern SaaS landing page for a screen recording tool.
**Keywords:** developer tool · screen recording · open source · screenshot
**Analogy:** A clean, modern SaaS dashboard for a screen recording tool

## 2. Color

The palette is a study in contrast and restraint. A near-white field and deep black type establish readability, while a single vibrant blue acts as a deliberate signal for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fcfcfc` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#202020` | secondary text |
| `--muted` | `#838383` | placeholder |
| `--accent` | `#0D74CE` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** High-contrast black typography on near-white backgrounds with a single vibrant blue accent for primary actions.

The principle is functional clarity, where color serves interaction rather than decoration.

## 3. Typography

Typography is handled as a neutral, humanist voice—clear, accessible, and authoritative without being loud. The hierarchy relies on a large, tight-tracked scale to command attention, letting the sans-serif category convey utility.

- **Display:** sans-serif
- **Body:** sans-serif
- **Mono:** ui-monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 500 | -1px | Hero headline |

## 4. Spacing

Spacing follows a strict 4px base unit, creating a predictable, rhythmic grid that structures the layout with mathematical consistency.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit with generous vertical spacing between sections

## 5. Surfaces

Surfaces are defined by subtle depth and clean edges. Soft, layered shadows provide gentle lift, while fine, light borders crisply delineate components without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.05) 0px 4px 10px 0px
  - rgba(0, 0, 0, 0.05) 0px 20px 25px -5px
- **Borders:** 1px solid rgb(229, 231, 235)

## 6. Layout

The layout skeleton is a centered 12-column grid, a familiar structure that anchors content with professional rigor. Generous vertical rhythm between sections creates open, breathable compositions that guide the eye downward.

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

**Skeleton:** Standard centered container with 12-column grid

## 7. Motion & Interaction

Motion philosophy is one of quiet confirmation. Transitions are smooth and purposeful, providing feedback on interaction rather than commanding attention.

- **Durations:** micro 150ms · small 150ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on interactive elements
  - Playhead animation on video timeline

- **Hover:** Smooth color transitions on buttons and links
- **Click:** Subtle scale or color shift
- **Transition:** 150ms cubic-bezier(0.4, 0, 0.2, 1) for most properties
- **Keyboard:** Standard focus ring behavior implied

## 8. Voice & Don'ts

The editorial voice is professional, helpful, and straightforward. It focuses on the product's utility, using bold, clear typography for headlines and action-oriented language for calls to action.

- **Tone:** Professional, helpful, and straightforward
- **Headline style:** Large, bold, black sans-serif text
- **CTA style:** Action-oriented text on pill-shaped buttons
- **Avoid:** Flashy animations / Cluttered layouts / Aggressive sales language

### Don'ts
- ❌ Don't use decorative fonts — screenshot shows a clean, neutral sans-serif.
- ❌ Don't use dark mode — screenshot shows a predominantly light, near-white background.
- ❌ Don't use harsh shadows — screenshot shows very subtle, soft shadows.
- ❌ Don't use sharp corners — screenshot shows pill-shaped buttons and rounded cards.
- ❌ Don't use neon colors — screenshot shows a restrained palette with one primary blue accent.
- ❌ Don't use dense layouts — screenshot shows generous whitespace and a clear hierarchy.

The system deliberately avoids flashy animations, cluttered compositions, and aggressive sales language.

## System Prompt (paste into AI tool)

```
This is a clean, modern SaaS landing page for Cap, an open-source screen recording tool. The design DNA is characterized by a light, near-white background (#fcfcfc), high-contrast black typography, and a single vibrant blue accent (#0D74CE) for primary actions like 'Sign Up' and 'Upgrade'. The font is a neutral, humanist sans-serif used at a large scale (60px for headlines) with tight tracking. Key critical donts: 1) Do not use dark mode or dark backgrounds, as the screenshot shows a light theme. 2) Do not use sharp corners on buttons or cards; use pill shapes and rounded corners. 3) Do not use harsh shadows; use subtle, soft shadows for depth. The layout is spacious with generous whitespace, emphasizing clarity and professionalism. Interactive elements have smooth, subtle transitions. The voice is professional and straightforward, focusing on the product's utility and open-source nature.
```
