Loading…
FITROOM design system
Every token on this page comes from .workflow/DESIGN.md: logo colors, Refero reference structure, 10px button radius.
Colors
One chromatic color for the main action; mint and amber for states only.
primary
Main action, selected slot, focus
accent-on-dark
The only color on dark sections
ink
Dark sections, top bar, secondary button
silver
Secondary text and icons on dark
surface
Light canvas
surface-alt
Alternating rows and sections
success
Badge: booking confirmed
warning
Badge: booking pending
Typography
Condensed sports-poster headings; the interface in the logo's typeface.
display-xl
Oswald · 64 / 0.9 · 700
THE ROOM IS YOURS FROM 7:00
display
Oswald · 48 / 0.95 · 700
EMPTY HOURS: 14
metric
Oswald · 40 / 1 · 600
82%
headline
Oswald · 32 / 1 · 600
TUESDAY 14 OCTOBER
title
Montserrat · 20 / 1.3 · 700
Book the room
body-lg
Montserrat · 16 / 1.5 · 400
Tuesday 14 October · 07:00–08:00 · main room
body
Montserrat · 14 / 1.45 · 400
Full refund if you cancel by Monday at 7:00.
label-caps
Montserrat · 12 · 600 · 0.12em
Studio PT
caption
Montserrat · 12 / 1.35 · 400
Changeover time included: 15 minutes
Buttons
10px radius, 44px height, Montserrat semibold.
Cards
1px border on light, raised layer on dark.
07:00–08:00
19 hours left to sell this month
The door code arrives 2 hours before the start.
Fields
Prevents zoom on iOS; errors in red with helper text.
The VAT number must have 11 digits.
Badges
Mint and amber only here.
Shapes and spacing
Tags 6px, buttons 10px, cards 14px, sheets 20px.
xs · 6px
md · 10px
lg · 14px
xl · 20px
Spacing
Do's and don'ts