Pencil Lead#1C2022
Text, dark sections
The graphite of a pencil on a work order: near-black with a trace of blue-grey so it never looks flat. Carries the body copy, the dark bands and the dark buttons.
Design system · palette · type · mark
The Loadline
board, built.
Every colour, typeface and device on this site comes out of one brand board: a hi-vis vest, a pencil, a piece of copper pipe, a conduit, and a builder's pad. This page is that system, live.
01 · Colour
Five colours, every one with a job
Industry, not decoration. Each colour arrives with an object attached, so there is never an argument about what belongs where.
Hi-Vis#D4F23B
Highlights, buttons, always with Pencil text
A hi-vis vest, not a highlighter pen. It is the loudest thing in the system and it is reserved for the marker highlight, the primary button and the full-bleed bands.
Copper#B34A1F
Accent, plumbing
The one colour that comes straight out of the trade — old copper pipe. Used for rules, section marks and accents, never for body copy on a dark ground.
Pipe Conduit#214A47
Depth, cards
Deep conduit green: the colour cards sit on when the page is dark. It reads as depth without going black, and it keeps the lime readable at 7.76:1.
Builder's Paper#F1ECE1
Backgrounds
The colour of a builder's drawing pad, not a blank browser window. Warm but low-chroma, so the lime and copper carry all the energy.
Measured contrast
| Pencil Lead on Builder's Paper | 13.94:1 | Body copy — AA and AAA |
| Builder's Paper on Pencil Lead | 13.94:1 | Dark sections — AA and AAA |
| Hi-Vis on Pencil Lead | 12.95:1 | Buttons and links on dark — AA and AAA |
| Pencil Lead on Hi-Vis | 12.95:1 | Marker text and lime bands — AA and AAA |
| Builder's Paper on Pipe Conduit | 8.35:1 | Card copy on depth — AA and AAA |
| Hi-Vis on Pipe Conduit | 7.76:1 | Card headings — AA and AAA |
| Copper on Builder's Paper | 4.55:1 | Accents and large text — AA |
| Hi-Vis on Builder's Paper | 1.08:1 | NEVER text — marker only, behind ink |
Contrast rules
- Lime is a marker, never text. At 1.08:1 on paper it fails as type — so Hi-Vis only ever appears as a block behind Pencil Lead text, or on a dark ground.
- Buttons are Pencil Lead with Hi-Vis text — 12.95:1, and it is what the design draws on the hero and the work cards.
- Copper is an accent at 4.55:1 on paper. Body copy uses #963D18 (5.99:1) when small copper text is needed.
- Focus is copper — a 3px outline with 3px offset, visible on both the paper and the ink grounds.
02 · Typography
Two faces, both on Google Fonts
A condensed signage display that has to be shouted, and a humanist sans that has to be read on a phone in daylight.
Display · 800
Big Shoulders
BE THE FIRST
CALL THEY MAKE
A condensed grotesque with signage DNA — the letterforms you see stencilled on a machine housing or a work van. Always set uppercase, tight leading, 800 weight. The brand board specifies Big Shoulders Display 800; Google has since published the same family as Big Shoulders, so this build requests the 800 weight of that family — identical design, current name.
Body · 400 / 600 / 700
Instrument Sans
We build fast, high-converting websites for local trade businesses. Calls, WhatsApps and enquiries land straight on your phone, and your site is live in 7 business days.
Wide apertures and a generous x-height, so it survives a mid-range Android on 4G in daylight. 17px base, 1.55 line height, because most of this gets read one-handed with a job waiting.
03 · The mark
A hull and
its load line.
Inspired by the load line mark on a ship's hull: the line that says “this is where you're meant to be.”
The mark
- From Ruan's artwork
- The load line mark, drawn by hand and shipped as a transparent PNG — the single source of truth for the mark.
- Placed by ground
- On paper it renders ink-on-transparent; on ink it renders hi-vis — so it holds its contrast whatever background it sits on.
Lockup — light ground
LOADLINESTUDIOLockup — dark ground
LOADLINESTUDIOScale — 16 to 64px
16px
24px
32px
64px
The hull illustration
The mark is one component, so the header, the footer, the favicon and every document stay locked together and can never drift apart.
04 · Devices
The five things that make a Loadline page recognisable
Use these and the page looks like Loadline. Add a gradient or a rounded shadow and it looks like everyone else's.
01 — The hi-vis marker
Key headline words get a flat lime block behind them. It is the loudest, most memorable move in the system, so it is used on one or two words per page, never a whole paragraph.
Be the first call they make
02 — The dark bar button
Pill-shaped buttons with gradients? Not here. Every action is a square Pencil Lead bar with Hi-Vis uppercase text — 12.95:1, and it looks like it was painted on.
Get a free mockupSecondary
On darkSecondary
03 — Pipe Conduit cards
On dark sections, cards sit in deep conduit green with lime headings and paper body copy. They are square, they have a hard 2px edge, and they never float on a shadow.
01
High-converting mobile website
Custom design, not a template, with tap-to-call and WhatsApp chat.
04 — Full-bleed lime bands
The trade ticker and the closing call-to-action run edge to edge in Hi-Vis with a hard ink border top and bottom. Two per page, maximum, so they keep their punch.
Ready for more jobs?
Edge-to-edge, no radius, no shadow
05 — Work-order numerals and honest tiles
Big condensed numerals for anything that is genuinely a sequence, and project tiles that are flat brand-colour panels with a drawn motif — never a fake screenshot and never a borrowed result.
01
02
03
Icons — one stroke weight
Eight trade and service icons drawn on the same 32 unit grid at 2.2 stroke width, so they sit together without a borrowed one in the set.
The work-order phone
Comparison table
Dark header band, light rows, square edges. Used for every price and comparison on the site.
| Loadline Studio | Traditional agencies | |
|---|---|---|
| Delivery | 7 business days | 2 to 4 months |
| Upfront cost | R1,499 once-off | R30,000+ |
| Goal | Phone calls and booked jobs | Nice graphics, no lead strategy |
05 · Rules
What the system does, and what it refuses
Do
- Use one hi-vis marker per headline, on the words that carry the promise.
- Keep buttons square and dark with lime text.
- Put the number in the top bar of every page, every time.
- Number a list only when the order actually means something.
- Test every screen at 390px first.
- Say the real price: R1,499 once-off, R800/mo.
Do not
- Never set lime as text on paper — 1.08:1. It is a marker, not a typeface.
- No gradients, no glass, no glowing purple, no rounded-everything.
- No stock photos of models in hard hats. Ever.
- No invented statistics, lead counts or testimonials.
- No fake client screenshots in a portfolio grid.
- No more than two full-bleed lime bands on one page.
Contrast ratios on this page were measured from the live hex values with the WCAG 2.1 relative-luminance formula, and the rendered page is re-checked in a real browser at both 390px and 1280px.