# Editbrandstudio · Design system migration spec

> Source: https://editbrandstudio.co.uk  ·  Curated by OpenDesign  ·  en

> A great example of a friendly, illustrated error page that turns a negative user experience into a calm, visually pleasing moment.

## 1. Identity DNA

Edit Brand Studio treats its 403 error page not as a technical dead end, but as an opportunity for a welcoming gesture. The system's identity is built on a whimsical, lighthearted tone, visualized as a friendly sky-bound illustration that softens the interruption.

**One-liner:** A playful, illustrated 403 error page using soft teal and whimsical line art.
**Keywords:** whimsical · lighthearted · welcoming
**Analogy:** A friendly sky-bound illustration.

## 2. Color

The color system is a study in calm restraint, built from a single soft teal. This creates a light, airy atmosphere where high-contrast black text ensures clear, immediate readability.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#B0E0E9` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#226D7A` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Soft, calming teal base with high-contrast black text.

The principle is monochromatic harmony over chromatic complexity, maintaining a soothing, cohesive visual field.

## 3. Typography

Typographic voice is approachable and mixed, pairing a friendly transitional serif for headlines with a humanist sans-serif for body copy. This combination avoids cold, technical fonts in favor of warmth and clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.28 | 700 | normal | Headline |
| body | 16px | 1.4 | 400 | normal | Body |

## 4. Spacing

Rhythm is established through generous vertical padding that gives the content room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 60 px
- **Rhythm:** Generous vertical padding with constrained horizontal spacing.

## 5. Surfaces

Surfaces are rendered flat and borderless, relying on white space and soft color rather than edges or depth. The absence of visible borders or heavy drop shadows keeps the focus on the illustrative line art.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders.

## 6. Layout

The layout skeleton is a single, centered column, stacking the full-width illustrated hero above the error message. This simple structure eliminates visual noise and directs the eye downward through the content.

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

**Skeleton:** Single centered column with stacked illustration and text.

## 7. Motion & Interaction

Motion is minimal and implicit, governed by the principle of understated feedback. A standard, 220-millisecond ease transition is the only declared animation, used to subtly signal interactive states without disruption.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Implicit transitions on hover/focus.

- **Hover:** Implicit transitions.
- **Click:** Implicit transitions.
- **Transition:** all 220ms ease
- **Keyboard:** Standard browser focus rings.

## 8. Voice & Don'ts

The editorial voice is friendly, helpful, and direct, stating the error clearly without harsh jargon or dense paragraphs. It deliberately avoids aggressive error messaging to maintain a calm, consumer-friendly tone.

- **Tone:** Friendly and helpful.
- **Headline style:** Clear, direct statement of the error.
- **CTA style:** N/A
- **Avoid:** harsh technical jargon / dense paragraphs / aggressive error messaging

### Don'ts
- ❌ don't use dark mode — screenshot shows a light blue sky theme instead
- ❌ don't use sharp, technical fonts — screenshot uses a friendly transitional serif and humanist sans instead
- ❌ don't use high-chroma accent colors — screenshot relies on a single monochromatic teal palette instead
- ❌ don't use complex multi-column layouts — screenshot shows a simple, centered single-column layout instead
- ❌ don't use heavy drop shadows or depth — screenshot shows flat, line-art illustrations instead
- ❌ don't use dense, text-heavy error messages — screenshot uses a short, friendly sentence instead

What the system deliberately omits is as defining as what it includes: no dark mode, no sharp fonts, no multi-column layouts, and no high-chroma accents.

## System Prompt (paste into AI tool)

```
This is a playful, consumer-facing 403 error page for a brand studio. It positions itself as friendly and whimsical through the use of light teal backgrounds (#B0E0E9) and soft line-art illustrations. The typography mixes a transitional serif for headlines with a humanist sans-serif for body text, keeping the tone approachable. Key colors are the teal background and black/dark teal ink. Critical don'ts: do not use dark mode (the site is explicitly light and airy), do not use rigid, grid-heavy layouts (it's a single centered column), and do not use aggressive red error states (it remains calm and friendly).
```