Luna · UX Review
The Luna iOS design system.
Tokens: src/styles/ios-tokens.css (scoped to .ux-ios) · components: src/components/ux/ios/
Foundations
Color
Primary
Midnight
#041E42
--color-midnight
Moonlight
#68D2DF
--color-moonlight
White
#FFFFFF
--color-white
Moonlight tints
Moonlight Deep
#0A9AAE
--color-moonlight-deep
Moonlight Ice
#C9F8FE
--color-moonlight-ice
Moonlight Tint
#E8FCFF
--color-moonlight-tint
Neutrals
Soft Paper
#FBFDFE
--color-soft-paper
Cloud Lilac
#F2F3FA
--color-cloud-lilac
Periwinkle Mist
#E7EBF8
--color-periwinkle-mist
Pebble Blue
#BAC6D9
--color-pebble-blue
Lunar Lavender
#D6D3E9
--color-lunar-lavender
Text & ink
Ink
#041E42
--color-ink
Graphite
#535D65
--color-text-2
Slate
#7A8892
--color-text-3
On-Dark Sub
#ACC1DF
--color-on-dark-sub
Status (pair with an icon — never colour alone)
Success
#2E7D32
--color-success
Info
#68D2DF
--color-info
Warning
#F9CD86
--color-warning
Critical (Plum)
#8E3655
--color-critical
Foundations
Type — D-DIN, iOS HIG scale
size · weight · line-height — use the class names directly, e.g. .title-1
Foundations
Spacing, radii & elevation
Spacing · 8pt base
Radii
chip
8
input
12
card
20
modal
28
pill
999
Elevation
raised
card
modal
toast
Components
The component kit
Live components — each name matches its .astro component and its Figma layer. One source of truth from review to build.
Status Card
Glucose Display
Insight / Action Card
List Rows
Calendar Strip
Tab Bar
Toast
Buttons
Patterns
Wireframe conventions
How screens are assembled, so every feature reads as one app. Apply these before a screen-by-screen review — they're the conventions the Apollo Training wireframes were normalized to, and the baseline for every new feature.
Titles
.title-1
Sentence case — capitalize only the first word and proper nouns (Luna, Capsule, Single-Sleep Reservoir, Bedside Charging Dock, TDBD). Screen headlines use .title-1; keep one heading size per screen type. Gallery titles match the on-screen casing.
Title & body placement
eyebrow → title → body
Stack with a consistent vertical rhythm. On step screens the title sits directly below the media tile, left-aligned (not vertically centered); body follows ~16–20px below. Keep the same offset across steps so titles line up screen-to-screen.
Primary action
.btn.primary
One full-width pill anchored at the bottom of the screen, with ~24–28px bottom padding so it clears the home indicator.
Warnings
.warn-banner
A filled, rounded banner with an amber icon + accent and light text. Never a dashed chip.
Tips / info
.tip-banner
Same banner shape as a warning, moonlight-accented, for non-warning guidance.
Hardware-gated actions
.gate-btn / .gate-row
When an action waits on a detected device, the primary grays out while a “Detecting… → Detected” row resolves; it enables only once the check passes.
Brand mark & close
.brandbar / .close-x
Luna wordmark top-left on every screen (50px), never recolored or stretched. A screen-level close (✕) sits top-right at the logo’s level and returns to the dashboard.
Spacing
8pt base
Generous, consistent vertical rhythm between eyebrow, title, subhead and body — don’t crowd the stack.
Motion
purposeful · calm
Entrance reveals to draw attention (e.g. staggered list items); gentle ambient motion for “in progress” states. Nothing mechanical or jittery.
Safety-critical · featured
Two-Step Dose-Confirmation
The canonical confirmation for any dose recommendation: acknowledge both required actions (update the Luna setting and take the dose), then slide to confirm. Try it — the slider unlocks only once both are checked.
Read the component spec ↗A new long-acting dose
Hypo Shield has observed your glucose drifting up overnight, which may mean you need a bit more of your long-acting insulin.