Scrimlife — Design Tokens Mockup

Reference for fonts, type scale, palette, spacing, radii, motion, and surfaces. Generated from tokens.css — no magic numbers.

accent/volt tier 1 gold tier 2 cyan tier 3 bronze success/open danger warning base surface card / sheet raised / input hover / selected
SCRIMLINE
scrim · score · settle
Track every scrim. Live score updates. Automatic prize-split on the blockchain.
Splash
onboarding entry · hero gradient · CTA stack
9:41LIVE
SCRIMLINE
+ New
Feature Scrim
Sparks
vs Phoenix
Live · Q3
2−1
56:42
1Sparks FC9
2Phoenix6
3Gliders0
All Matches
4 today
Live 67:10
WF
WolvesWLV
3
TC
Tide CrewTDC
2
Upcoming 18:00
NX
NexusNXS
vs
RY
RoyalsRYL
Prize pool — 2,500 SCRIM
Home
live score hero · match list · status chips · standings mini
9:41📶 5G
Schedule
Week
Saturday, Aug 16
8 Scrims
10:00
Sparks vs Phoenix
LiveGroup A · BO3
LIVE
11:30
Gliders vs Royals
OpenGroup B · BO3
+2h
13:00
Wolves vs Tide
UpcomingFinals · BO5
+3.5h
15:30
Nexus vs Sparks
UpcomingGroup A · BO3
+6h
Sunday, Aug 17
09:00
Finals
OpenBO5 · 5,000 SCRIM
14:00
3rd Place Match
UpcomingBO3 · 1,500 SCRIM
Schedule
time slots · status chips · date grouping
9:41📶 5G
Standings
Group A
Feature Scrim · Day 4
Group A
Promotion line
Top 2 advance
#TeamWLPts
1Sparks FC309
2Wolves216
3Phoenix123
4Gliders030
Promotion
Top 2
Relegation
Bottom 1
Standings
table · zone rails · promotion/relegation callout
9:41📶 5G
Wallet
History
Available Balance
12,480
SCRIM tokens
T1
Gold
× 1.5
T2
Steel
× 1.25
T3
Bronze
× 1.0
Recent Activity
🏆
1st — Feature Scrim
+850
📤
Withdrawal
−500
🏅
2nd — Warm-up Series
+320
Wallet
balance hero · tier multiplier cards · tx history
Token Reference
Type Scale
Display XL
Display L
Display M
Display S
Body L — The quick brown fox
Body M — The quick brown fox
Body S — The quick brown fox
Caption — The quick brown fox
Mono Micro — aB3$x9
Surfaces
bg-base #0A0D13
surface-1 #111722
surface-2 #1A2231
surface-3 #242E40
surface-inset #070A0F
Text
Primary — Headlines
Secondary — Body copy
Muted — Labels & hints
Disabled (40% alpha)
On accent
Semantic States
Live — accent volt
Open / Success — green
Upcoming — slate
Completed — dim slate
Cancelled — red tint
Warning — amber
Danger — vermillion
Elevation & Radii
shadow-1 — 1px 2px
shadow-2 — 4px 14px
shadow-3 — 16px 40px
radii: xs · sm · md · pill
Motion
120ms fast
200ms base
Easing: cubic-bezier(.2,.7,.3,1)
Glow accent: 0 0 0 1px · 0 6px 20px