# WealthCounsel Design System

> Professional legal precision anchored by a teal-and-charcoal palette and heavy Montserrat display typography.

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

## TL;DR
WealthCounsel employs a "Professional Teal" aesthetic that balances corporate authority with modern accessibility. The system is built on a foundation of pure white (#ffffff) and soft mint-gray (#f7fafa) surfaces, punctuated by a primary teal accent (#55c0b5) and a deep forest-teal (#417c79) for high-contrast elements. Typography is exclusively Montserrat, utilizing extreme weight ranges from 300 (Light) for italicized sub-headers to 800/900 (Extra Bold/Black) for massive display headlines. Components favor sharp 0px corners for structural sections and soft 24px radii for content cards, creating a distinct "nested" depth without the use of drop shadows.

## Signature DNA
1. **The Teal Gradient/Pattern Overlay** (Geometric teal patterns layered over #417c79 or #55c0b5 backgrounds, visible in hero and footer sections across all pages).
2. **Extreme Weight Contrast** (Pairing 800-weight Montserrat headlines at 60px with 300-weight italicized sub-captions, seen on the homepage and about sections).
3. **The "Coral" Action** (Strategic use of #ef6859 for primary conversion buttons to break the monochromatic teal/gray environment).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Primary page background and button text | 41 | 1.0 | Computed Style |
| `{color.ink}` | `#000000` | Primary display text | 33 | 0.8 | Computed Style |
| `{color.ink-soft}` | `#414141` | Body text and secondary headings | 24 | 0.8 | Computed Style |
| `{color.neutral-gray}` | `#616365` | Muted body text and footer labels | 33 | 0.8 | Computed Style |
| `{color.surface-tint}` | `#f7fafa` | Sub-section backgrounds | 8 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#55c0b5` | Primary brand teal; borders, icons, and hero surfaces | 27 | 0.8 | Computed Style |
| `{color.primary-deep}` | `#417c79` | High-contrast backgrounds and footer surfaces | 19 | 0.8 | Computed Style |
| `{color.action}` | `#ef6859` | Primary CTA button background (Coral) | 10 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 300, 400, 600, 700, 800, 900 | All headlines, body, and UI | Montserrat (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-xl}` | 60px | 67.8px | normal | 800 | Hero H1 | `h2.text-6xl.text-white` |
| `{type.heading-lg}` | 36px | 54px | normal | 800 | Section Headers | `h2.max-w-screen-md` |
| `{type.heading-md}` | 30px | 45px | normal | 800 | Sub-section titles | `h3` |
| `{type.heading-sm}` | 24px | 36px | 1.2px | 900 | Feature titles | `h4.pl-4.pr-5` |
| `{type.heading-light}` | 24px | 30px | normal | 300 | Italicized sub-heads | `h4.italic.font-light` |
| `{type.body-lg}` | 18px | 29.25px | normal | 600 | Lead paragraphs | `p` |
| `{type.body-md}` | 16px | 26px | normal | 400 | Standard body | `div.hidden.w-4/5` |
| `{type.label-caps}` | 16px | 26px | 1.6px | 700 | Uppercase labels | `p.tracking-widest.uppercase` |
| `{type.button}` | 20px | 20px | normal | 800 | CTA Labels | `button.p-3.px-4` |

### Principles
1. **Heavy Display:** Headlines never drop below 800 weight for primary section titles.
2. **Wide Tracking for Labels:** Uppercase labels and small headers use 1.2px to 1.6px letter spacing.
3. **Italic Contrast:** Light-weight (300) italics are used to provide a "human" counterpoint to the heavy geometric sans-serif headers.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 14 |
| `{space.sm}` | 16px | 53 |
| `{space.md}` | 32px | 17 |
| `{space.lg}` | 56px | 3 |
| `{space.xl}` | 64px | 7 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers, inputs | 155 occurrences |
| `{radius.lg}` | 24px | Feature cards, pricing panels | `radius: 24px` on Card components |
| `{radius.pill}` | 9999px | Primary buttons | `radius: 9999px` on Pill Button |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | All cards and surfaces | Component spec: `shadow: none` |

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary conversion action
**Pages observed:** Homepage, About
**Spec:** Background `{color.action}` (#ef6859) / Text `{color.canvas}` (#ffffff) / Radius `{radius.pill}` (9999px) / Padding 12px 16px / Typography `{type.button}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Content Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.primary-deep}` (#417c79) or `{color.primary}` (#55c0b5) / Text `{color.canvas}` (#ffffff) / Radius `{radius.lg}` (24px) / Padding 16px 32px
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Hero Surface
**Role:** Full-width section background
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.primary}` (#55c0b5) / Text `{color.ink}` (#000000) / Radius `{radius.none}` (0px) / Padding 56px 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1280px (estimated from 1440px viewport) |
| Section Padding | 96px (vertical) |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Padding reduces to 24px |

## Imagery & decoration
- **Geometric Overlays:** Uses repeating parallelogram patterns in teal as background textures.
- **Iconography:** Thin-stroke, teal-colored line icons with circular or cloud-based enclosures.
- **Avoids:** Drop shadows, rounded corners on main section containers, and serif typefaces.

## Do's
- Use Montserrat 800 for all primary headlines.
- Apply #ef6859 (Coral) exclusively for primary CTA buttons.
- Maintain 0px radius for all full-width section backgrounds.
- Use #f7fafa for subtle background differentiation between white sections.
- Ensure 1.6px letter spacing on all uppercase tracking-widest labels.

## Don'ts
- **Wrong:** Using a drop shadow on cards. **Right:** Use 24px radius and high-contrast background color. **Reason:** The system relies on flat color blocks for depth.
- **Wrong:** Using #55c0b5 for primary body text. **Right:** Use #414141. **Reason:** Legibility and contrast standards.
- **Wrong:** Labeling a sub-brand color as the parent primary. **Right:** Stick to #55c0b5 as the parent primary.
- Do not use Montserrat weights below 300.
- Do not use rounded corners on form inputs.

## Similar brands
- Clio
- MyCase
- PracticePanther
- Smokeball

## Quick start

### CSS Custom Properties
```css
:root {
  --wc-primary: #55c0b5;
  --wc-primary-deep: #417c79;
  --wc-action: #ef6859;
  --wc-ink: #000000;
  --wc-ink-soft: #414141;
  --wc-canvas: #ffffff;
  --wc-surface-tint: #f7fafa;
  --wc-font-main: 'Montserrat', sans-serif;
  --wc-radius-card: 24px;
  --wc-radius-pill: 9999px;
}
```

## Agent prompt examples
- "Generate a feature card using Montserrat 800 for the title, a 24px border radius, and a background color of #417c79 with white text."
- "Create a primary CTA button with a coral background (#ef6859), white text in Montserrat 800, and a pill-shaped radius."
- "Design a hero section with a teal background (#55c0b5), 0px border radius, and a 60px Montserrat 800 headline."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Specific mobile breakpoint transition values (e.g., 768px vs 1024px) were not declared in tokens.

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