# Storyblok · Design system migration spec

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

> Excellent example of developer-focused SaaS design that balances technical credibility with approachable, joyful branding.

## 1. Identity DNA

Storyblok's design system is built on the analogy of a developer-friendly content platform that feels polished yet approachable. It balances technical credibility with a joyful, accessible aesthetic, creating a space where complex tools feel straightforward and well-considered.

**One-liner:** Enterprise headless CMS designed for modern frameworks with a clean, joyful aesthetic
**Keywords:** Headless CMS · Developer-first · AI Content · Joyful
**Analogy:** A developer-friendly content platform that feels polished yet approachable

## 2. Color

The palette is built on high-contrast neutrals—a clean white background with near-black text—with a single vibrant purple accent and strategic blue highlights used sparingly for emphasis. This restrained approach ensures clarity and directs focus without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#1F1F1F` | body text |
| `--ink-soft` | `#44474A` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#7530F7` | single accent |
| `--line` | `rgba(31,31,31,0.12)` | divider |

**Color principle:** High contrast neutrals with a single vibrant purple accent and strategic blue highlights

The core principle is disciplined accentuation; color is a functional highlighter, not a decorative element.

## 3. Typography

The typographic voice is geometric sans-serif, chosen for its technical clarity and modern feel. Headlines are set in weight 900 with tight tracking to make bold, declarative statements, while body text maintains generous line height for comfortable reading.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 900 | -0.02em | Hero headline |
| heading | 48px | 1.1 | 900 | -0.01em | Section heading |
| subheading | 36px | 1.15 | 700 | -0.01em | Feature heading |
| body | 16px | 1.5 | 400 | 0 | Paragraph text |
| small | 14px | 1.4 | 400 | 0 | Captions and labels |
| caption | 12px | 1.3 | 400 | 0 | Fine print |

**Type rules:**
- Headlines use weight 900 with tight tracking
- Body text maintains generous line height for readability
- Button text is weight 500 at 16px
- Accent color is used selectively on key phrases in hero

## 4. Spacing

A consistent 24px gutter establishes the foundational rhythm, creating a predictable grid that structures all content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 24px gutter with generous section padding of 48-96px

## 5. Surfaces

Depth is communicated through minimal, subtle elevation rather than heavy ornamentation. Surfaces use soft, low-opacity shadows and muted 1-2px borders to define cards and inputs cleanly.

- **Radius:** sm 8px · md 12px · lg 24px · pill 999px
- **Shadows:**
  - 0 2px 8px rgba(31,31,31,0.08)
  - 0 4px 16px rgba(31,31,31,0.12)
- **Borders:** 1-2px solid with muted borders on cards and inputs

## 6. Layout

The layout skeleton begins with a centered, single-column hero to command immediate attention. Below, full-width content sections take over, using the established spacing rhythm to create clear, digestible blocks of information.

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

**Skeleton:** Centered single-column hero with full-width content sections below

## 7. Motion & Interaction

Motion is applied with restraint, serving function over decoration. All interactive transitions follow a smooth 0.2s ease, providing immediate and consistent feedback for hover states and clicks.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on buttons and links
  - Subtle color transitions on interactive elements

- **Hover:** Background color shift on buttons, opacity change on links
- **Click:** Scale feedback on primary actions
- **Transition:** 0.2s ease for all interactive states
- **Keyboard:** Standard focus ring visibility

## 8. Voice & Don'ts

The editorial voice is confident, technical, and slightly playful, using bold declarative statements and direct action verbs in calls to action. It avoids overly corporate language, passive constructions, and aggressive sales pitches.

- **Tone:** Confident, technical, and slightly playful
- **Headline style:** Bold declarative statements with selective color emphasis
- **CTA style:** Direct action verbs like 'Try for Free' and 'See our MCP'
- **Avoid:** Overly corporate language / Passive voice / Jargon without context / Aggressive sales pitch

### Don'ts
- ❌ don't use multiple accent colors — screenshot shows purple and blue used sparingly with clear hierarchy
- ❌ don't apply heavy shadows — screenshot shows minimal, subtle elevation
- ❌ don't use decorative fonts — screenshot shows geometric sans-serif throughout
- ❌ don't clutter the interface — screenshot maintains generous whitespace and breathing room
- ❌ don't use aggressive CTAs — screenshot shows calm, clear button labels
- ❌ don't mix visual styles — screenshot maintains consistent rounded corners and typography

The system deliberately excludes decorative serif fonts, heavy shadows, and multiple competing accent colors to preserve its clean, focused hierarchy.

## System Prompt (paste into AI tool)

```
This is a developer-focused SaaS platform for headless CMS. The design balances technical credibility with approachable warmth. Primary colors are white backgrounds with near-black text (#1F1F1F) and purple accent (#7530F7). Blue highlights (#3B82F6) appear in hero text. Typography uses geometric sans-serif at weight 900 for headlines with tight tracking. Don't use multiple competing accents. Don't apply heavy shadows or gradients. Don't use decorative serif fonts. Layout centers content with generous spacing. Buttons use dark fills for primary actions with rounded corners. The interface feels clean and modern without being sterile.
```
