CURATED · OPEN · FREE

Chirpley

A standard Cloudflare connection timeout error page providing diagnostic information.

Developer ToolsCleanTooling

↓ Download design system (1 MB)Open in OpenDesign

Visit: https://chirpley.ai

📦 Browse pack contents →

Identity DNA

errortechnicalinformativediagnostic

A technical support desk status page.

Color

#404040Ink

#313131Ink soft

#FFFFFFBG

#D9D9D9BG soft

#EBEBEBBG quiet

#999999Muted

rgba(64,64,64,1)Line

Utilitarian palette with functional colors for status.

Typography

system-sans

display60px · 400
heading30px · 400
body16px · 400

Use system font stack for broad compatibility. · Use standard font weights (400, 600) for clear hierarchy. · Maintain consistent line-height for readability.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Standard 4px grid based on base 16px size.

Surfaces

sm · 0px

md · 0px

lg · 20px

pill · 999px

1px solid #404040

none

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Simple single-column layout for error state.

Motion & Interaction

150msmicro

400mssmall

800msmedium

cubic-bezier(0, 0, 0.2, 1)easing

Standard hover transition on interactive elements.

Cursor changes to pointer on links. · Standard browser behavior.

Components

button Not present.
card Status icon row with labels and status indicators.
chip Error code badge.
input Not present.
hero Large error title with timestamp.

Voice & Don'ts

Tone Technical and direct.
Headlines Clear error message.
CTAs Informational links.

Don't use custom fonts — screenshot shows system font stack.
Don't use complex gradients — screenshot shows flat colors.
Don't use decorative shadows — screenshot shows minimal UI.
Don't use a wide color palette — screenshot shows limited functional colors.
Don't use rounded corners everywhere — screenshot shows mostly sharp edges.
Don't use decorative icons — screenshot shows standard functional icons.
Avoid: Marketing language
Avoid: Emotional tone
Avoid: Unclear error codes

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a standard Cloudflare error page with a utilitarian design focused on clear communication. The layout is simple, single-column, and responsive. Key colors are neutral (#404040, #999999, #D9D9D9) with functional accents (#2F7BBF for links, #99CA3E for success, #BD2426 for error). Typography relies on the system font stack with standard weights for hierarchy. Critical donts: do not introduce decorative elements, avoid custom typography, and do not use a wide color palette. The design prioritizes readability and diagnostic clarity over brand expression.

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