LockedIn — Design System · Robert EM Spencer

1. Color Tokens

All colors are defined as CSS custom properties on :root. Use the variable name, not the hex value, so the entire palette can be swapped by editing one block.

Surfaces

Background

#0B0F14

--bg

Card

#12171E

--card

Card Hover

#171D26

--card-h

Border

rgba(255,255,255,0.05)

--bdr

Text

Primary

#E8ECF1

--t1

Secondary

#8B9AAD

--t2

Tertiary

#5A6878

--t3

Gold (Brand Accent)

Gold

#D4883A

--gold

Gold Dim

rgba(212,136,58,0.12)

--gold-d

Gold Border

rgba(212,136,58,0.3)

--gold-b

Semantic

Green

#34C47C

--grn

Red

#D44A3A

--red

Blue

#4A8FB8

--blu

Amber

#D4A03A

--amb

Orange

#D4703A

--org

Semantic Backgrounds (Dim + Border pairs)

Green Dim

rgba(52,196,124,0.1)

--grn-d

Green Border

rgba(52,196,124,0.25)

--grn-b

Red Dim

rgba(212,74,58,0.1)

--red-d

Red Border

rgba(212,74,58,0.25)

--red-b

2. Typography

Two typefaces: Outfit (display/titles) and DM Sans (body/UI). All sizes in rem for Dynamic Type accessibility scaling. Base: 1rem = 16px.

Display — Outfit

05:00

Timer Display
3rem / 48px
weight 800
letter-spacing: 2px

Create Your Account

Auth Title
1.5rem / 24px
weight 700

LockedIn

App Name
1.25rem / 20px
weight 800
letter-spacing: 0.5px

4.2

KPI Value
1.125rem / 18px
weight 700
color: --gold

Weekly Summary

Page Title (.hdr-ct)
1.0625rem / 17px
weight 700
clamp(0.875rem, 3.5vw, 1.0625rem)

Warm-Up Drills

Activity Name (.tam)
0.9375rem / 15px
weight 700

Week 3 — Counter Attacking

Week Header (.wkh)
0.875rem / 14px
weight 700
color: --gold

This Week's Habits

Card Title (.st-card-t)
0.875rem / 14px
weight 600

Select Practice

Section Label (.slbl)
0.75rem / 12px
weight 600
uppercase, ls: 2.5px
color: --t2

Activity 1

Activity Number (.tan)
0.6875rem / 11px
weight 700
uppercase, ls: 1px
color: --gold

Body — DM Sans

Enter your email address

Input Text
0.9375rem / 15px
weight 400

Coach's Practice

List Item (.pd)
0.97rem / ~15.5px
weight 600

Season Analytics

Subtitle (.hdr-cs)
0.8125rem / 13px
weight 400
color: --t2

Body language, effort, attitude towards teammates and coaching.

Description (.scs)
0.78rem / ~12.5px
weight 400
color: --t2
line-height: 1.5

Rename

Button Text (.ebtn)
clamp(0.625rem, 2.5vw, 0.72rem)
weight 600
color: --t2

Attendance

Micro Label (.pl)
0.625rem / 10px
weight 600
color: --t3
uppercase

3. Weight Hierarchy

Four tiers of visual weight. Use sparingly — most text should be 400 or 600. Reserve 800 for brand/hero elements only.

Display

800

App name, timer digits, auth icon, avatar initials

Title

700

Page titles, active item names, KPI values, week headers

Label

600

Card titles, section labels, buttons, list items, metadata

Body

400

Descriptions, input text, paragraphs, notes

4. Spacing & Radii

Spacing scales with device size across 4 breakpoints. All padding uses absolute px values (not rem) for predictable layout.

Border Radius Scale

Small (--rs)

10px — chips, tags, small buttons

Medium (--rm)

14px — buttons, inputs, list items

Large (--rl)

22px — cards, panels, activity cards

XLarge (--rx)

26px — section cards (recording)

Card Padding Scale (responsive)

Component	≤380px	Base	≥500px	≥768px
.bod (body)	12px	16px	20px	22px
.scard	14px	18px	20px	22px
.tac	14px	16×18px	18×20px	20×22px
.plcard	16×10px	20×14px	22×16px	24×16px
.mb (modal)	18px	24px	28px	28px

5. Buttons

Six button variants. All have min-height: 44px touch targets (WCAG 2.5.5). Weights are 600 for a refined, non-aggressive feel.

Primary Action — Gold Pill

.bsm

bg: --gold-d | border: --gold-b | color: --gold | radius: 20px | font: clamp(0.72rem, 2.8vw, 0.84rem) 600

Block Button — Gold Frame

.bbtn

bg: --card | border: --gold-b | color: --gold | radius: --rm (14px)

Action Button — Flex Row

.ebtn

bg: rgba(255,255,255,0.03) | border: --bdr | color: --t2 | radius: --rs (10px)

Add Button — Dashed

.eadd

bg: transparent | border: dashed --gold-b | color: --gold | radius: --rl (22px)

Yes / No Toggle

.bbin + state classes

Active states

.bbin-yes: bg --grn, color #fff | .bbin-no: bg --red, color #fff

Timer Controls

.tb + .go / .pa / .bk / .sk

.go: bg --grn | .pa: bg --amb | .bk/.sk: bg rgba(255,255,255,0.06)

6. Cards

Cards are the primary content container. All share --card background with --bdr border, but vary in padding and radius.

Section Card (recording page)

.scard — radius: --rx (26px), padding: 18px

🎯Coaching Observation

Body language, effort, attitude towards teammates and coaching.

Activity Card (timer)

.tac — radius: --rl (22px), padding: 16px 18px

States

Activity 112:00

Warm-Up Drills

Activity 215:00

Passing Patterns

Activity 310:00

Small-Sided Game

Default | .act: bg rgba(gold,0.06), border --gold-b | .dn: opacity 0.45

Player Card (selection grid)

.plcard — radius: --rl (22px), padding: 20px 14px

AB

Asher B

3/5 ✓

NC

Noah C

5/5 ✓

Default | .done: bg --grn-d, border --grn-b, color --grn

Summary Player Card

.sc + tier (.t1 / .t2 / .t3)

Asher B

1st Choice

8 pts

Noah C

2nd Choice

5 pts

Corbin L

Coach Picks

2 pts

.t1: border-left --grn | .t2: border-left --gold | .t3: border-left --t3

7. Form Inputs

Text Input

.mi / .auth-input

.mi: padding 12px | .auth-code-input: Outfit, 1.125rem, 800, uppercase, ls: 3px, centered

8. Avatars

.plav (52px) / .qr-ini (40px) / .timer-avatar-sm (32px)

AB

NC

CL

Gradient: linear-gradient(135deg, --gold, --org) | Font: Outfit 800 #fff

9. Navigation Elements

Horizontal Scroll Pill Selector

.st-sel + .st-pb / .wpk + .wpb

flex-wrap: nowrap | overflow-x: auto | scrollbar hidden | .act: --gold-d bg, --gold-b border

Tab Bar

.st-tabs + .st-tab

.act: bg --gold-d, color --gold | default: transparent, --t3

10. Progress & Data Display

Progress Bar

.tpg + .tpb

Track: 5px, rgba(255,255,255,0.06), radius 3px | Fill: --gold

KPI Grid

.st-kpi + .st-kpi-item

4.2

Avg Points

3.8

Avg Effort

82%

Drill Rate

95%

Attendance

Points Bar

.pbar + .pgr + .pv + .pl

This Practice

1

Attend

2

Fitness

1

Effort

4

Total

11. Responsive Breakpoints

Four device tiers plus a high-contrast accessibility override. The base (no media query) targets phones 381–499px.

Small Phone

@media (max-width: 380px)

iPhone SE, older phones.
Cards: 14px padding
Body: 12px sides
3-col grids
Compact buttons

Base (Phone)

No media query

iPhone 14, Pixel 7, etc.
Cards: 16–18px padding
Body: 16px sides
4-col grids
Standard buttons

Tablet

@media (min-width: 500px)

iPad Mini, landscape phones.
Cards: 18–20px padding
Body: 20px sides
4-col KPI grid
Larger inputs

Desktop

@media (min-width: 768px)

iPad, laptop, desktop.
Cards: 20–24px padding
Body: 22px sides
#app max-width: 540px
Rounded header bottom

12. Special Elements

Drag Handle

.dd-handle — min-height: 44px, cursor: grab

SVG dot grid, 18×18px, stroke currentColor

Ghost (.dd-ghost): position fixed, opacity 0.85, scale 1.03, box-shadow, bg --card, border --gold-b

Drop indicator: 2px solid --gold on border-top or border-bottom

Tier Badge

.str.t1 / .str.t2 / .str.t3

1st Choice 2nd Choice Coach Picks

Toast Notification

.tst

Saved successfully