The type scale, colour palette and button set as they are actually built in the
prototypes. Nothing here is proposed — every value was read back out of
option1-with-hive-variation/index.html (the home_v1 / home_v2 bundle),
inner-service.html, team-index.html and the button funnel
button.html. Each entry carries the selector it came from, so a developer can
open the file and see it in place. Fonts and the two brand colours are client-mandated and
do not change — the modernization keeps League & Williams' branding.
Two families, both from Google Fonts, both carried over from the live site — verified 2026-08-19. Raleway does every heading, label, button and phone number; Open Sans does every running paragraph. No font change is part of this project. The one hard split: if it is uppercase and tracked, it is Raleway; if it is a sentence you read, it is Open Sans.
How the weights are used: 300 for every large uppercase heading (H1–H3) — the light weight is what makes the caps read as modern rather than shouty · 600 for card titles and mid-size UI · 700 for buttons, eyebrows and small caps labels · 800 is reserved for phone numbers and the footer wordmark — nothing else on the site is set at 800.
How the weights are used: 400 for all running text · 600 to lift a phrase inside a paragraph and for form labels · 700 only where a body-sized word has to act as a heading. Open Sans is never set uppercase — that job belongs to Raleway.
/* the design tokens every prototype page declares */ :root { --orange: #EF6D3E; /* brand orange — the distinctive one */ --orange-dk: #D85A2E; /* pressed / hover state of solid orange */ --orange-cta: #EF6136; /* the contact strip's slightly redder orange */ --teal: #46ADC8; /* minor accent — eyebrows, links, the polygon */ --brown: #423C37; /* brand brown-black — headings, primary button */ --band-dark: #453F39; /* the contact band's left half */ --body-text: #6B6B6B; /* default running text */ --paper: #F9F9F9; /* page background — never #FFFFFF */ --line: #E4E1DC; /* every hairline, border and rule */ --footer: #2A2622; /* warm near-black — never pure black */ } /* the brand shape — a regular pointy-top hexagon, ratio √3/2 = 0.8660254 */ .hexpt { clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
Four brand colours carry the identity; everything else is a neutral built to stay out of
their way. The white rule: white is never pure white and black is never pure black.
Backgrounds are the off-white #F9F9F9 and the darkest surface is the warm
near-black #2A2622 — the live site's flat #FFF and #000
are exactly what the modernization moves away from.
#fff,
which is what makes them read as raised.A fifth orange exists: #EF6136
(--orange-cta) is the inner pages' contact strip, marginally redder than
#EF6D3E. It is a legacy value carried over from the live site's own two oranges,
not a second brand colour — do not introduce it into new work; use #EF6D3E.
#000.Not part of the palette: #44403B and
#B44A33 appear in the prototypes as the fold-line marker and its button — internal
measuring chrome, stripped before anything is shown to the client. Do not carry them into the build.
The prototypes were built as pages, not as a scale, so this table maps what is on the
page onto the H1–H6 ladder. Sizes are the values in the CSS, verbatim. Two honest notes
before you read it: the homepage deliberately has no H1 — the client's brief rules out a
hero, so the practice-area grid is the first screen and the page's H1 lives on the inner
templates; and the modal element named .h5 in the markup is set at 21px, larger
than the H4 role — a naming slip in the prototype, listed below as a deviation rather than
quietly renumbered.
If you are hurt in a crash in British Columbia there are two separate claims running at once, and they are paid by the same insurer for different reasons. Part 7 benefits are no-fault. The tort claim is not.
ICBC claims, motorcycle and cycling collisions, pedestrian injury, slip and fall, dog bites, and wrongful death — handled by a team, not a single lawyer carrying your file alone.
Six offices on Vancouver Island and the Lower Mainland. One call reaches the team that handles your kind of claim.
Available 24/7 · No fee unless we win · 3 of 12
Placeholder — replaced after the November shoot. Sized and cropped to the final 16:9 aspect ratio.
Seven decisions that are not obvious from any single value above, but that every page in the prototypes follows.
If a string is uppercase and tracked, it is Raleway. If it is a sentence you read left to right, it is Open Sans. Open Sans is never set uppercase anywhere in the prototypes.
H1–H3 are Raleway 300; H6 eyebrows and buttons are Raleway 700. The scale inverts on purpose — it is what stops a page of uppercase from shouting.
38px H1 → .09em · 30px H2 → .06em · 21px cell title → .12em · 12px eyebrow → .18em. Caps close up at small sizes; the tracking is what keeps them scannable.
The primary button's fill is constant — only its hexagons move. Icon buttons invert completely. That difference is how a visitor tells an action from a control.
Every button, card, input and image is square. The hexagon is the only non-rectangular shape on the site, which is what gives it all its weight.
Contact appears many times, but the swarm button appears once per view, with solid orange reserved as a second voice. Two equal CTAs in one screen is a bug.
Backgrounds are #F9F9F9, the darkest surface is #2A2622, and
greys are warm (brown-tinted), not neutral. Plain #FFF is reserved for raised
cards only.
Every image in the prototypes is a labelled placeholder, sized and cropped to its final aspect ratio so the real shoot drops in without re-layout. Never show one to the client unlabelled.