# Worthers Design System

> High-contrast utility meets technical precision: deep navy canvases anchored by vibrant lime-green actions and geometric sans-serif clarity.

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

## TL;DR
Worthers utilizes a high-contrast, professional palette dominated by Navy (`#212b53`) and White (`#ffffff`), using Lime Green (`#b1cb2d`) as a high-visibility primary action signal. The system relies on a dual-font strategy: **DM Sans** provides a modern, approachable geometric feel for body and UI, while **Figtree** is reserved for heavy-weight display moments. Layouts are structured around generous 104px vertical section spacing and 24px internal card padding. Elevation is handled through subtle, large-spread shadows rather than heavy borders, maintaining a clean, "cloud-native" aesthetic.

## Signature DNA
1. **The Lime Signal** (Primary actions use `#b1cb2d` with `#212b53` text, creating a distinct, high-contrast interactive layer that cuts through the navy brand foundation).
2. **Navy Immersion** (Full-width section bands using `--brand-primary` (#212b53) as a surface background to group technical features and value propositions).
3. **Geometric Clarity** (The pairing of DM Sans and Figtree at weights up to 900, emphasizing stability and technical reliability).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--brand-primary` | `#212b53` | Primary brand color, dark surface backgrounds, headings | 89 | 1 | Computed |
| `--color-white` | `#ffffff` | Page background, card surfaces, primary text on dark | 177 | 1 | Computed |
| `--text-body-color` | `#5e636e` | Default running text on light surfaces | 112 | 1 | Computed |
| `--gray-lighter-4` | `#e9eaec` | Borders, dividers, subtle section backgrounds | 23 | 1 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--btn-primary-bg` | `#b1cb2d` | Primary CTA background, success states | 20 | 1 | Computed |
| `--brand-secondary` | `#076cb4` | Secondary actions, info states, link highlights | 24 | 1 | Computed |
| `--brand-pink` | `#f0547d` | Decorative accent (About page specific) | 26 | 1 | Computed |
| `--brand-navy` | `#12143d` | Decorative only | 1 | 0.8 | Computed |

### Semantic
| Token | Value | Role |
|-------|-------|------|
| `--brand-success` | `#b1cb2d` | Validations and success signals |
| `--brand-info` | `#076cb4` | Informational banners and secondary buttons |
| `--brand-danger` | `#d92632` | Error states and destructive actions |
| `--brand-warning` | `#f7a827` | Warning alerts and pending statuses |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| DM Sans | 400, 500, 600, 700 | Primary UI, Body, Subheadings | DM Sans (Google Fonts) | SIL OFL |
| Figtree | 200, 400, 500, 700, 900 | Display, Hero Headings | Figtree (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 48px | 56px | normal | 900 | Main Hero Title | `h1.banner-title` |
| `{type.display-lg}` | 40px | 52px | normal | 900 | Section Titles | `h2.section-title` |
| `{type.heading-md}` | 26px | 34px | normal | 400 | Package/Card Titles | `h3.package-title` |
| `{type.heading-sm}` | 22px | 33px | -0.45px | 700 | Hover Nav/Feature | `span.text-md` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Lead Paragraphs | `article#dynamic-content` |
| `{type.body-md}` | 17px | 28px | normal | 400 | Default Body | `div.search-group` |
| `{type.button}` | 17px | 28px | normal | 600 | Large CTAs | `a.btn.btn-lg` |
| `{type.body-sm}` | 14px | 24px | normal | 500 | Navigation/Small UI | `div.app-nav` |

### Principles
1. **Heavy Display Weight:** Hero titles use Figtree at 900 to establish maximum authority.
2. **Compact Tracking:** Medium-sized headings (22px) use negative letter-spacing (-0.45px) for a tighter, more professional lockup.
3. **Generous Body Leading:** Standard body text (17px) uses a 28px line height (approx 1.65x) to ensure legibility in technical descriptions.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 22 |
| `{space.sm}` | 12px | 31 |
| `{space.md}` | 16px | 23 |
| `{space.lg}` | 24px | 39 |
| `{space.xl}` | 32px | 25 |
| `{space.section}` | 104px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp UI | 292 occurrences |
| `{radius.sm}` | 4px | Buttons, input fields | 8 occurrences |
| `{radius.md}` | 8px | Content cards | 23 occurrences |
| `{radius.full}` | 100px | Avatars, pill badges | 63 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default sections | Foundational |
| `card-low` | `rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 2px 24px 0px` | Feature cards | 21 occurrences |
| `card-high` | `rgba(0, 0, 0, 0.12) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 8px 32px 0px` | Pricing/Hovered cards | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** worthers.com
**Spec:** Background `{btn-primary-bg}` (#b1cb2d) | Text `{brand-primary}` (#212b53) | Radius 4px | Padding 8px 24px | Typography `{type.button}`
**States observed:** Default | Hover: `{btn-primary-hover-bg}` (#087080) | Active: Captured

#### Secondary Button
**Role:** Alternative actions
**Pages observed:** worthers.com
**Spec:** Background `{brand-secondary}` (#076cb4) | Text `{color-white}` (#ffffff) | Radius 4px | Padding 8px 24px
**States observed:** Default | Hover: `{btn-secondary-hover-bg}` (#2babe3) | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying service benefits
**Pages observed:** worthers.com
**Spec:** Background `{color-white}` (#ffffff) | Radius 8px | Padding 24px | Shadow `{card-low}`
**States observed:** Default | Hover: Not captured

#### Testimonial Avatar
**Role:** Customer social proof
**Pages observed:** worthers.com
**Spec:** Background `#eeeeee` | Radius 100% | Size 48px x 48px | Shadow: none
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Navy Section Block
**Role:** High-impact content grouping
**Pages observed:** worthers.com
**Spec:** Background `{brand-primary}` (#212b53) | Text `{color-white}` (#ffffff) | Radius 0px | Padding 104px 0px
**States observed:** Default: Captured

#### Domain Search Bar
**Role:** Primary tool interaction
**Pages observed:** worthers.com
**Spec:** Background `{color-white}` (#ffffff) | Border 1px `{gray-lighter-4}` (#e9eaec) | Radius 4px | Height 48px
**States observed:** Focus: `{input-focus-border-color}` (#212b53)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 104px |
| Grid Gutter | 24px |
| Card Internal Padding | 24px or 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; section padding reduces; cards stack 1-up |
| Desktop | 1440px | 3-up or 4-up card grids; full horizontal navigation |

## Do's
- Use `#b1cb2d` for the primary "Get Started" or "Order" actions.
- Ensure all text on `#212b53` backgrounds is `#ffffff` for accessibility.
- Maintain 104px spacing between major content sections.
- Use Figtree 900 for hero headlines to maintain brand authority.
- Apply `{card-low}` shadows to white cards on white backgrounds to create depth.

## Don'ts
- Do not use `#b1cb2d` for body text; it is reserved for backgrounds and success signals.
- Avoid rounding section containers; the brand uses sharp `{radius.none}` for structural blocks.
- Do not use `#5e636e` (body text) on `#212b53` (navy) backgrounds; contrast is insufficient.
- Never use Figtree for long-form body copy; stick to DM Sans.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --worthers-navy: #212b53;
  --worthers-lime: #b1cb2d;
  --worthers-white: #ffffff;
  --worthers-gray: #5e636e;
  --worthers-border: #e9eaec;
  --worthers-shadow-low: 0px 2px 24px 0px rgba(0, 0, 0, 0.08);
}
```

## Agent prompt examples
- "Generate a feature grid component using DM Sans 17px for descriptions and a 24px padded white card with a 0px 2px 24px shadow."
- "Create a hero section with a #212b53 background, Figtree 900 headlines in white, and a #b1cb2d primary button."
- "Design a domain search input with a 4px border radius and a #212b53 focus state border."

## Known gaps
- Hover states for Feature Cards were not explicitly captured in the evidence.
- Mobile-specific spacing tokens (e.g., reduced section padding) were observed but not explicitly defined in the CSS variable list.
- Dark mode variants were not captured in the source.

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