WilmerHale
Charcoal ground, a crimson message card and a semibold serif with tracked caps.
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.
- 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.
- Use the crimson for more than one panel.
- Lighten the ground; the page is charcoal.
- Round corners beyond 2px.
Color roles
#171717The page ground
#000000Raised panels, bands and cards
#ffffffPrimary ink, 17.9:1 on the background
#b6b6b6Supporting copy, 8.8:1 on the background
#ffffffPrimary actions; this system has no brand hue in its controls
#872434Brand color in artwork, marks and badges
#8c8c8cHairlines and dividers
Type
Use Crimson Text. Crimson Text is free under the SIL Open Font License.
Use Chivo. Chivo is free under the SIL Open Font License.
Sizes in use: 55px / 24px / 20px / 18px / 16px / 14px / 12px
Spacing
No single base unit: these are the values the page repeats.
Corners and depth
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# 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.
WilmerHale and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-06. We're not affiliated with or endorsed by WilmerHale.