# Strapi · Design system migration spec

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

> Excellent example of developer-focused design that balances technical credibility with premium polish through careful typography and spacing

## 1. Identity DNA

The system operates as a developer-first content platform, analogous to a well-documented API—technical utility wrapped in premium polish. Its identity is built on open-source accessibility and AI-powered capability, targeting builders who require both clarity and professional credibility.

**One-liner:** The open-source headless CMS for AI-powered websites and apps
**Keywords:** open-source · headless CMS · AI-powered · developer-centric
**Analogy:** A developer-first content platform that balances technical utility with premium polish

## 2. Color

The palette constructs a deliberate duality: deep navy grounds developer-focused hero sections, while white provides a clean canvas for content. A vibrant indigo serves as the singular accent for all actionable elements, ensuring a high-contrast visual hierarchy that guides user attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0F0F23` | main background |
| `--bg-soft` | `#F7F8FC` | card background |
| `--bg-quiet` | `#E7EDF1` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#3E3E5C` | secondary text |
| `--muted` | `#5E709D` | placeholder |
| `--muted-soft` | `#666687` | weak hint |
| `--accent` | `#4F46E5` | single accent |
| `--line` | `rgba(94,112,157,0.2)` | divider |

**Color principle:** High contrast dark/light sections with indigo accent for CTAs

This contrast-first approach rejects muted or ambiguous tones for interactive components, using color with purpose rather than decoration.

## 3. Typography

Typography employs a dual-font strategy: geometric Poppins establishes a confident, structural voice for headlines and display text, while humanist Inter ensures legibility for body copy and interface elements. The generous line height is a functional necessity for readability against dark backgrounds.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.05 | 700 | -1.5px | Main hero headline |
| h2 | 40px | 1.15 | 700 | -0.5px | Section headings |
| body | 18px | 1.6 | 400 | 0 | Primary reading text |

**Type rules:**
- Use Poppins for display and headings
- Use Inter for body text and UI elements
- Maintain generous line height for readability on dark backgrounds

## 4. Spacing

All spatial relationships are governed by an 8px base unit, creating a consistent vertical rhythm that structures the interface's breathing room and component alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base unit with consistent vertical rhythm

## 5. Surfaces

Surface treatment is restrained, using a hierarchy of subtle, layered shadows to suggest depth on cards and elevated elements. Borders are fine and semi-transparent, defining containers without creating visual noise.

- **Radius:** sm 4px · md 8px · lg 15px · pill 999px
- **Shadows:**
  - rgba(26,26,67,0.1) 0px 1px 4px 0px
  - rgba(0,0,0,0.1) 0px 4px 12px 0px
  - rgba(0,0,0,0.08) 0px 6px 10px 0px
- **Borders:** 1px solid rgba(94,112,157,0.2)

## 6. Layout

The skeleton is a centered column with generous margins, alternating between full-width dark sections and clean white content areas. This creates a clear visual journey through technical features and value propositions.

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

**Skeleton:** Centered content with generous whitespace, full-width dark hero section

## 7. Motion & Interaction

Motion is minimal and functional, limited to color transitions and opacity changes that confirm interactive states. The consistent 0.3-second duration ensures feedback is smooth but never distracting from the primary content.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4,0,0.2,1)`
- **Patterns:**
  - Color transitions on hover
  - Opacity changes for interactive states

- **Hover:** Color change on text links, subtle shadow elevation on cards
- **Click:** Immediate visual feedback through color/opacity
- **Transition:** All properties with 0.3s duration for smooth interactions
- **Keyboard:** Focusable elements with visible focus states

## 8. Voice & Don'ts

The voice is technically confident and direct, using benefit-focused statements and clear command CTAs. It avoids unexplained jargon and passive constructions, opting instead for precise, action-oriented language.

- **Tone:** Professional yet approachable, technically confident
- **Headline style:** Direct, benefit-focused statements with action verbs
- **CTA style:** Clear commands: 'Get Started', 'Request Demo', 'See how it works'
- **Avoid:** Overly technical jargon without context / Passive voice in CTAs / Excessive exclamation marks / Unclear value propositions

### Don'ts
- ❌ Don't use muted colors on interactive elements — screenshot shows vibrant indigo (#4F46E5) for CTAs
- ❌ Don't center-align long-form body copy — screenshot shows left-aligned paragraphs in content sections
- ❌ Don't use small font sizes for technical commands — screenshot shows generous sizing for code snippets
- ❌ Don't apply heavy shadows everywhere — screenshot uses subtle, layered shadows sparingly
- ❌ Don't use round borders on all containers — screenshot shows 15px radius on buttons/cards but square edges elsewhere
- ❌ Don't mix decorative patterns with busy content — screenshot keeps geometric patterns to dark hero section only

The system deliberately avoids heavy decorative shadows, centered long-form copy, and mixed pattern density to maintain its focused, developer-centric clarity.

## System Prompt (paste into AI tool)

```
Strapi's design system targets developers building AI-powered applications, using a dark/light dual-section approach. Primary colors include deep navy (#0F0F23) for hero sections, white (#FFFFFF) for content areas, and indigo (#4F46E5) for action CTAs. Typography uses geometric Poppins for display/headings and humanist Inter for body text, maintaining clear hierarchy. Critical donts: avoid muted colors on interactive elements (vibrant indigo is standard), don't center long-form copy, maintain generous sizing for code snippets. The system emphasizes technical credibility with clean layouts, subtle shadows, and purposeful whitespace. Focus on clear value propositions and developer-friendly patterns like copyable code blocks and direct CTAs.
```