Work / Case study
betCollab
An iGaming design studio built from the ground up — a brand, a scalable multi-brand sportsbook design system in Figma, and a live, fully-playable product built from it with Claude Code. The components further down this page are the real thing, running live.
🧩 Context
betCollab is the UK iGaming design studio I co-founded with Peter Dearsley. We design sportsbook and casino interfaces and multi-brand design systems for operators and platform providers. Together we created the brand and led the UI/UX with a long-term vision: a design system we could license or adapt for betting companies that need modern, scalable design resources — drawing on our combined expertise in the betting industry and in global streetwear branding.
Then I took it past static screens. Using Claude Code and an AI-assisted workflow, I built the system out into a fully operating sportsbook and casino — translating Figma components and tokens directly into production code for a live, interactive product you can play with below.
🚧 Challenge
Build one design framework that can wear many brands, communicate clearly in a crowded, high-trust space, and hold up to strict compliance — without ever feeling generic. It had to be modular enough to rebrand and scale for future partners and commercial use, and complete enough that a real betting product could be shipped from it, not just a tidy Figma file.
🎯 Goals
- Build a premium, adaptable design system that works across many betting brands
- Position betCollab as a product design partner for sportsbook and casino operators
- Craft intuitive betting journeys that build conversion and trust
- Give it a distinctive identity, informed by modern product UI and streetwear culture
- Prove it end-to-end — full responsiveness, accessibility, and a working product
🔍 Approach
I worked the problem as a system, not a set of screens:
- Ran competitor research (Bet365, Ladbrokes, Paddy Power and others) to map the patterns punters already expect
- Set brand foundations — colour, type, spacing, radii — as Figma Variables and Modes, so a whole brand can be reskinned by swapping a short list of tokens
- Built a component-based library — 2000+ components and variants, structured to map cleanly onto shadcn/ui and Tailwind in code
- Designed the full sportsbook: event grids, bet slips and multiples, bet builders, promotions, cash out, account and KYC flows — plus a casino with real table games
- Built it into a working product with Claude Code, carrying the Figma tokens straight through to the live UI
🎨 One system, any brand
Because every colour, radius and surface is a token — a Figma Variable in design, a CSS custom property in code — the same components can dress themselves for a completely different operator without anyone touching a component. Here's one screen, the in-play bet slip, wearing four brands. Same code, four identities:
🕹️ Try it — the real components
Everything below is live, running from the sportsbook I build the design system in. Tap the odds, build a bet, spin the wheel — then use the controls to restyle every demo at once and watch one codebase change brand. For each one I've added a quick note on how I built it.
Bet slip & multiples
A bet slip with a real multiples engine. Add a few selections and it works out every bet the UK book allows — from doubles and trebles to full-cover bets — and flags price changes before a bet goes on.
How I built itThe full UK ladder — Singles, Doubles, Trebles, Accumulator, Trixie, Patent, Yankee, Lucky 15, Canadian, Lucky 31, Heinz, Lucky 63, Super Heinz and Goliath — with acca boosts that step from +5% at four legs to +70% at ten. Suspended selections block the bet until they're removed.
Bet Builder
Build a same-game multi from match and player markets. A summary bar keeps the legs and the running price in view, and the finished builder drops into the slip as a single bet.
How I built itTwo to eight legs, one pick per market, with player markets like Goalscorer and Assist sitting alongside match markets. The price comes from a pricing feed, never multiplied out from the legs — legs from the same match are correlated, so a true builder price is always lower.
Price boosts & accas
The homepage's boost and acca carousels, wired to the slip. Boosts show the price before and after; a pre-built acca goes on as a single bet with its legs listed underneath.
How I built itA boost's maximum stake travels into the slip — anything above it settles at the original price. Accas are fixed-leg bundles, so the multiples engine never splits them up. On a narrow frame the slip tucks behind a peek bar — the same component as desktop.
Stories
Social-style stories for promotions, match previews and stats, sitting at the top of the book. A story's button puts a real, priced selection straight into the slip — no new tab, no coupon page in between.
How I built itA standalone, framework-agnostic widget installed from its own package — the same way an operator outside our stack would install it — and themed through a short list of CSS custom properties, so it takes on any brand.
Cash out
Open bets with cash-out, from My Bets. Take the whole amount, or slide to cash out part of a bet and leave the rest running.
How I built itEvery cash-out goes through a confirmation step that states the amount. A partial cash-out scales the remaining stake, returns and cash-out value, and the currency comes from the account — never hard-coded into the component.
Table games
Roulette, blackjack and baccarat, fully playable — chips move money, rounds resolve and wins pay. The tables run on the same tokens as the sportsbook, so an operator rebrands them without touching a component.
How I built itReal game engines behind the interface — blackjack splits up to four hands and offers insurance. 510 automated checks cover the payout tables, drawing rules and the money ledger, and colour contrast is checked across every brand and table theme.
✅ Outcome
betCollab is a modern, multi-brand sportsbook design system that's been proven the hard way — not as a Figma file, but as a live, playable product. New partners can be onboarded with their own branded experience while the UI/UX stays consistent underneath, and the whole thing was carried from design to working code with Claude Code and an AI-assisted build. Betting-product know-how, visual storytelling and that speed to market make betCollab a distinctive base for commercial partnerships — a design system you can actually use, dressed for whichever brand needs it.
Like what you see?
If you need design support — or think I'd be a great fit for a role — I'd love to hear from you.