Skip to main content

Design system

Component library

Every component below uses semantic theme tokens and works in both themes. Switch the appearance to review contrast and elevation.

Colour and type

Canvas

Surface

Raised

Sunken

Primary

Magenta

Success

Warning

Danger

Info

Display 40/48

Page title 30/38

Section title 22/30

Card title 17/24

Body 15/23 — sentence case throughout.

Small 13/19 metadata

Label 12/16

Buttons

Variants

Sizes and states

Form controls

Full legal name as on the membership record.

£

Billed on the 1st of each month.

54 / 280 characters

Selection controls

Data display

Badges

ActivePaidExpiringOverdueTrialMilestoneArchived

Avatars, progress and capacity

IFNBAR+6

13 of 21 skills achieved

18/18 placesFull

Skeletons

Table

GymnastProgrammeStatusBalance
Isla FraserRecreational Level 1Active£0.00
Noah BennettDevelopment SquadOverdue£84.00
Amelie RossiPre-EliteActive£0.00

Bulk actions

2 selected

Overlays and feedback

Overlays

Tabs

Membership, guardians and emergency contacts.

System states

Term dates change on 2 September. Review affected classes.

You're offline. Registers are saved on this device and will sync automatically.

Medical details are restricted. Ask your safeguarding lead for access.

No gymnasts match these filters

Try removing the "Wait list" filter or search by guardian surname.