Foundation
Wallace Pierce is a North Carolina personal injury firm. The system is bold and brave: navy-grounded, square-cornered, set in one heavy sans at poster size — because the visitor arrives mid-crisis, outmatched, and needs to see at a glance that someone will fight for them.
The posture
Three things describe how the brand looks and sounds. Every token and component below is one of them made concrete.
Bold and brave.
The copy names the fight — the adjuster, the carrier, the bills — and says without a qualifier that the firm will take it on. “Will”, never “may”. Voice & Tone owns the rules.
Loud heads, quiet body.
High typographic contrast: display type runs up to 9rem while body stays at 1rem, and the two are set next to each other on purpose. Headlines carry the message; body carries the detail. Typography owns the scale.
Before, then after.
The central image is a person on their worst day and the same person on the day it is settled — storm to sunrise. Pages open on the before and turn to the after, in the photography and in the copy. Photography owns the pairs; Components owns the turn.
Six decisions everything else follows from
- 01 Navy is the ground; yellow is the call.
Dark is the resting state, not a mode. Yellow appears where the visitor is meant to act and essentially nowhere else — its scarcity is what makes it read as a call.
- 02 Nothing is rounded.
Zero radius everywhere, including inputs, whose
border-radiusis explicitly reset because browsers supply their own. The square corner is the brand's posture. - 03 Secondary text is chosen per surface.
There is no single muted gray. Each ground has its own verified token, because a color that clears AA on navy can fail on blue. See Color.
- 04 Motion is confirmation, never decoration.
Three durations, and the only properties that move are
transform,color,background-color— and--turn. Hover lifts; it does not dim, blur, or glow. - 05 Headings are loud; body is quiet.
The display scale is large — poster reaches 9rem — and body copy never grows to meet it. That gap is the brand's typographic contrast, and it is why headlines are short: a big word budget at a big size is a wall, not a statement. Nothing in the system reduces a display token to make a heading fit; it picks a smaller role.
- 06 Every page turns from before to after.
The photography is shot in matched pairs and the copy is written in matched halves. A page opens on the problem and moves to the promise, and the
.turncomponent makes that movement literal — one photograph becomes the other on hover, on scroll, or at the reader's request. A before without its after is half a decision.
Layout constants
Four values fix the page. Everything else is spacing.
| Token | Value | What it fixes |
|---|---|---|
--content | 76rem | Maximum content width; the shell centers within it |
--header | 5.25rem | App bar height; drops to 4.5rem under 43rem |
--line | .0625rem | Every rule and border in the system |
--focus | .1875rem | Focus ring width — sky, offset by --s-1 |
Motion
Three durations, each with one job. A fourth would be a decision nobody could defend.
| Token | Value | Use |
|---|---|---|
--motion-fast | 180ms | Hover and focus response — buttons, links, icons |
--motion-base | 320ms | State change on a whole element — card lift, background swap |
--motion-slow | 900ms | Entrances and photographic settle, with cubic-bezier(.22, 1, .36, 1) |
prefers-reduced-motion: reduce every transition collapses to .01ms, animations are removed, and entrance states resolve to their final values. Nothing in the system depends on animation to become readable or operable.Where to go next
| Page | Owns |
|---|---|
| Logo | The two lockups and the ground that selects between them |
| Typography | Oswald and DM Sans, the display metrics, both scales |
| Color | The palette and the surface contract |
| Icons | The twenty glyphs and why they are masks |
| Voice & Tone | Bold and brave — the rules, the rewrites, the banned words |
| Marketing | Tokens, components, page archetypes, email |