Style Guide
Every brand token this theme defines, rendered live from the active child theme's CSS custom properties. Swap the child theme and every swatch, heading, and button below updates automatically.
Colours
Green
-
green-900
--color-brand-green-900
-
green-800
--color-brand-green-800
-
green-700
--color-brand-green-700
-
green-600
--color-brand-green-600
-
green-500
--color-brand-green-500
Gold
-
gold-600
--color-brand-gold-600
-
gold-500
--color-brand-gold-500
-
gold-400
--color-brand-gold-400
-
gold-300
--color-brand-gold-300
Cream
-
cream
--color-brand-cream
Typography
Display
24/7 Emergency Locksmith
Our Locksmith Services
Call us
Transparent Pricing
font-display · font-bold matches the loaded 700 weight
Body
Locked out at midnight? Our fully insured locksmiths reach you within 30 minutes, anywhere inside our 20-mile radius.
Body copy sits on font-sans at the regular weight - the same typeface used sitewide for every paragraph, list, and form label.
font-sans
Utility
font-utility · font-semibold matches the loaded 600 weight
Buttons & CTAs
Primary — call now
bg-brand-gold-500 · text-brand-green-900
Secondary
border-brand-green-900 · text-brand-green-900
Link styles
Focus ring
Keyboard focus only
Cards & Elevation
Resting elevation
Static cards that never lift - service and review cards at rest.
--shadow-card
Interactive elevation
Lifts to shadow-card-hover on hover or focus-within. Try hovering this card.
--shadow-card-hover
Dark surface, no shadow
A bordered, semi-transparent panel for featured content inside a dark green section.
Forms
No live form currently ships on this site - these controls exist as a reference for whenever one is needed. Demo only; this form does not submit anywhere.