# Clearstream Design System

> Deep indigo ink and vibrant violet accents meet high-contrast serif displays on a clean, structured canvas.

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

## TL;DR
Clearstream utilizes a sophisticated "monochrome-plus" palette, where a deep navy base (#080936) provides professional authority, while a vibrant purple (#7857ff) drives action and brand energy. The typography is a deliberate pairing of the elegant, high-contrast serif **Reckless Neue** for display and the modern, legible sans-serif **Figtree** for functional UI. Layouts are defined by generous vertical rhythm (up to 128px gaps) and a card-based system that uses both soft shadows and subtle background shifts (#f7f5ff) to create hierarchy. Pill-shaped geometry is the standard for primary interactions, often accompanied by a distinctive purple drop shadow.

## Signature DNA
1. **The Serif Display** (Reckless Neue at 500 weight, often with negative tracking -1.5px, used for all major hero and section headers to establish a "trustworthy service" feel).
2. **The Purple Glow** (A specific shadow signature `rgba(117, 87, 236, 0.44)` used on primary CTA buttons and cards to make them pop against white or light lavender backgrounds).
3. **The Pill & Card Rhythm** (Consistent use of 9999px pill radii for buttons and 12px/16px radii for content cards, creating a friendly but organized interface).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | #ffffff | Primary canvas, card background, button text | 124 | 0.8 | computed_style |
| `{color.lavender.light}` | #f7f5ff | Section backgrounds, subtle card surfaces, borders | 53 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.indigo.deep}` | #080936 | Primary text, dark surface backgrounds, button text | 322 | 0.8 | computed_style |
| `{color.indigo.soft}` | #685f8c | Secondary text, borders, secondary button backgrounds | 238 | 0.8 | computed_style |
| `{color.purple.brand}` | #7857ff | Primary CTAs, active links, brand accents | 110 | 0.8 | computed_style |
| `{color.purple.muted}` | #d7d2ec | Decorative borders in pricing tables | 52 | 0.8 | computed_style |
| `{color.blue.sky}` | #a2d9f9 | Decorative surface background (decorative_only) | 20 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Reckless Neue | 300, 500, 600 | Display, Headings | Young Serif | Licensed |
| Figtree | 450, 500, 600, 700 | Body, UI, Subheadings | Figtree (Google Fonts) | OFL |
| ui-monospace | 450, 500, 600 | Technical data, tables | JetBrains Mono | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 60px | 69px | -1.5px | 500 | Hero H1 | `h1.mt-10.mx-auto` |
| `{type.display.lg}` | 48px | 55.2px | normal | 600 | Section Header | `div.text-5xl/[115%].font-semibold` |
| `{type.display.md}` | 42px | 48.3px | -1.05px | 500 | Sub-section Header | `h2.mt-2.font-serif` |
| `{type.heading.md}` | 24px | 32px | normal | 500 | Feature Titles | `h3.mt-5.text-2xl` |
| `{type.heading.sm}` | 20px | 28px | normal | 500 | Card Titles | `h3.text-xl.font-medium` |
| `{type.body.lg}` | 18px | 28px | normal | 450 | Intro Paragraphs | `p.text-black.text-lg` |
| `{type.body.md}` | 16px | 24px | normal | 450 | Default Copy | `section.bg-gray-lightest` |
| `{type.body.sm}` | 14px | 20px | normal | 450 | Captions, Small UI | `p.text-sm.mt-0.5` |

### Principles
1. **Serif for Emotion:** Use Reckless Neue for any copy intended to feel authoritative or welcoming.
2. **Sans for Function:** Use Figtree for all interactive elements, labels, and long-form body text.
3. **Tight Display Tracking:** Large display sizes (42px+) should use negative letter spacing (-1px to -1.5px) to maintain visual tension.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.2}` | 8px | 37 |
| `{space.3}` | 12px | 127 |
| `{space.4}` | 16px | 43 |
| `{space.5}` | 20px | 50 |
| `{space.8}` | 32px | 33 |
| `{space.32}` | 128px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.pill}` | 9999px | Buttons, Badges, Tags | 81 occurrences |
| `{radius.card}` | 16px | Pricing cards, Feature blocks | 18 occurrences |
| `{radius.md}` | 12px | Secondary cards, UI panels | 39 occurrences |
| `{radius.sm}` | 8px | Form inputs | 66 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.purple}` | `rgba(117, 87, 236, 0.44) 0px 7px 20px -3px` | Primary Buttons, Active Cards | 18 occurrences |
| `{shadow.soft}` | `rgba(87, 62, 177, 0.06) 0px 2px 4px 0px...` | Feature Cards on White | 13 occurrences |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 0px 41px 92px 0px` | Pricing Modals/Popovers | 3 occurrences |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: `{color.purple.brand}` (#7857ff) or transparent | Text: `{color.white}` (#ffffff) | Radius: `{radius.pill}` (9999px) | Padding: 10px 20px | Typography: `{type.body.md}` (16px/500)
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

#### Text Input
**Role:** Lead capture and form entry
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.white}` (#ffffff) | Border: 1px `{color.lavender.light}` | Radius: `{radius.sm}` (8px) | Padding: 12px 16px | Typography: `{type.body.md}` (16px)
**States observed:** Default | Hover: captured | Focus: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** Homepage
**Spec:** Background: `{color.lavender.light}` (#f7f5ff) | Text: `{color.indigo.deep}` (#080936) | Radius: `{radius.md}` (12px) | Padding: 32px | Shadow: none
**States observed:** Default

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `{color.white}` (#ffffff) | Radius: `{radius.card}` (16px) | Padding: 40px | Shadow: `{shadow.soft}`
**States observed:** Default | Featured: uses `{shadow.purple}`

### Tier 3: Surface-specific

#### Integration Badge
**Role:** Displaying partner logos
**Pages observed:** Homepage
**Spec:** Background: `{color.white}` (#ffffff) | Radius: `{radius.md}` (12px) | Shadow: `{shadow.soft}` | Width/Height: Fixed square aspect
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 128px |
| Grid Gutter | 24px |

## Do's
- Use **Reckless Neue** for all H1 and H2 headers to maintain brand elegance.
- Apply the **purple drop shadow** `{shadow.purple}` to primary buttons to ensure they stand out.
- Use **#f7f5ff** as a background for alternating sections to break up long pages.
- Ensure all buttons use the **9999px pill** radius.
- Keep feature card padding at a generous **32px** or higher.

## Don'ts
- Do not use **bold weights** for Reckless Neue; stick to 500 (Medium) for a cleaner look.
- Do not use **pure black (#000000)** for text; always use the brand indigo **#080936**.
- Avoid using **sharp corners (0px)** for any interactive UI element.
- Do not mix the **sky blue (#a2d9f9)** with primary purple CTAs; keep it as a background decorative element only.
- Never use **Figtree** for main page headlines; it is reserved for functional UI and body copy.

## Similar brands
- **Vercel** (Typography-led, high contrast)
- **Linear** (Structured card systems, subtle shadows)
- **Wealthfront** (Serif/Sans pairing, professional but accessible)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-indigo-deep: #080936;
  --color-purple-brand: #7857ff;
  --color-lavender-light: #f7f5ff;
  --font-display: 'Reckless Neue', serif;
  --font-sans: 'Figtree', sans-serif;
  --radius-pill: 9999px;
  --shadow-purple: 0px 7px 20px -3px rgba(117, 87, 236, 0.44);
}
```

## Known gaps
- Hover states for navigation links were not explicitly tokenized in the source.
- Mobile-specific typography scale for display sizes was not fully captured.
- Error states for the Text Input component were not present on the analyzed pages.

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