Design System
System
Marketing · Web

Photography

Three libraries, each with one job. The visitor arrives mid-crisis, so the photography acknowledges that before it promises anything — and then it turns.

The turn: before and after

The portrait set is the brand's central image and it is built in matched pairs: the same person, the same car, the same skyline — under a storm on crutches, then at sunrise, standing straight, in yellow. The before is honest about the day the reader is having; the after is the promise. A page opens on the first and moves to the second, and a before image without its after is only half a decision.

Before: a woman on crutches beside her damaged car under a storm After: the same woman standing beside her repaired car at sunrise Before After
Before · the problem
Before state, portrait oneBefore state, portrait twoBefore state, portrait threeBefore state, portrait fourBefore state, portrait fiveBefore state, portrait six
After · the promise
After state, portrait oneAfter state, portrait twoAfter state, portrait threeAfter state, portrait fourAfter state, portrait fiveAfter state, portrait six
Six pairs, deliberately. The set spans age, gender, and ethnicity because the client base does. Rotating within it is expected; narrowing it to one or two faces is not. The frames are 16:9 and composed as mirrors — the person changes side between states — so a cross-fade reads as the scene turning rather than a filter lifting. Components that move between the two live on Components · The turn.

What each state must contain

New pairs are shot to this contract, so any before can turn into its after and the seam still reads.

ElementBeforeAfter
PersonSame person, visibly hurt or burdened — crutches, sling, brace. Facing the camera or off it, never smiling.Same person, standing straight, unaided, looking forward. Relief, not celebration.
WardrobeNavy or dark neutral.The brand's yellow. This is where the accent enters the photograph.
Vehicle or objectDamaged. The evidence is in frame.The same vehicle, repaired or replaced.
Weather and lightStorm, dusk, wet ground, city dark.Sunrise or golden hour, dry ground, same skyline.
CompositionPerson on one side, vehicle on the other, subject in the upper two-thirds.Mirrored: person and vehicle swap sides. The horizon stays level with the before.
Frame16 : 9, delivered as a pair with a shared index (NN-…-sad, NN-…-happy). Never one without the other.

Campaign

Scene photography for practice areas and location pages. Always behind a scrim — never as a bare background under text.

Intersection
IntersectionCar accident hero and practice-area lead.
Helmet
HelmetMotorcycle claims.
Courthouse
CourthouseLitigation and trial readiness.
Family
FamilyWrongful death, handled with restraint.
Skyline
SkylineLocation pages, North Carolina context.

Attorneys

Cut-out portraits on a cream plate, set object-fit: contain so the crop never clips a head. This is the one place in the system where an image is not cover-cropped.

Jared Pierce

Jared Pierce

Attorney

Kess Hendrix

Kess Hendrix

Attorney

Treatment rules

RuleWhy
Text over an image always sits on a scrimThe hero uses a two-layer gradient — horizontal to protect the copy column, vertical to seat the image on the band below
object-position: center top on cover cropsFaces sit in the upper third; a centered crop decapitates them at narrow widths
Hover scales to 1.03 over --motion-slowSlow enough to read as breathing, not as a zoom
Photo band media has a navy backingA transparent PNG or a slow load shows navy, never white
No filters, duotones, or color overlaysThe palette does the work; tinting a photograph fights it

Where the files live

What is on this page is not the library. These are viewer-sized derivatives — 720px, JPEG — that exist only so this page renders.

AssetHome
Full-resolution originalsIgnored media-local/, registered with TimDS by logical key
Published recordCommitted media.json — public URLs and hashes only
Viewer derivativespublic/design-system/photos/
Never commit a master. Add originals with npm run timds -- assets add FILE --key LOGICAL_KEY, publish with assets publish, and reference the logical key in source. Development resolves keys from .timds/local-media.json; production resolves them from media.json. Committing a full-resolution image bypasses both.