Design System

Shutter Envy Brand Guidelines

Every token, every component, exactly as it renders on the live site. Use this page to keep new pages on-brand.

Colour Palette

Verified against the Peek brand audit (2026-05-16). Every value is the exact hex used on shutter-envy.co.uk.

Gold 400 (Brand Primary)

#C79A08

--color-gold-400

CTAs, accents, links

Gold 600 (Brand Dark)

#8B6900

--color-gold-600

Hover, italic emphasis

Cream

#F9F8F4

--color-cream

Soft section backgrounds

Ink

#070707

--color-ink

Body text

Ink Soft

#3E3E3E

--color-ink-soft

Secondary text

Ink Mute

#565656

--color-ink-mute

Captions, meta

Line

#E3E3E3

--color-line

Borders, dividers

White

#FFFFFF

#fff

Backgrounds, inverted text

Gold ramp

Gold 50
#FAF4DD
Gold 100
#F0DFA0
Gold 200
#E5C772
Gold 300
#D8B440
Gold 400
#C79A08
Gold 500
#B68A07
Gold 600
#8B6900
Gold 700
#6E5300

Brand Gradient

linear-gradient(180deg, #F9F8F4 0%, #FFFFFF 100%)

Typography

Spectral (serif) for display, Libre Franklin (sans) for body and UI. Letter-spacing is baked into the type scale — don't override.

h2-60-500 Spectral 500 60 / 70.5 / -1.62

Award-Winning Shutters
h2-30-500 Spectral 500 30 / 35.25 / -0.81

Inline Section Heading
h4-28-500 Spectral 500 28 / 39.76 / -0.756

Subsection Title
h3-24-500 Spectral 500 24 / 28.8 / -0.648

Card Title
subheading-22-500 Spectral 500 22.5 / 42.19

Featured copy lead-in
h3-21-500 Spectral 500 21 / 25.2 / -0.567

Compact Card Title
h5-20-500 Spectral 500 20 / 23.74 / -0.3

List item heading
large-body-19-400 Libre Franklin 400 19 / 35.625

A lead paragraph that draws people in.
subheading-21-400 Libre Franklin 400 21 / 39.375

Subheading sans-serif.
body-18-700 Libre Franklin 700 18 / 24

Bold body text for emphasis.
body-16-400 Libre Franklin 400 16 / 30

Standard body copy for reading.
small-body-15-400 Libre Franklin 400 15 / 28.125

Card descriptions and meta.
button-14-500 Libre Franklin 500 14 / 24

BUTTON LABEL
link-12-700 Libre Franklin 700 12 / 22.5

OVERLINE / EYEBROW

Buttons & CTAs

All buttons use Libre Franklin 500 at 14px (button-14-500) with letter-spacing 0.02em. Pill radius (999px) is the brand default.

Primary Pill Ghost Pill

Gold Gradient White Pill

Shadows & Radius

Use the scale; don't invent custom drop shadows or border-radius values.

Shadow scale

--shadow-sm

Subtle base for resting cards
--shadow-md

Hover state on cards
--shadow-lg

Featured cards, dropdowns
--shadow-xl

Lifted hero form, modal panels
--shadow-gold

Gold-tinted bloom (CTAs)

Radius scale

--radius-sm

6px
--radius-md

12px
--radius-lg

16px
--radius-xl

24px
--radius-pill

999px

Capitalisation Rules

Consistency in casing keeps the site looking professional. Defaults below.

Page & Section Headings

Title Case

Have You Experienced Shutter Envy?
Card Titles

Title Case

Premium Quality Materials
Buttons & CTAs

Title Case

Arrange a Home Visit
Eyebrows & Overlines

UPPERCASE

READY FOR YOUR 5-STAR SERVICE?
Body Copy

Sentence case

We design and fit made-to-measure shutters across Leicestershire.
Lowercase exceptions in titles

a, an, the, and, but, or, at, by, for, in, of, on, to, with — unless first or last word

Years in the Shutter Industry · Customisable to Fit Any Space

Intro Animations

Sections fade up as they enter the viewport. Add data-reveal to a wrapper; data-reveal-children to stagger its direct children.

data-reveal

Fade up (default). 28px slide, 700ms, ease cubic-bezier(0.16, 1, 0.3, 1).
data-reveal="left"

Slides in from the left. Used on 2-column intros (Product Showcase, Bay Windows).
data-reveal="right"

Slides in from the right. Pairs with "left" in 2-col layouts.
data-reveal="fade"

Opacity only, no slide. Used for elements that shouldn't shift position.
data-reveal="scale"

Scales from 0.97 → 1 with fade. Used on the Awards CTA box.
data-reveal-children

Staggers direct children (60ms + 70ms per child up to 12). Used on grids.
prefers-reduced-motion

All reveal animations are disabled if the user has reduced motion enabled — content shows instantly.

Hover Animations

Every interactive element lifts on hover. Consistency in timing is more important than the exact pattern.

Image tile · scale(1.06) on hover · 600ms · gold gradient overlay fades in

Hover me

Button · translateY(-1px) · background gold-400 → gold-600 · 200ms

Icon · background fills gold + scales 1.05 + colour inverts to white