One system, every surface
This is the central place for our branding, theming, and components. The same color tokens and components power the coach app, the client app, and our emails. Use the theme toggle in the top navigation to preview everything in light and dark mode.
Brand
fitcomrade helps fitness coaches build workouts once and share them with every client. Our voice is warm, simple, and value-driven. We write in sentence case and avoid jargon.
- Sentence case everywhere: headings, buttons, and labels.
- Value first: say what coaches get, not what the feature is.
- Simple words a 6th grader understands.
- No em dashes. Use commas, periods, or parentheses.
Colors
Every color comes from a semantic token defined in globals.css. Components never hardcode hex values, so light and dark mode work everywhere for free. Emails and video use matching hex constants from lib/brand-colors.ts.
Primary (brand green)
Neutrals & surfaces
Support & status
Charts
Typography
Our type scale lives in components/ui/typography.tsx. Each component accepts an as prop to pick the right HTML tag and a className to fine-tune sizes.
Hero moments and big statements
Coach more
Page and section titles
Build workouts once
Card titles and sub-sections
Assign to every client
Paragraphs and supporting copy
Notice the client who needs you before they drift, and keep everyone moving toward their goals.
Small labels above headings
Decorative background numbers in stat cards
Forms
Form controls come from components/ui. Pair every control with a Label, validate with zod, and show errors inline under the field.
Cards and surfaces
Cards group related content. Add the interactive prop when the whole card is clickable, and it gains a gentle lift and primary border on hover.
Program progress
Feedback and states
Reusable pieces for empty states, errors, ratings, and inline help. Toasts use sonner with the same tokens.
No programs yet
Create your first program and assign it to a client to see it here.
Animated icons
Hover a tile to see the animation. Use AnimatedButton for buttons, or the useAnimatedIcon hook for menu items and links. For static icons, use lucide-react.