← OpenDesign
CURATED · OPEN · FREE
Fornasettiprofumi
A clean, approachable 403 error page that uses simple geometric line art and soft pastels to convey a sense of calm rather than alarm.
Calm Clean Friendly Consumer Playful
01
Identity DNA
playful minimal error page lighthearted accessible
A friendly cartoon guide
02
Color
#226D7AAccent
#000000Ink
#B0E0E9BG
rgba(0,0,0,1.0)Line
Soft pastel background with dark line art and a single high-contrast teal accent
03
Typography
humanist-sans · transitional-serif
display 36px · 400body 16px · 400
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous padding around central content
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgb(0, 0, 0)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered vertical stack
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0.0, 0.2, 1) easing
All elements have all transitions enabled
All elements transition all properties · All elements transition all properties
08
Components
hero Full-screen centered illustration with decorative elements
09
Voice & Don'ts
Tone Playful, calm, and informative Headlines Simple, direct statement of the error code and name Don't use dark backgrounds — screenshot shows a light, pastel blue background instead. Don't use aggressive red for error states — screenshot shows a calm teal accent instead. Don't use heavy, dark shadows — screenshot shows flat, line-art illustrations without depth. Don't use complex, busy layouts — screenshot shows a simple, centered vertical stack. Don't use purely sans-serif typography — screenshot shows a serif body font instead. Don't use sharp, aggressive imagery — screenshot shows rounded, playful geometric shapes. Avoid: Aggressive or alarming language Avoid: Complex technical jargon Avoid: Dark or heavy visual elements
11
System prompt
This is a calm, playful, and accessible 403 error page. It uses a soft pastel blue background (#B0E0E9) with black line art and a teal accent (#226D7A). The layout is a simple centered vertical stack. The typography mixes a humanist sans for display and a transitional serif for body. Critical don'ts: don't use dark backgrounds, don't use aggressive red for errors, and don't use heavy shadows or complex layouts.
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 ↗
More from the library
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A well-executed example of using a calm, playful aesthetic to handle a negative user experience like a 403 error.