# Readywhen Design System

> Clean, teal-anchored utility on a white canvas with soft mint-wash sectioning and high-contrast gray typography.

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

## TL;DR
Readywhen utilizes a high-clarity, monochrome-adjacent system where **Teal (#10b8aa)** acts as the sole chromatic driver for actions and brand identity. The interface relies on a stark white foundation (#ffffff) punctuated by a very light **Mint Wash (#e6f8f6)** used for full-width section backgrounds to create rhythmic pacing. Typography is strictly **Roboto**, favoring weight 700 for large display headers and weight 400/500 for a multi-tiered gray scale (#454545, #757575). Components are characterized by sharp or very minimal radii (3px-5px), avoiding the pill-shaped trends of modern SaaS for a more structured, document-like feel.

## Signature DNA
1. **The Teal Action Anchor** (#10b8aa is used consistently for primary CTAs, the brand logomark, and active card accents, creating a singular path for user attention across all pages).
2. **Mint-Wash Sectioning** (The use of #e6f8f6 as a full-width background color to distinguish "Benefits" or "Resource" blocks from the primary white canvas).
3. **Roboto Multi-Weight Hierarchy** (Strict adherence to Roboto across all roles, using weight 700 for 49px display titles and weight 500 for 18px-21px sub-headers to establish authority without changing typefaces).

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

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary canvas, button text, card background | 27 | 1.0 | Computed style |
| `{color.gray.dark}` | `#454545` | Primary body text and headings | 123 | 0.8 | Computed style |
| `{color.gray.medium}` | `#757575` | Secondary body text, footer text | 238 | 0.8 | Computed style |
| `{color.gray.light}` | `#bbbbbb` | De-emphasized text, placeholders | 12 | 0.8 | Computed style |
| `{color.border.light}` | `#eeeeee` | Subtle dividers and section borders | 4 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#10b8aa` | CTAs, logomark, active borders, icons | 22 | 0.8 | Computed style |
| `{color.primary.soft}` | `#e6f8f6` | Section backgrounds (decorative_only) | 6 | 0.6 | Computed style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 400, 500, 600, 700 | All roles (Display, Heading, Body) | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 49px | 58px | normal | 700 | Hero H1 | `h1.et_pb_module_header` |
| `{type.heading.lg}` | 30px | 30px | normal | 500 | Section H2 | `h2` |
| `{type.heading.md}` | 23px | 23px | normal | 500 | Sub-section H2 | `h2` |
| `{type.heading.sm}` | 21px | 21px | normal | 500 | Feature titles | `h4` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Primary prose | `article#post-7` |
| `{type.body.md}` | 16px | 25.6px | normal | 400 | Secondary prose | `li.et-social-icon` |
| `{type.button}` | 18px | 30.6px | normal | 500 | CTA label | `a.et_pb_button` |
| `{type.nav}` | 18px | 0px | normal | 600 | Main navigation | `nav#top-menu-nav` |
| `{type.body.sm}` | 14px | 25.2px | normal | 600 | Footer links | `li.menu-item` |

### Principles
1. **Weight-based Hierarchy:** Differentiation between H1 (700) and H2 (500) is driven by weight and size, never by color shifts.
2. **High-Contrast Body:** Body text never drops below #757575 on white, maintaining high legibility.
3. **Tight Display Leading:** Large headers use a line-height ratio of ~1.18 (58/49), keeping headlines compact.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 90 |
| `{space.sm}` | 10px | 118 |
| `{space.md}` | 20px | 38 |
| `{space.lg}` | 30px | 46 |
| `{space.xl}` | 40px | 17 |
| `{space.section}` | 65px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default surfaces, navigation, footer | `radius: 0px` |
| `{radius.sm}` | 3px | Primary Teal Buttons | `Rounded Button` |
| `{radius.md}` | 4px | Pricing Tier Containers | `Surface (pricing)` |
| `{radius.lg}` | 5px | Feature Cards | `Card` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.brand}` | `rgb(16, 184, 170) 0px 0px 17px -7px` | Active/Hover state for featured cards | `Surface (observed_once)` |

## Components
### Tier 1: Foundational

#### Navigation
**Role:** Global header for site-wide wayfinding.
**Pages observed:** All
**Spec:** Background: #ffffff | Text: #757575 | Radius: 0px | Typography: 18px/600
**States observed:** Default | Hover: Not captured

#### Rounded Button
**Role:** Primary call-to-action (Sign Up, Download).
**Pages observed:** Homepage, Pricing
**Spec:** Background: #10b8aa | Text: #ffffff | Radius: 3px | Padding: 12px 30px | Typography: 18px/500
**States observed:** Default | Active: Not captured

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and benefit blocks.
**Pages observed:** All
**Spec:** Background: #10b8aa | Text: #ffffff | Radius: 5px | Padding: 12px 15px 13px | Typography: 16px/400
**States observed:** Default | Hover: Not captured

#### Footer
**Role:** Global site map and legal links.
**Pages observed:** All
**Spec:** Background: #ffffff | Text: #757575 | Border-top: 1px #eeeeee | Typography: 14px/600
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Mint Surface
**Role:** Full-width background for secondary content sections.
**Pages observed:** All
**Spec:** Background: #e6f8f6 | Text: #757575 | Padding: 40px 0px | Radius: 0px
**States observed:** Default

#### Pricing Container
**Role:** Layout for subscription tiers.
**Pages observed:** Pricing
**Spec:** Background: transparent | Border: 10px #f2f2f2 | Radius: 4px | Padding: 30px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | ~1080px (standard container) |
| Section Padding | 40px - 65px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; section padding reduces; 1-column stack. |
| Desktop | 1440px | Multi-column grids (3-up for benefits/pricing). |

## Imagery & decoration
- **Flat Illustrations:** Uses multi-color flat vector illustrations with soft shadows to represent human interactions.
- **Teal Accents:** Icons and small graphic elements (like checkmarks) strictly follow the #10b8aa primary color.
- **Avoidance:** No heavy drop shadows, no photographic backgrounds, no gradients.

## Do's
- Use **#10b8aa** for all interactive elements.
- Apply **#e6f8f6** for section backgrounds to break up long white pages.
- Keep border radii between **3px and 5px** for a professional, structured look.
- Use **Roboto 700** for all primary page titles.
- Maintain a **40px-65px** vertical rhythm between content blocks.

## Don'ts
- **Wrong:** Using #0693e3 (Vivid Cyan Blue) for primary buttons. **Right:** Use #10b8aa. **Reason:** #0693e3 is a legacy WP preset, not the Readywhen brand primary.
- **Wrong:** Using pill-shaped buttons (9999px radius). **Right:** Use 3px radius. **Reason:** The brand identity is built on structured, rectangular geometry.
- **Wrong:** Using pure black (#000000) for long-form body text. **Right:** Use #454545 or #757575. **Reason:** The brand uses a softened gray scale for improved readability.
- Do not use gradients on buttons or surfaces.
- Do not use serif fonts; the system is strictly sans-serif (Roboto).

## Similar brands
- **Wealthsimple** (Clean, structured finance/planning)
- **Betterment** (Teal-anchored utility)
- **Evernote** (Document-centric, structured layout)

## Quick start

### CSS Variables
```css
:root {
  --color-primary: #10b8aa;
  --color-primary-soft: #e6f8f6;
  --color-text-main: #454545;
  --color-text-muted: #757575;
  --color-white: #ffffff;
  --font-main: 'Roboto', sans-serif;
  --radius-sm: 3px;
  --radius-lg: 5px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-brand-teal: #10b8aa;
  --color-brand-mint: #e6f8f6;
  --font-roboto: "Roboto";
  --radius-brand: 3px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using #10b8aa background, white text, 3px border radius, and Roboto 500 at 18px."
- "Create a content section with a full-width #e6f8f6 background and a centered 1080px container."
- "Style an H2 heading using Roboto 500 at 30px with #454545 text color."

## Known gaps
- Hover and Active states for buttons were not captured in the static crawl.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in the CSS variables captured.
- Form validation states (Success/Error) were not present on the analyzed pages.

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