Citation Design System — Preview

See the re-skin comparison — every block under both token sets, side by side.

See the Swiper a11y demo — the shared carousel config validated in isolation.

See the composed page finale — the whole library assembled into one marketing page, with a live brand-theme toggle.

Split media-right · white · image (eyebrow, bullets, trust, 2 CTAs)

HR & Employment Law

Expert support, whenever you need it

Advice, software and insurance for UK businesses — in one place.

  • 24/7 advice line
  • Unlimited cases
  • Fixed-fee cover

4.8 /5 from 1200 reviews · Trustpilot

Two colleagues reviewing a document together

Split media-left · tint · screenshot (eyebrow, no bullets, 2 CTAs)

Health & Safety

Stay compliant without the busywork

Templates, audits and expert guidance built into one platform.

Dashboard showing compliance status

Split form · dark · glass-form-card (form embed, form-below-copy on mobile)

Get started

Book your free consultation

Tell us about your business and we will be in touch within one working day.

Start your free consultation

Centred · brand · no media (no eyebrow, 1 CTA — inverse text on brand)

One partner for every people challenge

Join 90,000+ UK businesses who trust Citation.

Centred media-below · gradient · illustration (bullets, trust)

Why Citation

Everything your business needs to thrive

HR, health & safety, and insurance — joined up.

  • Trusted since 1995
  • Award-winning support

4.9 /5 from 3400 reviews · Reviews

Illustration of connected services

Split media-right · photo-bleed · image-as-backdrop (scrim, inverse text)

Trusted nationwide

Protecting the businesses that power Britain

From the high street to the factory floor.

Split media-left · dark · video island (poster + play control)

See how it works

Your whole business, one login

Watch a two-minute tour of the Citation platform.

Centred · white · none (bare minimum — heading only, no eyebrow/bullets/trust/CTA)

Simple by default

Split media-right · brand · image (image beside inverse text on brand)

New

Insurance that actually has your back

Cover designed around how real businesses operate.

  • No hidden exclusions
Business owner smiling in their shop

Centred · dark · none (eyebrow accent-on-dark, 2 CTAs)

Enterprise

Built to scale with you

From five employees to five thousand.

3 cols · white · card · standard · features (mixed href)

4 cols · tint · tile · compact · benefits (all href)

2 cols · dark · flat · rich · values (no href, icon-only via iconLabel)

6 cols · brand · card · compact · perks (6 items)

5 cols · gradient · tile · rich · services (5 items, href)

2 cols · white · flat · standard · features (flat on light, href)

flat · single-open · schema on · no image (rich-HTML answer)

  • Can I cancel my plan?

    You can cancel at any time. See our terms for detail, or:

  • Question 1: how does this work?

    Answer 1: a clear, plain-language response to the question above.

  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

flat · multi-open · schema OFF · images (alt) — no JSON-LD expected

  • Question 1: how does this work?

    Answer 1: a clear, plain-language response to the question above.

    Illustration for answer 1
  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

    Illustration for answer 2
  • Question 3: how does this work?

    Answer 3: a clear, plain-language response to the question above.

    Illustration for answer 3

categorised · single-open · schema on · no image (2 categories, cross-group exclusivity)

Billing

  • Question 1: how does this work?

    Answer 1: a clear, plain-language response to the question above.

  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

Account

  • Question 1: how does this work?

    Answer 1: a clear, plain-language response to the question above.

  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

categorised · multi-open · schema on · images (alt)

Billing

  • Question 1: how does this work?

    Answer 1: a clear, plain-language response to the question above.

    Illustration for answer 1
  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

    Illustration for answer 2

Account

  • Question 1: how does this work?

    Answer 1: a clear, plain-language response to the question above.

    Illustration for answer 1
  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

    Illustration for answer 2

flat · single-open · schema on · single item (edge case)

  • Is there only one question?

    Answer 1: a clear, plain-language response to the question above.

flat · multi-open · schema on · answer with </script> + <!-- (escaping probe)

  • Does answer markup break the JSON-LD?

    Structured-data escaping holds even when an answer contains a closing sequence or an HTML comment .

  • Question 2: how does this work?

    Answer 2: a clear, plain-language response to the question above.

Media-right · white · photo (eyebrow, bullets+icons, body, CTA)

Why Citation

Everything joined up in one platform

HR, health & safety and insurance — managed from a single login.

  • Unlimited expert advice
  • Templates and document library
  • Fixed-fee, no surprises
Team collaborating around a laptop

Media-left · tint · screenshot (bullets without icons, secondary CTA)

Compliance

Stay compliant without the busywork

Guided audits and ready-to-use policies keep you inspection-ready.

  • Audit scheduling
  • Policy templates
Compliance dashboard showing green status

Media-right · dark · photo (body, CTA, no bullets — accent-on-dark eyebrow)

Enterprise

Built to scale with you

From five employees to five thousand, on one contract.

Operations manager reviewing reports

Media-left · brand · video frame (bullets+icons, no CTA — inverse text on brand)

See it in action

A two-minute tour of the platform

  • No setup required

Media-right · white · photo (bare minimum — heading + media only)

Simple by default

Shopkeeper at the counter

3 columns · white · plain (descriptions present)

UK businesses
90,000+
trust Citation every day
Experience
30 yrs
supporting employers since 1995
Advice line
24/7
expert help whenever you need it

4 columns · tint · icon (mixed icon present/absent)

Trustpilot
4.8/5
Uptime
99.9%
Hidden fees
£0
Reviews
1,200+

3 columns · dark · editorial (accent value on dark)

Faster onboarding
5x
Less admin time
60%
Rated provider
#1

4 columns · brand · plain (inverse text on brand, no descriptions)

Cases handled
500k
Retention
98%
Offices
15
Cover provided
£3bn

3 columns · gradient · editorial (accent value on gradient)

To get a quote
2 min
no paperwork required
For everything
1 login
Long-term tie-ins
0

Centred · brand · 2 CTAs (body, no media/form/contact — inverse on brand)

Ready to protect your business?

Join 90,000+ UK businesses who trust Citation.

Split text+image · white · 1 CTA (with media)

See the platform in action

One login for HR, health & safety and insurance.

Citation platform dashboard

Split text+contact · tint · 1 CTA (contact details shown)

Speak to a specialist today

0345 844 1111 hello@example.com Kings Court, Manchester

Pathway-selector · dark · form placeholder (static, no CTA)

Which service do you need?

Choose a pathway and we will route you to the right team.

Form: placeholder / pathway-form

Centred · photo bleed · 1 CTA (scrim over image, inverse text)

Protecting the businesses that power Britain

From the high street to the factory floor.

Centred · white · bare minimum (heading + 1 CTA only)

Get started today

Horizontal · number marker · line connector (3 steps, with body)

  1. Get in touch

    Tell us about your business in a quick call.

  2. Get a tailored plan

    We build a package around your needs.

  3. Get protected

    Your cover and support go live the same week.

Vertical · icon marker · arrow connector (4 steps)

Horizontal · image marker · no connector (3 steps, no body on last)

Vertical · number marker · no connector (5 steps)

  1. Enquire

    Send us your details.

  2. Consult

    Talk to a specialist.

  3. Quote

    Receive a tailored quote.

  4. Activate

    Accept and go live.

  5. Review

    We check in regularly.

Static · accreditation · white (with caption)

Accredited and certified by

Auto-scroll · clients · tint (no caption, marquee + pause)

Swipeable · partners · dark (linked logos, keyboard nav)

Integration partners

Static grid · 3 col · tint (no ratings → no JSON-LD, stars off)

Single pull-quote · 1 col · dark (one rated quote with stars)

Standalone · white · native form (heading + body)

Get in touch

Tell us about your business and a specialist will be in touch within one working day.

Sidebar · tint · native form + contact details

Request a callback

Prefer to talk? Leave your details or reach us directly.

0345 844 1111 hello@example.com Kings Court, Manchester

Hero-embedded · dark · native form + CV upload (inverse on dark)

Apply to join the team

Upload your CV and we will be in touch about current openings.

Two-col-with-contact · brand · native form + contact details (inverse on brand)

Speak to a specialist

One team for HR, health & safety and insurance.

0345 844 1111 sales@example.com Wilmslow, Cheshire

Standalone · tint · embed fallback (iframe, no native form)

Book your free consultation

Pick a time that suits you using the scheduler below.

Sidebar · white · embed fallback + contact details

Schedule a demo

0345 844 1111 demo@example.com

Standalone · dark · empty state (no form configured)

Contact us

This section has no form configured yet — the island renders its placeholder.

No form is configured for this section yet.

Two-col-with-contact · white · native form (heading only, bare minimum)

Message us

Full header · utility bar · mega-menu · search + language + basket