Components

Chips, Tags & Pills

Chips are Peri's logging vocabulary — the fastest possible multi-select. Two visual species exist: the white shadowed chip (symptoms) and the muted warm chip (workout, period, sleep), both turning orange-gradient when selected.

Selectable tag chip, live

Tap to toggle — white + shadow default, orange gradient selected

Property	Spec
Shape	pill (`--r-chip`) · 13px label · 6×12 padding
Default (symptom)	white + `--shadow-sm`
Default (muted, .wkt-chip)	`--bg2` fill, no shadow — workout / period / sleep vocabularies
Selected	`--grad-btn` + white label; in remove contexts renders “label ✕”
Favourites	pinned first within their section

Variants

2 MG / Daily

muted (wkt-chip) · selected · read-only metadata tag

Variant	Use
Symptom chip	Log Symptoms — 5 categories, search, favourites, custom tags
`.wkt-chip`	Workout / period / sleep vocabularies — calmer density for longer lists
`.sm-sym-chip`	Read-only most-common symptoms in Symptoms Overview
Onboarding chip	outline → green-tinted when selected
Metadata tag	uppercase read-only labels (doses, ranges)
Outcome chip	WhatNextCard predicted outcomes — read-only
Category chip	single-select filter (HRT / Skin / custom) — orange filled when active

Custom tags & favourites

Every logging vocabulary supports user extension: long-press opens custom-tag CRUD (add / edit / delete, persisted per category in localStorage), the + button adds a new tag, and search filters live. Favourites pin to the front of their section.

Known gap

Long-press has no keyboard equivalent. Documented as an accessibility debt item — the CRUD sheet needs a visible entry point (e.g. the existing ⋮ pattern from treatment categories).

·Use muted chips for long vocabularies, shadowed chips for short high-salience ones
·Pin favourites first; keep search instant
·Keep selected state as fill + label color together

Don't

·Mix muted and shadowed chips in one section
·Use chips for navigation — chips are vocabulary or filters
·Truncate chip labels — wrap the row instead

Accessibility

—Selectable chips carry aria-pressed; filter chips behave as a radiogroup.
—Selected encodes by fill and label color/weight.
—Custom-tag CRUD needs a non-gesture entry point (keyboard gap noted above).