Family Bingo Design System
Minimalist Modern by Mika — Every pixel earns its place.
Foundation Colors
Accent & Semantic Colors
Player Identity Colors
12 curated colors for player cell fills
Typography — Inter
display
32px / 700
Family Bingo
heading-1
24px / 600
Good evening, Sarah.
heading-2
20px / 600
Active Games
heading-3
16px / 600
Road Trip Classics
body
15px / 400
Create and manage bingo games for your family.
body-medium
15px / 500
Join Game
small
13px / 400
Last edited 3 days ago
caption
11px / 500
5 Players
cell-text
11px / 500
Red barn on hillside
cell-letter
13px / mono 700
B I N G O
Spacing Scale (4px grid)
Buttons
Inputs
Cards
Road Trip Classics
24 items
Last edited 3 days ago
3 lists · 5 players · Round 2
Started 2h ago
Badges & Status
5 players
Round 2
Confirmed
Partial
Unconfirmed
LIVE
Connected
Reconnecting
Disconnected
Shadows & Radii
shadow-sm
r-sm 6px
shadow-md
r-md 10px
shadow-lg
r-lg 16px
r-xl 24px
glow
Player Join Screen
Link tap to playing in under 30 seconds. Nothing unnecessary.
Join Family Bingo
Road Trip Bingo
Player Bingo Card
Tap cells to mark them with your player color. Try the BINGO button.
Player List View
Alternative view grouped by B-I-N-G-O letter. Tap rows to mark.
GM Dashboard — Master List
Three-color status system: green (confirmed), amber (partial), red (unconfirmed claim).
Round 2
5 players
8/42 confirmed
⚠
BINGO: Nana 🌻
GM Dashboard — Player Cards
Mini bingo grids with three-color status per player.
5 Players Connected
Items: 8/25 · BINGO claimed
Game Composer
Three-step flow: choose lists, assign letters, configure settings.
Step 1: Choose Lists
Step 1 of 3: Choose Lists
Game type
Select lists
✓
Road Trip Classics
24 items
Step 3: Settings
Step 3 of 3: Settings
Win Condition
Game Created!
[ QR Code ]
familybingo.app/join/abc123