# Contentful · Design system migration spec

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

> A strong example of a professional, developer-friendly SaaS interface that balances technical credibility with approachable design.

## 1. Identity DNA

The Contentful design system operates like a clean, professional workspace for developers and content teams. Every component is engineered for clarity and efficiency, reflecting the platform's core identity as an enterprise content management and personalization engine.

**One-liner:** A professional SaaS platform for enterprise content management and personalization.
**Keywords:** Content Management · Developer Platform · Enterprise · Personalization · Digital Experience
**Analogy:** A clean, professional workspace for developers and content teams, emphasizing clarity and efficiency.

## 2. Color

The palette is one of professional restraint, built on a foundation of white and soft greys with a calm blue accent for clarity and trust. This controlled color system supports information hierarchy without visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F7F9` | card background |
| `--bg-quiet` | `#E4EFF8` | quiet area |
| `--ink` | `#2B2D31` | body text |
| `--ink-soft` | `#6D7682` | secondary text |
| `--muted` | `#55575B` | placeholder |
| `--muted-soft` | `#C4D1DE` | weak hint |
| `--accent` | `#3C80CF` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Professional restraint with a soft blue accent palette for clarity and trust.

The guiding principle is to use color to clarify, not to decorate.

## 3. Typography

Typography is set in a humanist sans-serif, with display headlines using tight negative letter-spacing for impact and body text maintaining generous line-height for readability. The system primarily employs regular (400) weight, reserving semibold (600) for UI elements to create a clear typographic hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -2.16px | Hero headlines |
| heading | 56px | 1.0 | 400 | -1.12px | Section headings |
| body-lg | 18px | 1.55 | 400 | 0 | Lead paragraphs |
| body | 16px | 1.55 | 400 | 0 | Default body text |
| small | 14px | 1.55 | 600 | 0 | Navigation and labels |

**Type rules:**
- Headlines use tight negative letter spacing for impact.
- Body text maintains generous line-height for readability.
- Font weights are primarily regular (400) with semibold (600) for UI elements.

## 4. Spacing

A consistent 32px rhythm governs the vertical and horizontal spacing between grid items and sections, establishing a predictable, clean layout structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 32px gap between grid items and sections.

## 5. Surfaces

Surfaces are defined by subtle depth and clean separation. Soft, diffuse shadows and light 1px borders are used to lift elements without heaviness.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.25) 0px 0px 20px 0px
- **Borders:** 1px solid #E5E7EB

## 6. Layout

The layout skeleton is a wide-centered column structure with a prominent navigation bar. Generous vertical padding is applied throughout to ensure content breathes and maintains a clear visual hierarchy.

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

**Skeleton:** Centered content with a wide navigation bar and generous vertical padding.

## 7. Motion & Interaction

Motion is minimal and purposeful, focusing on utility over decoration. Transitions are smooth and consistent, applied to color and opacity changes to confirm interactive states without distracting from content.

- **Durations:** micro 100ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover.
  - Transform and opacity transitions for UI state changes.

- **Hover:** Color changes for text links and background shifts for buttons.
- **Click:** Subtle transform or opacity reduction.
- **Transition:** All interactive elements use 0.4s ease-in-out transitions.
- **Keyboard:** Focus states are typically managed by browser defaults with visible outlines.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and slightly technical, aiming to empower both developers and marketers. It is direct, benefit-oriented, and avoids passive voice or vague promises.

- **Tone:** Professional, confident, and slightly technical, aiming to empower developers and marketers.
- **Headline style:** Direct, benefit-oriented, and sometimes playful (e.g., 'whatever' in hero).
- **CTA style:** Action-oriented verbs like 'Explore', 'Log in', 'Contact sales'.
- **Avoid:** Overly casual slang / Passive voice / Vague promises without data

### Don'ts
- ❌ Don't use serif fonts — screenshot shows a clean humanist sans-serif throughout.
- ❌ Don't use neon or highly saturated accent colors — screenshot shows a muted, professional blue (#3C80CF) as the primary accent.
- ❌ Don't use complex gradients in backgrounds — screenshot shows mostly solid white or very soft, flat colored sections (#F5F7F9, #E4EFF8).
- ❌ Don't use heavy, dark borders everywhere — screenshot shows light, subtle borders (#E5E7EB) or borderless designs.
- ❌ Don't use extremely tight line spacing for body text — screenshot shows comfortable, readable line heights (approx 1.55).
- ❌ Don't use sharp, 90-degree corners on buttons or cards — screenshot shows consistently rounded corners (4px to 999px).

The system deliberately avoids decorative complexity, from neon accents and sharp corners to tight body text and heavy borders, in favor of a consistently clean and functional interface.

## System Prompt (paste into AI tool)

```
This is the Contentful homepage, a professional SaaS platform for enterprise content management. The design is clean, restrained, and focused on clarity. Key colors include a white background (#FFFFFF), soft grey sections (#F5F7F9), and a primary blue accent (#3C80CF). Typography uses a humanist sans-serif (Avenir Next) with large, tightly-spaced display headlines and comfortable body text. Key donts: don't use serif fonts, don't use neon colors, don't use heavy dark borders, don't use sharp corners, don't use tight body text spacing, and don't use complex background gradients.
```