CURATED · OPEN · FREE

Editbrandstudio

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

PlayfulConsumerCalmFriendlyGeometric

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://editbrandstudio.co.uk

📦 Browse pack contents →

Identity DNA

whimsicallightheartedwelcoming

A friendly sky-bound illustration.

Color

#000000Ink

#B0E0E9BG

#226D7AMuted

rgba(0,0,0,1)Line

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

Typography

transitional-serif · humanist-sans · monospace

display36px · 700
body16px · 400

Spacing

4px

8px

16px

20px

24px

32px

40px

60px

Generous vertical padding with constrained horizontal spacing.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

No visible borders.

Layout

1280container

12columns

20pxgutter

768 / 1024breakpoints

Single centered column with stacked illustration and text.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Implicit transitions on hover/focus.

Implicit transitions. · Implicit transitions.

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.

Voice & Don'ts

Tone Friendly and helpful.
Headlines Clear, direct statement of the error.
CTAs N/A

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
Avoid: harsh technical jargon
Avoid: dense paragraphs
Avoid: aggressive error messaging

Inside the pack — real screenshots

Editbrandstudio — 桌面首屏（hero） — 桌面首屏（hero）

Editbrandstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko