# Reveal · Design system migration spec

> Source: https://reveal.co  ·  Curated by OpenDesign  ·  en

> This design is a perfect example of a functional, utility-focused UI where aesthetics serve the single purpose of clear, rapid communication of system status.

## 1. Identity DNA

Reveal is the diagnostic readout of a system under stress, not a marketing surface. Its design language is that of a system diagnostic dashboard displaying connection health, built to communicate failure with the same clarity a status page provides. Every decision serves the single purpose of making a complex infrastructure problem immediately legible.

**One-liner:** A functional error state UI for diagnosing connection timeouts.
**Keywords:** Error · Status · Diagnostic · Utility · Infrastructure
**Analogy:** A system diagnostic dashboard displaying connection health.

## 2. Color

The palette is strictly utilitarian, defined by a high-key background and the universal semiotics of system status colors. Green, red, and blue are not decorative choices but a functional shorthand for success, error, and navigation, applied with clinical precision to accelerate diagnosis.

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

**Color principle:** Utilitarian color coding for system states (Green for success, Red for error, Blue for links).

Color here is a direct conduit for information, stripped of any aesthetic consideration that might obscure the signal.

## 3. Typography

The typographic voice is purely informational, delivered through the system-ui font stack for maximum cross-platform clarity. The scale is hierarchical but austere, designed to differentiate the primary error heading, section titles, and explanatory metadata without introducing any stylistic flourish.

- **Display:** system-ui
- **Body:** system-ui
- **Mono:** system-ui

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.25 | 300 | -0.5px | Main error heading |
| h1 | 30px | 1.3 | 400 | 0 | Section headings |
| body | 16px | 1.625 | 400 | 0 | General content and descriptions |
| caption | 13px | 1.87 | 400 | 0 | Metadata and timestamps |

## 4. Spacing

Vertical rhythm is governed by generous padding around distinct content sections, creating clear zones for the status display, explanatory text, and troubleshooting links.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical spacing is driven by padding on sections rather than strict typographic rhythm.

## 5. Surfaces

The interface is defined by its near-total absence of depth cues. There are no shadows, no rounded corners on containers, and borders are reserved solely for a minimal footer divider, resulting in a completely flat, functional plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 20px
- **Borders:** None visible except for a subtle 1px divider above the footer.

## 6. Layout

The layout skeleton is a responsive grid that prioritizes informational density over white space. On larger viewports, a three-column arrangement efficiently presents the connection path via status icons, while explanatory text flows in a clear two-column format.

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

**Skeleton:** Three-column grid for status icons, two-column grid for explanatory text.

## 7. Motion & Interaction

Motion is employed with extreme restraint, limited to simple color transitions on interactive elements. The philosophy is purely responsive feedback: a 150ms transition on a link hover confirms interactivity without drawing attention to the animation itself.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `cubic-bezier(0, 0, 0.2, 1)`
- **Patterns:**
  - Transitions on hoverable elements (links, icons).

- **Hover:** Links change color to a darker shade of blue.
- **Click:** Cursor changes to pointer on interactive elements.
- **Transition:** Color transitions over 150ms.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is technical, objective, and helpful, using language that is precise without being unnecessarily complex. Headlines adopt a large, light-weight system font for authority, while calls to action are presented as standard blue text links for troubleshooting steps.

- **Tone:** Technical, objective, and helpful.
- **Headline style:** Large, light-weight system font.
- **CTA style:** Standard blue text links for troubleshooting.
- **Avoid:** Emotional language / Complex jargon beyond technical necessity

### Don'ts
- ❌ don't use decorative borders — screenshot shows clean, borderless layout
- ❌ don't use high-contrast shadows — screenshot shows flat, shadowless UI
- ❌ don't use custom serif or display fonts — screenshot shows system-ui throughout
- ❌ don't use a dark background — screenshot shows a light, high-key design
- ❌ don't use complex animations — screenshot shows a static, functional page
- ❌ don't use rounded corners on containers — screenshot shows square edges on the status section

This design deliberately forgoes dark modes, custom fonts, decorative elements, and any complex animation to maintain absolute focus on diagnostic clarity.

## System Prompt (paste into AI tool)

```
This is a functional system error page (Cloudflare 522) for reveal.co, using a standard system-ui font stack for maximum clarity. The palette is utilitarian: white background, light grey status areas, and high-chroma status colors (green for success, red for error, blue for links). The layout is a simple, responsive grid with centered content. Key design constraints: avoid decorative elements, use a system font stack, keep status colors distinct for quick diagnosis, and maintain a clean, borderless aesthetic. The primary focus is communicating a connection failure clearly and providing actionable steps for both visitors and site owners.
```