# Make Your Claim — Design System

Make Your Claim (makeyourclaim.com / makeyourclaim.co.uk) is the consumer acquisition brand for UK motor finance (PCP & HP) compensation claims, operated by Benson Goldstein Ltd (SRA No. 8003245). The single product is a claims funnel: a long-scroll landing page driving one action — "Find Your Agreements" — into a details-capture journey.

**Brand rule:** Make Your Claim is for acquisition funnels and ads only and must never be locked up with the Benson Goldstein mark. This system is standalone MYC.

Sources: https://makeyourclaim.com/ (live site, text + screenshots supplied by Keith, Sep 2026). No codebase or Figma access — values are transcribed from the live site; exact pixel values may drift.

## CONTENT FUNDAMENTALS

- **Voice:** direct second person ("you could be owed compensation"), first-person-plural for the firm ("we will find your agreements"). Plain English, no jargon without an inline explanation.
- **Headlines:** benefit-led, sentence case with key numbers bolded: "Claim on average £829* for your past car finance", "Start your claim in 60 seconds". Questions used as section titles: "Could you be owed money?", "See any of your lenders?".
- **Inline bold** is used mid-sentence to highlight the key tokens: **basic details**, **2007+**, **compensation**.
- **Numbers carry asterisks/daggers** (£829*, No Win No Fee***) that MUST resolve to footnote disclaimers. Never quote a figure without its qualifier.
- **Compliance-first:** every claim is hedged ("could be owed", "where appropriate", "not guaranteed"). Mandatory blocks: the CMC/free-route disclaimer, fee-band table, SRA identity paragraph, redress-scheme suspension notice. See the myc-ad-compliance-review skill before shipping copy.
- **CTA is always the same string:** "Find Your Agreements" (title case), often with a circle-arrow.
- No emoji. Punctuation: em/en dashes appear on the live site but house rules for new BG/MYC output forbid them — use commas or hyphens.
- Trust proof: "Rated 4.8 / 5 from 12,000+ verified customer reviews", press logos (Which?, Sky, ITV, Capital, BBC, The Telegraph), verbatim customer quotes with initial-avatar + 5 gold stars.

## VISUAL FOUNDATIONS

- **Palette:** deep panel blue #1F4E9C on white; near-navy headlines #14284B; interactive blue #2563DB; CTA orange #F68B1E; light blue-tint section ground #EFF3FB; gold stars #F5B50A. Max two block colours per view (blue panels + orange CTAs).
- **Type:** Inter-like grotesque (substituted with Google Fonts Inter — flag: awaiting confirmation/licensed files). Headlines extra-bold (800), tight leading; body 17px/1.6 in slate #344054. Eyebrow labels are 14px uppercase, 0.12em tracking.
- **Buttons:** ALWAYS full pills (999px). Primary = orange fill, white 700 text, white circle-arrow glyph right. Secondary = blue #2563DB fill. Inverse = white pill, navy text, orange circle-arrow. Hover darkens fill (~8%); press scales 0.98. A full-width orange pill CTA is pinned to the bottom of the mobile/scroll viewport.
- **Cards:** white, 16px radius, 1px #E4E9F2 border, soft double shadow, 32px padding, centre-aligned content with an icon on top. Large marketing panels (hero, CTA band) are #1F4E9C with 24px radius, white text.
- **Notices:** orange-tinted (#FEF4E7) or white with a 1px orange border, bold lead-in ("Important:").
- **Sections:** alternate white / #EFF3FB / full-bleed deep blue. ~96px vertical rhythm, 1200px container, generous centred headings (H2 800, navy or panel-blue).
- **Steps:** filled blue circle numbers (white numeral) with a dotted vertical connector, headline + body right.
- **Tables:** orange #F9A11B header band (navy 700 text), white rows, hairline dividers.
- **Imagery:** warm lifestyle photography (couples with laptops/tablets, natural light) plus cut-out car + receipt composites. No illustration style. Floating chip labels ("Full Name", "Address") over photos in the how-it-works art.
- **Motion:** minimal — colour transitions ~160ms; no bounces or parallax.
- **Radii system:** pill buttons, 12px inputs, 16px cards, 24px panels.

## ICONOGRAPHY

- Site uses thin-stroke orange line icons inside a thin orange ring (benefits grid), simple orange vehicle glyphs (option cards), a blue/orange "check-burst" trust mark, and a white circle-arrow in buttons. Filled navy circle + white check for list bullets.
- No icon font detected. Assets are individual SVG/PNGs served from makeyourclaim.com/icons/….
- **Substitution:** components use Lucide (CDN, 2px stroke) recoloured to token colours as the nearest match — FLAGGED for replacement with the real SVG set.
- Real asset URLs (hotlinked, copy locally when files are supplied — see assets/README.md).
- No emoji, no unicode-as-icon.

## Index

- styles.css → tokens/ (colors, typography, spacing, effects, fonts)
- guidelines/ — foundation specimen cards (Design System tab)
- components/core — Button, IconButton, Badge, Alert
- components/forms — Input, Select, OptionCard
- components/content — Card (BenefitCard), StatCard, ReviewCard, Steps, Accordion, FeeTable
- ui_kits/website — landing page + funnel step recreation
- slides/ — MYC-branded slide templates
- social/ — ad/social asset templates
- email/ — HTML email template
- assets/README.md — asset manifest (hotlinks pending real files)

## Intentional additions
- Lucide icon substitution (no source icon files available).
- Slide/social/email templates: no source exists for these surfaces; they extend the web identity per Keith's scope selection.

## Caveats
- **Logo:** no logo file supplied; the wordmark is hotlinked from the live site (assets/README.md). Never redraw it.
- **Reversed logo rule:** on blue grounds the "M" stays CTA orange, remaining letters white — assets/logo-myc-reversed.png (rebuilt from a 4K screenshot; swap for the master file when supplied).
- Colours/typography transcribed from screenshots + site copy, not source CSS — confirm exact values against the codebase when connected.