# Payload · Design system migration spec

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

> Excellent example of developer-focused design with technical aesthetics and clear visual hierarchy.

## 1. Identity DNA

Payload's design language is engineered with the precision of a high-performance sports car for backend development—stripped of excess, tuned for function. Every component exists to serve the developer's workflow, making the system feel as immediate and responsive as the code it supports.

**One-liner:** The open-source Next.js backend for building modern web applications.
**Keywords:** developer-first · modern · headless · CMS · TypeScript
**Analogy:** A high-performance sports car for backend development

## 2. Color

The color system operates on a strict monochrome principle, using a deep black field against crisp white type to create uncompromising contrast. This binary palette eliminates visual noise, ensuring that content hierarchy is established through scale and weight rather than hue.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `rgba(255,255,255,0.125)` | card background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.5)` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `rgba(208,208,208,1.0)` | weak hint |
| `--line` | `rgba(255,255,255,0.125)` | divider |

**Color principle:** High contrast monochrome palette with subtle texture overlays

The absence of color becomes the primary design decision, directing all focus to the information architecture and technical content.

## 3. Typography

Typography is handled by a single geometric sans-serif family, creating a unified technical voice across every interface element. Headlines are set large with tight tracking for impact, while body text maintains excellent readability at regular weight.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.6px | Main hero headlines |
| heading | 32px | 1.0 | 500 | -0.88px | Section headings |
| body | 16px | 1.4 | 400 | 0px | Body copy |
| caption | 12px | 1.0 | 500 | 3px | Uppercase labels |

**Type rules:**
- Display uses geometric sans with tight tracking
- Body uses same geometric sans family at regular weight
- Mono font used for code snippets
- Uppercase transform for labels and metadata

## 4. Spacing

Spacing follows a consistent 4px grid, creating predictable rhythm that gives technical content room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous padding

## 5. Surfaces

Surfaces are defined by deep shadows and subtle borders that suggest depth without decorative effects. Cards and containers use transparent overlays that respond to the dark background rather than competing with it.

- **Radius:** sm 4px · md 8px · lg 12px · pill 40px
- **Shadows:**
  - 0 4px 24px rgba(0,0,0,0.5)
- **Borders:** 1px solid rgba(255,255,255,0.125)

## 6. Layout

The layout skeleton uses full-width sections with generous horizontal padding to create a spacious, terminal-like reading experience. A 12-column grid provides structure for complex technical documentation while maintaining clear visual flow.

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

**Skeleton:** Full-width sections with generous padding

## 7. Motion & Interaction

Motion is minimal and purposeful, limited to smooth hover transitions and staggered content reveals that guide attention without distraction. The 0.15s cubic-bezier timing creates immediate feedback that mirrors the responsiveness developers expect from code execution.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Smooth hover transitions on interactive elements
  - Staggered fade-in animations for content sections

- **Hover:** Subtle opacity and transform changes
- **Click:** Immediate response with visual feedback
- **Transition:** 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) for most interactions
- **Keyboard:** Full keyboard navigation support

## 8. Voice & Don'ts

Voice is confident, technical, and direct—speaking to developers in their own language without marketing affectation. Headlines make bold capability statements, while calls to action are clear and directional.

- **Tone:** Confident, technical, and developer-focused
- **Headline style:** Bold, direct statements about capability
- **CTA style:** Clear action-oriented buttons with directional arrows
- **Avoid:** Overly casual language / Marketing jargon / Excessive punctuation / All-caps body text

### Don'ts
- ❌ Don't use colorful gradients — screenshot shows monochrome palette
- ❌ Don't use serif fonts — screenshot shows geometric sans throughout
- ❌ Don't use busy backgrounds — screenshot shows clean dark surfaces
- ❌ Don't use small touch targets — screenshot shows generous padding
- ❌ Don't use decorative elements — screenshot shows minimal, functional design
- ❌ Don't use complex animations — screenshot shows subtle, purposeful motion

The system deliberately avoids decorative elements, colorful gradients, and complex animations that would compromise its clean, technical aesthetic.

## System Prompt (paste into AI tool)

```
Payload CMS is a developer-first headless CMS positioned as the modern backend solution for web development. Key visual elements include a dark theme (#000000 background) with white (#ffffff) typography using geometric sans-serif fonts. The design emphasizes bold, large headlines with tight tracking and minimal decorative elements. Critical constraints: maintain strict monochrome palette without colorful accents, use consistent geometric sans typography hierarchy, ensure generous spacing and padding throughout. Avoid serif fonts, gradients, or overly decorative elements that would compromise the clean, technical aesthetic. The interface prioritizes developer experience with code snippets, terminal-style commands, and clear visual hierarchy for technical content.
```