Cal Ai Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

21tokens

13type steps

5radius steps

8pxspacing base

Cal Ai, in one page

Cal AI's iOS app is a dark, editorial calorie-tracker that treats your meals the way a photography portfolio treats its subjects — centered, well-lit, and uncluttered. The canvas is near-black (#0A0A0A), the text is crisp white, and the only other color in the interface comes from your own food photos and three softly-saturated macro accents. This is the anti-clinical calorie app: no red-orange warning states, no blocky blue dashboards, no kitschy illustrations of fruit. The app reads more like a minimal iOS health journal or an AI research product than a traditional fitness tracker.

The hero is the AI scan flow. You tap a bottom-center shutter, the camera fills the viewport with a dimmed viewfinder, a reticle animates across the food, and within a second the detected meal appears as an editable card — dish name, AI-generated ingredient breakdown, macros, calorie total in oversized numerals. The whole flow takes about 4 seconds and feels closer to Apple's Vision Pro capture UI than to a supermarket barcode scanner. The trust is built by making the AI's output feel surgical, not magical: every field is editable, every confidence score is visible.

Typography is a clean modern sans — close to Inter or SF Pro Display — deployed across two optical sizes. Large numerals (calorie totals, streak days, weight readings) are set at 48-72pt weight 700 with tight tracking. Body UI sits at 15-17pt weight 400-600. There are no rounded / friendly display faces here; the numbers look like data. This reinforces the product positioning: Cal AI is a tool, not a coach. The emotional tone comes from the photography, the animations, and the generous black space — not from cartoon mascots or encouraging prose.

Key Characteristics:

Near-black canvas (#0A0A0A) — darker than most iOS apps, closer to OLED true-black
High-contrast monochrome chrome with three macro accent colors as the only color story
Oversized numerals (48-72pt, weight 700) for calorie totals and daily summaries
AI-first capture flow: camera → reticle animation → editable result card, all in ~4 seconds
Photo-centric meal cards — user's food photograph is the entire top 60% of each card
Sharp, data-forward type (Inter / SF Pro) — no rounded display faces, no friendly curves
Bottom tab bar with a large centered capture button (the "one-tap-to-log" promise)
Subtle motion: 250-400ms springs, no bouncing mascot celebrations, no confetti

Do's and don'ts

Do

Use near-black #0A0A0A as the canvas — darker than most iOS system dark mode
Use tabular numerals on every number — calories, weights, timestamps
Use white on black for primary CTAs (not a saturated color) — it's the bold, confident choice
Keep the macro accent trio desaturated — soft blue / soft amber / soft pink, NOT primary red/blue/yellow
Let food photography be the content — bleed it edge-to-edge within cards
Use surface contrast (color steps) for elevation, not drop shadows
Apply subtle white glow to the Capture FAB — it's the one active-light element
Use SF Pro / Inter at weights 400-700 only
Pair meaningful actions with haptics (capture: medium, confirm: success, delete: warning)
Animate AI processing with the tri-color gradient line — it's the signature "AI is thinking" moment

Don't

Don't use pure black #000000 for the canvas — #0A0A0A reads less harsh on OLED
Don't use alarm red for over-budget states — use soft amber (#FFB54C)
Don't add cartoon mascots, confetti celebrations, or cheerleading copy — this app is a tool
Don't render big numbers in a rounded display face — sharp geometric sans feels like data
Don't use drop shadows on card edges — dark canvas makes them invisible or muddy
Don't saturate the macro colors to system red/blue/yellow — the pastel palette is the calm choice
Don't use thin weights (100-300) — they disappear on dark canvas
Don't introduce new accent colors — three macros + white CTA + green success + amber warn
Don't over-animate — springs are subtle (damping 0.7+), no 1.5x overshoots

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Cal Ai design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Canvas Black: #0a0a0a
- Elevated Surface: #151515
- Surface 2: #1e1e1e
- Surface 3: #2a2a2a
- Divider: #252525
- Canvas Light (rare): #ffffff
- Text Primary: #ffffff
- Text Secondary: #a1a1a1
- Text Tertiary: #6e6e6e
- Protein Blue: #4da8ff

Type:
- families: Inter, Numerals Display, Tabular Numerals, Grilled Chicken Bowl
- scale: 10, 11, 12, 13, 14, 15, 16, 17, 22
- weights: 400, 500, 600, 700

Shape:
- radius: 14, 16, 20, 24, 28
- elevation: Shadow: `rgba(255,255,255,0.15) 0 0 40px` (subtle white glow on dark canvas) | Shadow: `rgba(0,0,0,0.4) 0 -8px 24px` | 7. The Capture FAB is the one light source — it gets a white glow shadow

Spacing: 8, 14, 16, 20, 24

Rules:
- Use near-black `#0A0A0A` as the canvas — darker than most iOS system dark mode
- Use tabular numerals on every number — calories, weights, timestamps
- Use white on black for primary CTAs (not a saturated color) — it's the bold, confident choice
- Keep the macro accent trio desaturated — soft blue / soft amber / soft pink, NOT primary red/blue/yellow
- Let food photography be the content — bleed it edge-to-edge within cards
- Use surface contrast (color steps) for elevation, not drop shadows

Avoid:
- Don't use pure black `#000000` for the canvas — `#0A0A0A` reads less harsh on OLED
- Don't use alarm red for over-budget states — use soft amber (`#FFB54C`)
- Don't add cartoon mascots, confetti celebrations, or cheerleading copy — this app is a tool
- Don't render big numbers in a rounded display face — sharp geometric sans feels like data
- Don't use drop shadows on card edges — dark canvas makes them invisible or muddy
- Don't saturate the macro colors to system red/blue/yellow — the pastel palette is the calm choice

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Canvas & Surfaces

Canvas Black (#0A0A0A): Primary dark canvas — nearly pure black, optimized for OLED.
Elevated Surface (#151515): Meal cards, stat cards, grouped list rows.
Surface 2 (#1E1E1E): Sheet backgrounds, modals, input fills.
Surface 3 (#2A2A2A): Pressed / hover states, elevated controls.
Divider (#252525): Hairline dividers between rows.
Canvas Light (rare) (#FFFFFF): Light mode exists but is a secondary experience.

Text

Text Primary (#FFFFFF): Headlines, calorie numerals, primary body.
Text Secondary (#A1A1A1): Meta text — "1 serving", "12:30 PM", macro labels.
Text Tertiary (#6E6E6E): Placeholder, disabled, very low-emphasis labels.

Macro Accents (the only color story)

Protein Blue (#4DA8FF): Protein ring, chips, "P 42g" labels.
Carbs Amber (#FFB54C): Carbs ring, chips, "C 48g" labels.
Fat Pink (#FF6E87): Fat ring, chips, "F 14g" labels.
Notes: These are intentionally desaturated pastels — not primary reds/blues/yellows. They should feel calm in the dark UI.

Action & Semantic

Action White (#FFFFFF): Primary CTA background ("Scan a meal", "Log now").
Action Black Text (#000000): Primary CTA text — intentionally black on the white button.
Success Green (#42E17D): Logged-confirmed checkmark, streak-met indicator.
Over-Budget Amber (#FFB54C): "Over goal by 120 kcal" — soft amber, NOT red (no alarming feedback).
Destructive (#FF5A5A): Delete action, "clear all" confirmations (only in destructive flows).
Info Indigo (#8B8DF5): Info banners, AI-confidence indicators.

AI Surface

AI Gradient Wash (linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%)): Subtle gradient used on AI-detected result cards to distinguish them from user-entered data.
AI Accent Line (linear-gradient(90deg, #4DA8FF, #8B8DF5, #FF6E87)): 2pt animated gradient line that appears during AI processing.

Light Mode (secondary)

Light Canvas (#FFFFFF)
Light Surface (#F5F5F5)
Light Text (#0A0A0A)
Light mode preserves the same macro accents at identical hex values.

Type scaleRead the full spec

Font Family

Primary UI/Display: Inter or system fallback -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text'
Numerals Display: Same family as UI but used at 32-72pt sizes — no separate display face
Tabular Numerals: Inter's tnum OpenType feature or SF Pro's tabular variant enabled for ALL calorie/macro numbers (prevents layout jitter as numbers update)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Daily Total (Hero)	Inter	72pt	700	1.0	-1.5pt	Today's calorie total on Home
Meal Card Calories	Inter	40pt	700	1.0	-0.8pt	Big calorie number on each meal card
Streak Number	Inter	48pt	700	1.0	-1pt	"14-day streak" hero
Screen Title (Large)	Inter	28pt	700	1.1	-0.4pt	Today, Insights, History large-title
Section Title	Inter	22pt	700	1.2	-0.3pt	"Recently logged", "This week"
Nav Title (Compact)	Inter	17pt	600	1.1	-0.1pt	Default nav bar
Meal Name	Inter	17pt	600	1.3	-0.15pt	"Grilled Chicken Bowl"
Body	Inter	15pt	400	1.4	0pt	Descriptions, instructional copy
Macro Chip	Inter	12pt	600	1.2	0pt	"P 42g" inline chip
Meta	Inter	13pt	500	1.3	0pt	Timestamps, serving info
Label (UPPER)	Inter	11pt	700	1.2	0.8pt	"PROTEIN", "CARBS", "FAT" under rings
Button (Primary)	Inter	16pt	600	1.0	-0.1pt	"Scan a meal", "Save"
Button (Secondary)	Inter	14pt	600	1.0	0pt	"Edit", "Delete", text links
Tab Label	Inter	10pt	600	1.0	0.2pt	Tab bar labels
Timestamp Tabular	Inter	13pt	500	1.0	0pt	Feature-settings `tnum` enabled

Principles

Tabular numerals everywhere — calorie totals, macro counts, weights, timestamps. Prevents "5 → 50" shifting layouts.
No light weights — minimum weight is 400 (regular). 300 and lower feel anemic against the dark canvas.
Negative tracking on large numerals — calorie totals get -0.8 to -1.5pt to feel dense and confident.
Dynamic Type support — all body text scales across accessibility sizes. Display numerals (48-72pt) cap at 140% to preserve hero layouts.
Tracking for labels — the 11pt uppercase macro labels get +0.8pt tracking to feel like machined metadata, not shouting.

Components and layoutRead the full spec

Buttons

Primary CTA (White Pill — "Scan a meal")

Background: #FFFFFF
Text: #000000 (intentional — black on white)
Padding: 16pt vertical, 28pt horizontal
Corner radius: 28pt (pill)
Font: Inter, 16pt, weight 600
Pressed: background dims to #E8E8E8, scale 0.97
Disabled: #2A2A2A background, #6E6E6E text

Secondary CTA (Transparent with Border)

Background: transparent
Text: #FFFFFF
Border: 1pt solid #2A2A2A
Padding: 14pt vertical, 24pt horizontal
Corner radius: 24pt
Font: Inter, 15pt, weight 600

Capture FAB (Bottom Center)

Size: 68pt circular diameter
Background: #FFFFFF
Inner ring: 2pt #0A0A0A stroke inset 4pt from outer edge
Center icon: camera glyph or none (pure white circle)
Shadow: rgba(255,255,255,0.15) 0 0 40px (subtle white glow on dark canvas)
Pressed: scale 0.92 with medium haptic
Position: centered in the tab bar slot, raised 10pt above the bar

Text Button (Edit / Delete / See More)

Background: transparent
Text: #FFFFFF (primary) or #A1A1A1 (secondary) or #FF5A5A (destructive)
Font: Inter, 14pt, weight 600
No underline, no background, 44pt hit area

Chip (Filter / Time Range)

Background: #151515 (inactive) / #FFFFFF (active)
Text: #FFFFFF (inactive) / #000000 (active)
Padding: 8pt vertical, 14pt horizontal
Corner radius: 16pt
Font: Inter, 13pt, weight 600

Cards & Containers

Meal Card (Primary — Photo + Stats)

Background: #151515
Corner radius: 20pt
Padding: 0 (photo bleeds to edges; text has 16pt internal padding)
Structure:
Top: 4:3 food photo with the top two corners rounded (radius 20pt on top corners only)
Overlay: subtle gradient from transparent top to rgba(0,0,0,0.4) bottom-1/3 for legibility
Text block (16pt padding): meal name 17pt w600 white, time + serving 13pt w500 #A1A1A1, bottom row: 3 macro chips + large right-aligned calorie number (40pt w700)
No shadow on dark canvas — elevation via surface color contrast (#151515 card on #0A0A0A canvas)
Swipe-to-delete reveals #FF5A5A delete pill at trailing edge

Today Hero Card (Daily Total)

Background: #151515
Corner radius: 24pt
Padding: 24pt
Structure:
Label "TODAY" 11pt uppercase #A1A1A1 with 0.8pt tracking
Huge number — remaining calories — 72pt w700 tabular numerals
Subtitle "kcal remaining of 2,200" 13pt w500 #A1A1A1
Progress bar at 6pt height, rounded, with a white fill proportional to intake
Row of three macro rings below (80pt each) with consumption / goal displayed inside

Macro Ring

Outer size: 80pt (hero) / 64pt (compact)
Track stroke: 6pt, color #2A2A2A
Fill stroke: 6pt, color per macro (#4DA8FF / #FFB54C / #FF6E87)
Cap: rounded
Inner content:
Value (Inter 18pt w700 tabular, white)
Unit "g" in 12pt w500 #A1A1A1
Label below ring in 10pt w700 UPPERCASE #A1A1A1, 0.8pt tracking
Animation: fill animates from 0° to current % over 600ms ease-out

AI Detection Result Card

Background: linear gradient 135deg from #1E1E1E to #2A2A2A
Corner radius: 20pt
Top: AI confidence badge (SF Symbol sparkles + "AI detected" in 11pt uppercase #8B8DF5)
Animated AI accent line (2pt, gradient #4DA8FF → #8B8DF5 → #FF6E87) at top edge during processing
Detected items listed with per-item confidence percentages
Editable quantity steppers inline
CTA row at bottom: "Save to today" (white pill) + "Reject" (text link)

Streak Card

Background: #151515 with a subtle inner gradient (top #181818 → bottom #151515)
Corner radius: 20pt
Padding: 20pt
Large streak number — Inter 48pt w700 white tabular
Flame icon (SF Symbol flame.fill) rendered in amber #FFB54C, 32pt, to the left of the number
Subtitle 13pt w500 #A1A1A1

Navigation

Bottom Tab Bar (with centered Capture FAB)

Height: 76pt + safe area
Background: rgba(10,10,10,0.92) with .regularMaterial blur
Border top: 0.5pt #252525
Five slots — Home, History, [Capture FAB], Insights, Profile
Inactive icon: #6E6E6E
Active icon: #FFFFFF
Label: Inter 10pt weight 600, always visible
Icon size: 22pt SF Symbols

Top Nav (Large Title)

Height: 52pt + safe area (large title collapsed is 44pt)
Background: #0A0A0A opaque (no blur on top nav)
Large title "Today" 28pt w700 white, collapses to 17pt w600 inline on scroll
Trailing action: profile avatar (28pt circular) with 1pt #2A2A2A border

Bottom Sheet (Meal Detail / Settings)

Corner radius: 20pt top only
Background: #151515
Grabber: 36pt wide × 4pt tall pill, color #3A3A3A, 10pt from top
Shadow: rgba(0,0,0,0.4) 0 -8px 24px
Snap points: compact / medium / large

Camera Capture Flow

Viewfinder

Full-bleed camera preview
4-corner reticle (white, 20pt per corner with 2pt stroke) centered, animates in at 1.0 → 1.05 → 1.0 on capture prep
Top bar: close (X) top-left 24pt, flash toggle top-right, subtle gradient scrim on top 80pt for legibility
Bottom: capture button centered (68pt white circle), library shortcut left, barcode toggle right

AI Processing Overlay

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Hero calorie numeral reduces to 56pt; rings to 64pt
iPhone 13/14/15	390pt	Standard layout — 72pt hero, 80pt rings
iPhone 15/16 Pro	393pt	Dynamic Island accommodated in nav
iPhone 15/16 Pro Max	430pt	Hero numeral bumps to 80pt, rings to 88pt
iPad	768pt+	Two-column meal feed, fixed hero sidebar, capture FAB moves to floating top-right

Dynamic Type

Body / title: full accessibility scale
Hero calorie (72pt): caps at 96pt max
Ring numerals: cap at 140% (prevents ring overflow)
Tab labels: cap at 14pt

Orientation

All primary screens: portrait-locked
Camera capture: portrait-locked
Insights charts: rotate to landscape for wider trend visualization

Touch Targets

Primary CTAs: 52pt tall
Capture FAB: 68pt — impossible to miss
Chip buttons: 32pt min height
Ring taps: full 80pt ring is tappable

Safe Area Handling

Top: large-title nav + status bar honor safe area
Bottom: capture FAB raised 10pt above tab bar; tab bar respects home indicator
Sides: 16pt content insets

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-cal-ai {--page-bg: #0a0a0a;
  --page-bg-gradient: none;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #4da8ff;
  --link-hover-color: #1a8fff;
  --border-color: #363636;
  --card-bg: #0a0a0a;
  --card-shadow: 0 1px 2px rgba(255,255,255,0.06);
  --card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
  --header-bg: #1e1e1e;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #0a0a0a;
  --footer-text-color: #a9a9a9;
  --button-bg: #4da8ff;
  --button-text-color: #000000;
  --button-hover-bg: #1a8fff;
  --button-border: none;
  --button-border-radius: 20px;
  --button-secondary-bg: #191919;
  --button-secondary-text-color: #ffffff;
  --button-secondary-hover-bg: #272727;
  --button-secondary-border: 1px solid #363636;
  --prompt-bg: #161616;
  --prompt-text-color: #ffffff;
  --base-font: var(--font-inter);
  --heading-font: var(--font-inter);
  --card-border-radius: 20px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

kakaotalk 78.4%
plenty of fish 74.5%
peloton 74.0%
tinder 73.7%
gyokusendo 73.5%

Where this came from

Source document: ios/design-md/misc/cal-ai/DESIGN.md · 21.7 KB
Repository: Meliwat/awesome-ios-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.