Elementor Pro Widget Style Kit
The component library every future page on adhd-coaching.uk is built from. Each widget is styled once here — colour, type, spacing, shape and every interactive state — then set globally in Elementor so it's inherited everywhere, never re-styled per page.
Find your Focus · Ignite your Strengths · Build Real Momentum
Open flags & decisions
Four things being surfaced rather than silently resolved — three flagged for sign-off, plus one accessibility correction to the current live button style.
Needs your sign-off
These are the only places this kit is not yet locked. Everything else is derived from confirmed brand values.
Typeface — placeholder in use
The brand export points to Raleway (display / headings / buttons) and Open Sans (UI, forms, tables). Recommendation: confirm Raleway + Open Sans. Every type spec below names the role, so when you confirm the real face it drops into one place — Global Fonts — and inherits everywhere.
Corner radius & shadow — proposed consistent values
Standardised on values from the live Elementor export: radius 999px (pills/buttons), 12px (cards), 10px (compact cards/inputs), 7px (chips/fields); shadow soft slate 0 2px 14px rgba(84,80,97,.08), plus the one signature offset quote shadow. Approve the scale and it becomes canonical.
Bronze #615000 — fourth global colour, or contrast-only?
Bronze does two distinct jobs: eyebrow/label text colour and the only AA-safe text colour on amber. Recommendation: promote Bronze to a fourth Global Colour (Primary, Secondary, Text, Accent, Bronze). That makes "amber fill → bronze text" a one-click pairing.
Amber button text — corrected from white to Bronze
The current live button paints white text on amber, which measures ✕ 1.6:1 — well below AA. Per the accessibility rule, every Accent fill in this kit uses Bronze #615000 text instead ✓ 4.95:1. This is the one place the kit deliberately diverges from the live site. Flagging so it's a conscious change, not a silent one.
Foundations
Every widget pulls from exactly these tokens — no one-off colours, sizes or spacing values anywhere in the kit.
Global colour library
Supporting tints: #B6B49A sand-light (borders) · #8A8797 muted text · #9B8740 bronze-mid. Status tints for alerts shown in the Forms section.
Type scale & roles
Placeholder faces: Raleway (display/headings/buttons) · Open Sans (UI/forms/tables).
Spacing scale — 8-pt grid
Radius: 999px pills · 12px cards · 10px compact · 8px inputs · 7px chips. Shadow: 0 2px 14px rgba(84,80,97,.08).
Heading, body, quotes & lists
The reading layer — mapped directly onto the H1–H6 roles already defined in Elementor Site Settings → Theme Style.
Buttons & CTAs
Three button variants, each with four interactive states. Primary uses amber fill with Bronze text — the only AA-safe pairing on amber (4.95:1). See flag 4.
Tabs, Accordion & Process Steps
Three components for organising multi-part content. Tabs for peer sections; Accordion for progressive disclosure; Process Steps for sequential journeys.
Icon Box, Image Box, Price Table & Counters
Four card-style components for presenting features, services, pricing and social proof.
Form Fields & Alerts
Form inputs with three states (default, focus, error/success) and four alert types derived entirely from the core palette.
Global Kit Settings
Everything above translated into Elementor Pro → Site Settings. Configure these once and every widget on every future page inherits them — no per-page restyling.
Site Settings → Global Colors Configure first
Replace Elementor's four defaults with the brand library. Adding Bronze as a fifth slot makes the AA-safe "amber → bronze" pairing one click.
| Global slot | Brand name | Hex | Used for |
|---|---|---|---|
| Primary | Sand-dark | #8B8970 | Headings, secondary buttons, steps, progress fill |
| Secondary | Sand-secondary | #D9D6D2 | Footers, borders, stage-1 badge |
| Text | Plum-grey | #545061 | All body & label copy |
| Accent | Amber | #FBC53B | The one CTA per screen, ribbons, underlines |
| Custom: Bronze | Bronze-dark | #615000 | Text on amber, eyebrow text — 4.95:1 on amber ✓ AA |
| Custom: Cream BG | Cream page | #FAF8F1 | Site background |
| Custom: Cream Mid | Chip/soft bg | #EDE7D8 | Eyebrow pills, icon tiles, open accordion bg, info alerts |
Site Settings → Global Fonts Confirm typefaces — flag 1
| Global font slot | Family (placeholder) | Weight / size | Role |
|---|---|---|---|
| Primary | Raleway ⚐ confirm | 700 / 32px | H1, hero, display |
| Secondary | Raleway | 600 / 24px | H2–H3, button labels |
| Text | Open Sans ⚐ confirm | 400 / 16px · 1.7 | Body, forms, tables |
| Accent | Raleway | 800 / 10px · 0.15em | Eyebrows, ribbons, stage labels |
Site Settings → Theme Style Default widget styling
| Panel | Setting | Value |
|---|---|---|
| Typography | H1–H6 / Body | Per type scale above (Primary/Text global fonts) |
| Buttons | Default = Primary variant | Accent bg · Bronze text #615000 · 999px radius · 14×28 pad |
| Buttons | Hover bg | #FBD05A --amber-mid · Bronze text |
| Buttons | Focus ring (custom CSS) | 0 0 0 2px #FFFFFF, 0 0 0 4px #545061 |
| Form Fields | Border | 1.5px #B6B49A → #8B8970 focus + 3px ring · 8px radius |
| Form Fields | Label typography | Raleway 700 13.5px · field text Open Sans 15px |
| Background | Site background | #FAF8F1 cream |
| Links | Normal | #545061 + amber inset underline box-shadow |
Global tokens — Shape, shadow & spacing Add as Custom CSS variables
| Token | Value | Applies to |
|---|---|---|
| Radius — pill | 999px | Buttons, chips, badges, progress fills |
| Radius — card | 12px | Cards, price tables, CTA block, images |
| Radius — compact | 10px | Accordion items, alerts |
| Radius — field | 8px | Inputs, selects (6px checkbox) |
| Shadow — card | 0 2px 14px rgba(84,80,97,.08) | All white cards (single soft layer) |
| Shadow — quote | 5px 5px 3px rgba(84,80,97,.76) | Blockquote only (brand signature) |
| Spacing | 4 · 8 · 12 · 16 · 24 · 32 · 44 · 64 · 96px | 8-pt grid — section rhythm 64px desktop / 40px mobile |
| Min touch target | 44×44px | Every interactive widget |
Three items still need sign-off before this is locked: (1) typeface names, (2) radius/shadow scale, (3) Bronze as a fifth Global Colour. The amber → Bronze text correction (4) is applied throughout on accessibility grounds.
ADHD Coaching — Elementor Pro Widget Style Kit · Collab Ltd · Waldo Hechter
Built on the Dream SMART design system. All colours are confirmed brand values; no new colours introduced.