---
name: Chirpley
description: "Worth including as a prime example of utilitarian error state design that prioritizes clarity and diagnostics over brand expression."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#404040"
  secondary: "#313131"
  neutral: "#999999"
  bg-soft: "#D9D9D9"
  bg-quiet: "#EBEBEB"
  line: "rgba(64,64,64,1)"

typography:
  display:
    fontFamily: system-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0"
  heading:
    fontFamily: system-sans
    fontSize: 30px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: system-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A standard Cloudflare connection timeout error page providing diagnostic information.

*A technical support desk status page.*

## Colors

Utilitarian palette with functional colors for status.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#404040`)** — uses `ink` token
- **Secondary text (`#313131`)** — uses `ink-soft` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(64,64,64,1)`)** — uses `line` token

## Typography

- **Display:** system-sans
- **Body:** system-sans
- **Mono:** system-sans

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

## Layout

Simple single-column layout for error state.

*Rhythm:* Standard 4px grid based on base 16px size.

## Elevation & Depth

- none
- Borders: 1px solid #404040

## Shapes

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

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

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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