Calm in a hard moment
Generous space, one clear action at a time, nothing that flashes or competes. The page should lower the pulse, not raise it. The phone number and a free case evaluation are always one tap away.
Brand Fundamentals
Quiet authority,warm clarity.
How the Zinda Law Group website looks, moves and feels. It translates the Brand Guidelines (July 2026) into a working design system. Every colour, size and timing on this page is read live from one file, brand/tokens.css. Change a value there once and the whole website follows.
01 · Philosophy
The experience we are building
People usually reach this website on one of the hardest days of their lives. The design's job is to steady them, show them the firm is capable, and make the next step obvious. Four principles guide every decision.
Authority through proof
Real results, real attorneys and the firm's own numbers do the persuading. Typography carries the weight, so decoration never has to. We show figures exactly as the firm reports them, always with the past-results disclaimer.
Stone and paper
Classical architecture from the guidelines, set on warm ivory paper. Square edges, hairline rules and thin dark frames echo carved stone and printed legal documents. Blue is reserved for the moments that matter.
Motion that reassures
Things arrive; they never jump. Slow ease-out reveals, gentle parallax and no bounce. Motion always explains or guides, never decorates, and it switches off for anyone who prefers reduced motion.
Confidence, compassion, clarity.
The Zinda voice, from the Brand Guidelines: speak with confidence, compassion and clarity, earning trust through expertise and never forgetting that every client is going through one of the most difficult moments of their life.
02 · Logo
The mark
The primary logo appears in full colour on light grounds. On dark or warm grounds it becomes a single colour, never a recoloured version of the two-tone mark. Website files will move to SVG once the master artwork is supplied.
Primary · IvoryMono · Midnight
Mono · Sand
Clear spaceKeep space equal to the height of the Z mark on every side (dashed guide, left).
Minimum size140px wide on screen. Below that, use the Z submark (favicon, app icon).
NeverStretch, rotate, add shadows or effects, or place the two-tone logo on a busy photo.
03 · Colour
An atomic colour system
Five layers, each built from the one before: primitives (the six brand colours), scales derived from them, roles that say what a colour is for, semantic states, and finally components. Pages only ever use roles and tokens, never raw hex values.
Primitives Brand Guidelines p.12 · values read live from tokens.css
Proportion approximate share of a typical page
Warm neutrals umber mixed into ivory · --n-50 to --n-900
Blue tints signature blue mixed into ivory · --b-50 to --b-300
Night text for copy on midnight sections
Roles what each colour is for
| Token | Points to | Value | Use |
|---|
Semantic states identity · text · tint · border
SuccessYour request has been received.
WarningDeadlines differ by state. Check yours.
ErrorPlease add a phone number.
InformationConsultations are free and confidential.
Contrast calculated live · WCAG 2.2 · AA needs 4.5 : 1 for body text
| Text | On | Sample | Ratio | Result |
|---|
04 · Typography
Three voices
A refined serif for headlines, a humanist serif for reading, and a clean geometric sans for labels, buttons and numbers in the interface. The pairing comes straight from the Brand Guidelines.
Commercial font. Until a web licence is in place, the mock uses Newsreader (Light 300) as the closest open stand-in. Swap it in one line in tokens.css.
Open licence via Google Fonts. Regular 400 for reading, Bold 700 for short sub-heads.
Commercial font (the guidelines' alt body). The mock uses Figtree as a stand-in for labels, buttons, navigation and form fields.
Type scale fluid: sizes grow smoothly from phone to desktop · shown at this screen width
Weights
Headline LightDisplay 300 · all headings
Body BoldQuattrocento 700 · sub-heads, names
Label 600Interface 600 · labels, buttons
05 · Space & layout
Room to breathe
A 4px base unit. Small steps for components, large steps between sections. White space is the most important premium signal on the page, so sections stay generous even on mobile.
Layout live at this screen width
06 · Shape & depth
Cut stone, soft light
Corners are square or nearly square, like carved stone and paper. The only curve is the courthouse arch, used once per page as a signature. Shadows are warm, low and soft: a card should look set down on the page, not floating above it.
r-0 · 0
r-1 · 2px
frame · 1.5px umber
pill · chips only
arch · signature
shadow-1 · resting
shadow-2 · cards, dock
shadow-3 · forms on dark
07 · Motion
Arrive, don't jump
Three easing curves and five durations cover everything. Tap a card to see its curve in motion.
Headlines rise line by line from behind a mask.
Images reveal through the arch, then settle with slow parallax.
Statements light up word by word as you read.
Hover states slide in colour from below; nothing bounces.
The navigation turns to frosted glass on scroll and steps aside while you read.
Prefers-reduced-motion turns every transition off.
08 · Components
Built from the tokens
The molecules the homepage is made from. Each one uses only tokens, so a change to the system shows up here and on the site at the same time.
Result card
Premises Liability$35,949,000
Fall resulting in coma
Form fields · default · focus · error · success
Default
Focus
Please add a phone number.
Looks good.
09 · Imagery
Real people, timeless stone
The guidelines ask for authentic photography of the people behind the firm, balanced with classical architecture. On the website, portraits sit in black and white on warm stone and turn to colour when someone reaches for them. Architecture provides texture and calm, never drama.
Do
- Use the firm's own attorneys and real moments.
- Keep people in black and white unless they are the focus.
- Frame photos with the thin umber frame.
Don't
- Use crash scenes, injuries or ambulances.
- Use stock "gavel and handshake" clichés as heroes.
- Present illustrative people as Zinda clients or staff.
10 · Iconography
Fine line icons
Thin, open line icons in umber, matching the illustrations in the Brand Guidelines. 1.2px stroke at 40px, rounded ends, no fills. Icons support a word; they never replace it.
11 · Accessibility
Premium includes everyone
Many visitors are injured, stressed, on a phone, or reading in a second language. Accessibility is part of the look, not a layer on top.
Body text meets WCAG AA (4.5 : 1) on every background it is used on; the live table above checks it.
Every interactive element has a visible 2px focus ring in signature blue (ivory on dark).
Touch targets are at least 44 × 44px; the mobile dock keeps Call and Free Case Evaluation within thumb reach.
Body copy is 18px with a 62-character measure for comfortable reading.
Content is readable without JavaScript; animations only enhance it.
Reduced-motion and Spanish-language (Hablamos Español) paths are first-class.
12 · Tokens
One file, everywhere
This is brand/tokens.css exactly as the site reads it. Developers can lift it straight into WordPress, Webflow or any front end.
Loading tokens.css…