A friendly but firm security guard at a locked digital gate
02
Color
#000000Ink
#B0E0E9BG
#226D7AMuted
rgba(34, 109, 122, 1)Line
A monochromatic, light-dominant palette anchored by a primary powdery sky blue and a dark, high-contrast text color for maximum legibility.
03
Typography
humanist-sans
display36px · 700
body16px · 400
Use a clean sans-serif for all display and body text
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
A simple 4px base unit with generous padding for clear spatial separation between elements.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
Thin, 1px solid lines in a dark teal color are used for illustration outlines.
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A single, centered vertical column layout with a large illustrative graphic on top, followed by a text block.
07
Motion & Interaction
0msmicro
0mssmall
0msmedium
lineareasing
08
Components
heroA large, centered, vector-based illustration depicting a computer monitor with a padlock, surrounded by floating geometric shapes and a cloud-like base.
09
Voice & Don'ts
ToneDirect and informative, yet softened by the playful visual style.
HeadlinesA clear, large, and bold statement of the error code and status.
don't use a complex or multi-column layout — screenshot shows a simple, centered vertical stack
don't use a dark background — screenshot shows a light, pastel blue background
don't use aggressive red for an error — screenshot uses a calm, non-threatening color palette
don't use complex typography with multiple weights and styles — screenshot uses a limited, clean sans-serif system
don't add a complex navigation or footer — screenshot shows only the core error content and decorative elements
Avoid: Use overly technical jargon
Avoid: Create a sense of panic
Avoid: Use aggressive red colors for the error state
11
System prompt
This design system is for a minimal, illustrated error page. It uses a light, pastel blue (#B0E0E9) background with black (#000000) text and dark teal (#226D7A) accents for illustrations. The typography is a clean, humanist-sans-serif (like Open Sans or Roboto) at 36px for the headline and 16px for body text. The layout is a simple, centered column with a large, playful vector graphic. Key critical don'ts: don't use a dark background; don't use red for errors; don't use complex, multi-column layouts; don't use realistic photography; don't use more than two font sizes; don't include unnecessary navigation elements.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
