Style Guide
Play Fund Win — Design System
The single source of truth for our brand: colours, typography, spacing, components and voice rules. Click any value to copy it — the Base44 theme tokens paste straight into the Theme Editor.
Brand assets
Logos & icons
The primary logo, logo mark, and the three Play / Fund / Win pillar icons. Click to copy the URL or download the file.
Logos
Play · Fund · Win icons
The three brand pillars, each in its own colour. Use as pillar markers, section eyebrows or feature icons. Never recolour them.
Usage rules
- • Leave clear space around the logo equal to the height of the "p" in "play".
- • Never stretch, rotate, or recolour the logo or icons.
- • Minimum size for the full logo: 120px wide on screen, 30mm in print.
- • On dark backgrounds always use the full-colour logo (never invert to mono).
- • Favicon and app-icon slots use the logo mark, not the full logo.
- • The Play / Fund / Win icons stay in their pillar colours — always.
Palette
Colour system
Every colour used across the site, grouped by role. Navy is our primary, coral drives CTAs, teal handles focus and trust, gold marks premium moments.
Brand — Navy (Primary)
Sports authority. Headers, dark surfaces, primary text.
Deepest — page footer, hero backgrounds
Secondary buttons, section backgrounds
Hover / mid tone
Tertiary navy
Light navy accent
Brand — Coral (Accent / CTA)
Every primary CTA. High-energy highlights.
Active / pressed state
Hover state
DEFAULT CTA colour
Light coral / hover
Coral background tint
Brand — Teal (Trust / Focus)
Focus rings, secondary actions, "cause keeps" callouts.
Active state
Hover
DEFAULT — focus ring, secondary text emphasis
Light teal
Teal background tint
Brand — Gold (Premium / Achievement)
Wins, badges, Gift Aid callouts.
Deep gold
Hover
DEFAULT gold
Light gold
Gold background tint
Semantic — Backgrounds & Text
Foundational neutrals for pages and typography.
Default page background (soft blue-white)
Cards, panels, elevated surfaces
Body copy, headings
Sub-copy, descriptions
Captions, hints
Disabled / de-emphasised
Status Colours
System feedback — success, warning, error, info.
Confirmations, "cause keeps"
Caution, review needed
Form errors, destructive actions
Info banners, tooltips
Typography
Type scale
Inter across the whole site. Font weights: 400 body, 600 semibold, 700 bold, 800 black for hero display.
Display
Homepage hero only
H1
Page titles
H2
Section headings
H3
Sub-section headings
H4
Card titles
Body Large
Lead paragraphs, hero subtitles
Body
Default body copy
Body Small
Secondary copy, form labels
Caption
Meta, footnotes, disclaimers
Label
Section eyebrows, tags
Layout
Spacing & radii
4px base grid throughout. Radii scale from small controls (6px) to hero cards (24px).
Spacing
Border radius
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
3xl
24px
full
9999px
Elevation
Shadow scale
Five elevation levels. Use sparingly — most surfaces sit at sm or md.
xs
0 1px 2px rgba(11,31,51,0.04)
sm
0 2px 4px rgba(11,31,51,0.06)
md
0 4px 12px rgba(11,31,51,0.10)
lg
0 12px 24px rgba(11,31,51,0.14)
xl
0 24px 48px rgba(11,31,51,0.18)
In situ
Component library
The core patterns used across marketing pages, forms and dashboards.
Buttons
Badges & Pills
Alerts
Success
Your changes have been saved.
Info
This is a free entertainment tool — not betting or odds.
Warning
Please double-check before publishing.
Error
Something went wrong. Please try again.
Form controls
Cards
Standard card
Card heading
White surface, subtle border, soft shadow. The default container.
Dark card
Cinematic surface
For hero panels, quote blocks, and cause-keeps callouts.
Brand voice
What we say — and what we never say
These claims and phrases are the non-negotiables. Every piece of copy must comply.
Locked claims
Setup time
Live in 10 minutes
Platform fee
15% standard fee
Host retention
We take 15% off the top; the rest splits 50/50 between winner and cause
No upfront cost
No setup, no subscriptions, no hidden charges
Assistant name
Robin — Your fundraising co-pilot
Year founded
2019
Organisations served
2,500+ organisations
Winners paid
250,000+
Support email
hello@playfundwin.com
Approved replacements
Instead of "Fully Compliant", use ONE of these — pick the one that fits the context.
- GDPR + 18+ verification
- Audit-trail by default
- Trustee-ready reporting
- Stripe Connect payments
- Built for UK fundraising
- UK fundraising ready
Never use
These phrases must never appear anywhere in marketing copy.
- "Fully Compliant" / "100% Compliant"
- "Licensed & Regulated"
- "Gambling Commission licensed" (we are not)
- "FCA regulated" (we are not)
- "Premier League shirt"
- "Guaranteed returns" / "No risk"
- "support@" / "info@" / "success@" (use only hello@)
- Fake personas / invented testimonials
Style guide last reviewed 2026-07-15 · single source of truth: src/globals.css + src/components/brand/brandLockbox.js