Patterns
Compositions
Small, real assemblies that show the system working together. Each one is built only from @luc/ui components — there is no page-local styling language.
Research run header
A page header for an analytical view: identity, status, actions, metrics, then navigation.
bt_momentum_v4
Healthyrun_2026_09_26_a41f · luc-research · walk-forward
Instrument list
A dense row pattern: identity, price, change, sparkline, status. Numbers are tabular so the columns never shift.
Live updates
- BTC/USD109,241.42+2.1%normal
- ETH/USD4,182.40+0.8%normal
- SOL/USD212.07-1.3%normal
- AVAX/USD38.19+4.6%volatile
Featured item
BorderGlow plus SpotlightSurface plus a Card: the one surface in a grid that the user is meant to notice.
featured
glowOne glowing surface per view. The others stay calm.
passive sibling
No hover glow, no lift. It is not clickable.
interactive
Hover: border, surface and elevation move one step each.
Loading, empty, error
Three states, three recipes — never a screen full of spinners.
No runs yet
Start a backtest to populate this workspace.
Artifacts unavailable
The report finished but could not be written to the artifact directory.
Reveal on first view
Stagger is applied to regions, never to individual lines.
Bars
Entering 50ms apart on first view, and never again.
Factors
Entering 50ms apart on first view, and never again.
Reports
Entering 50ms apart on first view, and never again.
Composition notes
Do
- Let one component lead each region and keep the rest quiet.
- Reuse
Panelfor structure so spacing stays identical between pages. - Compose from
@luc/ui; if a pattern needs new styling, it needs a new token.
Don't
- Stack three elevation levels in one card.
- Put a border, a shadow and a glow on the same passive surface.
- Invent a page-local header style.