How to brand a white-label sportsbook: colors, fonts, layout and betslip

White label sportsbook customization should take an afternoon, not a design sprint. In The Sportsbook's console you open the Studio, start from one of six presets, set your colors (checked against WCAG AA), pick fonts, choose a sidebar or top bar layout and a floating or docked betslip, add your logo and token label, preview on three screen sizes and save; open sportsbooks pick up the change within seconds. This walkthrough goes through each step for a play-for-fun sportsbook (players bet free tokens, never real money) and says which parts are on every plan and which are paid.

Start from a preset

A preset is a complete, readable palette. Starting from one beats starting from a blank page, because a sportsbook has more color roles than most sites: page and card backgrounds, text, borders, odds buttons (normal and selected), the live marker, success and warning states, the betslip and the header.

Applying a preset changes colors only. It never switches your navigation, card layout or betslip position, so you can try all six without losing layout choices you already made. Uploaded fonts stay too.

There's also a light and dark base toggle. Switching it swaps the surfaces and text to the other palette and keeps your brand colors where they still have enough contrast on the new background. The Studio tells you what changed and offers Undo.

Colors and contrast

Most brand guides give you one or two colors. A sportsbook needs a dozen that work together, so work in this order:

1. Primary. Your main brand color, used for buttons and highlights.
2. Odds buttons. Background and text, then the selected state. This is the most-clicked element in the product; the selected state has to be obvious at a glance on a phone.
3. Surfaces. Page, cards and the betslip. Keep them close to each other so the odds stand out.
4. States. Live, success and warning. Don't reuse your primary color for live; players read a red or orange live marker faster.

Before you save, the Studio checks text and odds colors against WCAG AA (4.5:1 for normal text). A pair that falls short shows a warning so you can fix it. Brand teams sometimes push back on this: a pale brand color on white looks elegant on a slide and unreadable on a phone in sunlight. The check is there for the second case.

Typography (paid plans)

On Custom and Full you can set:

• a body font from 18 Google Fonts, or your own uploaded font files (WOFF2, WOFF, TTF or OTF, up to 1.5 MB each, up to 4 files);
• a separate heading font;
• a base size from 13 to 16 px.

Two practical notes. Pick a font with clear, tabular-looking digits: odds like 1.85 and 11/4 are the content, and a font where 1 and 7 look alike costs you readability. And test your base size on a phone: 13 px looks tidy on a desktop and cramped in a bottom sheet.

On Free, the sportsbook uses its default font, Inter.

Layout: navigation, cards and betslip (every plan)

Layout decides how the sportsbook feels inside your page, and all of it is on every plan.

The layout follows the width of the iframe, not the browser window. On a phone, or in a narrow column on desktop, the sidebar becomes a drawer and the betslip becomes a bottom sheet. That matters if you embed the sportsbook on your website next to other content: a 700 px column gets the narrow layout even on a large monitor.

Density and odds buttons (paid plans)

Two finer controls come with Custom and Full:

• Density: comfortable or compact. Compact fits more matches on screen and suits returning players who scan a long list. Comfortable is easier for newcomers and on touch screens.
• Odds buttons: pill or block. Block buttons read as a grid of prices; pills look lighter and fit rounder brands.

Corner radius, from 0 to 20 px, is on every plan. Sharp corners fit an editorial or data-heavy site; rounder corners fit gaming and consumer apps. Keep the radius consistent with the rest of your site so the frame doesn't look pasted in.

Logo, favicon and token label

Upload your logo and favicon, or link them from an https:// URL. The logo sits in the sportsbook header.

The token label is set in the console settings rather than in the Studio, but it's part of the brand: it's the word shown with every amount, such as TOKENS, COINS, POINTS or your community's own word, before or after the number, or no label at all. Currency symbols and codes ($, €, £, USD, BTC and the like) aren't allowed as labels, because tokens must never look like money. A community word ("Gems", "Stars", your club nickname) usually does more for the brand than a generic one.

On the Free plan a small "Powered by" badge is shown. On Custom and Full it's off by default.

Preview, drafts and going live

The Studio previews the real sportsbook at desktop, tablet and phone widths. Check all three before saving, with particular attention to:

• the betslip on phone width (bottom sheet) with two or three selections in it;
• the selected state of odds buttons;
• the live marker on a live match, if you have live betting;
• your logo on the header color, at small size.

Your edits stay in the Studio until you save. Once saved, the change reaches open sportsbooks within seconds, so players don't need to reload. On paid plans the audit log records who changed what ("Betslip layout: docked → floating · 3 colors · Font: Rubik"), which helps when several people share the console.

Limits of white label sportsbook customization, and why

No custom CSS. Every value is validated, which is why a theme can't break the betslip, hide the 18+ notice or inject something unsafe into the frame. It also means you can't restyle arbitrary elements; if you need something the Studio doesn't offer, tell us.

No custom domain today. The sportsbook loads from play.thesportsbook.app inside your page. Players see your site's address in the browser bar, and your brand inside the frame. If you're comparing providers, the white label sportsbook explainer covers what "white label" usually means elsewhere and what it means here.

Only brands you're allowed to use. The Studio will accept any logo you upload, but our policy doesn't: use names, logos and colors you own or have permission to use, and don't dress the sportsbook up as an official product of a league, club or tournament. Bookmaker logos and branding are out entirely, in the frame and around it. A fan site can use its own name and a club's colors; it shouldn't use the club's crest as if the sportsbook were the club's.

Try it without signing up: "Share this look"

The public playground (opens in a new tab) runs the real embed with free demo tokens and no sign-up. You can change colors, fonts, the layout (sidebar or top bar, list or grid) and the betslip, place bets, and press Share this look to get a link that restores exactly that configuration. It's a quick way to agree on a direction with a designer or a client before anyone creates an account.

Esports communities often push branding furthest, with team colors and a dark base; the esports community betting game article has examples of how that plays out. For how branding fits with sessions, balances and security, read the embeddable sportsbook guide. Plan details are on the pricing page.

Frequently asked questions