Design system

Style guide

Every shared component in every state. Review this before we build features.

Colour tokens

--ink

#E7EDF7

Primary text

--ink-soft

#93A2BE

Secondary text

--paper

#0A0F1C

App background

--surface

#101A2E

Cards

--fill

#1B2A47

Filled blocks, hover

--line

#22304C

Hairline rules

--signal

#3E76B0

Primary action — navy

--pitch

#2F8F63

Verified / success

--amber

#D8A62B

Pending / warning

Typography

Bebas Neue — display and headings

Inter — body copy, 16px minimum.

IBM Plex Mono — 1234567890 tabular numerals

12pxTeam sheetChips, captions
14pxTeam sheetSecondary text
16pxTeam sheetBody minimum
20pxTeam sheetSection heading
26pxTeam sheetPage heading
34pxTeam sheetPage heading large
48pxTeam sheetDisplay

Buttons

Status chips

DraftVerifiedPending reviewAction neededDelivered

Stat cards

Assessments

18

This session

Approved

12

Signed off by a scout

Awaiting review

4

With a named scout

Consent gaps

2

Blocking club visibility

Resolve

TeamSheetRow

1GKAlex M.Checked in
4CBJordan T.North West · U15-17Pending
8CMSam R.4
99STA Player With A Very Long Name IndeedDelivered

RatingInput

First touch
Developing
Age-appropriate
Exceptional
Not yet rated
Developing
Age-appropriate
Exceptional
Locked (submitted)
Developing
Age-appropriate
Exceptional
Selected value: 3

Empty states

No players added

Add a player record to book a trial place.

No assessments yet

Start a rubric from the squad list to record ratings.

Confirm dialog

Hairline rules

Section one — separated by a 1px rule, never a shadow.

Section two — separated by a 1px rule, never a shadow.

Section three — separated by a 1px rule, never a shadow.