# Dodeley Design System

> A structured utility system defined by deep plum headers, high-contrast monochrome surfaces, and condensed typographic hierarchy.

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

## TL;DR
Dodeley utilizes a high-contrast palette where deep plum `#532378` serves as the primary structural anchor for navigation and section headers. The layout is strictly grid-based, alternating between pure white `#ffffff` content areas and dark charcoal `#333333` or black `#000000` footers. Typography relies on Open Sans for utility and body text, while Open Sans Condensed provides a distinct, vertical rhythm for primary headings. Component geometry is predominantly sharp-edged, with subtle 3px to 5px radii reserved exclusively for interactive inputs and specific call-to-action buttons.

## Signature DNA
1. **Plum Structural Anchors** (The use of `#532378` for top-level navigation bars and primary section headings creates a consistent horizontal rhythm across all pages.)
2. **Condensed Display Hierarchy** (Primary H1 titles use Open Sans Condensed at 26px, creating a professional, space-efficient header style that contrasts with the wider Open Sans body.)
3. **Utility Monochrome Foundation** (Data-heavy views, such as pricing tables, use a grayscale scale from `#eeeeee` surfaces to `#bbbbbb` borders to maintain legibility without chromatic interference.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background, button text | 78 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#444444` | Default body text color | 93 | 0.8 | Computed Style |
| `{color.ink.heading}` | `#000000` | High-contrast text, footer backgrounds | 45 | 0.8 | Computed Style |
| `{color.surface.muted}` | `#eeeeee` | Table row alternating backgrounds | 10 | 0.6 | Pricing Page |
| `{color.border.default}` | `#bbbbbb` | Input borders, table dividers | 6 | 0.6 | Computed Style |
| `{color.surface.dark}` | `#333333` | Secondary footer bands | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#532378` | Nav background, H1 text, primary borders | 32 | 0.8 | Resolved Primary |
| `{color.brand.soft}` | `#8b53ae` | Hover states, secondary decorative surfaces | 3 | 0.6 | Decorative only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans Condensed | 400 | Primary Headings (H1) | N/A | Google Fonts |
| Open Sans | 300, 400, 700, 900 | Body, UI, Subheadings | N/A | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 26px | normal | normal | 400 | Main Page Titles | `h1` |
| `{type.h2}` | 16px | 22px | normal | 700 | Section Subheads | `h2` |
| `{type.body.lg}` | 16px | 24px | normal | 400 | Navigation links | `a` |
| `{type.table.header}` | 15px | 19px | normal | 900 | Pricing table headers | `th` |
| `{type.button}` | 15px | 24px | normal | 700 | Primary CTAs | `a#privacy_button` |
| `{type.body}` | 14px | 22px | normal | 400 | Default running text | `div#privacy_banner` |
| `{type.caption}` | 12px | 22px | normal | 400 | Utility links (Login) | `a.login` |
| `{type.footer}` | 11px | 16px | normal | 400 | Copyright/Footer text | `p.dodeley_footer_logo` |

### Principles
1. **Condensed for Impact:** Use Open Sans Condensed strictly for H1 level titles to signal the start of a major content block.
2. **Heavyweight Tables:** Use weight 900 for table headers to ensure data categorization remains visible against `#532378` backgrounds.
3. **Loose Body Leading:** Standard body text at 14px maintains a 22px line height (1.57x) for maximum readability in long-form descriptions.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 69 |
| `{space.sm}` | 10px | 61 |
| `{space.md}` | 22px | 9 |
| `{space.lg}` | 50px | 3 |
| `{space.section}` | 180px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers, Nav bars | 199 occurrences |
| `{radius.sm}` | 3px | Primary Buttons | Rounded Button component |
| `{radius.md}` | 5px | Form Inputs | Text Input component |
| `{radius.pill}` | 50px | Decorative pagination dots | Radii evidence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All components observed | Component array |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** User data entry for login and registration.
**Pages observed:** 3
**Spec:** Background `#ffffff` / Text `#000000` / Border 1px `#bbbbbb` / Radius 5px / Padding 2px 3px / Typography 11px Open Sans
**States observed:** Default: captured | Hover/Focus: not captured

#### Rounded Button
**Role:** Secondary actions and utility triggers.
**Pages observed:** 3
**Spec:** Background `#555555` / Text `#ffffff` / Border 0px / Radius 3px / Padding 5px 12px 6px / Typography 15px Open Sans 700
**States observed:** Default: captured | Active: not captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Plan selection and feature highlighting.
**Pages observed:** 3
**Spec:** Background `#532378` / Text `#ffffff` / Border 1px `#532378` / Radius 4px / Padding 2px 10px 3px / Typography 12px Open Sans
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site steering.
**Pages observed:** 3
**Spec:** Background `#532378` / Text `#ffffff` / Radius 0px / Height 50px / Typography 16px Open Sans
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Footer Band
**Role:** Legal and secondary navigation.
**Pages observed:** 3
**Spec:** Background `#333333` / Text `#ffffff` / Radius 0px / Padding 22px / Typography 11px Open Sans
**States observed:** Default: captured

#### Data Table
**Role:** Pricing and feature comparison.
**Pages observed:** 1 (Pricing)
**Spec:** Header Background `#532378` / Row Background `#ffffff` / Alt Row `#eeeeee` / Border 1px `#bbbbbb`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1200px |
| Section Padding | 50px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation converts to hamburger menu; multi-column grids stack vertically. |

## Imagery & decoration
Dodeley uses a "Paper Plane" logo mark in white/grayscale. Decoration is minimal, limited to CSS-driven alternating row colors and plum-colored horizontal rules to separate content sections.

## Do's
* Use `#532378` for all primary structural headers.
* Apply `Open Sans Condensed` only to top-level H1 headings.
* Maintain a 1px border of `#bbbbbb` for all form elements.
* Use `#eeeeee` for alternating background stripes in data tables.
* Ensure primary buttons have a 3px border radius.

## Don'ts
* **Wrong:** Using `#532378` for body text. **Right:** Use `#444444`. **Reason:** Legibility and contrast.
* **Wrong:** Applying rounded corners to the main navigation bar. **Right:** Keep at 0px. **Reason:** Brand structural consistency.
* **Wrong:** Using sub-brand colors (if they existed) for the global header. **Right:** Always use the parent plum `#532378`.
* Do not use shadows; the system is strictly flat.
* Do not exceed 26px for headings; the system favors a compact vertical scale.

## Similar brands
* MailerLite (structural utility)
* CleverReach (monochrome/accent balance)
* Sendinblue (pre-rebrand typographic density)

## Quick start

### CSS Custom Properties
```css
:root {
  --dodeley-plum: #532378;
  --dodeley-plum-soft: #8b53ae;
  --dodeley-ink: #444444;
  --dodeley-canvas: #ffffff;
  --dodeley-border: #bbbbbb;
  --font-main: 'Open Sans', sans-serif;
  --font-display: 'Open Sans Condensed', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #532378;
  --color-primary-soft: #8b53ae;
  --color-neutral-ink: #444444;
  --font-sans: "Open Sans";
  --font-display: "Open Sans Condensed";
  --radius-button: 3px;
  --radius-input: 5px;
}
```

## Agent prompt examples
* "Generate a pricing table using Dodeley plum `#532378` for headers and alternating `#eeeeee` rows, using Open Sans 14px for content."
* "Create a login form with 5px rounded inputs and a 3px rounded primary button in `#555555`."
* "Design a section header using Open Sans Condensed at 26px in plum `#532378`."

## Known gaps
* Hover and focus states for buttons were not explicitly captured in the computed style evidence.
* Mobile-specific padding values for section transitions are inferred from screenshots rather than direct tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://dodeley.com | 1440px | 2026-06-06 |
| Pricing | https://dodeley.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://dodeley.com | 390px | 2026-06-06 |