---
name: Editbrandstudio
description: "A great example of a friendly, illustrated error page that turns a negative user experience into a calm, visually pleasing moment."
version: alpha

colors:
  background: "#B0E0E9"
  primary: "#000000"
  neutral: "#226D7A"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.28
    fontWeight: 700
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

A playful, illustrated 403 error page using soft teal and whimsical line art.

*A friendly sky-bound illustration.*

## Colors

Soft, calming teal base with high-contrast black text.

- **Background (`#B0E0E9`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#226D7A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

## Layout

Single centered column with stacked illustration and text.

*Rhythm:* Generous vertical padding with constrained horizontal spacing.

## Elevation & Depth

- Borders: No visible borders.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Not present.
- **card:** Not present.
- **chip:** Not present.
- **input:** Not present.
- **hero:** Full-width illustrated hero with a large central graphic and decorative background elements.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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).
```