Components

Buttons

Five button species, each with one job: the gradient CTA commits, the text button escapes, the FAB is the only door to data entry, the toggle switches context, and the multi-button selects from small enumerations.

Primary CTA — “Save Entry”

Purpose. The single committing action of a screen. One gradient CTA per screen, full stop — that exclusivity is what makes it legible.

Gradient commit · tint secondary/disabled · text escape

Anatomy	Spec
Container	full-width · 52–56px · `--grad-btn` · radius 14–16
Label	15px / 600 · white
States	default · pressed (slight darken) · disabled/secondary (tint: --accent-tint bg + --accent-dark text) · loading is rare — sheets close optimistically
Interaction	tap → save → toast (“Saved & syncing to Drive ✓” / “Saved locally ✓”) → screen closes

Floating + (FAB)

Purpose.The only data-entry entry point in the product. Opens the Log Activity drawer; morphs into the drawer's close button.

56–64px circle · #F39021→#EA9A49 · floats above tab-bar center · rotates 45° as ×

Demo-mode behaviour

In demo mode the FAB is silently disabled — visible but inert. A known tradeoff, mitigated by the persistent DEMO banner. Never hide it: the demo should teach the real layout.

Toggle switch

Active flow: on

ON = success green · OFF = warm cream — supplemented by knob position

Used for	Effect
Active flow (Log Period)	ON marks bleedIntensity and sets cd = 1 — anchors cycle counting
Include in Trends Analysis (Treatment)	Protocol becomes a selectable trends anchor
Is this a singular event? (Treatment)	Hides the End Date field

Multi-button (scale selector)

Purpose. One-tap selection on small enumerations — quality 1–5, flow LOW/MID/HEAVY, cycle length, sleep hours. Behaves as a radio group.

Sleep quality

Variant	Example
number + caption	1 EXHAUSTED … 5 RESTORED
icon + caption	droplet LOW / MID / HEAVY (dimmed when Active-flow is OFF)
range chip	21-24 DAYS · 2×2 sleep-hours grid

·Keep exactly one gradient CTA per screen
·Use the tint variant for both secondary and not-yet-valid states
·Extend text-button hit areas to ≥44px with padding
·Let selection state change fill and label weight together

Don't

·Stack two gradient CTAs — the second one demotes to tint
·Use the FAB gradient (#EA9A49 end) on regular CTAs
·Encode toggle state by color alone without knob position
·Add icons to the Save CTA — the label is the action

Accessibility

—All buttons are real <button> elements; the FAB carries aria-label="Log today".
—White on the CTA passes contrast at 15px/600 because the gradient darkens to #C94800.
—Toggles need role="switch" + aria-checked; scale rows need role="radiogroup".
—Sign-out turns alert-red on hover only on pointer devices (@media (hover: hover)) — touch users never see a hover-dependent cue.

Token references

Token	Role
`--grad-btn`	CTA fill
`--accent-tint / --accent-dark`	Secondary fill / label
`#EA9A49`	FAB gradient end (FAB only)
`--success / --accent-light`	Toggle ON / OFF
`--r-btn`	16px radius (14px on onboarding options)