UI patterns
JustHold keeps exclusive product filters on one look. Chart ranges, category types, record type, lots, and history filters should feel like the same control — not a new chip style on every page.
This page is the public share point for that convention. Implementation detail lives in the justhold-ui-layout skill.
Segmented filters
The canonical control is a muted track with primary fill on the selected item.
| Part | Treatment |
|---|---|
| Track | Soft muted wash, tight padding, no extra border |
| Unselected item | Muted text with a default outline; hover turns the outline primary |
| Selected item | Primary fill and primary-foreground text |
| Sizes | Compact for chart ranges (30D / 90D / All); larger for type and lots rows |
You will see this on:
- Holdings performance ranges —
30D/90D/All - Holdings chart sections — Allocation / Horizon / Panorama
- Big Money categories — Saved / Overspent / Invested / Sold
- Big Money balance trend —
7d/14d/30d/90d - Record type and edit-entry type
- History type filters (with counts)
- Lots and settings lists — Open / Sold, Positions / Sold
Total is not a tab. The dollar amount in the categories donut (and the table footer) is a summary of the selected type, not a fifth filter.
Intentionally different
These are not product filters, so they keep their own language:
| Surface | Why it looks different |
|---|---|
Holdings glance 1D–Max | Market range pills use gain / loss color, not chrome |
| Locale and theme switchers | Header chrome, not a data filter |
| Admin contents tabs | Underline IA for the CMS workspace |
| Calendar month amounts | Display-only Saved / Overspent / Invested totals |
If you are matching JustHold in another app, copy this muted-track + primary-selected recipe for exclusive option sets (about 2–7 choices). Do not invent a second selected state (raised card, loose bordered chips) for the same job.
For builders
In this repo the shared primitive is SegmentedControl (apps/web/components/segmented-control.tsx):
layout="inline"— hug content (chart ranges)layout="fill"— equal-width items (types, lots, history)size—xs/sm/md- Optional
count,href(settings links), andtitle
Landing Big Money mocks use the same control so the marketing demo matches the member app.
Day-to-day placement and shell rules stay in justhold-ui-layout. Palette and radius stay in justhold-design-tokens.