01
The number never leaves the screen
A dark emergency bar pins the 24-hour line above the navigation, and the header keeps a call button beside it. On a page about power failures, that is the whole design brief.
JTradingElectrical.
A site for Junior's electrical business in Lyndhurst. Everything on the page points at a single 24-hour number — because when the power goes, nobody browses.
01 · The brief
Power sorted. Day or night.
JTrading covers fault finding, DB boards, lighting, solar and battery backup across Johannesburg. The business runs on one number that Junior answers himself, at any hour. The site had to make that number impossible to miss, explain the load-shedding work in plain language, and stay credible for residential and small commercial jobs alike.
What the site has to do
01
Lead with the number. A 24-hour emergency bar sits above the navigation on every screen, with the number repeated in the header button and the hero.
02
Answer the load-shedding question. Solar and battery backup get their own section, in plain language, because that is what most first calls are about.
03
Show who arrives. Junior is the owner and the electrician on the job. The site says so rather than hiding behind a company voice.
04
Cover both markets. Residential and small commercial work across Johannesburg, with free quotes stated up front.
02 · Colour
Steel blue on a technical grey.
The palette is deliberately restrained: a near-black ink, a flat grey page, and a single steel blue that carries the buttons, the emergency bar and the schematic artwork in the hero. It reads as electrical trade rather than domestic, which suits a business taking commercial work as well as houses.
Ink
#1D1F20
Body text and headings
Page
#F2F2F3
Page background
Surface
#E9E9EA
Cards and alternating sections
Accent
#5980A6
Buttons, links, emergency bar
Accent Deep
#416180
Hover and pressed states
Accent Night
#1D2D3D
Top bar and dark bands
Accent Light
#B5D9FD
Schematic lines, highlights
Neutral
#E7E7EA
Borders and dividers
03 · Typography
Condensed headlines, plain body.
Barlow Condensed sets the headlines in tight uppercase, which gives short statements like “Power sorted. Day or night.” real weight without a large type size. Barlow handles body copy and labels, keeping the two in the same family so the page stays coherent.
01
Barlow CondensedHeadings and display
02
BarlowBody, buttons, labels
04 · Details
The parts worth pointing at.
02
A schematic instead of a stock photo
The hero uses a drawn circuit trace rather than a photograph of a smiling electrician — cheaper to load, impossible to mistake for a template, and it reads as technical competence.
03
At-a-glance sheet
Hours, suburb, Google rating and who turns up are set as a four-column technical sheet, so the answers to the first four questions sit above the fold.
04
Load-shedding gets its own room
Solar and battery backup are separated from general electrical work, because that is the search bringing most new customers in.
05 · The page
Top to bottom, in one go.
Want the samefor your business?
Tell us what your business does and we'll come back with a scope, a fixed price, and a date.