Daily progress
Day 1 of 360%of daily target
Carbs logged
420 g
280 g to go
Daily target700 g
Food & drinks6 entries
A guide to carbs.
Working documentThe carbs.
design system.
How carbs. looks and works.
The type, colours, icons and components used across carbs.
01 / Type
Typography
Manrope gives headings and key numbers their weight. DM Sans keeps labels and longer text easy to read.
Manrope
Headings & numbersAa Bb Cc.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &!?%
Weights 400–800 · Weight 800 is used for the wordmark, display headings and important numbers.
DM Sans
Body & interfaceAa Bb Cc.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &!?%
Weights 400–700 · Body text uses 400, labels use 600 and primary actions use 700.
Display
Ready for race day.
Manrope 800
58px / 1.13 · −2.7px*Heading 1
Your daily progress
Manrope 800
36px / 1.2 · −1.4pxHeading 2
A plan that works for you
Manrope 700
22px · −0.6pxHeading 3
Little and often
Manrope 700 · 17pxBody
Build your plan around foods you enjoy.
DM Sans 400
16px / 1.6SupportingYour food diary stays on this device.
DM Sans 400 · 14pxEyebrowYour loading plan
DM Sans 700 · 12px
Uppercase · +1.6px*This example is scaled to fit the page. The app uses 58px for its setup heading. If Google Fonts cannot load, the text uses a sans-serif fallback.
02 / The palette
The colour palette
Food names identify the palette. Semantic aliases assign colours to text, surfaces and feedback, with different shades for light and dark themes.
Swatches copy their hex codes. Food variables hold fixed colours; semantic aliases select the shade for each theme. Higher numbers mean darker shades; an a suffix indicates opacity.
All 48 semantic aliases · food shades in light / dark
| Semantic alias | Light | Dark |
|---|
03 / Icons
Iconography
Outline icons are used for navigation, actions and help. Stroke weight and proportions are kept consistent.
24 × 24 viewBox1.7px strokeRound caps & joins21px default rendered sizeColour: currentColor
The app icon
The bagel on its maroon background.
The app icon uses this artwork in a square with rounded corners. Its original proportions and colours are preserved.
Icon labels
Labels clarify unfamiliar icons. Decorative SVGs are hidden from screen readers; icon-only buttons have accessible names.
04 / Controls
Components
Interactive examples show button, field and tab states without changing your carbs. data.
Buttons & actions
Primary / secondary / disabled / destructive / text
52px minimum height · 12px radius · 700 weight
Form fields
Used to personalise your plan.
Enter a weight to continue.
53px minimum height · 12px radius · Visible labels and focus ring.
Tabs & choices
Search finds foods and their available portions.
Selected choices use the warm surface and an accent border.
Status & feedback
Race dayTarget reachedCheck your portionbeta
Feedback in words and colour
Words and colour explain status. Errors sit beside fields; short messages confirm actions and are announced by screen readers.
Keyboard focus uses a 3px blue outline with 4px offset.
05 / Modules
Modules in context
These modules combine the smaller components. Entries, dates and totals are sample data.
Meal suggestions and portions
Portions
Familiar measures sit alongside editable weights: ½ bagel, 2 slices of bread (80g), or a medium glass of juice (250ml). Weights drive the calculation.
Diary summaries
Logged carbs, targets and progress appear in the diary. Ingredient details sit in each recipe’s info modal.
Suggestions
Meal suggestions remain available after logging, even when the daily target has been reached.
Breakfast
96 gPlain bagel
56 g1 bagel · with jam
Orange juice
25 g1 glass · 250 ml
Banana
15 g1 small
Your next race
Abingdon Marathon
03
days to go
Little and often
Spread your food and drinks across the day. Start with meals you know and add snacks between them.
No food logged yet
Start your food diary here.
Add a food or drink to track your progress.
06 / Layout
Space, shape & behaviour
Spacing groups related items and separates sections. Rounded corners distinguish controls, cards and badges.
Spacing reference
These spacing values appear throughout the app. Related items sit closer together, with more room between groups.
8px
12px
16px
20px
26px
30px
Corner radii
Aa
8px
Tab itemsAa
12px
ControlsAa
21px
CardsAa
30px
PillsResponsive layouts
Desktop uses a sidebar; mobile uses floating navigation. Cards stack on smaller screens, while controls retain their labels and touch areas.
Focus and readability
Supporting text, input borders and text on accent backgrounds have dedicated contrast tokens. Controls have labels and visible focus. Skip links, predictable scrolling and focus restoration support keyboard navigation. Tooltips stay open while hovered or focused; blurred surfaces have solid fallbacks.
07 / Feedback
Motion and haptics
Motion shows what changed. Haptic feedback marks taps and completed actions on supported devices.
Daily totals
Digits roll after a saved addition, edit or deletion; the unit stays still. Screen readers announce the final total.
1,200ms animation · 250ms delay · Ease out
Progress and celebrations
The progress ring updates with the total. Crossing the daily target triggers confetti. Bagels and selected drinks have brief falling animations after logging.
Celebrations follow saved entries, rather than page loads.
Haptic feedback
Completed actions
Short pulses confirm saved entries and barcode matches. A double pulse marks the first daily target crossing. Vibration depends on browser and device support.
Reduced motion
Totals update immediately on page changes and with reduced motion. Animations, celebrations and haptics are disabled with reduced motion; the final values and status messages remain available.
Keyboard and screen-reader controls remain available throughout.