Components

Navigation

Three reading tabs, one floating write action, and an edge drawer for everything administrative. There is no back-stack anywhere in the product — you are always one dismiss away from the dashboard.

Bottom tab bar + FAB, live

Today · Insights · Treatments — active = #C2581D on warm pill; the + floats above center

Property	Spec
Tabs	3 equal: Today (calendar) · Insights (activity) · Treatments (folder-plus) · type `'log' \| 'patterns' \| 'treatment'`
Active	icon + 10px label in `#C2581D` on a `--bg2` pill
FAB	floats above center · opens Log Activity drawer (not a tab switch) · silently disabled in demo
CSS	`.tab-bar · .tab-btn · .tab-plus-btn`

Divergence ruling — 4-tab frames in Figma

Some Figma frames show a legacy 4-tab bar (Insights / Treatments / History / Profile). The shipped 3-tab + drawer model is canonical: History and Profile live in the Profile drawer. See the divergence register.

Top bar

SJPeri

Synced

Avatar (→ Profile drawer) · title · sync status + privacy eye

Divergence — gradient header

Figma renders the top bar as an orange gradient with white content; the shipped app uses a white bar with the brown ramp plus sync status. The gradient is documented as visual intent; the white bar is what ships.

Profile drawer

Property	Spec
Trigger	avatar tap — left slide-in panel (z-400/401)
Contents	identity · Edit Profile · Log History (→ PastEntryModal) · wearable sync (→ SyncProgressModal) · privacy toggle · legal pages · sign out / reset
Demo state	shows demo user's name; sync hidden
Sub-views	stack inside the drawer with internal back — the only nested navigation in the product, kept off the main surface deliberately

The model in one table

Mechanism	Type	Carries
Tab bar	lateral, flat	the three reading modes: now / over time / interventions
Floating +	modal overlay	the single writing mode
WeekStrip / Calendar	temporal	navDate — re-aims the dashboard
Card face → drawer	vertical disclosure	detail + explainability
Assumption action	cross-layer shortcut	drawer → log screen (320ms)
Avatar → Profile drawer	edge drawer	account, history, settings

·Keep exactly three tabs — new surfaces become cards or drawer items
·Keep labels visible under icons at all times
·Route every write through the FAB funnel

Don't

·Add a History or Settings tab — administrative gravity pulls to the edge
·Turn the FAB into a tab — it is an overlay action
·Introduce forward navigation with back-stacks

Accessibility

—The tab bar needs role="tablist"; active tabs expose aria-selected.
—Tabs are never icon-only; the 10px label always renders.
—The FAB carries aria-label="Log today"; the profile avatar announces “Open profile”.