# WilmerHale design system

> Captured from https://www.wilmerhale.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/wilmerhale/). An independent analysis for reference: WilmerHale and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

WilmerHale works on a #171717 charcoal ground with white text and puts its main message in a #872434 crimson card. Crimson Text sets 55px semibold headlines, and Chivo carries 14px uppercase labels tracked 0.071em. The main button is a white rectangle with a #00576f teal label, and corners stay at 2px.

- Theme: dark
- Mood: dark, crimson, serif, tracked caps, architectural
- Category: Law firm

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#171717` | The page ground |
| Surface | `#000000` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 17.9:1 on the background |
| Muted text | `#b6b6b6` | Supporting copy, 8.8:1 on the background |
| Accent | `#ffffff` | Primary actions; this system has no brand hue in its controls |
| Highlight | `#872434` | Brand color in artwork, marks and badges |
| Border | `#8c8c8c` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#171717`, `#000000`, `#d3d3d3`, `#e6e6e6`, `#b6b6b6`, `#872434`, `#590b18`, `#414141`.

## Typography

- **Crimson Text**: display, 66.2% of the text. Use Crimson Text. Crimson Text is free under the SIL Open Font License.
- **Chivo**: body, 33.8% of the text. Use Chivo. Chivo is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Crimson Text | 55px | 600 | 1.09 | 0 |
| Heading | Crimson Text | 24px | 600 | 1.25 | 0 |
| Subheading | Crimson Text | 24px | 600 | 1.25 | 0 |
| Body | Chivo | 14px | 600 | 1.28 | 0.071em |
| Small | Chivo | 12px | 400 | 1.16 | 0.083em |

Sizes in use, largest first: 55px, 24px, 20px, 18px, 16px, 14px, 12px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 5px, 8px, 12px, 15px, 32px, 48px, 90px.

## Shape

Corner radii, smallest first: 2px, pill (9999px).

No shadows: depth comes from color and borders.

## Components

### Primary button ("GET TO KNOW US")

- Fill: #ffffff
- Text: #00576f, 16px at weight 600
- Border: none
- Corner: 0px
- Height: 48px, padding 16px 24px

## Do

- Put the key message in one solid crimson card over a dark photo.
- Pair a semibold serif headline with small tracked uppercase sans labels.
- Use a white rectangular button with a colored label.

## Don't

- Use the crimson for more than one panel.
- Lighten the ground; the page is charcoal.
- Round corners beyond 2px.

## CSS variables

```css
:root {
  --color-background: #171717;
  --color-surface: #000000;
  --color-text: #ffffff;
  --color-text-muted: #b6b6b6;
  --color-accent: #ffffff;
  --color-highlight: #872434;
  --color-border: #8c8c8c;
  --font-display: "Crimson Text", system-ui, sans-serif;
  --text-display: 55px;
  --weight-display: 600;
  --font-heading: "Crimson Text", system-ui, sans-serif;
  --text-heading: 24px;
  --weight-heading: 600;
  --font-subheading: "Crimson Text", system-ui, sans-serif;
  --text-subheading: 24px;
  --weight-subheading: 600;
  --font-body: "Chivo", system-ui, sans-serif;
  --text-body: 14px;
  --weight-body: 600;
  --font-small: "Chivo", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 3px;
  --space-2: 5px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 90px;
  --radius-1: 2px;
  --radius-2: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.