Design System
A shared, themeable design system for six brands. Delivery got about 30% faster.
Styleguide
Tokens, primitives and casino components used on this site. Every value is defined once in src/styles/index.css and consumed as utilities.
Color
ink-950
#0a0a12 / Page
ink-900
#11111b / Surface
ink-800
#1d1d2b / Raised
ink-700
#2a2a3c / Line
fg
#eceaf2 / 16.5:1
fg-muted
#a6a4b8 / 8.1:1
fg-subtle
#858399 / 5.4:1
gold
#e8b94a / Value, 10.8:1
emerald
#3be3a4 / Interaction, 11.9:1
Type
Big Shoulders 800
Geist for body copy. Clean, calm and readable at every size.
0123456789 7+ ~30%
Shape, depth, motion
Controls: pill
Surfaces: 14px
Inputs: 10px
shadow-card
glow-gold
glow-emerald
ease-out-expo / Reveals, hovers
ease-press / Press feedback
ease-mech / Reel stops
Buttons
Chips, badges, tooltip
NeutralGoldEmerald
Tooltips open on hover and focus, and close with Escape.
Card and modal
Interactive card
Lift, gold border and a light sweep on hover.
Focus trap, Escape to close, focus returns to the trigger.
Casino symbols
- chip
- coin
- reel
- card
- crown
- star
- lock
Slot machine
Current result: REACT, TYPESCRIPT, NEXT.JS.
React, TypeScript and Next.js
Odometer and ticker
~30%
- 5+years in iGaming frontend
- 6brands on one platform, millions of monthly users
- 7+engineers and QAs led
- ~30%faster delivery with CDD + design system
Game tiles
Performance
LCP, TBT and CLS work on lobbies with hundreds of game tiles and live jackpots.
Coming soon
Next side project
In development. Unlocks soon.
Paytable symbols
Daily driver since 2019. Lobbies, dApps, dashboards and design systems.BFFs, scrapers, build tooling and APIs.Containerized frontends and BFFs for consistent environments.Relational models for side projects and internal tools.Sprint planning, OKRs and cross-team retrospectives.Contract reads, writes and event subscriptions.