Design principles
The ideas that keep every MacroMath component consistent across app and web.
A handful of principles keep MacroMath feeling like one product, whether you're in the Flutter app or on the website.
1 · Calm by default, orange with intent
The base is a minimalist black-and-white theme. Orange (accent) is the single
brand accent, used sparingly — for the primary action, active states and highlights.
When everything is loud, nothing is; the restraint is what makes the accent read.
2 · One color per macro
Each macronutrient owns a color — protein, carbs, fat and water — and it never changes meaning. A user learns the palette once and reads any chart, ring or badge at a glance.
3 · Tokens, never magic numbers
Every spacing, radius, duration and color comes from a token (AppColors,
AppConstants, AppTypography). This keeps the visual rhythm consistent and makes
a change in one place ripple everywhere. See Design tokens.
4 · One typographic voice
Poppins across the whole product — app, website and these docs — from big display numbers to the smallest nav label. See Typography.
5 · Immediate, reactive feedback
Interactions respond instantly — rings fill, toasts slide in, selections animate — without full-screen reloads, thanks to the app's reactive state management. Motion is short and purposeful (200–500 ms).
6 · Accessible and themed
Light and dark themes are first-class, and the docs and website adapt to the viewer's preference. Color is never the only signal — labels, icons and text back it up.
7 · Shared, not duplicated
Where possible, components are imported straight from macromath_app rather than
re-implemented, so the catalogue always shows the real thing. Web pieces mirror the
same tokens so the two surfaces stay in lockstep.