Colors
Brand Accents
Lime
#d1fd0c
Purple
#7a2be0
Purple (muted)
#7e58ac
Hot Pink
#f81ab2
Blue
#057cd8
Neutral Scale
White
#ffffff
Gray 100
#f9f9f9
Gray 200
#e9e9e9
Gray 300
#D9D9D9
Gray 400
#bcbcbc
Gray 500
#AAAAAA
Gray 700
#666666
Gray 850
#323232
Gray 900
#242424
Black Light
#181818
Black
#121212
True Black
#000000
Typography
Headings
Heading 2XL — 58px
Heading XL — 48px
Heading LG — 40px
Heading MD — 32px
Heading SM — 24px
Body Text
Text XL (20px) — The quick brown fox jumps over the lazy dog.
Text LG (18px) — The quick brown fox jumps over the lazy dog.
Text MD (16px) — The quick brown fox jumps over the lazy dog.
Text Base (14px) — The quick brown fox jumps over the lazy dog.
Text SM (12px) — The quick brown fox jumps over the lazy dog.
Text XS (10px) — The quick brown fox jumps over the lazy dog.
Font Weights
Light (300) — Inter variable font
Regular (400) — Inter variable font
Medium (500) — Inter variable font
Bold (700) — Inter variable font
Spacing Scale
space-14pxspace-28pxspace-312pxspace-416pxspace-520pxspace-624pxspace-832pxspace-1040pxspace-1248pxspace-1664pxspace-2080pxForm Elements
Dark Theme (primary)
Cards
Player Card (Roster Grid)
JD
BE
John Doe
#17
Forward
5'11"
AS
BE
Alex Smith
#8
Defence
6'1"
MJ
BE
Mike Johnson
#31
Goaltender
6'3"
Event Card
Camp
Summer Elite Development Camp
$299
Game
Eagles vs Wolves
4 – 2
Tables
Roster Table (List View)
| # | Name | Position | Height | Weight | Status |
|---|---|---|---|---|---|
| 17 |
JD
John Doe
Forward
|
Forward | 5'11" | 175 lbs | ACT |
| 8 |
AS
Alex Smith
Defence
|
Defence | 6'1" | 190 lbs | ACT |
| 31 |
MJ
Mike Johnson
Goaltender
|
Goaltender | 6'3" | 205 lbs | INA |
Stats Display
Games Played
44
Wins
28
Losses
12
Points
60
Info Rows
Location
XYZ Arena, Boston, MA
Date
June 15–17, 2026
Time
9:00 AM – 5:00 PM EST
Per-Team Theming
Default team variables are overridden at SSR time. Here are three examples showing how the same components adapt:
Boston Eagles
Chicago Wolves
Dallas Stars
Social Icons
On Dark Background