TopLine · Human Interface Guidelines
The single law every TopLine surface obeys.
One ramp for type. One symbol family. Four semantic colors. A floating material for things that overlay. Empty states that are content, not absence. Voice that’s plain and direct. We grade every screen against one bar: would Jony Ive ship this on apple.com?
Principles
The five rules.
01
One mind
Every screen should feel like it came from one person. Consistency beats local cleverness.
02
Color is information, never decoration
A near-monochrome surface palette, one brand accent, four semantic tones. If you reach for color to make something "pop," stop.
03
The states no one demos are the product
Empty, loading, and error get the same care as the happy path. We grade ourselves on what most teams skip.
04
Direct, plain, human
No tool names, no jargon, no emoji as chrome. We say "Searching your knowledge base," never "mcp:rag_search."
05
Material follows function
Translucent where things overlay. Opaque where things are the page. Liquid Glass as restraint-reference, not as a thing to copy.
Type
One ramp.
Eight steps. Picked once, used everywhere. Weight is 400 body, 500 medium for labels, 600 for titles. Never 700 in-app.
text-micro11px
wm-text-caption12px
wm-text-small12px
wm-text-body13px
wm-text-body-lg15px
wm-text-title-s18px
wm-text-title22px
wm-text-display-s28px
wm-text-display32px
Symbols
One family.
One stroke weight (1.75 on a 24 grid). Round caps + joins. Our own — drawn at one weight so the whole product reads as one mind. Emoji are allowed only in user-authored content, never as chrome.
todaymeetingsaccountswatchlistcadencesdocumentspipelinemy-workassistantteamleadershipadminnumbergrowthpracticealertsnetworkvoice-notesaved-commandsbookingrocketdealengagementactivitysignalsecurityplugsparkleboltinboxcheckchartpeoplebuildingbookclockSpace & radius
Four-px base.
One spacing unit (4px). p-5 (20px) is the standard card padding; p-6 (24px) is airy/hero. One card radius — 16px — everywhere. Drop the drift.
wm-space-14pxwm-space-28pxwm-space-312pxwm-space-416pxwm-space-520pxwm-space-624pxwm-space-832pxwm-space-1040pxColor
Information, never decoration.
Near-monochrome surfaces. One brand accent for the one thing the eye should find. Four semantic tones for state. If you reach for color to make something pop, stop — hierarchy comes from type weight and spacing.
Brand
Success
Attention
Critical
Imputed defaults
Never make someone type what we already know.
A prepopulated field shows its value in amber italic until it’s reviewed — by editing it, or with the one “Accept N suggestions” button at the lower left of the form. Try it below: edit a field, or accept, and watch the amber clear.
Toggle pill
Say the state. Click to flip it.
When a record has two states and the flip is rare, a small pill names the current one and a click switches it. It asks first only when the flip is risky, shows the new word while it saves, and puts the old word back if the save fails. Three or more choices stay a segmented control.
Flips after a confirm and a short save. Switching back asks nothing.
This one always fails, so you can see the word roll back and the reason appear.
Working mark
The bars are doing the thinking.
One mark for work of unknown length: the assistant thinking, a button in flight, a page on its way. It is the three bars of the TopLine mark, breathing. The two large sizes add a slow swell and a soft band of light. Under reduced motion it holds still. A list or card whose shape is known keeps its skeleton rows instead.
sm · 16px
Inline: buttons, chips, one-line strips
md · 20px
A message or a small panel
lg · 48px
A whole page loading, with its name
hero · 128px
A full-screen cover
Material
Floating, not flat.
Surfaces that overlay the page — popovers, modals, the cue rail’s settings popover — use a translucent layer: backdrop-blur, hairline border, soft shadow. The page below shows through faintly so the rep stays oriented.
Floating example
.wm-floating
Translucent backdrop-blur, hairline border, soft shadow.
The page below.
Notice how the floating card lets the page texture show through. Apple Liquid Glass as restraint-reference. Not a copy.
Voice
Plain, direct, human.
Don’t
- “mcp:list_stalled_deals”
- “Something went wrong”
- “No data”
- “Loading…”
Do
- “Looking up your pipeline…”
- “Couldn’t reach TopLine. Check your connection.”
- “No scorecards yet — run a meeting and this fills in.”
<LoadingRows />— a skeleton in the right shape