The Playbook palette is built to look like it belongs on a gaming platform, not a health website. Deep navy conveys authority and sophistication. Electric teal creates energy and modernity. Bold orange drives action. It deliberately avoids the washed-out blues and clinical greens of traditional responsible-gambling programs — this is a confident, contemporary, high-impact system. The same instinct runs through the voice: informative, never alarming.
Place Playbook content next to the operator's commercial marketing. If the literacy content looks cheaper, older, or more generic, players treat it like fine print. The color system exists to clear that bar — design it like a product launch, because that is what it is.
Primary — deep navy
Navy is the backbone of the brand: headers, dark backgrounds, and the high-contrast text that carries body copy on light surfaces. Three steps give you a hover tint and a near-black for maximum contrast.
Secondary — electric teal
Teal is the interactive color — highlights, feature accents, and energy. One critical rule falls out of the contrast math: teal is a background color, not a text color on white. Pair it with dark text, never light.
Accent — bold orange
Orange is reserved for action: primary calls to action, attention, and the moments you want a player to notice. Like teal, it works as a button background with dark text on top — white text on orange fails contrast and must not be used.
Semantic colors
These four colors carry fixed meaning across every interface — players learn the associations, so they stay standard even when an operator customizes the primary palette. Danger is the one to handle with care: it belongs to Tier 2 support and crisis moments only, never to routine Tier 1 entertainment content.
Always use dark text — Primary, Neutral 900, or Black — on a semantic color background. Never white. White on green is 2.24:1, on amber 1.79:1; both are effectively invisible to low-vision users. This holds in both light and dark mode.
The neutral scale
Nine steps from near-black to white carry text hierarchy, surfaces, borders, and dividers. The ramp is engineered so the dark end (900–500) clears AA as text on light surfaces, and the light end (300–White) works as surfaces and backgrounds behind that text.
The WCAG contrast matrix
Every foreground-and-background combination must meet WCAG 2.1 AA: 4.5:1 for normal text (under 18px, or under 14px bold), 3:1 for large text and UI components. The full matrix scores every pairing in the palette; the two tables below summarize the combinations that matter most in practice. Ratios are computed from relative luminance per the WCAG 2.1 specification.
Dark text on a white surface
The standard light-mode reading surface. Use these for body copy, captions, and labels.
| Foreground | Hex | Ratio | AA Normal | AA Large | AAA |
|---|---|---|---|---|---|
| Neutral 900 | #1A1A2E | 17.06:1 | Pass | Pass | Pass |
| Primary | #1B2838 | 14.92:1 | Pass | Pass | Pass |
| Primary Light | #2A3F56 | 10.80:1 | Pass | Pass | Pass |
| Neutral 700 | #3D3D5C | 10.39:1 | Pass | Pass | Pass |
| Neutral 500 | #6B6B8A | 5.13:1 | Pass | Pass | Fail |
| Secondary Dark | #00A888 | 3.02:1 | Fail | Pass | Fail |
| Accent | #FF6B35 | 2.84:1 | Fail | Fail | Fail |
| Secondary | #00D4AA | 1.91:1 | Fail | Fail | Fail |
Takeaway: navy and the dark neutrals give a full text hierarchy on white. Teal, orange, and their dark variants fail as text on white — keep them for backgrounds, icons at large sizes, and accents.
Light and chromatic text on navy
The dark-mode and hero surface (Primary, #1B2838). This is where teal and orange shine as text.
| Foreground | Hex | Ratio | AA Normal | AA Large | AAA |
|---|---|---|---|---|---|
| White | #FFFFFF | 14.92:1 | Pass | Pass | Pass |
| Neutral 300 | #A8A8C0 | 6.41:1 | Pass | Pass | Fail |
| Secondary | #00D4AA | 7.82:1 | Pass | Pass | Pass |
| Warning | #FFB300 | 8.31:1 | Pass | Pass | Pass |
| Success | #00C853 | 6.67:1 | Pass | Pass | Fail |
| Accent | #FF6B35 | 5.26:1 | Pass | Pass | Fail |
| Danger | #FF3D00 | 4.21:1 | Fail | Pass | Fail |
| Info | #2979FF | 3.75:1 | Fail | Pass | Fail |
Takeaway: on navy, teal hits 7.82:1 and orange 5.26:1 — both comfortably readable. Info blue and danger red drop below 4.5:1 here, so reserve them for large text on this surface.
These all fall below the thresholds and break readability: teal text on white (1.91:1), teal text on the page background (1.76:1), white text on orange (2.84:1), white text on teal (1.91:1), and white text on amber (1.79:1). When teal or orange is the brand link or button color, the fix is always the same — dark text on the color, not the color as text.
Recommended pairings by use case
The shortlist that resolves almost every real decision. Each pairing is verified against the matrix; the helpline banner — white on navy at 14.92:1 — is the gold standard for critical safety content.
| Use case | Background | Foreground | Ratio | Level |
|---|---|---|---|---|
| Body text (light mode) | White / Neutral 50 | Neutral 900 | 17.06:1 | AAA |
| Muted / caption text | White / Neutral 50 | Neutral 500 | 5.13:1 | AA |
| Body text (dark mode) | Primary | White | 14.92:1 | AAA |
| Primary CTA button | Accent | Primary | 5.26:1 | AA |
| Secondary CTA button | Secondary | Primary | 7.82:1 | AAA |
| Helpline banner | Primary | White | 14.92:1 | AAA |
| Success feedback | Success | Primary | 6.67:1 | AA |
| Danger / error | Danger | Black | 5.32:1 | AA |
| Card border (form fields) | White | Neutral 500 | 5.13:1 | AA |
Design tokens
Every value above ships as a CSS custom property generated from the central brand config, so a color change cascades through the whole system — the no-code Brand Configurator generates that config for you. Reference tokens rather than raw hex in code.
Palette tokens
color: var(--pb-color-primary);
background: var(--pb-color-accent);
border-color: var(--pb-color-neutral-500);Functional mappings
Semantic roles point at palette tokens, so intent stays readable: --pb-link resolves to Primary Light, --pb-cta-bg to Accent with --pb-cta-text set to Primary, and --pb-helpline-banner-bg to Primary.
Adapting the palette
For operators customizing Playbook to sit inside their own brand, four rules keep it accessible and integrated rather than siloed into a separate compliance look.
- Swap the brand colors, keep the structure. Replace primary, secondary, and accent with your brand colors; keep the layout patterns, hierarchy, and spacing.
- Leave the semantic palette standard. Success, warning, danger, and info carry learned meaning — changing them confuses players.
- Re-run every contrast pair. Verify each new combination against WCAG 2.1 AA before it ships — the WCAG 2.1 Quick Reference spells out the thresholds. New brand color, new math.
- Make it feel integrated. The content should look like part of your commercial brand, not a bolted-on responsible-gambling section.
Color is one half of the look; the other is type. See Typography for the font system and scale, and the Accessibility chapter for the broader WCAG baseline.