Design system v0.2
The pieces this product is built from.
One typeface for the interface, a mono only for methodology values, white as the dominant surface, dark teal for calculation and action, coral for a single accent. This page is developer documentation — it is deliberately English-only and exempt from the ES/EN dictionary, per the handoff.
Colour roles
Page
--color-page
Tint
--color-tint
Quiet
--color-quiet
Ink
--color-ink
Body
--color-body
Muted
--color-muted
Placeholder
--color-placeholder
Border
--color-border
Border strong
--color-border-strong
Teal
--color-teal
Teal hover
--color-teal-hover
Coral
--color-coral
Coral hover
--color-coral-hover
Coral tint
--color-coral-tint
Data — protein
--color-data-protein
Data — carbs
--color-data-carbs
Data — fat
--color-data-fat
No uppercase tracked labels anywhere. Small labels are sentence case at 600 weight. Ratio discipline: roughly 85% neutral surfaces, teal for action and calculation, coral for a single accent per view.
Typography
Big data (800, tabular)
1,830
H1 app screens (800)
Start with the basics.
H2 section (800)
Macros
H3 (700)
One place for the numbers
Body (400)
Energy needs, calorie targets, macros and body metrics in seconds.
Body small (400)
Waist and body fat are optional.
Label (600)
Height
Caption / hint (400)
Between 14 and 100
Section label (700, coral)
Methodology
Methodology value (mono 400)
10W + 6.25H − 5A + 5
Buttons
56px on primary actions, 48px on quiet actions, 44px on row actions. Radius 10px, never a full capsule.
Inputs and controls
Typical range 30–300
Feedback and states
One field needs attention
Check the highlighted fields and try again.
Target held at a minimum intake
The full deficit would take intake below the usual floor.
Calculation saved to your history
Loading skeleton
Nothing saved yet.
Run a calculation and choose Save.
Spacing, radius, responsive
- Spacing scale: 4 · 8 · 12 · 16 · 22 · 28 · 40 · 56 · 88
- Radius: 10px controls · 6px badges · 12–14px cards · 16–20px panels · 50% only for radio dots
- Shadow used in exactly two places: the hero result card, and floating controls/toasts
- Nav collapses to the hamburger below 1000px; inline nav above it
- Verified with no horizontal overflow at 390 / 430 / 768 / 1024 / 1440px