A full-stack product design project: 25 screens, complete design system, responsible gambling built in from the start — not bolted on.
7 industry problems shaped every design decision in this project. Each is specific, sourced, and addressable through design.
VantageBet brings casino discovery, live experiences, sports betting, rewards, and account management into 1 focused mobile product. The design system balances high-energy game content with clear interaction patterns, transparent betting controls, and a consistent experience across light and dark modes.
Original game artwork, stronger category navigation, and personalised content make the catalogue easier to scan and explore.
Clear CTA hierarchy, accessible betting controls, and interaction-safe layers keep key actions visible and usable at every step.
A consistent component system supports casino, sports, rewards, and account journeys across both light and dark modes.
Responsible gambling, fraud prevention, and payment reliability are designed into primary flows. Not in settings menus, not in the fine print.
Registration and payments move quickly. Every step explains why we ask for data, shows visible progress, and gives honest wait times.
Unified balance for sports and casino. Real money, bonus, and locked funds are visually distinct — at every touchpoint, not just the wallet screen.
The system had to work across regulated markets where bonus visibility, KYC depth, and messaging vary by jurisdiction — while keeping a consistent, trustworthy feel.
DM Sans — Display & Headings
Inter — Body & UI
Brand & Semantic Palette
Light Mode
Dark Mode
Balance type system — why 3 distinct colors?
Industry benchmark: 1 in 4 withdrawal complaints across licensed operators stem from players expecting bonus funds to be withdrawable. Color-coding at every touchpoint — not just the wallet — is the primary design intervention.
Odds values change in real time. Without font-variant-numeric:tabular-nums, changing from 1.20 to 12.00 shifts the button width mid-event — disorienting in a live context. DM Sans was chosen over Inter for faster scan speed at high sports market density.
Red in this system means error or block — payment failed, account flagged. Using red for RG nudges creates false urgency and trains users to dismiss them. Amber frames the message as awareness, not alarm. This is a deliberate signal hierarchy decision, not an aesthetic one.
On iOS dark mode, drop shadows appear artificial against near-black surfaces. Elevation is communicated through background layering alone — each level 8–12% lighter than the one below. This matches native iOS dark interface expectations and avoids the heavy, dated aesthetic common in legacy gambling apps.
Every screen was rebuilt for interaction safety and visual richness — original illustrated casino artwork, a complete category system, and no overlay ever blocking a primary action. Toggle light/dark to see the system hold across both modes.
Most operators treat responsible gambling as a settings menu item. We designed it as a contextual trust signal — something users encounter at the moment of risk, not in a menu no one opens.
RG nudges appear at deposit, the RG Hub is reachable in 2 taps from any screen, and session time persists in the in-game HUD. Amber keeps the tone informational rather than alarming.
A declined deposit is the highest-risk moment for player churn. Generic error codes send players to competitors in under 60 seconds.
The sheet never closes on failure. The specific decline reason is explained in plain language. Alternatives load inline — the user never has to navigate away to try again.
font-variant-numeric: tabular-nums;
font-family: 'DM Sans';
font-weight: 700;
Without tabular numerals, changing from 1.85 to 12.00 shifts the button width mid-event — a jarring reflow during live matches where 12 markets can update simultaneously.
tabular-nums ensures every digit occupies the same width. Stable layout regardless of whether the value is 1.20 or 12.00.
On iOS dark mode, drop shadows look artificial — a white glow on near-black feels detached from the surface system that users have been trained by native apps.
Each surface level is 8–12% lighter than the one below. 4 levels, no shadows. This is exactly what native iOS dark interfaces do, and users recognise it instantly as quality.
#0A0C14#13172A#1A1E35#22263AReal money, bonus, and locked funds each carry a distinct color at every touchpoint — wallet, deposit sheet, bet slip, transaction history. Not just the main wallet screen.
Bonus confusion is the single largest driver of player complaints and chargebacks in licensed iGaming. Color at the point of action is the prevention — not a terms screen no one reads.
This is a portfolio project. Metrics represent design hypotheses based on published iGaming industry benchmarks from Sumsub, iGaming Business, and UK Gambling Commission research (2024–2025). No live operator data.
Project at a glance
Tools used
A 2-sided marketplace across web, customer app, and seller app designed around shipped product ownership.
Open the interactive prototype to explore casino discovery, sports markets, wallet states, account controls, and light or dark modes.
VantageBet is an independent portfolio concept. It is not a live operator; all product data shown inside the prototype is demonstrative.