Search

Search components, tokens, patterns, architecture

Patterns

Progressive Disclosure

The system-wide law. Every intelligence surface has exactly four layers: a glanceable face, an expandable detail, an explainability block, and an action handoff. Nothing on the face requires deeper knowledge to be useful; nothing deeper is hidden from a user who asks why.

Layer 1 · Face

Train lighter

Recovery CapacityModerate

Layer 2 · Detail

Layer 3 · Explain

Based on: training load · sleep · symptoms

Layer 4 · Act

All four layers of one card, unrolled

Rules

  1. 01Layer 1 — Face: one interpretation (recommendation title, dots, arrows). No reasoning.
  2. 02Layer 2 — Detail: drawer or accordion with stats, evidence, recommendation block.
  3. 03Layer 3 — Explain: “based on…”, signals used, assumptions, missing inputs.
  4. 04Layer 4 — Act: assumption action opens the relevant log screen after 320ms.
  5. 05Accordions for enumerable content; sheets for narrative content. Never both, never nested.

Examples

DailyFocusCard

Face: “Train lighter” + capacity bar → Drawer: recommendation block + workout chips → Explain: “based on training load · sleep · symptoms” + red assumptions → Act: “Log Sleep”.

Sleep Overview

Face: three stat rows + summary sentence → Accordion: playbook patterns with evidence counts → Drawer: “Sleep affects most” tags + assumptions.

Anti-patterns

What breaks this pattern

  • Reasoning on the card face (“because your HRV dropped 12ms…”) — that's Layer 3 content leaking up.
  • A drawer that adds no information beyond the face.
  • Hiding the “why” behind a settings page or help center.

Do

  • ·Make every face answer one question in one line
  • ·Put provenance inside the thing it explains
  • ·End every disclosure path with an action

Don't

  • ·Nest sheets on sheets or open sheets from accordions
  • ·Use “Learn more” links that leave the context
  • ·Show raw engine fields on any face