A first website for a commercial practice on Grayston Drive, Sandton. Built for the nervous moment before someone phones an attorney: who you are, what happens next, and how to reach you today.
Rams Attorneys practises from the 3rd floor of 70 Grayston Drive, in the middle of Sandton's business district. Until now, someone searching for a commercial attorney found a Google listing with a 4.2 rating and nothing else: no practice areas, no way to know what a first consultation involves, no page that belongs to the firm. Choosing an attorney is a nervous decision. The site's job is to settle that nerve early, then make the phone ring.
What the site has to do
Reassure first. The rating, three plain promises and what happens after the call all sit in the first two screens, before any services.
Be reachable. The phone number is in the header on every screen, the live open or closed status is under the hero, and the form works from day one.
Speak plainly. Practice areas described the way a client would say them, not the way a textbook would.
Look like Sandton. Warm charcoal and paper, one brick accent, and photography of Johannesburg glass and stone. Not navy, gold and a gavel.
Own the ground. The Google listing can be renamed or claimed by anyone in the building. The website cannot.
Every law firm template reaches for navy and gold. We went quieter: a warm charcoal ink instead of black, a warm paper ground instead of white, and a single brick red that does one job only, marking the thing to do. The reds and browns come from Sandton's own stone and glass. Every neutral is tinted toward the paper hue so nothing on the page reads as grey, and every text and background pairing meets accessibility contrast guidelines.
Ink
#251E19
Headings, body text, the dark section, footer
Ink Deep
#342C27
The moving strip under the hero
Brick
#8C3D23
Call and enquiry buttons, stars, progress
Brick Deep
#7B290C
Pressed and hover states
Paper
#FAF7F1
Page ground
Linen
#F0EBE3
Alternating sections
Hairline
#D6D0C7
Rules and dividers
Stone
#655C55
Secondary text and labels
Newsreader is a transitional serif drawn for reading, not for a letterhead. It carries the headlines, the practice areas and the quotes, and it gives the page the settled, unhurried feel of a firm that has been doing this a while. Instrument Sans does everything else: body text, labels, the strip, the form. Two families, one job each, and hierarchy that comes from size rather than decoration.
01
“Commercial attorneys on Grayston Drive, Sandton.” Paste another firm's name in and it stops making sense. The Johannesburg skyline fills the whole first screen, wiped in from the right as the headline rises word by word — the one piece of theatre on the site.
02
The 4.2 is the biggest thing on the second screen, stars filled to exactly four and a fifth, with a link straight to Google so anyone can check it. Beside it, three promises in plain words: you speak to an attorney, fees before work starts, one attorney from start to finish.
03
A slow-moving band under the hero carries whether the office is open right now, the hours, the 3rd floor address, the rating and the number. Open or closed is calculated every minute in Johannesburg time, so a visitor abroad still sees the truth for Sandton. It pauses when you hover.
04
Hairline rows that tint on hover, beside a photograph of a hand signing an agreement that stays put as you scroll the list. Each area gets a one-line summary and a two-line description written the way a client would describe the problem.
05
Four numbered steps — call, a first consultation, a plan in writing, we get on with it — on the only dark band on the page, so the change of pace is felt as well as read. Fees are named at step three, so nobody has to ask the awkward question.
06
The call to action is never invisible. Everything switches off for visitors who prefer reduced motion, and the page is still complete with no JavaScript at all.
Tell us what your business does and we'll come back with a scope, a fixed price, and a date.