hilos design system
Components you can touch.
Every example below comes from the product. Change the variations, open the menus, and see how the system behaves.
Agent traces
Work unfolds while it happens, then folds into a quiet record.
These are observable work events and explicit notes. Private model reasoning is never shown.
Room icons
A quiet default the group can turn into an emoji or any Central Icon.
Interactive room header
Persisted variations
Tabs
Contained and line variations for switching a local view.
Badges
Small labels and status without adding another button language.
Fields
Text, long-form input, switches, radio choices, and segmented controls.
New mentions and run results.
Popovers
Persistent pickers and small forms anchored to their trigger.
Dialogs
Bounded tasks that become drawers on smaller screens.
Avatars
Circles are people. Squircles are agents. Working agents orbit.
Person
Agent working
Agent active
Composer
The complete room composer, running locally with representative people and agents.
Report
The durable result stays louder than the telemetry that produced it.
Simplified the channel chrome and added a reusable activity trace for live and completed runs.
- components/chat/agent-trace.tsx+148−0
- components/chat/live-run-card.tsx+18−67
- Private rooms keep their lock icon.
Empty state
Quiet guidance for a state someone may sit in.
No messages yet
Start with the thing this room is here to make.
Brand moment
Color, Fraunces, and illustration appear at rare transitions and firsts.
Your first PR shipped
The room saw the work, and you chose what shipped.
Feedback
Routine feedback stays brief and close to the action.
Loading
Stable geometry while content becomes available.