Design tokens

Every MacroMath token in one place — colors, spacing, radii, motion, type and fonts.

All of MacroMath's visual decisions live in tokens, not loose values. In the app they are Dart constants (AppColors, AppConstants, AppTypography); on the web and in these docs the same values are mirrored as CSS variables. Use the token — never the raw number.

Brand colors

Token	Hex
`accent`	`#FF5833`	accent
`accentLight`	`#FF8E53`
`accentDark`	`#FF4500`

Macro colors

Macro	Token	Hex
Calories	`calories`	`#FF5833`	Calories
Protein	`protein`	`#EF5350`	Protein
Carbs	`carbs`	`#FFD600`	Carbs
Fat	`fat`	`#66BB6A`	Fat
Water	`water`	`#3B82F6`	Water

Spacing

Token	Value
`paddingSmall`	`8`
`paddingMedium`	`16`
`paddingLarge`	`24`
`paddingXLarge`	`32`

Corner radii

Token	Value
`radiusSmall`	`8`
`radiusMedium`	`12`
`radiusLarge`	`16`
`radiusXLarge`	`24`
`radiusCircular`	`100`

Motion

Token	Value
`animationFast`	`200 ms`
`animationMedium`	`350 ms`
`animationSlow`	`500 ms`

Type scale

Style	Size	Weight
`displayLarge`	48	700
`displayMedium`	36	600
`displaySmall`	28	600
`headlineLarge`	24	600
`headlineMedium`	20	600
`headlineSmall`	18	500
`bodyLarge`	16	400
`bodyMedium`	14	400
`labelSmall`	10–12	500

Fonts

Role	Family
Brand / wordmark	Poppins (400–900)
App body & UI	Poppins
Docs body	Inter
Docs display headings	Fraunces (serif)

Each family of tokens has its own page under Foundations with usage examples: Colors, Typography and Spacing & radii.