Component catalog
Every reusable primitive belongs here before it is adopted downstream.
Color
Surface and semantic hierarchy.
--bg-000--bg-100--bg-200--bg-300--bg-400--bg-500--bg-sidebar--bg-toolbar--bg-raised--accent--accent-soft--success-soft--warning-soft--danger-softTheme gallery
Each tile is a miniature of the shell, resolving from that theme's own tokens.
A theme owns the ground, the sidebar, the surface ramp, the borders
and the text ramp, so a tile previews the whole shell rather than a
dot of accent. Every tile carries its own
data-hp-theme/data-theme, so it renders
from real tokens and cannot go stale. The interactive copy of this
gallery -- clicking a tile applies the theme -- lives on the
Settings page.
Mode is a separate axis: the tile's own data-theme
flips its preview independently of the page's mode. Same theme,
both modes:
Typography
Sans interface, optional serif display, monospace evidence.
Page heading
Section heading
Component heading
Body copy carries explanation without competing with the values around it.
Inline action linkA warmer display voice.
event_id=7d0b2e status=verified
fetch('/api/state')
.then(response => response.json());+ spawned: powershell.exe -enc SQBFAFgA... + opened: C:\Windows\Temp\stage2.dll - listening: 127.0.0.1:4444 - process: svchost.exe (pid 2204)
Buttons
Primary is reserved for the next best action.
Forms
Clear labels, contained focus, concise help.
Status and feedback
Color is semantic and localized.
The update is now active.
Data display
Metrics, tables, progress, cards, and empty states.
Loading placeholders
Render-first: a placeholder is drawn as the shape it will be swapped for -- a data card as a data card, a table batch as table rows -- and the card is laid out at the size and position its data will occupy, so the grid around it is settled before the answer arrives. When the data turns out smaller than the space reserved for it, the card shrinks back to the data instead of keeping an empty box.
One slot, three states
Same column, same width, same origin. Loading holds the reserved footprint; a small result shrinks the card to its data; a large one fills the reservation exactly.
Live: reserve, then fit
The same slot driven by buttons: loading reserves, hydration releases the reservation, and the card settles to whatever the data needs.
Shape-matched placeholder primitives
Each surface ships the ghost of its own anatomy: a KPI value, a table
batch (.hp-skel-batch rows vary their width by position
so a batch does not read as one solid block), and project-grid tiles.
| Time | Event | Source | Status |
|---|---|---|---|
| 12:41:08 | Configuration saved | admin | complete |
| 12:38:44 | Session rotated | system | staged |
| 12:32:17 | Health check | gateway | healthy |
Responsive data-table (Xore/theme#24 follow-up)
.data-table--responsive: below 720px width each row becomes a stacked
label:value block (label from each cell's data-label attribute) instead of
a table too wide for the viewport. Resize the window/preview below 720px to see it
engage -- at desktop width it renders as an ordinary table.
| Time | Source IP | Port | Country | Detail |
|---|---|---|---|---|
| 17:19:24 | 203.0.113.55 | 445 | DE | HONEYPOT-SCAN VNC interaction [Attempted Information Leak] |
| 17:19:22 | 18.119.20.95 | 8092 | US | ET CINS Active Threat Intelligence Poor Reputation IP |
No saved views
Save a filtered investigation to make it available here.
Card footer alignment (#24)
Same .card class, deliberately mismatched content lengths (one line,
a short list, a long/unbounded list) -- .card__footer stays pinned to
the bottom edge of every card regardless, and the grid stretches every card in a
row to match the tallest one so the row itself reads as one consistent shape.
Floating layers
Menus, dialogs, and explicit destructive confirmation.