Agents that show their work.
The guidelines behind the Agents prototype: the mark, color, type, voice, motion and every component, taken from the working product.
- Product
- Agent management
- Surfaces
- 12 pages, 1 shell
- Type
- Inter, two weights
- Palette
- 7 grays, 4 agent hues
Introduction
Agents is a workspace for teams who hand real work to AI agents. It shows what each agent did, what it cost and what needs a person. Three rules hold every screen together.
Gray carries the interface
Seven grays build every surface, so color always means something.
One hue for each agent
An agent keeps its color in the chart, the legend and every row.
Square and flat
No radius and no shadows on the page. Depth comes from layered surfaces.
Mark
A white tile with one dot: the workspace, and the agent inside it. It sits at the top of the rail and on every export.
Construction28 unit tile, 10 unit dot, 6 units of clear space
ScaleNever smaller than 16px
VersionsOn the page, on ink and on an agent hue
App iconsFavicon to home screen
Color
Gray does the work and color carries meaning. Click any value to copy it.
Core palette
Interface grays
Agent huesOne per agent, everywhere it appears
ProportionsHow much of a screen each color takes
Readable combinationsWCAG contrast, measured
Typography
Inter in two weights, Regular and Medium. Figures are Medium with tight tracking, everything else is Regular.
Inter
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789 $ % · – ’
Regular 400Medium 500
Type scaleRead from the live components
Layout
Five spacing steps and three layers. Cards sit 16px apart and line up with the stat columns.
Iconography
A 20px grid, a 1.25px stroke, round caps. Real brand marks for connected tools. Click an icon to copy its SVG.
Voice
Short, plain and specific. The interface reports what happened the way a colleague would.
Say what happened
Labels describe the event in words a person would use, never an ID.
Numbers in plain words
One number, one meaning. A projection is called a projection.
Name the agent
People talk to Support and Research, never to a model or a job.
Say and avoid
Components
The real components, working. Every number is measured from the element.
ControlsHeights in px
DataA value on every bar. Hover a day for the split
OverlaysDetails, search and menus above the page
States
Every list and card has four states. Press Try again to watch the error recover.
StressLong names truncate, big numbers fit
Responsive
One layout that folds in three steps, from a wide desk to a phone.
Accessibility
Usable with a keyboard, readable at a glance and calm for people who turn motion off.
Never color alone
Every agent dot sits next to its name or a number, so color is a second signal.
Motion can stop
With reduced motion on, entrances fade in place and bars change without moving.
Room for a thumb
Controls are 40px with a mouse and grow to 44px on touch screens.
FocusA 1px ring inside the element, for the keyboard only
Keyboard
Motion
Fast, purposeful and never in the way. Three curves cover everything. Press play to feel each one.
Do and don't
The mistakes that make a product drift, side by side with the rule.
DoUse a hue only for its agent.
Don'tColor text to make it stand out.
DoKeep red for deleting and for errors.
Don'tMake a calm number look urgent.
DoUse the tile exactly as drawn.
Don'tRound it, tint it or add a shadow.
DoSquare surfaces, depth from layers.
Don'tUse rounded cards with drop shadows.
DoStart bars at zero and label the value.
Don'tCrop the axis to make a gap look bigger.
DoWrite the number people check.
Don'tMake people do the math.
Applications
Twelve views built from the same parts, and the product itself.
Live prototypeEvery control works
Assets
Everything on this page, ready to use.
Every color, size and curve, ready to paste
The same values for Figma or for code
Every interface icon in one sprite
The tile on its own, in vector
Assistance
Questions, changes or a system like this for your own product. The people who designed it answer.
A rule, a component or a decision behind it, in a short call.
Book a callA new component or page, designed inside these rules.
Email usBaobun Studio designs and builds systems like this one.
See the studio