Playbook Illustration Style Guide

Flat, modern illustrations with weight-contrast strokes (2px / 1px)

Weight-Contrast Principle

2px — Structure

1px — Detail

Combined

Icon System Connection

Same weight-contrast principle scales from 24px icons to full illustrations. Structural elements (2px) define boundaries; details (1px) add information.

Data Visualization — Bar Chart

Roulette House Edge: Check the Bet

Shared calculation and scale. Uniform pockets, standard payouts, no zero concessions. The five-number basket is shown separately. A house edge is expected loss per amount staked, not the chance of losing.

House edge by roulette rule set
Example	Conditions	House edge
Single zero	Uniform pockets; standard payouts; no zero concessions	2.70%
Double zero	Uniform pockets; standard payouts; basket excluded; no zero concessions	5.26%
Five-number basket	Uniform pockets; double zero · pays 6:1; no zero concessions	7.89%

Baseline1px Neutral 200 — no axes, no gridlines

ValuesLarge, bold, color-matched to bars

BarsOne linear scale from zero; labels and conditions stay with the chart

Data Visualization — Donut Chart

Wheel Composition and Payouts

Pocket shares describe the uniform 37-pocket wheel. Expected loss also depends on payouts. On red at 1:1, 18 winning and 19 losing pockets give a 1/37 house edge; zero concessions change it.

Ring32px stroke, r=80 — bold and scannable

CenterLarge stat (36px 800) — the hero number

LegendColor-matched labels, bold names, inline insight

Data Visualization — Comparison Layout

Myth vs Fact

Side-by-side comparison using Accent (myth) and Secondary (fact)

Stat Card

Bold number with context — for social sharing and infographics

People in Visuals

No illustrated people. Use photography.

Illustrations are for data, concepts, and diagrams — never for depicting people. When a visual needs to show a person or group, use photography following the photography guidelines.

Illustration

Charts, odds, probability, house edge, RNG, myth vs fact, quiz cards, stat graphics

Photography

Friends, fans, social moments, casino environments, anyone using a device, any human presence

Illustration Color Palette

Primary

#1B2838

Primary Light

#2A3F56

Secondary

#10B981

Secondary Dark

#047857

Accent

#FF6B35

Accent Light

#FF8A5C

Success

#00C853

Warning

#FFB300

Danger

#FF3D00

Neutral 500

#6B6B8D

Neutral 200

#D1D1E0

Neutral 50

#F5F5FA

Approved Combinations

Primary + Secondary

Default data viz

Primary + Accent

Warning / attention

Secondary + Accent

Comparison (myth vs fact)

Primary + Success + Danger

Right/wrong, do/don't

Primary + Neutral

Low-emphasis, background

Do / Don't

Layout example with invented categories A, B and C. Use legible labels, an honest scale and explicit assumptions in a real chart.

Don't

Use non-brand colors, skip axes and labels, use sharp corners, or overcrowd with too many data points.

Keep one concept per illustration. Test whether readers can identify the intended point; do not infer comprehension from a tidy layout.

Don't

Overcomplicate with multiple concepts, thin inconsistent strokes, or decorative elements that don't convey meaning.

Sources and example conditions

Roulette guide: uniform pockets, stated payout rules and the basket exception. Mathematical analysis and payout table.
Slots guide: independence requires unchanged rules and game state. Gambling Commission explanation of RTP and machine types (Great Britain).
W3C contrast guidance: assess the text and actual background together. No contrast pass is established by these photographs or proposed overlays.

Maintained September 6, 2026. Font files and their licenses are embedded in this HTML for reuse. Original photographs are retained in the source snapshots; embedded previews are resized without cropping.