Badge64 × 64

Paragon Exteriors

Design System & Elementor Kit

Foundations, components, states, responsive behaviour and usage rules - built to map cleanly onto both Elementor 3 (Global Colors/Fonts + classic widgets) and Elementor 4 (CSS variables, global classes, atomic widgets). Three breakpoints throughout: desktop, tablet and mobile - Elementor's defaults, unchanged.

    F1-F5 foundations · colour, type, spacing, logo, icons
    C1-C10 components
    P1-P4 page recipes
    quote a code (e.g. “C6.2”) to change one element
  

Foundations Components

01

Foundations

Colour

Primary Navy

#152A47 · --pgn-navy

headers, footers, hero

Deep Navy

#0A1730 · --pgn-navy-deep

overlays, outlines

Medium Navy

#27405E · --pgn-navy-mid

hover on navy, dividers

Accent Blue

#0762A7 · --pgn-blue

links, focus rings

Primary Gold

#FFDE1F · --pgn-gold

primary CTA only

Highlight Gold

#F5C518 · --pgn-gold-hi

hover state on gold surfaces

Pressed Gold

#CFA30F · --pgn-gold-press

active / pressed on gold buttons

Gold Ink

#6B4A04 · --pgn-gold-ink

gold text on light only

Pale Gold

#FCF3D7 · --pgn-gold-wash

callouts, quiet bands

Off-White

#F0EDEB · --pgn-bg

page background

Bright White

#FAF9F8 · --pgn-surface

cards, inputs, modals

Medium Grey

#6E7073 · --pgn-grey

secondary text (on light only)

Charcoal

#2D3235 · --pgn-ink

body copy

Light Grey

#B2B1B0 · --pgn-grey-light

borders, muted text on navy

Usage Rules

Core four carry the brand: Navy, Gold, Off-White, Charcoal. Everything else is support.
Gold is reserved for primary action and small emphasis marks - never for body text, never as a large background behind paragraphs.
Gold #FFDE1F is a warm mid tone: it carries navy text on buttons and reads cleanly as text on navy. On white it fails contrast - use Gold Ink #6B4A04 for gold text on light backgrounds - 6.3:1 on Bright White surfaces, 5.7:1 on Off-White, so it holds at eyebrow sizes.
Medium Grey is for light backgrounds only. On navy, use Light Grey #B2B1B0 for muted text.
Pale Gold #FCF3D7 is a wash, not an accent: usage callouts, one quiet section band per page, and the odd stat strip. Never behind long copy, never next to a gold button.
Maximum two background tones per page section band: Off-White and Navy. Bright White is for surfaces, not page backgrounds.

Typography

Saira Condensed

Headings, buttons and stat figures. Weight 700 as standard, 800 for display and h1. Condensed, so it runs tight - set tracking to 0 and rely on size for hierarchy.

Roboto

Body, labels, form fields, table data. Weights 400/600.

JetBrains Mono

Eyebrows and micro-labels only. Uppercase, 700 weight, 13-14px, .14em tracking. Optional.

F2.1 display

Roofs that outlast the guarantee

F2.2 h1

Expert roofing solutions in Guildford

F2.3 h2

What's included in a full re-roof

F2.4 h3

Flat roofing systems we install

F2.5 h4

GRP fibreglass - 25-year guarantee

F2.6 body-lg

Full roof replacements, flat roofing and cladding - surveyed within 48 hours, priced fixed, fitted by our own teams. Used for hero sub-copy and section intros.

F2.7 body

The default for all running copy. We strip the existing covering, replace defective battens and felt, fit a breathable membrane and re-lay the tiles, then bed and mechanically fix the ridge before a full site clean.

F2.8 small

Captions, card meta, table data and legal lines. Sits in Medium Grey on light backgrounds, Light Grey on navy.

F2.9 eyebrow

Roofing & exteriors · South East

Token	Desktop	Tablet	Mobile	Font / weight / line-height
display	64px	48px	36px	Saira Condensed 800 / 1.08
h1	48px	40px	32px	Saira Condensed 800 / 1.14
h2	36px	32px	27px	Saira Condensed 700 / 1.16
h3	26px	24px	22px	Saira Condensed 700 / 1.25
h4	20px	19px	18px	Saira Condensed 700 / 1.35
body-lg	19px	18px	17px	Roboto 400 / 1.6
body	17px	17px	16px	Roboto 400 / 1.65
small	15px	15px	14px	Roboto 400 / 1.55
eyebrow	14px	14px	13px	JetBrains Mono 700 / uppercase / .14em

Usage Rules

One h1 per page - the hero headline. Section titles are h2; card titles h3 or h4.
Measure caps at 70 characters. Use the wide container for imagery, never for paragraphs.
Never set body copy below 16px on any breakpoint.

Spacing, Grid & Radius

Spacing Scale - 4px Base

xs · 8

sm · 12

md · 16

lg · 24

xl · 40

2xl · 64

3xl · 96

Container & Grid

Content container 1200px; wide 1440px; narrow (long-form copy) 760px.

Gutters: 24px desktop, 24px tablet, 20px mobile. Columns: 12 desktop, 8 tablet, 4 mobile.

Section padding block: 112px desktop, 80px tablet, 64px mobile - this direction runs airier.

Radius & Borders

0px on everything: buttons, fields, cards, media - fully square

Radius is a flat 0 on every surface and control - square corners throughout. Border: 1px #e2dedb on light, 1px #27405E on navy. Shadow: 0 2px 6px rgba(3,30,58,.08) resting, 0 10px 24px rgba(3,30,58,.14) raised.

Breakpoints

desktop
tablet
mobile

Elementor's three defaults, unchanged - no custom breakpoints. Design mobile-first inside each component; only column count and section padding change at tablet.

Logo & Lockups

F4.1 primary lockup - on light

Primary lockup340 × 294 · min 220 wide

The full lockup with mascot, wordmark, services strip and strapline. Minimum width 220px - below that the strapline is illegible, so use F4.2.

F4.2 badge - compact

Badge104 × 104

Badge56

Badge40 · min

Header, mobile drawer, favicon and social avatars. Minimum 40px; the circle keeps the mascot readable where the full lockup would not.

Usage Rules

Clear space on all sides equals the height of the “PE” patch - nothing crosses it, including section edges.
Never recolour, outline, add a shadow to, rotate or stretch the logo. Scale proportionally only.
One logo per view: the header badge, or the footer lockup - not both in the same band.
The strapline “Built right. Built to last.” is part of F4.1 only; set it as live type elsewhere, never as a cropped piece of the artwork.

Iconography

F5.1 The Set

One open-licence stroke set - Lucide or Phosphor - and nothing else. No mixing line with filled or duotone, no theme leftovers from Font Awesome.

24px grid · 1.75px stroke
round caps · round joins
square viewBox, centred artwork

F5.2 Sizes

20 inline & lists · 24 default
32 card headers · 48 process steps

F5.3 Colour Pairings

navy on white

gold ink accent

white on navy

gold on navy

Navy is the default on light; Gold Ink is the accent. On navy the default flips to Off-White, with Primary Gold as the accent and Light Grey #B2B1B0 for muted. Never two icon colours in the same group, and never Primary Gold on white.

F5.4 The Set On Light Backgrounds

Twenty-five glyphs cover the whole site: services, trust marks, contact, process and interface. Navy #152A47 at 1.75px on Bright White or Off-White - service cards, trust strips, process steps, tables and accordion signs.

roof-replacement

flat-roofing

cladding

gutters

repairs

survey

guarantee

insured

accredited

reviews-star

own-teams

phone

coverage-pin

calendar

timescale

gallery

testimonial

download

arrow-right

chevron-right

chevron-down

Accent on light

Gold Ink, one per group, for the icon that carries the point.

F5.5 The Same Set On Dark Backgrounds

Identical geometry, colour only changes: Off-White #FAF9F8 at 1.75px on Navy or Deep Navy - hero trust rows, footer columns, utility bar, dark quote bands. Stroke weight never increases to compensate.

roof-replacement

flat-roofing

cladding

gutters

repairs

survey

guarantee

insured

accredited

reviews-star

own-teams

phone

coverage-pin

calendar

timescale

gallery

testimonial

download

arrow-right

chevron-right

chevron-down

Accent & muted on dark

Primary Gold for the one that matters, Light Grey for supporting detail.

F5.6 Construction

24 x 24 viewBox
2px live-area padding
artwork on whole pixels

One 1.75px stroke weight at every size - never scale the stroke with the icon. Round caps and joins, no fills, no inner detail below 2px. Optical balance beats mathematical centring: a triangle sits 1px low, a circle fills the box.

F5.7 Targets & States

48 target

hover

focus

disabled

An interactive icon keeps a 48px hit area whatever the glyph size, and carries the same 150ms colour transition as buttons. Decorative icons have no states at all.

F5.8 Files & Naming

icon-roof-replacement.svg
icon-guarantee.svg
icon-chevron-right.svg

Lowercase, hyphenated, prefixed icon- and named for meaning, not shape. Strip width, height and hard-coded fills on export so colour and size come from the widget; keep stroke="currentColor". One folder, no duplicates, no set mixing.

F5.9 Do / Don't

Do - one set, one stroke, one colour per group; a label beside every meaningful icon.

Do - size up to 32 or 48 for card headers and process steps rather than adding detail.

Don't - filled or duotone glyphs, emoji, brand logos as icons, or gold icons on white.

Don't - icons as bullets in running copy, or a photograph's job handed to an icon.

Usage Rules

An icon supports a label - it never replaces one.
No icons in running copy, and none inside buttons except the phone glyph on call CTAs.
Decorative icons get aria-hidden="true"; meaningful ones get a text label beside them.
Trade imagery - roofs, cladding, teams, finished jobs - is photography, never an icon.
Elementor: upload SVGs and use the Icon widget with colour and size pulled from globals; never paste inline SVG per widget.

02

Components

Each block gives the variants, every interactive state, responsive behaviour and the rules for when to use it.

Buttons

C1.1 on light · C1.2 on dark

C1.1 On Light Backgrounds

Off-White and Bright White bands. Gold primary, navy outline secondary, blue ghost, blue link.

Primary - default / hover / active / focus / disabled

Hover Active Focus Disabled

Secondary · ghost · link

Read the guarantee

C1.2 On Dark Backgrounds

Navy and Deep Navy bands. Gold primary unchanged; secondary switches to a light outline, ghost and link switch to Off-White - never blue on navy.

Read the guarantee

Spec

Height 48px (sm 40 / lg 56). Padding 14/26. Radius 0, and every button carries a 1px border in its own darker tone. Label Saira Condensed 700, 16px, no uppercase. Transition 150ms ease on background, border and colour; pressed state nudges down 1px. Every button on this page is live - hover and hold to see hover, active and focus.

Responsive

Mobile: buttons go full width in stacked CTA groups, min height 48px, 12px gap. Never place more than two side by side on mobile.

Rules

One gold button per view - the main conversion action. Secondary is outline. Labels are verb-first and specific: “Request a free survey”, not “Submit”.

Forms & Inputs

C2.1 on light · C2.2 on dark

C2.1 On Light Backgrounds

Bright White fields on Off-White or Bright White bands.

Full name Service required Tell us about the job I'm happy to be contacted about this enquiry.

C2.2 On Dark Backgrounds

Deep Navy fields on navy quote bands and footers.

Full name Service required Tell us about the job I'm happy to be contacted about this enquiry.

States on light

Focused

01234 567 890

Error

not-an-email

Enter a valid email address, e.g. name@company.co.uk

Disabled

Postcode required first

Success

Thanks - we'll call within one working day.

States on dark

Focused

01234 567 890

Error

not-an-email

Enter a valid email address, e.g. name@company.co.uk

Disabled

Postcode required first

Error text on navy uses #F08A8A, not #A32020 - the light-background red drops below 3:1 here. Focus rings go gold on navy and blue on light, so the ring always separates from the field border.

Spec

Field height 48px, 16px text (prevents iOS zoom), 1px border, radius 0 - the same square corner as buttons. Label 14px/600 above field, 6px gap. Field gap 16px, group gap 24px. The submit button sits inside the form, pinned to the bottom so paired forms line up.

Responsive

The two forms sit side by side from 720px up and stack below it. Inside a form: two columns on desktop, single column on mobile, submit full width. Never place a form in a container under 320px wide.

Rules

Quote forms: max five fields (name, phone, postcode, service, message). Labels always visible - placeholders are examples, never labels. Errors sit below the field, with text, not colour alone.

Cards

C3.1 service · C3.2 testimonial · C3.3 location

Service photo
4:3 · 800 × 600 min

Flat roofing

GRP and EPDM systems installed by our own teams, guaranteed 25 years.

Flat roofing services →

Testimonial

“Scaffolding up Monday, finished Thursday, site left spotless. The quote was the price.”

M. Okafor · Guildford · Roof replacement

Guildford

Roofing, cladding and gutter work across GU postcodes. Typical survey within 48 hours.

GU1 - GU12 · 01483 000 000

Roofers in Guildford →

Spec

Padding 24-28px, radius 0, 1px #e2dedb border. Media 4:3, square inside the card - the card's own radius clips it. Hover: gold border + raised shadow, 150ms. Title h4 at weight 700, body 15px.

Responsive

3-up desktop → 2-up tablet → 1-up mobile, 20px gap. Equal heights via stretch; the link pins to the bottom.

Rules

Whole card is clickable when it has a single destination - the arrow link is the visible affordance, not a second target. Max three lines of body copy; write to fit.

Header & Navigation

C4.1 utility bar · C4.2 main nav · C4.3 mobile drawer

25-year workmanship guarantee · Fully insured 01483 000 000

Badge44 × 44

PARAGON
EXTERIORS

Badge34

PARAGON✕

Services Projects Areas we cover About

Spec

Utility bar 38px; main bar 72px, sticky after 120px scroll with a 1px #27405E bottom edge. Brand: F4.2 badge at 44px plus the stacked wordmark, 12px gap - badge and wordmark are one link to the homepage, hover drops to 82% opacity. Same in the drawer and the footer lockup. Nav link 16px; active gets a 2px gold underline. Hover → #FFDE1F, 150ms.

Responsive

Tablet and below: nav collapses to a hamburger, drawer slides from the right at 300px / 86vw. Utility bar keeps the phone number, drops the strapline on mobile. Tap targets 48px.

Rules

Max five top-level items. Phone number visible at every breakpoint. Services dropdown lists services only - locations live under Areas.

Hero Sections

C5.1 home · C5.2 service · C5.3 location · C5.4 word-rise animation

Roofing & exteriors · South East

RoofsThatOutlastTheGuarantee.

Full roof replacements, flat roofing and cladding - surveyed in 48 hours, priced fixed, fitted by our own teams.

25-year guaranteeFully insured4.9 ★ · 180 reviews

hero image - completed roof, 3:2
drop real photography here

eyebrow fade → rule wipe → headline words rise → sub-copy fade

Motion

Headline words rise from a clipping mask, 90ms apart, 520ms each, cubic-bezier(.22,1,.36,1). Eyebrow fades up first (0ms), gold rule wipes in (120ms), sub-copy fades up last (690ms). CTAs and the trust row stay static - the conversion action is never hidden or delayed. Total under 1.2s. Honours prefers-reduced-motion.

Variants

Home: split 55/45 with image. Service: same layout, headline names the service, eyebrow names the region. Location: navy band, no image, headline “{Service} in {Town}”, plus a coverage line and phone CTA.

Responsive

Tablet: image moves below the copy at 16:9. Mobile: padding 32px, headline 32px, CTAs stack full width, trust row wraps to two lines.

Rules

Headline ≤ 8 words, one h1. Always exactly two CTAs and one trust row. Image overlay: #0A1730 at 55% minimum if any text sits over it.

Hero B - Underlined Phrase

C6.1 headline · C6.2 highlight underline · C6.3 gold marked phrase

Roofing & exteriors · Vancouver, BC

ExpertRoofing SolutionsinVancouver

Full roof replacements, flat roofing and cladding - surveyed in 48 hours, priced fixed, fitted by our own teams.

25-year guaranteeFully insured4.9 ★ · 180 reviews

hero image - completed roof, 3:2
drop real photography here

same as C5: eyebrow fade → rule wipe → words rise → sub-copy fade, then the highlight underline sweeps in

Motion

Identical to C5: eyebrow fades up (0ms), gold rule wipes in (120ms), headline words rise from a clipping mask 90ms apart (from 240ms, 520ms each), sub-copy fades last. The marked phrase rises as one unit. Its underline follows the Elementor Pro animated-headline “highlight” behaviour: a single hand-drawn SVG underline stroke (5px Bright White #FAF9F8, round caps, slight upward tail on the right) drawn left to right with stroke-dashoffset over 1200ms on an ease-out curve, starting once the last word has landed. Plays once on load, not looped. The marked words themselves are Highlight Gold #FFDE1F. The marked phrase is an inline-block so the stroke anchors to its own box (top:100%) and stays under the phrase however the headline wraps - headline line-height 1.34 leaves room for it. Reduced-motion shows the strokes already drawn and static.

Usage

Same shell as C5: split 55/45 navy band with the image on the right, eyebrow, sub-copy, two CTAs and the trust row - only the headline treatment differs. Use it on service and location pages where one phrase carries the message. Mark the words to underline in the CMS; the phrase must be one continuous run of two to three words, never the whole headline and never the town name.

Responsive

Headline 48px desktop, 40px tablet, 32px mobile; the underline stretches to the phrase width and its offset and height are in em, so it tracks the type at every size and never collides with the next line. Padding 56/40/32. Mobile: CTAs stack full width.

Tables

C7.1 spec · C7.2 coverage · C7.3 comparison

System	Guarantee	Install time	Best for
GRP fibreglass	25 years	2-3 days	Extensions, garages
EPDM rubber	20 years	1-2 days	Large flat spans
Torch-on felt	15 years	1-2 days	Budget repairs

Spec

Navy header row, 15px body, 13px vertical padding, 1px #e8e4e1 row rule, zebra #FAF9F8. Row hover #F3F0EE. No vertical rules. Alignment: first column and its header left; all other headers centred; numeric cells right-aligned with tabular figures so digits line up; remaining text cells centred under their header.

Responsive

On mobile the table scrolls horizontally inside its border with the first column sticky. Four columns maximum on mobile-facing tables.

Rules

Tables are for comparable facts only. Never use one for layout or for a coverage list that reads better as chips.

Accordion & Tabs

C8.1 accordion · C8.2 tabs

Accordion - FAQ

How long does a roof replacement take? +

What does the 25-year guarantee cover? +

Do you charge for surveys? +

Tabs - service detail

Strip and dispose of the existing covering, replace defective battens and felt, new breathable membrane, re-lay or replace tiles, new lead flashings, ridge bedded and mechanically fixed, scaffold and full site clean.

Rules: the open row flips from white to navy, so the active question reads as its own header and the answer stays visually attached to it. Accordions for FAQ and long specs only - never hide primary sales copy. First item closed by default. Tabs: three to five, labels one or two words, content of similar length so the panel doesn't jump. On mobile, tabs become an accordion.

Modal

C9.1 quote request · C9.2 gallery

Request your free survey✕

Two details and we'll call you back within one working day.

Name

Phone

Spec

Max width 480px (gallery 960px), radius 0, raised shadow. Backdrop #0A1730 at 70%. Enter: 150ms fade + 8px rise. Focus trapped; Esc and backdrop click close.

Responsive

On mobile the modal is full width minus 20px margins, pinned to the bottom, close target 48px.

Rules

Modals are user-triggered. No entry pop-ups, no exit-intent on service or location pages. One per page, two fields maximum in a quote modal.

C10

Footer

C10.1 columns · C10.2 legal bar

Primary lockup210 × 182

Roofing, cladding and exterior works across Surrey, Hampshire and West Sussex. 25-year workmanship guarantee.

01483 000 000

Services

Roof replacementFlat roofingCladdingFascias & soffits

Areas

GuildfordWokingFarnhamAll areas

Company

About usProjectsGuaranteeContact

Spec

Navy background, 40px padding, 32px column gap, 10px link gap. Brand column leads with the F4.1 lockup at 210px wide. Links #B2B1B0 → #FAF9F8 on hover. Legal bar 14px, separated by 1px #27405E.

Responsive

4 columns desktop → 2 tablet → 1 mobile with the brand block first. Legal bar centres and stacks on mobile.

Rules

Location links in the footer are capped at six plus an “All areas” link - the rest live on the areas hub, not stuffed into the footer.

03

Page Recipes

Section order for each template. Build these as Elementor templates once and reuse - location pages especially.

Homepage

Hero (split, image)
Trust strip
Services 3-up cards
Why us - 2-col + image
Recent projects 3-up
Testimonials
Areas covered
Quote form band

Service Page

Hero (service variant)
What's included - tabs
Systems comparison table
Process - 4 steps
Project examples
FAQ accordion
Related services
Quote form band

Location Page

Hero (location, no image)
Coverage - postcode chips
Services in {Town} cards
Local projects
Local testimonials
Map + contact
FAQ accordion
Quote form band

Service + Location

Hero “{Service} in {Town}”
Local proof - 3 stats
What's included
Local project gallery
Pricing guidance table
Testimonial (local)
FAQ (service + local)
Quote form band

One Elementor template with dynamic tokens; only hero copy, proof and gallery change per page.

Rhythm

Alternate Off-White and Navy section bands - never two navy bands in a row, and never more than two navy bands per page. Every page ends on the quote form band, then the footer.