UI kit
Every component of the Gauge interface, on the live tokens. Toggle the theme to check both modes.
Brand
Symbol and lockup. The mark inherits the text colour, so it reverses with the theme.
Colour
Semantic tokens only. Amber is the single accent; success and danger are functional, never decorative.
bg
surface-1
surface-2
surface-3
line-strong
accent
success
danger
Type
Inter for interface text. Every measured value is set in tabular mono so digits never shift.
Page title · 24 / semibold
Card title · 16 / semibold
Body · 16 / regular. Used for anything the lifter reads in full.
Secondary · 14 / regular, muted
Eyebrow label · 12 / spaced caps
137.5 kg readout
Buttons
One primary action per view. Medium and large meet the 44px touch target.
Form fields
Label above, hint or error directly below. Errors say how to fix the problem.
Shown on your dashboard.
Enter an email like name@example.com.
Number stepper
For values that move in fixed jumps. The field stays typeable; the buttons are 44px.
Steps of 2.5 kg
Selection controls
Badges and identity
Tabs
Arrow keys move between tabs; Home and End jump to the ends.
Overview panel.
History panel.
Records panel.
Overlays and notifications
Dialogs use the native element: focus is trapped and Escape closes. On phones the sheet docks to the bottom edge.
Loading and empty states
No sessions yet
Log your first workout and your trend lines start here.
Gauge dial
The signature component: the logo's dial, live. One headline measurement per screen, never decoration.
Stat tiles
Trend direction is carried by icon and sign as well as colour.
Squat e1RM
147.5kg
+1.7%vs last week
Volume, 7 days
34,440kg
-2.1%vs last week
Sessions
3of 4
No change
Bodyweight
82.4kg
Week strip
- Monday: trained
- Tuesday: rest day
- Wednesday: trained
- Thursday: trained
- Friday: rest day
- Saturday: session planned (today)
- Sunday: rest day
Rest timer
Starts by itself when a set is marked done. Skip here restarts the demo.
Rest
1:30
Set logging
The core of the product. Tap a previous value to prefill; an empty set cannot be marked done.
Quads · Glutes
Back squat
- Warm-up set
- Set 1, personal record
- Set 2
- Set 3
Routine card
Trend chart
A text summary and a data table sit behind the chart for screen readers.
Estimated 1RM
Bench press
| Date | kg |
|---|---|
| Aug 24 | 92.5 |
| Sep 7 | 93.5 |
| Sep 21 | 95 |
| Oct 5 | 95 |
| Oct 19 | 97.5 |
| Nov 2 | 98.5 |
| Nov 9 | 100 |
Table
| Exercise | Weight (kg) | Reps | RPE |
|---|---|---|---|
| Back squat | 137.5 | 5 | 8 |
| Romanian deadlift | 110 | 8 | 7.5 |
| Leg press | 200 | 10 | 8.5 |