Royal Chimney Bridgewater — design kit
Color
Palette
Three ramps: ember for fire and calls to action, soot for dark grounds and ink, zinc for the air-and-dryer panel.
Ember
Soot
Zinc
Type
Typography
One display face for headings, one text face for everything people actually read.
Chimney sweeping, inspection and repair
Get your free estimate
Everything we do, explained plainly
Chimney sweeping
Section eyebrow
A lead paragraph sits here, usually one or two sentences that tell a visitor what the section below actually contains.
Body copy is set in the text face at a size built for paragraphs — long enough to read a page of it without the letterforms working against you.
Small print: captions, meta lines, and the fine detail under a card.
Buttons
Every state
Primary, secondary, ghost, disabled and busy — the five states a button actually needs on this site.
Disabled and busy read differently on purpose: one is not clickable, the other is working.
Cards
The mortar joint
Three tones of the same card shape, so a grid can sit on any ground without redesigning the card.
On mortar
The default card, for a light ground.
On soot
The same card, dropped onto a dark section.
On zinc
The air-and-dryer panel’s own tone.
Icons
One stroke weight
Seventeen icons, one stroke, square caps — no emoji, anywhere on this site.
Forms
One field component
Every input on the site — the contact form and this specimen — is built from the same field.
Let us know which town this is for.
Texture
Running bond
The one photo treatment used sitewide: a scrim under the caption, never over the whole image.
After the sweep
Bare masonry, no glaze, no loose debris on the floor of the firebox.
The same scrim treatment runs under every before-and-after pair and every hero photograph on the site.
Motion
Entrance vocabulary
Cards and list rows fade and lift in as they cross the fold, staggered by a small delay per item.
01
Delay 0ms
02
Delay 80ms
03
Delay 160ms
Nothing animates until the page has already measured what is on screen — see Base.astro.
Reviews
The reviews widget
The same component the site uses everywhere reviews appear — it renders nothing while the Google listing has none.
0.0
0 reviews on Google
Read on
Frequently asked, about the kit
Where do these tokens come from?
src/styles/tokens.css — every color, radius and shadow on this page is a CSS custom property defined once there.
What happens to this page in production?
It stays on the site at /kit/, marked noindex and left out of the sitemap — a reference for whoever edits the site next, not a page for a visitor to find.
Ember ground
The warmest surface
Reserved for the highest-stakes ask on a page — book the job, or call right now.
Elevation
Shadow and radius
Five shadow steps and four corner radii, named by what they are for rather than by size.