Visual identity

Logo purpose

The Playbook RG logo identifies gambling entertainment literacy content. It signals to players: “This is where you get smarter about the game.” The logo should feel modern, confident, and premium – like it belongs on a lifestyle brand, not a government pamphlet.

Logo design

The Playbook RG logo is a text-based wordmark that splits “Playbook” into its two component concepts:

• Play – set in Inter 800 (bold). Represents the entertainment side of gambling.
• book – set in Inter 300 (light), uppercase, letter-spaced. Represents the knowledge and literacy side.

The weight contrast between the two halves embodies the brand’s core duality: enjoying the game and understanding it.

Logo layouts

Both layouts are interchangeable – choose based on the available space and aspect ratio.

Usage rules

Clear space

Maintain a minimum clear space equal to 1x the height of the logomark on all sides. No text, imagery, or other visual elements should intrude into this space.

    ┌────────────────────────────────┐
    │          clear space           │
    │    ┌──────────────────┐       │
    │    │                  │       │
    │    │   [LOGO HERE]    │       │
    │    │                  │       │
    │    └──────────────────┘       │
    │          clear space           │
    └────────────────────────────────┘

    ← 1x →│    logo    │← 1x →

Minimum size

• Print: Minimum 0.25 inches (6.35mm) in height
• Digital: Minimum 24px in height
• Below these sizes, use the logomark only (no wordmark)

Approved color variants

Each layout (stacked and horizontal) is available in 5 color modes:

Logo files

visual-identity/logo/
  primary/                          ← default use
    logo-stacked-full-color.svg
    logo-stacked-on-light.svg
    logo-horizontal-full-color.svg
    logo-horizontal-on-light.svg
  secondary/                        ← dark backgrounds, mono
    logo-stacked-reversed.svg
    logo-stacked-mono-white.svg
    logo-stacked-mono-dark.svg
    logo-horizontal-reversed.svg
    logo-horizontal-mono-white.svg
    logo-horizontal-mono-dark.svg
  favicon/
    favicon.svg
    favicon-reversed.svg
    favicon-mono-white.svg
  helpline-badge/
    helpline-badge-light.svg
    helpline-badge-dark.svg

Regenerate all logo files: node collateral/render/build-logos.mjs

Logo previews

Primary layouts:

Stacked	Horizontal

Secondary layouts:

Stacked	Horizontal

Favicon and helpline badge:

Favicon	Favicon reversed	Helpline light	Helpline dark

Prohibited modifications

Do not:

• Stretch, compress, or distort the logo
• Rotate the logo
• Apply drop shadows, outlines, or effects
• Change the logo colors outside of approved variants
• Place the logo on busy or low-contrast backgrounds
• Recreate or approximate the logo using other fonts or shapes
• Animate the logo in ways that compromise legibility
• Place the logo inside an unapproved container or shape

Co-branding

When the Playbook RG logo appears alongside an operator’s logo:

• Both logos maintain their respective clear space
• The Playbook RG logo should be no smaller than 60% of the operator logo’s height
• Use a vertical divider line (neutral_300 color, 1px) between logos when they appear side by side
• The operator logo typically appears first (left or top), with Playbook RG second (right or bottom)
• The co-branding lockup should feel like two peers side by side – not a primary brand and its subordinate

Helpline badge lockup

A special lockup combines the Playbook RG logomark with a helpline number for contexts where regulatory requirements mandate displaying support information alongside branding:

[Logomark] | Free help 24/7: 1-800-522-4700

Specifications for the helpline badge are in visual-identity/logo/helpline-badge/.

Design philosophy

The default Playbook RG palette is built for a modern, entertainment-grade aesthetic. It should feel 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 and attention.

The palette avoids the washed-out blues and clinical greens common in traditional RG programs. This is a lifestyle brand palette – confident, contemporary, and high-impact.

Primary palette

Secondary palette

Accent palette

Semantic palette

These colors communicate specific states and should be used consistently across all interfaces:

Neutral palette

Color accessibility

Every foreground/background combination used in Playbook RG must meet WCAG 2.1 AA contrast requirements:

• Normal text (under 18px or under 14px bold): minimum 4.5:1 contrast ratio
• Large text (18px+ or 14px+ bold): minimum 3:1 contrast ratio
• UI components and graphical objects: minimum 3:1 contrast ratio

See visual-identity/color/accessibility-matrix.md for the complete contrast ratio matrix.

Adapting colors for your brand

When customizing the palette:

1. Replace primary/secondary/accent colors with your brand colors
2. Keep the semantic palette (success/warning/danger/info) standard – players learn these associations
3. Verify every new color combination against WCAG 2.1 AA
4. Your Playbook content should feel visually integrated with your commercial brand, not siloed into a separate “RG section” aesthetic
5. Update all values in _brand.yml so they cascade throughout the system

Type system

The default type system uses open-source variable fonts from Google Fonts – broad availability, zero licensing cost, modern aesthetic. Self-hosted woff2 files are included for production use.

Why these fonts? Inter has excellent screen readability and the broad weight range needed for the logo (800 vs 300 contrast). Source Code Pro disambiguates 0/O and 1/l/I – critical for helpline numbers.

Type scale

Based on a 16px base (1rem):

Headings scale down on mobile (≤768px): Display→36px, H1→32px, H2→24px, H3→20px, H4→18px. Body sizes stay fixed.

Font weights

Semantic type classes

The drop-in CSS (playbook-typography.css) provides purpose-built classes for common Playbook content patterns:

Typography rules

• Minimum body text size: 16px (1rem). No exceptions. Accessibility requires it, and content people are supposed to read should be readable.
• Line length: 50–75 characters per line for body text. Wider reduces readability.
• Paragraph spacing: 1em (one blank line) between paragraphs.
• Left-aligned text: Always. Justified text creates uneven word spacing.
• Helpline numbers: Always in .pb-helpline (Source Code Pro 600). Never use a font where 1/l/I or 0/O are ambiguous.
• Caption text (12px): Legal lines only. Never for content players should read.

Typography files

visual-identity/typography/
  playbook-typography.css       ← drop-in CSS (self-hosted @font-face + classes)
  type-specimen.html            ← visual reference page
  typography.md                 ← detailed reference documentation
  fonts/
    inter-latin.woff2           ← variable weight 300–900
    source-sans-3-latin.woff2   ← variable weight 300–600
    source-code-pro-latin.woff2 ← variable weight 400–600

Adapting typography

When customizing fonts:

1. Choose fonts with broad weight support (minimum: regular and bold)
2. Match the quality and modernity of your operator’s commercial typography
3. Ensure the font supports character sets for your operating jurisdictions
4. Test readability at small sizes – Playbook content often appears in constrained spaces
5. If replacing Inter, ensure your heading font has weight ≥700 for the logo and ≤300 for the “BOOK” contrast
6. Update _brand.yml and regenerate playbook-typography.css

Design philosophy: Weight contrast

The Playbook RG icon system mirrors the logo’s typographic contrast – Play (800 weight) vs BOOK (300 weight) – through a dual stroke-weight system. Every icon contains two visual layers:

• Primary strokes (2px): Outer containers, main shapes, defining structure – the “Play” weight
• Detail strokes (1px): Inner details, accents, secondary elements – the “BOOK” weight

This 2:1 ratio creates visual hierarchy within each icon and ties the icon system to the wordmark’s design language. The weight contrast is visible at 24px and still perceptible at 16px.

Icon specifications

SVG structure – no stroke-width on root; weights set on <g> groups:

<svg ... fill="none" stroke="currentColor"
     stroke-linecap="round" stroke-linejoin="round">
  <g stroke-width="2"><!-- containers --></g>
  <g stroke-width="1"><!-- details --></g>
</svg>

Icon library (31 icons across 6 categories)

Game Types (7)

Odds & Math (4)

Player Tools (7)

Content & Education (4)

Social & Sharing (4)

Support & Safety (5)

See visual-identity/iconography/icon-library.md for the complete spec, visual-identity/iconography/icon-preview.html for a visual preview at 16/24/32/48px, and visual-identity/iconography/icons/ for the 31 SVG source files.

Photo direction

Photography in Playbook RG materials should feel like a lifestyle editorial – real people enjoying themselves, shot with natural light and confident energy. The vibe is “people who enjoy life and make smart choices” – not “people who might have a problem.”

Do

• Show real, diverse people having a good time – at sports events, with friends, checking their phones casually
• Use natural lighting – warm, energetic, and inviting
• Capture social moments – friends watching a game, group celebrations, shared experiences
• Show confident, relaxed body language – people who are in control and enjoying themselves
• Represent diverse ages, ethnicities, genders, and abilities
• Use candid, authentic-feeling shots – editorial quality, not stock photo sterility

Don’t

• Show people who look distressed, defeated, or desperate
• Use stereotypical “problem gambler” imagery (head in hands, empty wallet, dark rooms)
• Show generic, lifeless stock photography that looks like it came from a compliance department
• Show alcohol consumption alongside gambling education content
• Use images of minors
• Avoid imagery that’s too staged or corporate – this should feel real

The gambling environment question

Unlike traditional RG programs that avoid all gambling imagery, Playbook takes a different approach:

• Casino environments: Can appear if the mood is social, fun, and energetic – people enjoying a night out. Not dim rooms with solitary players.
• Sports contexts: Encouraged – friends watching games, stadium energy, sports culture
• Mobile/digital: People casually checking phones, using apps – relaxed, everyday settings
• Avoid: Close-ups of money, chips, or betting slips used in a way that glamorizes high-stakes play

The key question: “Does this image make gambling look like fun entertainment among friends, or does it make it look like an isolated, high-stakes activity?” Go with the former.

Mood board keywords

When sourcing or commissioning photography:

• Confidence, enjoyment, social energy
• Smart choices, good times, living well
• Diversity, inclusion, real people
• Modern lifestyle, urban, contemporary
• Sports culture, entertainment, nightlife

When to use illustration

Illustrations complement photography in contexts where:

• Explaining abstract concepts (odds, probability, house edge, RNG)
• Creating educational content (myth-busting, how-it-works)
• Building quiz and interactive content visuals
• Social media graphics that need to stand out

Illustration style

Data visualization

For educational content (odds, probabilities, house edge comparisons):

• Use the brand palette for charts and graphs
• Always label clearly – no assumptions about player knowledge
• Make the key insight obvious at a glance
• Add context: “The house edge on blackjack is 0.5%. On American roulette, it’s 5.26%.” – show the comparison visually

When the operator’s platform supports dark mode, the Playbook RG color system should adapt. Dark mode isn’t just an inverted light mode – it requires intentional color mapping to maintain readability, hierarchy, and brand identity.

When to auto-switch

Rule: Never force dark mode. Always respect the user’s system preference unless they’ve explicitly toggled within the app.

Semantic color mapping

Note on muted text in dark mode: neutral_500 on neutral_900 produces only 3.33:1 – this passes for large text (3:1 threshold) but fails AA normal text (4.5:1). Use muted text sparingly in dark mode, and only at 18px+ or 14px+ bold.

Semantic status colors in dark mode

Status colors (success, warning, danger, info) need adjustment for dark backgrounds:

Rule of thumb: Always use dark text on chromatic status backgrounds, in both light and dark mode. Never use white text on these colors.

Image and media treatment

CSS implementation

@media (prefers-color-scheme: dark) {
  :root {
    --pb-bg: #1A1A2E;
    --pb-surface: #3D3D5C;
    --pb-text-primary: #F5F5FA;
    --pb-text-secondary: #A8A8C0;
    --pb-text-muted: #6B6B8A;
    --pb-border: #3D3D5C;
    --pb-link: #00D4AA;
    --pb-accent: #FF8A5C;
  }

  img:not([src*=".svg"]) {
    filter: brightness(0.88);
  }
}

Operators using _brand.yml can override these tokens. The CSS custom property names use the --pb- prefix (short for Playbook) to avoid collisions with operator stylesheets.

Testing requirements

• Test with system dark mode on macOS, Windows, iOS, and Android
• Verify all text meets WCAG 2.1 AA contrast on dark backgrounds
• Check that images don’t glare or blow out on dark surfaces
• Confirm the user’s preference persists across sessions
• Verify Tier 2 pages remain in light mode regardless of system setting
• Test the transition animation between modes (prefer 150ms ease-out on background-color and color)

All dark mode combinations must pass WCAG 2.1 AA contrast requirements. See visual-identity/color/accessibility-matrix.md for the full contrast ratio matrix on dark backgrounds.

Before shipping any Playbook content, apply this test:

1. Place it next to the operator’s commercial content. Does it look like it belongs, or does it look like it was bolted on from a different brand?
2. Would a CMO put their name on this? If it looks like a compliance department made it, redesign.
3. Does it feel modern? If it could have been designed in 2010, it’s not good enough.
4. Is it accessible? Run the contrast ratios. Check the touch targets. Test with a screen reader.

If it passes all four, ship it.

A curated selection of rendered templates showing the visual identity in action. Click the template name to view the full HTML source. See collateral/render/ for all 36 templates.

Tier 1 – Entertainment literacy

Category	Template	Preview
Social card	Hot streak myth-buster
Story	Hot streak story
Poster	Know Your Game
Email	Welcome series
Venue sign	Entrance sign
Print	Rack card
Digital display	Landscape display

Tier 2 – Support and crisis

Category	Template	Preview
Support page	Help/support landing
Self-exclusion	Pause account flow
Poster	Venue helpline poster

See the Tier 2 Visual Guide for the full visual specification and all 8 Tier 2 template previews.

Previous: Chapter 2 – Brand Personality | Next: Chapter 4 – Voice and Tone