Visual Identity

Logo

The Playbook logo splits the word into its two ideas — Play and book — and the whole system, from the stacked wordmark to the 16-pixel favicon, is built to look like a lifestyle brand, not a government pamphlet.

The logo has one job: to tell a player “this is where you get smarter about the game.” It should feel modern, confident, and premium. Everything below — the wordmark, the symbol, the color variants, and the spacing rules — exists so the mark stays recognizable whether it sits on a casino-floor banner, a push notification, or a co-branded operator page.

The quality bar

Playbook content must match or exceed the production quality of the operator’s commercial marketing. If the logo looks cheaper, older, or more generic than the promotion next to it, players read it as fine print. Design it like a product launch — because that’s what it is.

Anatomy of the wordmark

The wordmark is pure typography — Inter, the brand’s heading typeface — set so the two halves of “Playbook” carry opposite weights. That weight contrast is the idea: the joy of the game and the knowledge behind it, in a single word.

Play

Inter 800 · bold

The entertainment side of gambling. Heavy, confident, lowercase — it leads the eye.

BOOK

Inter 300 · light, uppercase, letter-spaced

The knowledge and literacy side. Light and airy, it quiets down so “Play” can carry.

Why Inter

Inter carries the full weight range the logo needs — an 800 “Play” against a 300 “BOOK” — with excellent screen readability at every size. If you ever swap the typeface, your heading font must offer a weight of 700 or heavier and a weight of 300 or lighter, or the contrast collapses. See Typography for the full type system.

Two layouts

Both layouts are interchangeable — pick the one that fits the space and aspect ratio. The full list of color modes follows in the variant gallery below.

Stacked

“Play” over “BOOK” on two lines. Best for app icons, social avatars, square formats, and hero placements.

Horizontal

“Playbook” as one word. Best for navigation bars, headers, banners, inline references, and small sizes.

Primary lockups

The full-color defaults. Use these unless the background or production method calls for a reversed or single-color build.

Stacked · Full color
Stacked · Full color App icons, social avatars, square formats, hero placements.
Horizontal · Full color
Horizontal · Full color Navigation bars, headers, banners, inline references, small sizes.
Stacked · On light
Stacked · On light Teal “BOOK” pops on a tinted light background.
Horizontal · On light
Horizontal · On light Light surfaces where the teal accent should read.

Reversed & monochrome

For dark surfaces and single-color builds. These variants ship with their dark background built in, so the white “Play” stays legible wherever the lockup lands.

Stacked · Reversed
Stacked · Reversed Dark backgrounds — white “Play,” teal “BOOK.”
Horizontal · Reversed
Horizontal · Reversed Dark headers and footers, full color on navy.
Stacked · Mono white
Stacked · Mono white Single-color builds — white on black.
Horizontal · Mono white
Horizontal · Mono white One-color print, embroidery, dark UI chrome.

The symbol mark

Strip away the letters and the brand still reads. The symbol is an open book whose right page is a play triangle — the “Playbook” concept as pure geometry. Because it carries no font dependency, it holds up from a 16-pixel favicon to a 512-pixel app icon. Below the digital minimum size, drop the wordmark and use the symbol alone.

Symbol · Primary
Symbol · Primary Navy container, white book, teal play.
Symbol · On light
Symbol · On light Container-free, navy book, teal play.
Symbol · On dark
Symbol · On dark White book, teal play, for dark surfaces.
Symbol · Mono dark
Symbol · Mono dark All-navy, single-color contexts.

Favicon & helpline badge

Two purpose-built lockups round out the kit. The favicon is the symbol tuned for browser tabs and app tiles. The helpline badge pairs the symbol with a support number for contexts where regulation requires showing help information alongside the brand — for example Free help 24/7: 1-800-GAMBLER.

Favicon
Favicon Browser tabs and app icons.
Favicon · Reversed
Favicon · Reversed Dark-background favicon.
Helpline badge · Light
Helpline badge · Light Symbol plus the support number, for light surfaces.
Helpline badge · Dark
Helpline badge · Dark The same lockup tuned for dark backgrounds.

The five color modes

Each layout — stacked and horizontal — comes in the same five color modes, so there’s an approved file for any background.

Variant“Play” color“BOOK” colorBackgroundFile suffix
Full color Navy Navy White -full-color
On light Navy Teal Light neutral -on-light
Reversed White Teal Navy -reversed
Mono white White Light grey Black / dark -mono-white
Mono dark Navy Navy Light (single-color) -mono-dark

Clear space & minimum size

Give the logo room and never let it shrink past the point of legibility. These two rules protect the mark in almost every real-world placement.

Clear space

Keep a margin equal to 1× the height of the logomark on every side. No text, imagery, or graphic element should intrude into that buffer.

Minimum size

  • Print: 0.25 inches (6.35 mm) tall.
  • Digital: 24 px tall.
  • Below either threshold, use the symbol mark only.

What protects the mark

The variants exist so no one ever has to improvise. Everything in the “don’t” column has an approved alternative above.

Do
  • Pick an approved variant for the background.
  • Maintain the 1× clear space on all sides.
  • Place the mark on clean, high-contrast backgrounds.
  • Use the symbol alone below the minimum size.
Don’t
  • Stretch, compress, rotate, or distort it.
  • Add drop shadows, outlines, or effects.
  • Recolor it outside the approved variants.
  • Rebuild it in another font, or drop it into an unapproved container.

Co-branding

When the Playbook logo appears next to an operator’s logo, the goal is two peers side by side — not a primary brand and its subordinate. The rules keep the relationship balanced.

  1. Hold both clear-space zones. Each logo keeps its own 1× buffer; they never overlap.
  2. Size Playbook at no less than 60% of the operator logo’s height.
  3. Divide with a thin rule. A 1px light-grey vertical line separates them when set side by side.
  4. Lead with the operator. Their logo typically comes first (left or top); Playbook follows (right or bottom).
The adaptive identity model

Operators are encouraged to apply their own colors and fonts while keeping the structural identity — layout, hierarchy, the icon system, spacing — consistent. A player who meets Playbook content on one platform should intuitively recognize it on another, even when the two look different. The logo is the anchor that makes that recognition possible. Operators can preview the lockups in the live Brand Book or tailor the colors and fonts in the Brand Configurator.

Source in the Playbook repo: visual-identity/logo/