The visual system,
laid bare.
A living reference for every token, component, and motion rule used across GymFlow. Toggle the theme in the header to inspect contextual styles; the static swatch grids below show both modes regardless of theme.
Color
Dark mode · Primary
Matte charcoal canvas + electric neon.
Charcoal
#121212
Carbon
#1C1C1C
Off-White
#F5F5F7
Electric Neon
#00FF9D
PR Red
#FF4D4D
Steel
#A0A0A0
Light mode · Secondary
Crisp off-white + midnight navy actions.
Off-White
#F5F5F7
Paper
#FFFFFF
Charcoal
#121212
Midnight Navy
#1A1F36
PR Red
#FF4D4D
Slate
#666666
Typography
Buttons
Inputs
Badges & status
Card system
Glass card
bg-white/5 backdrop-blur-xl border border-white/10. Default container for exercises, summaries, and metrics.
Solid card
Carbon (#1C1C1C) / Paper (#FFFFFF). Use for nested content, forms, and modals where opacity stacking would muddy contrast.
Accent card
A thin neon border + tinted background mark the active or highlighted item. Reserve for one focused element per view.
Exercise card · in context
Exercise · 03 / 06
Barbell Bench Press
Working
Total
Rest
Motion
Haptic pulse
Tap to mark a set complete.
A soft, expanding ring confirms the rep was logged — visual stand-in for haptic feedback on mobile. Uses animate-pulse-ring on the action target.