Search

Search components, tokens, patterns, architecture

Components

Insight Cards

The six cards of the Insights tab share one two-section anatomy: an Overview (range tabs + stat rows + summary sentence) above a Playbook (question-framed accordion of personal patterns). Engines run once at the top of the tab; cards only render.

The shared anatomy, live

Sleep Overview

Avg duration6.8h
Quality3.4 / 5
ConsistencyImproving

Sleep quality is improving, but the last month traded duration for consistency.

Sleep Playbook

What has sleep taught me?

The six cards

CardOverview statsPlaybookDrawer extras
Trends over time12 metrics, current vs prior period · optional “Since [Treatment]” anchor tabimprovements (green) · challenges (red) · story paragraph
What My Data Says9 cross-domain patterns · max 3 shown, category-variedinline accordion only — no sheet
Training Insightsavg/week · week trend · top activities · load trend · recovery burden8 training patterns
Sleep Overviewavg duration · quality · consistency6 sleep patterns“Sleep affects most” tags · recommendation · assumptions
Cycle Overviewregularity · symptom burden · recovery cost + confidence badge5 cycle patterns“Most affected areas” · assumptions (period / wearable)
Symptoms Overviewburden trend · most common (top 3 chips) · variability6 symptom patterns“Most connected areas” · assumptions (symptoms / wearable)

CSS: shared .si-* stat rows and tabs, .pb-accordion-* playbooks, .dfc-* drawer sections, .ltr-* trends, .ti-*training. Reuse-by-prefix is the system's composition mechanism.

States & confidence

StateBehaviour
Below minimumPlaybooks gate at 14 entries; trends confidence is low under 10 entries
Low confidenceHedged language (“may be contributing”) · less cycle framing
Medium/HighDirect framing · items count as Insights in the stats row
PrivacyText blurred, interactions off

Pattern vs Insight

Accordion rows are patterns — neutral observations with evidence counts. Only medium/high-confidence patterns are counted as insights in the “Days logged · Patterns found · Insights learned” stats row. The copy never blurs that line.

Most-common symptom chips

.sm-sym-chip — read-only frequency chips inside Symptoms Overview

Do

  • ·Frame playbooks as questions the user asked (“What has sleep taught me?”)
  • ·Show evidence counts inside expanded rows (“seen 5 of 7 times”)
  • ·Run every engine once at tab top and pass results down
  • ·Keep confidence as a word, never a color alone

Don't

  • ·Open a sheet from inside an accordion — accordions never nest sheets
  • ·Show low-confidence patterns with direct causal language
  • ·Render generic tips in a playbook — playbooks are personal or empty
  • ·Duplicate engine calls per card

Accessibility

  • Accordion headers are buttons with aria-expanded.
  • Range tabs use role="tablist"; the active tab is white-pill + weight, not color alone.
  • Stat-row trend arrows pair with visible values, never alone.