Design System Every Component,
One Page.
This page renders every theme component with real props so you can see and improve them.
Right slot content
Orbs are optional (orbs=true). Only the homepage earns them.
Compact Variant Lighter for Inner Pages
variant='compact' — shorter height, tighter padding. No orbs, no min-height. The page greets you without shouting.
Section Backgrounds
background="white"
Default white background. Used for primary content sections.
Content goes here via the default slot.
background="stone"
Warm stone (#f7f7f5). Alternates with white. Replaces the old bg-gray-50.
The editorial warmth comes from this — not cold grey.
background="gradient"
Slate-to-blue gradient. Used for callout bands and inline CTAs.
background="dark"
Navy (#0f1f44). For guarantee sections, dark CTAs, Astro stats panels.
SectionDivider
Connective Tissue Between Sections
A thin 1px rule instead of hard background colour swaps. Creates flow.
The rule above connects these sections without a colour change. Editorial, not blocky.
Section Widths
width="narrow" — max-w-4xl (896px). Steps, FAQs, focused content.
width="default" — max-w-6xl (1152px). Most sections.
width="wide" — max-w-7xl (1280px). Grids, comparisons, full-width layouts.
With Eyebrow
Centered Heading (Default)
Eyebrow is small uppercase tracking text in orange. Title is bold blue. Subtitle is muted.
Left-Aligned Heading
Use align='left' for content sections where centered text feels wrong.
FeatureGrid
Icon + Title + Description Cards
Hover for the orange border effect. columns={2} or columns={3}.
Lightning Fast
Built on Astro — loads in under a second. 100/100 PageSpeed scores.
SEO Foundation
Meta tags, structured data, XML sitemap from day one.
Mobile Perfect
More than half your visitors are on their phone.
StepList
Numbered Steps
Orange circles with sequential numbers. Used for processes and how-it-works sections.
Consultation
30-minute call. I learn your business, your customers, and what you need.
I Build It
I design and build your site in 3-5 days. Not a template — built for your business.
You Review
You see the site before it goes live. Want something changed? Tell me.
Go Live
Site goes live, Google Search Console set up from day one.
CheckList
Orange Tick Lists
Used inside pricing cards, feature sections, and anywhere a list needs visual weight.
- Up to 10 pages
- Mobile responsive
- Hosting & SSL included
- 100/100 PageSpeed
- Ongoing updates
PriceColumn
Divider-Based Pricing
Clean columns with border dividers — not boxed cards. The homepage pattern.
£49/mo
Website
A proper website, live in 7 days. Hosting, updates and support included.
View plans →£995
Fix & Build
Your site is broken or outdated. I fix it. One project, one price.
See what's possible →ArrowLink
Orange Links With Arrow
Bottom border, arrow suffix. The consistent link pattern across the site.
Colour Palette
The Theme Colours
Hero Navy
#0f1f44
WBS Blue
#052B5C
Accent Orange
#e8490f
Stone
#f7f7f5
White
#ffffff
Buttons
CTA Patterns
No border-radius. Solid fills. Two variants.
Cards
Card Patterns
Flat borders, no shadows, no rounded corners. The editorial look.
Default Card
border border-gray-100. No shadow, no radius. Clean.
Featured Card
border-2 border-[#e8490f]. For highlighted items.
Accent Card
border-l-4 border-[#e8490f]. For quotes, alerts, callouts.
Eyebrow on dark
Heading on Dark Background
Body text at 75% opacity. Links use orange with underline.
Secondary text at 60% opacity. Used for captions, notes, legal.
Pricing Example
Divider columns, orange ticks, popular tier highlight
Most Popular
£330/month
Breakthrough
For businesses ready to scale
- 20 keywords tracked
- Content strategy
- Technical SEO
- Monthly reports
£595/month
Trail Blazer
For businesses ready to dominate
- 30 keywords tracked
- Priority support
- Link building
- Strategy sessions
All plans: no contracts, cancel anytime
View full details →Related Services
Other ways I help businesses grow online
Spacing
Section Padding
padding='sm' = py-12 | padding='md' = py-16 (default) | padding='lg' = py-20