Lumbiota · Claude Design Generation Package · v1

Visual system & UI-generation prompts

The Jobs/Ive specification, made literal: exact tokens, component anatomy, and ready-to-paste prompts for generating each screen's UI with Claude. Companion to the Product Specification.

1Five rules, distilled

Three-second rule (Jobs). Every screen answers "what should I do next?" before the user has to think.
Calm by default (Ive). Dark, minimal, physically weighted. Nutrition tracking is anxious by default — this is the antidote.
Graceful degradation (Sheets). 40% protocol adherence still reads as progress, never failure.
One layout, every distance (Fadell). Handheld, counter, and cast are the same component, scaled — never redesigned.
Science invisible (adoption rule 2). The user sees dinner. Diagnostics are one deliberate tap away, never the headline.

2Design tokens

Color

Token	Value	Usage
`--app-black`	#000000	True black canvas — every full screen, exactly per spec
`--surface`	#121212	Charcoal cards, the one level of elevation above black
`--ivory`	#F2EDE4	Primary text on black — warm, not clinical pure white
`--ivory-muted`	#96907F	Secondary text, captions, inactive step preview
`--gold`	#D9A653	Hero accent — Protocol Alignment ring, primary action, "now" states
`--sage`	#6E9C82	Science/diversity accent — timers, diagnostics, positive deltas
`--rust`	#B96A4A	Attention — gaps, swap prompts. Muted, never alarm-red

Two accents, not one: gold carries warmth and action; sage carries the underlying science. They never compete on the same element.

Type

Role	Face	Scale / weight
Hero numerals (rings, timers)	System serif (`ui-serif` / New York)	2.0–2.2rem, regular — a number you'd frame, not just read
Cook Mode current step	System serif	1.5–2.0rem, scales up at counter/cast distance
Interface labels, body, nav	System sans (SF Pro / -apple-system)	0.72–0.95rem, 600 weight for labels, 400 for body
Eyebrows / section labels	System sans	0.62–0.75rem, uppercase, 0.08–0.14em tracking
Metrics, timers, portions	System sans	`font-variant-numeric: tabular-nums` always

Serif for moments the user should feel (a number, a step); sans for everything operated. This is the same pairing Apple's own design language uses — apt, since the product's design leads are cast from Apple's own playbook.

Spacing & radii

Token	Value
Card radius	16–18px
Pill / chip radius	999px (full)
Base spacing unit	4px; cards use 16–24px internal padding
Hairline border	`rgba(ivory, 0.08–0.12)` — never a solid gray

3Component library

Hero Metric Ring

Single ring, conic gradient in gold, current value in serif numerals at center, label below in muted uppercase caps. No dashboard, no secondary metrics on the same screen.

States: normal (gold fill), improving (small sage delta caption beneath), degraded-gracefully (fill drops, label copy stays affirming — never red, never a warning icon).

First 1,000 Days Timeline

Horizontal scroll strip, thin connecting line, dot nodes. Past = filled sage. Now = enlarged gold with soft glow. Future = outline only. No dates dominate — stage names do.

States: past / now / upcoming. Tapping "now" opens the active-protocol card beneath.

Cook Mode Step Screen

One dominant instruction in serif type; next step previewed beneath in muted sans. Embedded timer as a small ring chip, top-aligned. Step dots at the base — not a percentage bar.

States: active step, timer running (sage ring), timer complete (gold pulse, haptic), cast-active (cast pill filled gold, mirrored view rendered on target).

Live Activity Timer

Same ring component as the hero metric, reused at small scale, mirrored to the iOS lock screen during long holds (ferment, proof, simmer).

States: counting down (sage), complete (gold, haptic tap).

Family Table Track Switcher

Two-way pill toggle on phone (Mom / Baby); becomes a true side-by-side split when cast to a wide screen. Same recipe card component, one instance per track.

States: track selected (sage border), ingredient swap triggered (rust dashed chip → sage confirmation line, animated in).

Cast Entry Point

A pill button, never a modal or setup wizard. Tapping renders the identical Cook Mode view on the chosen target at a larger scale — same component, same data, bigger canvas.

States: idle (gold outline), casting (gold filled, target label shown).

4Responsive distance directive

Distance	Context	Type multiplier	What changes
Handheld (~18in)	iPhone, in hand	1×	Full detail: swap chips, next-step preview, cast pill
Counter (~3ft)	iPhone/iPad propped, StandBy	1.4×	Step type enlarges; secondary chrome (nav, status) recedes
Cast (~8ft)	Nest Hub, Apple TV, AirPlay display	1.8–2×	Current step + timer only; next-step preview and swap controls stay on the phone

One component tree, driven by a single distance prop — never a second layout to maintain.

5Claude generation prompts

Paste directly into a fresh Claude conversation (or this package's demo/index.html as a visual reference) to generate a buildable screen.

Home screen

Design the Home screen for Lumbiota, a calm microbiome-nutrition app. Pure black (#000000) canvas, charcoal (#121212) cards. One hero metric: a gold (#D9A653) ring showing "Protocol Alignment" as a percentage, serif numerals at center, muted-caps label beneath, small sage (#6E9C82) delta line ("+4 pts vs last week"). Below it, exactly one card: tonight's recipe, with title, one-line rationale tying to a nutrient gap, and a time/effort tag. Below that, a compressed First-1,000-Days preview strip linking to the full timeline. No dashboard, no secondary metrics, no navigation chrome beyond a tab bar. Warm ivory (#F2EDE4) text, system serif for the hero number, system sans for everything else.

First 1,000 Days timeline

Design a horizontal journey timeline for Lumbiota spanning conception → toddler. Thin connecting line, dot nodes: filled sage (#6E9C82) for past stages, enlarged gold (#D9A653) with soft glow for the current stage, outline-only for future stages. Stage names, not dates, carry the meaning. Below the strip, two cards: "Active now" (current protocol focus) and "Coming up" (next protocol, muted). Pure black background, calm and uncluttered — this is a journey to inhabit, not a chart to analyze.

Cook Mode step screen

Design a Cook Mode screen for Lumbiota that must work identically at handheld, counter, and 8-foot cast distances via a single responsive layout. One current step dominates in large serif type. The next step previews beneath in smaller muted sans type. A small embedded timer ring (sage #6E9C82 conic fill) sits top-right, glanceable. Step-dots at the bottom show position in the recipe — not a percentage bar. A "Cast to [device]" pill sits top-left, gold-outlined when idle, gold-filled when active. Pure black canvas throughout; nothing competes with the current instruction.

Family Table

Design the Family Table screen for Lumbiota: a household running two simultaneous nutrition protocols (e.g. a parent's high-fiber track and an infant's purée-introduction track) cooking from one screen. On phone width, a two-way pill toggle switches between tracks; on a cast/wide screen, both tracks render side by side in a true split view. Each track shows one recipe card with a protocol-alignment sub-line. Include an ingredient-swap chip (e.g. "Out of chicory root?") in rust (#B96A4A) dashed outline that, when tapped, reveals a sage-colored recalculated equivalence line. Pure black canvas, charcoal cards, warm ivory text.

6Do / Don't

Do

One number per screen that matters most
Step dots over percentage bars
Muted, affirming copy for partial adherence
Reuse one component across all three distances

Don't

Stack multiple metrics on Home
Use alarm-red for gaps or missed days
Build a separate cast-specific layout
Require an account or sequencing result before first recipe

Lumbiota Claude Design Generation Package, v1 · Companion to the Product Specification · See demo/index.html for a rendered reference of these tokens in use.