Kalo.
Know what you eat, without the guilt.

Kalo

Short for kilocalorie. Two syllables, easy to say in any language, reads as a friendly name rather than a medical term.

• The mark is a progress ring at 75 percent with a yellow center dot: today's goal, nearly done, with energy in the middle.
• Geometry only: circles and a rounded stroke cap. No gradients, no shadows, no food illustration inside the mark.
• Minimum size 16 px. Clear space around the mark equals the stroke width.

Friendly and direct

Kalo speaks like a knowledgeable friend. It states facts, offers the next step, and never judges a choice. No shaming, no diet-culture words, no exclamation-mark cheerleading.

• Sentences under twelve words. One action per message.
• Numbers before adjectives. "540 kcal" beats "a light lunch."
• Words we do not use: cheat, guilty, bad food, burn off, punish, clean.

Three accents on warm neutrals

Coral drives, yellow supports, green rewards. Everything else is a warm off-white or ink so food and numbers stand out.

• Usage ratio about 60 background, 25 card, 8 coral, 4 yellow, 3 green. Accents are never used as large fills behind text blocks.
• One coral CTA per screen, ink label on the coral fill (5.8:1). Coral, green and yellow as text use the deeper text variants below, which reach 4.5:1 on light surfaces. In dark mode the text variants equal the fills.
• Dark mode: bg #121210, card #1C1C19, border #2E2E29, border strong #7A7972, muted #B5B3A9, text #F3F2ED. Accent fills stay the same and double as the text variants. Toggle at the top to preview.
• Red is not in the palette. Errors use coral with an icon and clear copy, never a new color.

Space Grotesk + Inter

Space Grotesk gives numbers and headlines a friendly geometric edge that matches the ring. Inter keeps body copy quiet and legible at small sizes.

• Tabular numerals everywhere a number can change, so rings and counters never jitter.
• Letter spacing minus 1 to 3 percent on display sizes, none on body.
• Never use Space Grotesk under 14 px; never use all caps for Inter above 12 px.

Flat illustration, plus the user's own photos

Chosen direction: flat, rounded illustration in the brand palette for empty states, onboarding and recipe categories. Real food photos appear only where the user takes them (the logging flow). Why: stock food photography competes with the user's photo and dates fast; abstract shapes alone feel cold for a food app. Flat shapes stay bright, scale to any size, and match the ring geometry.

• Fill shapes only, 2 to 4 colors per illustration, no outlines, no gradients, rounded corners of 20 percent or more.
• Illustrations sit on background, never on card, so they read as scenery rather than content.
• User photos get a 20 px radius and a thin border, no filters.

Rings fill, numbers count, saves bounce

Motion confirms an action and shows progress. It never decorates. Every animation is under 600 ms and respects reduced-motion settings.

• Rings animate from the previous value, never from zero, so a logged snack reads as a small change.
• Sheets slide up in 250 ms with a standard ease. Nothing bounces except a successful save.
• No looping animation on any screen the user waits on. Loading uses a ring that sweeps once per second.

Calorie ring and macro cards

Composed only from the tokens above. Ring, three stat cards, two entries with AI confidence badges.

Buttons, chips, badges, confirm card

The primary button is the only fully coral surface on a screen. Secondary is card on border. Pills carry filters and quick actions.