PulseTrackLegacy format
PulseTrack is a design system for fitness tracking apps, workout platforms, and athletic performance dashboards. The aesthetic is kinetic — near-black surfaces hold dense performance data while neon lime cuts through as the primary accent for active states, personal records, and metric peaks. Magenta is reserved for heart-rate signals and intensity zones, creating a two-color performance vocabulary that reads instantly at a glance during a workout.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxPulseTrack is a design system for fitness tracking apps, workout platforms, and athletic performance dashboards. The aesthetic is kinetic — near-black surfaces hold dense performance data while neon lime cuts through as the primary accent for active states, personal records, and metric peaks. Magenta is reserved for heart-rate signals and intensity zones, creating a two-color performance vocabulary that reads instantly at a glance during a workout.
Components
Cards
Card Title
Sample body text for the card component.
Buttons
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Icons
Font AwesomeLibrary: Font Awesome · Style: solid · Size: 24px
Motion
Motion in PulseTrack is energetic and rhythmic — it borrows from athletic timing. Standard duration is 200ms with cubic-bezier(0.34, 1.56, 0.64, 1) easing (a slight overshoot spring for that "snap"). Rep counter taps trigger a 240ms pulse with overshoot. Heart-rate displays pulse synchronized to actual BPM. Progress rings sweep in over 480ms with ease-out. PR celebrations trigger a 720ms confetti burst in lime and magenta. Workout completion screens animate hero stats counting up over 1.2 seconds. Idle states (timer paused) remove all motion to signal stillness.
Voice and Tone
• Direct and motivating. "Crush it" not "Have a good workout."
• Numbers carry the meaning — copy stays out of the way.
• Use athletic idiom: "Set," "Rep," "PR," "Block," "Zone," "Recovery."
• Celebration copy is short and earned: "PR.", "+5kg.", "Zone 5 hit."
• Empty states are nudging: "No workout today. Start a quick session?"
• Confirmation copy uses action verbs: "Log it," "Save PR," "End session."
Use with MCP
Don't have the MCP? Install it here