# Withreach Design System

> High-contrast monochrome utility meeting warm, light-weight display serifs on a bone-white canvas.

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

## TL;DR
Withreach employs a high-contrast "Ink and Bone" aesthetic, utilizing a deep charcoal `#1e1a15` for primary text and surfaces against a pure white `#ffffff` or soft cream `#faf7f5` foundation. The system is defined by its typographic duality: the high-character **Season Mix** serif for massive display headlines and the clean, functional **Season Sans** for UI and body. Accentuation is rare, reserved for a muted olive `#999177` used for specific text emphasis. Geometry is predominantly sharp or subtly softened with 6px–10px radii, avoiding the aggressive roundness of consumer SaaS in favor of a more institutional, infrastructure-focused posture.

## Signature DNA
1. **Typographic Duality** (The interplay between the high-contrast **Season Mix** display serif at 56px and the technical **Season Sans** body face creates a "financial editorial" feel.)
2. **The Deep Footer** (A massive `#1e1a15` charcoal block with oversized, tracked-out "R E A C H" lettering serves as the brand's heavy visual anchor across all pages.)
3. **Muted Olive Accents** (The use of `#999177` as the sole chromatic departure from monochrome signals specific value-add moments without breaking the professional palette.)

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--hsf-global__color` | `#1e1a15` | Primary text, Headings, Dark surfaces | 134 | 1.0 | Computed Style |
| `--clym-brand-bg` | `#ffffff` | Primary page canvas, Input backgrounds | 153 | 1.0 | CSS Variable |
| `--hsf-button__color` | `#faf7f5` | Secondary surface, Off-white text | 30 | 1.0 | CSS Variable |
| `--clym-brand-loading`| `#eeece6` | Loading states, subtle dividers | 12 | 0.9 | CSS Variable |
| `--black` | `#000000` | Input text, deep shadows | 4 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `text-brand-olive` | `#999177` | Text emphasis, brand signature color | 37 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--tw-ring-color` | `#3b82f6` | Focus states (default browser-like) | 2 | 0.7 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Season Mix | 400 | Display Headlines | Playfair Display | Proprietary |
| Season Sans | 300, 400, 500, 600, 700 | UI, Subheadings, Body | Inter | Proprietary |
| SeasonSans | 400, 600 | Body, Buttons | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-lg` | 56px | 61.6px | -1.12px | 400 | Hero Headlines | `h2.type-display-lg` |
| `display-md` | 400px | 44px | normal | 400 | Section Heads | `h2.type-display-md` |
| `display-xs` | 24px | 31.2px | normal | 500 | Small Headings | `p.type-display-xs` |
| `intro` | 22px | 28.6px | 0.4125px | 300 | Lead Paragraphs | `p.type-intro` |
| `body-lg` | 18px | 23.4px | 0.3375px | 500 | Featured Body | `p:nth-of-type(1)` |
| `eyebrow` | 18px | 21.6px | 1.8px | 600 | Section Labels | `p.type-eyebrow` |
| `body-md` | 16px | 24px | normal | 400 | Default Body | `header.fixed` |
| `micro-b` | 16px | 20.8px | 0.3px | 500 | Captions/Labels | `p.type-micro-b` |

### Principles
1. **Negative Tracking on Display:** Large serif headlines pull characters tighter (-1.12px) to maintain impact.
2. **Wide Eyebrows:** Section labels use 1.8px letter spacing and uppercase for clear hierarchy.
3. **Weight Contrast:** UI labels often jump to 600 weight at 16px to distinguish from 400 weight body text.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-1` | 8px | 44 |
| `space-2` | 16px | 5 |
| `space-3` | 24px | 13 |
| `space-4` | 32px | 9 |
| `space-8` | 64px | 3 |
| `space-10`| 80px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Footer, Section Containers | 277 occurrences |
| `radius-sm` | 6px | Primary Buttons, Input Fields | 17 occurrences |
| `radius-md` | 8px | Content Cards | 10 occurrences |
| `radius-lg` | 10px | Surface Plates | 6 occurrences |
| `radius-pill` | 9999px | Accessibility/Launcher | 1 occurrence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Most cards and sections | 153 occurrences |
| `raised` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` | Hovered Cards | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Speak to an expert")
**Pages observed:** All
**Spec:** Background `#1e1a15` / Text `#faf7f5` / Radius 6px / Padding 8px 24px / Font 16px 600 Season Sans
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** De-emphasized actions (e.g., "Learn more")
**Pages observed:** Homepage, About
**Spec:** Background transparent / Text `#ffffff` / Border 2px `#ffffff` / Radius 6px / Padding 8px 24px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** Pricing, About
**Spec:** Background `#1e1a15` / Text `#faf7f5` / Radius 6px / Padding 32px / Border none
**States observed:** Default: Captured

#### Pricing Surface
**Role:** Background container for pricing details
**Pages observed:** Pricing
**Spec:** Background `rgba(255, 255, 255, 0.6)` / Text `#1e1a15` / Radius 10px / Border 1px `#1e1a15` (20% opacity)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Global Footer
**Role:** Site-wide navigation and brand anchor
**Pages observed:** All
**Spec:** Background `#1e1a15` / Text `#ffffff` / Radius 0px / Padding 80px 0px
**States observed:** Default: Captured

#### Navigation Bar
**Role:** Primary header
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#1e1a15` / Height 64px / Font 16px 400 SeasonSans
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1280px |
| Section Padding | 80px (vertical) |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales down; Padding reduces to 16px. |
| Desktop | 1440px | 12-column grid active; 80px section spacing. |

## Imagery & decoration
Withreach uses high-quality, desaturated photography (often architectural or urban) with warm overlays that match the `#999177` olive tone. Visual interest is generated through typographic scale and the use of large, tracked-out letterforms in the footer. It avoids illustrative icons, preferring clean, thin-stroke functional iconography.

## Do's
- Use `#1e1a15` for all primary headings to ensure brand consistency.
- Apply `-1.12px` letter spacing to any Season Mix text above 48px.
- Use the 6px border radius for interactive elements like buttons and inputs.
- Reserve `#999177` for single-word emphasis within a sentence.
- Maintain 80px vertical padding between major content sections.

## Don'ts
- **Wrong:** Using pure blue `#3b82f6` for primary buttons. **Right:** Use `#1e1a15`. **Reason:** Blue is an inherited utility token, not a brand color.
- **Wrong:** Rounding buttons to 9999px (pills). **Right:** Use 6px. **Reason:** The brand identity relies on structured, architectural geometry.
- Do not use Season Mix for body copy; it is strictly a display face.
- Do not use `#999177` as a background color for primary buttons.
- Do not remove the letter-spacing from the "eyebrow" labels.

## Similar brands
- Stripe (infrastructure focus, clean UI)
- Adyen (financial services, high-contrast monochrome)
- Modern Treasury (technical, typography-first)

## Quick start

```css
/* CSS Variables */
:root {
  --color-ink: #1e1a15;
  --color-bone: #ffffff;
  --color-cream: #faf7f5;
  --color-olive: #999177;
  --radius-sm: 6px;
  --font-display: "Season Mix", serif;
  --font-sans: "Season Sans", sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using a charcoal `#1e1a15` background, `#faf7f5` text, and a 6px border radius, featuring a Season Mix headline."
- "Design a primary button with a `#1e1a15` background, 6px radius, and 16px Season Sans semibold text."
- "Generate a section header with a 18px uppercase eyebrow using 1.8px letter spacing and a 56px Season Mix headline."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the CSS variable mapping.
- Specific mobile-only typography tokens were inferred from viewport scaling rather than unique token names.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://withreach.com | 1440x900 | 2026-06-06 |
| Pricing | https://withreach.com/pricing | 1440x900 | 2026-06-06 |
| About | https://withreach.com/about | 390x844 | 2026-06-06 |