Handover

Design system & Elementor guide

Everything needed to rebuild the redesign with Hello Elementor, Elementor Pro and Theme Builder. Set these values in Site Settings → Global Colours and Global Fonts first.

Colours

Primary navy

#152249

Dominant: nav rules, headings, footer, buttons

Near-black

#181818

Headlines, footer background

Charcoal

#272727

Body text

Mid-grey

#555555

Meta, excerpts

Light grey

#F5F5F5

Section backgrounds

Magenta

#CF043C

Primary CTA, Marketing Aspects

Cyan

#52BFD3

Focus, links underline, Business Aspects

Orange

#F49600

Property Aspects

Purple

#BB0A7E

Export Experts

Coral

#F26522

HR Aspects

Yellow

#FCC513

Hover on dark backgrounds only

Lime

#CCCE00

Reserve — Time for Life

Rule: navy dominates. One accent per category; never more than two accents in a single section.

Typography

H1 — ArticleRoboto Condensed 70048px / 1.08 (32px mobile)

H2 — SectionRoboto Condensed 700, uppercase24px / 1.1 + 3px navy rule

H3 — CardRoboto Condensed 70022px / 1.15 (18px small)

Eyebrow / labelRoboto Condensed 700, uppercase, 0.1em12px

Body — ArticleOpen Sans 40018px / 1.7, max 68ch (17px mobile)

Body — UIOpen Sans 40016px / 1.6

MetaOpen Sans 400/60012px

Components

Buttons & labels

Tell us your story

Marketing AspectsBusiness AspectsProperty AspectsExport ExpertsHR Aspects

Radius 2–4px. No pills, no gradients, no shadows.

Article card (Loop Item)

Export Experts

Which Export Markets Should UK Manufacturers Prioritise in 2027?

Trade agreements, currency and logistics costs are reshaping the opportunity map for smaller exporters.

Lesley Batchelor · 2 October 2026

Layout

Content width 1240px, side padding 20px mobile / 32px desktop.
Grid gaps 32px horizontal, 48px vertical. Section padding 56px.
Breakpoints: Elementor defaults — mobile <768, tablet 768–1024, desktop >1024.
Images: always 67:46 (matches existing 670×460 WordPress crops).
Article column max 68 characters; sidebar 280px on desktop only.

Elementor templates

Header

Theme Builder → Header. Four stacked containers: portfolio bar (navy, hidden on mobile), logo + search + social + CTA, Nav Menu widget with 4px navy top/bottom border, ‘Latest’ strip using a Posts widget limited to 2 titles.

Footer

Theme Builder → Footer. Navy newsletter container (Form widget) above a near-black 4-column footer.

Homepage

Page with Loop Grid widgets: lead (1 post, offset 0) at 8/12 width, secondary (2 posts, offset 1) at 4/12, Latest grid (6 posts, 3 columns, offset 3).

Single Post

Theme Builder → Single → All Posts. Post Terms (category), Post Title, Post Excerpt, Post Info, Featured Image, Post Content (Gutenberg body), Author Box, Posts widget for related (same category).

Article card

Loop Item template: Featured Image (aspect 67:46, object-fit cover), Post Terms, Post Title link, Excerpt (20 words), Post Info. Reused on every grid.

Category colours

Add one CSS class per category to the Post Terms widget via a small custom CSS snippet keyed on the category slug.