Luna · UX Review

The Luna iOS design system.

Foundations and components for the Luna iOS app, in one place — the same tokens and parts the wireframes are built from. Built for engineering to reference and reuse.
← UX Review

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

The quick brown fox Large Title 34 · 400 · 1.12
The quick brown fox Title 1 28 · 400 · 1.18
The quick brown fox Title 2 22 · 400 · 1.25
The quick brown fox Title 3 20 · 400 · 1.3
The quick brown fox Headline 17 · 600 · 1.4
The quick brown fox Body 17 · 400 · 1.5
The quick brown fox Callout 16 · 400 · 1.45
The quick brown fox Subhead 15 · 400 · 1.45
The quick brown fox Footnote 13 · 400 · 1.4
The quick brown fox Caption 1 12 · 400 · 1.35
The quick brown fox Caption 2 11 · 400 · 1.3

size · weight · line-height — use the class names directly, e.g. .title-1

Foundations

Spacing, radii & elevation

Spacing · 8pt base

xxs · 4px
xs · 8px
sm · 16px
md · 24px
lg · 32px
xl · 48px
xxl · 56px

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

Luna
Active · watching overnight
1.2 U active insulin

Glucose Display

101
mg/dl

Insight / Action Card

A calmer night
You spent 92% of last night in range. Luna made 3 quiet adjustments while you slept.

List Rows

Target range 70–140
Notifications On
Connected sensor Auto
Account —

Calendar Strip

Su 18
Mo 19
Tu 20
We 21
Th 22
Fr 23
Sa 24

Tab Bar

Toast

Session saved

Buttons

Skip and set up later

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 ↗
Hypo Shield

A new nightly basal dose

14 U Increase
Current dose 12 U

Over the past several nights, Luna Eclipse has been monitoring your glucose. We've noticed it's drifted up — you may need a bit more of your basal insulin.

To act on this, do both
Slide to confirm both
Acknowledge both actions above to continue