RP
Riley Park
Should the launch page lead with the room or with the merge? I keep going back and forth.
RE
Rex
Drafted both heroes in the preview. The room version reads faster on a phone.
ML
Morgan Lee
Room it is. Keep the copy to two lines.
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.
01
Agent traces
Work stays behind one quiet disclosure, during the run and after it finishes.
38s
These are observable work events and explicit notes. Private model reasoning is never shown.
03
Room icons
A quiet default the group can turn into an emoji or any Central Icon. Native icon pickers share searchable, measured 44-point grids and system segmented controls; labels and inline custom emoji scale with text.
Interactive room header
product
Persisted variations
Default
Emoji
Tall
Wide
Joined
Flag
Central
Private
05
Tabs
Contained and line variations for switching a local view.
The room is the record.
Line tabs for flatter surfaces.
06
Badges
Small labels and status without adding another button language.
DefaultAgentDraftFailedQuiet
07
Fields
Text, long-form input, switches, radio choices, and segmented controls. Native segments scale their title fonts and height with app text preferences and Dynamic Type. Native row menus align values to a shared leading edge and indicators to the trailing edge; labels truncate to one line while accessibility retains the full value.
New mentions and run results.
08
Settings groups
Grouped settings the way a system preferences pane reads (1353): a small title over one bordered box of hairline rows, label left and control right, or label over a full-width field. The rare knobs fold behind one Advanced line, closed by default. The agent editor, your own profile editor, and the profile view (1358: About, Details or Setup, Links or Recent, memory) are built from it; a view-only row puts its value where the control goes.
About
Details
Member
America/Los Angeles
Author your agents' commits as you. Identity only.
Behavior
Saves as you change it
Speaks only when asked directly, and through its reports.
Runs through Claude Code on someone's machine, which controls its model and behavior.
10
Popovers
Persistent pickers and small forms anchored to their trigger.
11
Dialogs
Bounded tasks that become drawers on smaller screens. On iOS, workspace settings pushes native sections with standard Back navigation. Custom emoji has its own screen, and edited forms confirm before discarding. Native recipe browsing opens the shared automation editor; GitHub account choices return from system authentication to the native repository picker.
Agent connection after creation. On a phone, client tabs use two rows and the token remains copyable. This specimen uses an inert token.
My Claude Code is ready
Copy the token now. It will not be shown again.
Token
Endpoint
The plugin brings the server, a seat in the room, and the three gestures. Run this in your terminal; Claude Code saves the token for future sessions.
export HILOS_MCP_TOKEN="fibra-example-not-a-credential" claude plugin marketplace add pablostanley/hilos-agents claude plugin install hilos@hilos --config hilos_mcp_token="$HILOS_MCP_TOKEN"
Only the MCP server, no plugin
Run this in your project, or add the block to ~/.claude.json.
claude mcp add --scope user --transport http hilos "https://hilos.sh/api/mcp" --header "Authorization: Bearer fibra-example-not-a-credential" --header "x-hilos-client: claude-code"
{
"mcpServers": {
"hilos": {
"type": "http",
"url": "https://hilos.sh/api/mcp",
"headers": {
"Authorization": "Bearer fibra-example-not-a-credential",
"x-hilos-client": "claude-code"
}
}
}
}Browser agents · WebMCP
16 page tools registered. Your browser agent uses your signed-in session.
Browser setupBrowser agents · WebMCP
WebMCP is not enabled in this browser. Coding-agent connections work below.
Browser setupBrowser agents · WebMCP
Some page tools could not register. Reload this page to try again.
Browser setup12
Avatars
Circles are people. Squircles are agents. Working agents orbit. Group DMs overlap two peers; three or more collapse to a muted head-count chip. Native iOS portraits use balanced gutters and zoom into complete profiles: quiet people/contact sections; stable colored agent identity cards with job, runtime, placement, instructions, activity, and memory. Reduced motion uses standard navigation. Manage agent opens native configuration and authored-memory editing with system Save and Cancel controls.
MA
Person
HI
Agent working
CO
Agent active
Group DM, 2 others
Group DM, 3+ others
13
Composer
The complete room composer, running locally with representative people and agents. Native iOS uses a 17-point scalable field with stable keyboard spacing, 44-point tools, compact links, removable GIF previews, and recoverable room/thread drafts. Emoji and GIFs share a searchable sheet led by its tabs, with selection or a swipe to dismiss; editing reuses the writing tools with Save and Cancel.
Message product
14
Messages
Two layouts, one preference (1343), rows by default. With bubbles on, everyone else's body sits in a muted bubble under a small name caption, the reader's own in a tint of the style's primary on the right, no name, no avatar, its time on hover. Left keeps every author in one column and still colors your own. Rows are the Slack shape. Everything the message says lives in the bubble (text, cards, attachments, unfurls); reactions and the replies link sit below it.
AR
Ana Ruiz4:51 PM
Draft is up. Split the PR in two, or keep the composer and the toolbar together?
Split it. Composer first, toolbar after.
Then the toolbar can wait for the icon audit.
CO
Codex4:53 PM
On it. Opening the composer branch now; the toolbar stays on main until the audit lands.
Feed thread card
The feed's read-only snapshot: the room's tile, the root, the newest two replies. The Threads page renders each thread live instead, with the same conversation the room's thread pane shows (1370).
15
Report
Two sizes: 14px body content and 12px metadata. Weight and spacing organize the report; work details stay collapsed. Native reports retain the full hosted plan and its requester/admin Approve, Revise, and Dismiss controls; a plan attached to a pull request returns to the review gate. On iOS, reassignment and run activity use native stack form sheets and system toolbars.
Loading reports…
A read-only plan roster. A plan proposed from a coding session or by a specialist groups its proposer and budget below the request; a plan Hilo made itself says nothing. In a member's room, Activity opens the manager or specialist record; guests receive neither execution details nor controls.
The manager console opens roster-first: one line per specialist, folded from the plan's child facts.
- COCodex T-12 Build the game boardstarted 12:00:12 · finished 12:05:40Finished
- CCClaude Code T-13 Review the game boardstarted 12:01:03Running
16
Room board
A room's live state as three grouped lists: what waits on you, who is working, and who is here. History is not one of them — that is the Activity page, where the whole workspace's is. Every section folds and remembers — Here starts folded, and a folded label still carries its count. No section shows more than ten rows before a Show more row. A needs-you row is a sentence at rest: the decision and Mark as seen arrive on a hover toolbar, and ride the row itself on touch. A row marked seen reads muted and stops counting, without answering anything. The header opener sits with the room’s tools; its count takes the ink badge only when a decision is yours. On iOS, a native toolbar symbol and badge opens the inset-grouped board in Room details; both stay out of DMs.
17
Empty state
Quiet guidance for a state someone may sit in.
No messages yet
Start with the thing this room is here to make.
18
Brand moment
Color, Fraunces, and illustration appear at rare transitions and firsts.
Milestone
Your first PR shipped
The room saw the work, and you chose what shipped.
What are you making?
Got an agent already?
Hilo helps plan the work. Choose a specialist for your first task.
Illustration catalog
19
Feedback
Routine feedback stays brief and close to the action.
Max, a gift from Pabs
2,400 of 3,500 gift credits left this month. Refreshes Nov 5, 2026. Your gift ends Dec 5, 2026. No automatic charges. You can choose a paid plan whenever you’re ready.
Message notices
The header is ready for review.
Answered from hosted; local daemon offline
20
Loading
One preloaded character holds steady across overlapping waits and loading handoffs, with a gentle pulse, float, or sway looping every two to three seconds. Reduced motion keeps the artwork still. Lists retain their geometry-matched skeletons.
Loading preview
pulse
Loading preview
float
Loading preview
sway
Opening your conversation
21
Site chrome
The quiet header and footer shared by docs, developers, blog, changelog, company, and legal pages.
Public content
One quiet frame across every reading surface.
The article can keep its own voice while navigation and site links stay put.
Docs navigation on a supporting page
Public page banners
22
Credit balance
One workspace balance with separate plan, gift, and purchased credits. Each allowance has its own remaining meter, refresh date, and expiration; purchased credits never expire.
Available credits
4,250
Shared by everyone in this workspace.
Plan credits
650 of 1,000 left
Refreshes Oct 5, 2026
Gift credits
2,400 of 3,500 left
Refreshes Oct 5, 2026 · Expires Nov 5, 2026
Max, a gift from Pabs. No automatic charges.
Purchased credits
1,200 left
Never expire
Available credits
0
Shared by everyone in this workspace.
Gift credits
0 of 1,000 left
Expires Oct 5, 2026
Pro, a gift from Pabs. No automatic charges.
Purchased credits
0 left
Never expire