Design System & Screen Gallery

Player Lifecycle CRM

Recruitment, onboarding & retention web app for Riverside Touch Rugby Club. Five hero screens plus a full token reference for engineering handoff.

Staff accent — deep indigo Player accent — coral-orange Plus Jakarta Sans 5 screens · 1 design system

Hero Screens

Five screens that establish the visual language for the entire product.

Screen 01

Staff Dashboard

The morning coffee screen. Action queue as hero — validation alerts at top, stale contacts below. Funnel metrics as supporting context.

Staff · Desktop Open screen →

Screen 02

Person Detail — Rookie State

Timeline view for Marcus Williams. Status-driven primary CTA. Medical card highlights missing fields. Collapsible sections keep forms from dominating.

Staff · Desktop Open screen →

Screen 03

Player Portal — My Rookie Path

Sarah's view. 4-week progress stepper, week objectives checklist, coach feedback quote card. Medical nudge framed as care, not compliance. Warm and personal.

Player · Mobile-first Open screen →

Screen 04

The Validation Moment

Interactive 4-state flow: completed card → validation modal → celebration toast → player portal post-validation. Click through to experience the ceremony.

Staff + Player · Interactive Open screen →

Screen 05

Mobile People List

Status tabs as primary navigation. Dense desktop table with urgency cues for stale contacts. Responsive to mobile cards with the most relevant action exposed.

Staff · Desktop + Mobile Open screen →

Two sides, one family

Same typeface, shared token structure — different density, tone, and accent.

Staff side

Accentoklch(44% 0.22 268) — deep indigo

Body size13–14px

Line height1.4 (dense)

DensityHigh — table/list-first

Primary deviceDesktop laptop

ToneNeutral, professional

Font weight display700–800

LayoutFixed sidebar + content

Player side

Accentoklch(60% 0.22 28) — coral-orange

Body size15–16px

Line height1.6 (generous)

DensityLow — single column

Primary deviceMobile phone

ToneEncouraging, personal

Font weight display800 (hero)

LayoutSingle column, top nav

Design Tokens

Extract from ds.css for engineering handoff.

Staff palette

Applied to all staff-side screens

--staff-bgoklch(98.5% 0.003 268)

--staff-surfaceoklch(100% 0 0)

--staff-fgoklch(17% 0.018 268)

--staff-mutedoklch(52% 0.012 268)

--staff-borderoklch(91% 0.007 268)

--staff-accentoklch(44% 0.22 268)

--staff-accent-dimoklch(37% 0.22 268)

--staff-accent-subtleoklch(95% 0.014 268)

Player palette

Applied to all player-side screens

--player-bgoklch(98% 0.012 55)

--player-surfaceoklch(100% 0 0)

--player-fgoklch(21% 0.022 50)

--player-mutedoklch(54% 0.016 50)

--player-borderoklch(90% 0.015 55)

--player-accentoklch(60% 0.22 28)

--player-accent-dimoklch(53% 0.22 28)

--player-accent-subtleoklch(96% 0.020 28)

Alert / urgency

Critical → warning → notice hierarchy. Critical reserved for validation alerts only.

--alert-criticaloklch(50% 0.22 22)

--alert-critical-subtleoklch(96.5% 0.018 22)

--alert-warningoklch(55% 0.17 80)

--alert-warning-subtleoklch(97% 0.016 80)

--alert-noticeoklch(58% 0.14 90)

--alert-notice-subtleoklch(97% 0.012 90)

Sidebar (staff)

Dark indigo navigation rail, shared across all staff screens

--sidebar-bgoklch(15% 0.022 268)

--sidebar-activeoklch(28% 0.025 268)

--sidebar-fgoklch(88% 0.006 268)

--sidebar-mutedoklch(62% 0.012 268)

Status Pills

The universal primitive. Every person card, list row, and detail page leads with a status pill. Consistent across both sides.

All six states

The Rookie Completed pill is intentionally inverted and animated — it's the product's defining status.

Prospect Prospect

First Session First Session

Rookie Rookie

Completed ✦ Rookie Completed

Active Active Player

Inactive Inactive

prospect-bg: oklch(94% 0.009 268)

firstsession-bg: oklch(96% 0.018 82)

rookie-bg: oklch(93% 0.015 268)

completed-bg: oklch(44% 0.22 268)

active-bg: oklch(93% 0.013 148)

inactive-bg: oklch(93% 0.004 268)

Typography Scale

Plus Jakarta Sans · staff uses the lower end, players see the upper end.

Display — 28px / 800player hero greeting

Title — 22px / 800dashboard greeting

Section heading — 20px / 800modal title

Card heading — 16px / 700card headers, player section heads

Row title — 14.5px / 600queue item titles, timeline titles

Body — 13.5px / 400staff body text

Meta — 12.5px / 400timestamps, subtitles

LABEL — 10.5px / 700 · 0.1emsection labels, sidebar section heads

Spacing Scale

4px base. Staff interfaces use the tighter end; player interfaces breathe more.

--s-14px

--s-28px

--s-312px

--s-416px

--s-520px

--s-624px

--s-832px

--s-1040px

--s-1248px

--s-1664px