# Prismic · Design system migration spec

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

> A prime example of a clean, effective B2B SaaS design that prioritizes clarity and user confidence through strong typography and restrained color.

## 1. Identity DNA

This system builds an interface with the discipline of a well-organized workshop: every tool has its place, every surface is uncluttered, and the focus remains on the work at hand. The design language of Prismic is one of professional clarity, using a stark, high-contrast foundation to frame developer and marketing workflows without distraction.

**One-liner:** A headless CMS and landing page builder for converting websites.
**Keywords:** prismic · headless CMS · landing page builder · conversion · developer tools
**Analogy:** A clean, professional workspace for developers and marketing teams to build high-performing websites.

## 2. Color

The palette is a study in restraint, built on a foundation of near-black and pure white to maximize legibility and focus. A single vibrant green acts as a strategic signal, reserved exclusively for highlighting primary actions and critical points of emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#151515` | body text |
| `--ink-soft` | `#505050` | secondary text |
| `--muted` | `#A4A4A4` | placeholder |
| `--accent` | `#2BBE8B` | single accent |
| `--line` | `rgba(238,238,238,1)` | divider |

**Color principle:** High-contrast black and white for clarity, with a single green accent to highlight key actions and emphasis.

The governing principle is clarity through contrast, using color not for decoration but as a functional tool for guiding attention.

## 3. Typography

Typographic voice is split between two distinct sans-serif categories: a geometric face for headings projects modern, technical confidence, while a humanist face for body text ensures sustained reading comfort. This pairing balances authority with approachability, avoiding decorative styles that would compromise the interface's functional tone.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headings |
| heading | 40px | 1.1 | 500 | -0.55px | Section headings |
| body | 18px | 1.55 | 500 | 0 | Body text and paragraphs |
| small | 14px | 1.14 | 500 | 0 | Captions and small labels |

**Type rules:**
- Use geometric-sans for headings to convey a modern, technical feel.
- Use humanist-sans for body text to ensure readability.
- Avoid using decorative or overly complex fonts.

## 4. Spacing

A consistent 4px rhythm underpins all spacing, creating a predictable and harmonious vertical flow between elements and sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with standard 16px and 32px padding/margin increments.

## 5. Surfaces

Depth is communicated through restrained, almost imperceptible means. Subtle box shadows or a single-pixel border in light gray are enough to lift cards and surfaces from the background, creating hierarchy without visual weight.

- **Radius:** sm 2px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 6px 0px rgba(0,0,0,0.06)
  - 0px 2px 32px 0px rgba(0,0,0,0.16)
- **Borders:** 1px solid rgba(238,238,238,1)

## 6. Layout

The layout skeleton is centered and contained, with a maximum width that prevents lines of text from becoming too long. Generous vertical spacing between sections provides breathing room, allowing content blocks to be clearly parsed.

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

**Skeleton:** Centered content with a max-width container, generous vertical spacing between sections.

## 7. Motion & Interaction

Motion is minimal and strictly utilitarian. Transitions are confined to standard durations for color, opacity, and background changes on hover and focus states, ensuring feedback is immediate and unobtrusive.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Standard transitions on color, background-color, and opacity for hover and focus states.

- **Hover:** Subtle color or background-color changes on interactive elements like buttons and links.
- **Click:** Immediate visual feedback through state changes.
- **Transition:** Consistent use of a 150ms or 300ms transition with a standard easing curve.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and helpful—focused on clear benefits without technical jargon or aggressive sales language. Headlines lead with bold, benefit-oriented statements, while calls to action are straightforward and action-oriented.

- **Tone:** Professional, confident, and helpful.
- **Headline style:** Direct, benefit-oriented, and uses a bold accent word for emphasis.
- **CTA style:** Clear and action-oriented (e.g., 'Get started now', 'Request a demo').
- **Avoid:** Vague language / Overly technical jargon / Aggressive sales tone

### Don'ts
- ❌ Don't use a multi-color palette — the screenshot shows a monochromatic base with a single green accent.
- ❌ Don't use serif fonts — the typography is strictly sans-serif for both headings and body.
- ❌ Don't use heavy drop shadows — the UI relies on subtle box shadows or simple borders for depth.
- ❌ Don't use dense, cluttered layouts — the design emphasizes whitespace and clear visual hierarchy.
- ❌ Don't use complex gradients — the backgrounds are solid colors.
- ❌ Don't use low-contrast text — the black-on-white color scheme ensures high readability.

What this system deliberately avoids is as defining as what it includes: no multi-color palettes, no serif type, no heavy shadows, and no cluttered layouts that would erode its core promise of clarity.

## System Prompt (paste into AI tool)

```
This design is for a B2B SaaS developer tool, Prismic, featuring a clean, professional aesthetic. The color palette is primarily black (#151515) and white (#FFFFFF) with a vibrant green accent (#2BBE8B) used sparingly for emphasis. Typography uses a geometric-sans for headings and humanist-sans for body text, maintaining high readability. The layout is centered with generous whitespace and a clear visual hierarchy. Critical donts: avoid multiple accent colors, do not use serif typefaces, and avoid heavy, distracting shadows that would clutter the clean interface.
```