# Chirpley · Design system migration spec

> Source: https://chirpley.ai  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of utilitarian error state design that prioritizes clarity and diagnostics over brand expression.

## 1. Identity DNA

This design system operates like a technical support desk status page: its architecture is built for clear communication under stress. Every element serves a diagnostic purpose, stripping away decoration to leave only the information required to understand and resolve an issue.

**One-liner:** A standard Cloudflare connection timeout error page providing diagnostic information.
**Keywords:** error · technical · informative · diagnostic
**Analogy:** A technical support desk status page.

## 2. Color

The palette is utilitarian, anchored in a primary dark gray with secondary light grays providing functional contrast. Specific, unambiguous colors are reserved for status—link blue, success green, and error red—ensuring instant recognition of state.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#D9D9D9` | card background |
| `--bg-quiet` | `#EBEBEB` | quiet area |
| `--ink` | `#404040` | body text |
| `--ink-soft` | `#313131` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(64,64,64,1)` | divider |

**Color principle:** Utilitarian palette with functional colors for status.

Color here is purely functional, a direct signal system rather than a brand expression.

## 3. Typography

Typography defaults to the system font stack, a pragmatic choice prioritizing compatibility and immediate readability over stylistic distinction. A strict hierarchy is established using only standard weights, creating clear visual signposts without complexity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 400 | 0 | Error title |
| heading | 30px | 1.3 | 400 | 0 | Section headings |
| body | 16px | 1.5 | 400 | 0 | Standard text |

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

## 4. Spacing

Spacing follows a strict 4px grid, a rhythmic foundation that brings order and predictability to the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid based on base 16px size.

## 5. Surfaces

Surfaces are defined by their boundaries, not their depth. The absence of shadows and the use of a consistent 1px solid border create a flat, structured interface where content is contained but not decorated.

- **Radius:** sm 0px · md 0px · lg 20px · pill 999px
- **Shadows:**
  - none
- **Borders:** 1px solid #404040

## 6. Layout

The layout is a simple, single-column skeleton, a proven structure for error-state communication. This narrow, focused column eliminates distraction and guides the eye directly to the necessary diagnostic information.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Simple single-column layout for error state.

## 7. Motion & Interaction

Motion is minimal and purposeful, limited to a single, fast transition on interactive elements. This approach maintains the system's technical feel, providing feedback without interrupting the user's primary task of gathering information.

- **Durations:** micro 150ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`
- **Patterns:**
  - Standard hover transition on interactive elements.

- **Hover:** Cursor changes to pointer on links.
- **Click:** Standard browser behavior.
- **Transition:** 0.15s cubic-bezier(0, 0, 0.2, 1) for interactive elements.
- **Keyboard:** Standard browser accessibility.

## 8. Voice & Don'ts

The voice is technical and direct, delivering clear error messages and informational links without editorial flourish. It avoids marketing language and emotional tone, adhering to a strict principle of diagnostic clarity.

- **Tone:** Technical and direct.
- **Headline style:** Clear error message.
- **CTA style:** Informational links.
- **Avoid:** Marketing language / Emotional tone / Unclear error codes

### Don'ts
- ❌ 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.

This system deliberately avoids brand expression, custom typography, and decorative elements to prioritize utility above all else.

## System Prompt (paste into AI tool)

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