# Reveal Design System

> High-contrast utility surfaces anchored by technical gray foundations and sharp, unrounded geometry.

**Source:** https://reveal.co | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Reveal utilizes a monochrome foundation of mid-tone grays (#999999) and deep charcoal (#404040) to create a utilitarian, data-first atmosphere. The system is characterized by a "sharp" aesthetic, eschewing border radii for nearly all functional containers and dividers. Typography relies on the system-ui stack, using a signature light weight (300) for large-scale display headers to offset the density of the gray canvas. Primary actions and key data points are highlighted using a technical blue (#2f7bbf), while semantic states (success/error) use high-saturation green and red accents.

## Signature DNA
1. **Lightweight Display** (Headlines use `system-ui` at weight 300, providing an airy, technical contrast to dense body text; observed on all analyzed pages).
2. **Achromatic Foundations** (The primary canvas and text hierarchy are built on #999999 and #404040, reserving color strictly for data status; observed on reveal.co).
3. **Sharp Geometry** (A universal `0px` border radius policy for surfaces and dividers creates a rigid, grid-aligned structure; observed in the Surface component).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.text.primary}` | `#404040` | Primary body text and headings | 87 | 0.8 | computed_style |
| `{color.canvas.base}` | `#999999` | Page background and secondary text | 9 | 0.6 | computed_style |
| `{color.surface.bg}` | `#d9d9d9` | Secondary surface backgrounds | 3 | 0.6 | computed_style |
| `{color.text.muted}` | `#313131` | High-contrast secondary text | 3 | 0.6 | computed_style |
| `{color.border.default}` | `#ebebeb` | Default 1px dividers and outlines | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.blue}` | `#2f7bbf` | Primary action text and links | 21 | 0.8 | computed_style |
| `{color.accent.green}` | `#9bca3e` | Success indicators / decorative | 6 | 0.6 | computed_style |
| `{color.accent.red}` | `#bd2426` | Error states / decorative | 3 | 0.6 | computed_style |
| `{color.button.text}` | `#0051c3` | Specific interactive text elements | 3 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#9bca3e` | Positive status / Working |
| `{color.error}` | `#bd2426` | Negative status / Error |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| system-ui | 300, 400, 500, 600 | Universal (Heading & Body) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 60px | 75px | normal | 300 | Hero headlines | `h1.inline-block` |
| `{type.heading.lg}` | 30px | 39px | normal | 400 | Section headers | `h2.text-3xl` |
| `{type.heading.md}` | 24px | 31.2px | normal | 300 | Sub-section titles | `h3.mt-3` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 400 | Component headers | `span.text-2xl` |
| `{type.body.lg}` | 16px | 26px | normal | 400 | Standard paragraphs | `p` |
| `{type.body.md}` | 16px | normal | normal | 400 | Header/Nav text | `header.mx-auto` |
| `{type.body.sm}` | 15px | 24.375px | normal | 600 | Emphasized labels | `h3.text-15` |
| `{type.caption}` | 13px | normal | normal | 400 | Small descriptions | `p.text-13` |
| `{type.code.label}` | 12px | 72px | normal | 500 | Technical labels | `span.code-label` |

### Principles
1. **Lightweight Hierarchy**: Use weight 300 for the largest display sizes (60px) to maintain a technical, clean profile.
2. **Standardized Body**: Running text is locked to 16px with a 1.625x line height (26px) for legibility against gray backgrounds.
3. **Semantic Boldness**: Reserve weight 600 for small-scale labels (13px-15px) to ensure hierarchy in dense UI.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.0.5}` | 4px | 3 |
| `{space.1}` | 8px | 12 |
| `{space.1.5}` | 12px | 12 |
| `{space.2}` | 16px | 6 |
| `{space.3}` | 24px | 3 |
| `{space.4}` | 32px | 3 |
| `{space.5}` | 40px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Universal default for surfaces | `Surface` component |
| `{radius.card}` | 20px | Rare decorative containers | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed components | `Surface` component |

## Components
### Tier 3: Surface-specific

#### Surface
**Role:** Primary content container and section wrapper.
**Pages observed:** reveal.co, /pricing, /about
**Spec:** 
- Background: transparent (rgba(0,0,0,0))
- Text: #404040
- Border: 1px #ebebeb
- Radius: 0px
- Padding: 40px 0px
- Typography: 16px
**States observed:** Default: captured | Hover: not captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | Not captured in source |
| Section Padding | 40px (vertical) |
| Base Grid | 8px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| sm | 640px | H1 display changes from inline-block to block |
| md | 768px | H3 titles switch to inline-block |

## Imagery & decoration
Reveal uses literal, technical iconography (clouds, servers, browsers) rendered in a flat, illustrative style. Decoration is minimal, relying on large-scale status icons with semantic color fills (#9bca3e green, #bd2426 red) to communicate system health.

## Do's
- Use weight 300 for any text above 24px.
- Apply #404040 for all primary reading text.
- Maintain 0px border radius on all functional UI containers.
- Use #2f7bbf for text-based interactive elements.
- Align vertical padding to the 8px base unit (e.g., 40px).

## Don'ts
- **Wrong:** Using a sub-brand orange for a Reveal parent CTA. **Right:** Use #2f7bbf. **Reason:** Reveal parent is strictly blue/gray.
- **Wrong:** Rounding buttons or inputs. **Right:** Keep edges at 0px. **Reason:** Sharp geometry is a core brand signature.
- **Wrong:** Using #000000 for body text. **Right:** Use #404040. **Reason:** The brand uses charcoal for softer contrast on gray.

## Similar brands
- Cloudflare (Status pages)
- DigitalOcean (Control panel)
- Stripe (Documentation)

## Quick start

```css
:root {
  --reveal-primary: #2f7bbf;
  --reveal-text: #404040;
  --reveal-bg: #999999;
  --reveal-border: #ebebeb;
  --reveal-radius: 0px;
  --reveal-font-light: 300;
}
```

## Agent prompt examples
- "Generate a data table using #404040 text on a #d9d9d9 background with 0px border radius and 1px #ebebeb dividers."
- "Create a hero section with a 60px headline using system-ui weight 300 and a #2f7bbf text link."
- "Design a status card with a 24px #404040 title and a large #9bca3e success icon."

## Known gaps
- Button hover and active states were not captured in the source.
- Shadow tokens were not present in the analyzed pages.
- Full container max-width constraints were not explicitly defined in the evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://reveal.co | 1440px | 2026-06-06 |
| Pricing | https://reveal.co/pricing | 1440px | 2026-06-06 |
| About | https://reveal.co/about | 390px | 2026-06-06 |