Comb
KiBee's design system: the tokens, components and rules that keep every KiBee screen warm, calm and clear for the people it helps.
Explore the system
Foundations
Type roles, colour, spacing, radius and the focus ring, read live from the tokens.
Components
The React components of the KiBee console, each split by meaning.
Patterns
How components combine for empty states, loading and errors.
Content
How KiBee writes: sentence case, verb-first buttons and plain errors.
Resources
Where the tokens, rules and lint live in the repo, and how to check your work.
Latest changes
From the Comb decision log. Components are in preview: usable, and they may still change.
C8Four screen patterns become componentsKbObjectHeader, KbMetaList, KbMessage and KbSuggestion now serve the Desk, the Hive and the landing preview. The screen-only CSS is gone.G8Updating Comb is enforcedA unit test fails when a component, a catalogue entry or a Comb CSS block has no counterpart, and CI runs Comb on every pull request.G9A page for every componentEvery component has a guide page, 22 in all. Twenty are generated from one typed doc each.P14Four pattern pagesObject header, conversation, empty, loading and error states, and keyboard shortcuts, each with anatomy, usage and accessibility.TY10Object titles leave the display faceA request's title is heading M in Poppins, clamped to three lines. Customer-written text is never set in the serif.TY11One shape for list rowsTitle in body M medium, a meta line in body S with tabular numbers, one chip row, and a 2px indicator on the chosen row.TY12No uppercase labels in the DeskAuthor labels are sentence case, body S semibold, subtle.TY13Side-panel hierarchySection heading, field label and value each have a fixed role, and a value is never louder than its heading.TY14Gold once per viewThe main action is the only gold fill; other header actions are ghost buttons.G4Raw colours in the console reach zeroTwo sweeps took console raw hex from 80 to 0 and raw buttons from 255 to 91.
TY1Type rolesThirteen role tokens, each a full font shorthand, replace size-by-eye in the console.TY5A 12px floorNo 10 or 11px text in the console. Fine print uses body S.TY8One focus ringA 2px gold ring, 2px outside the control, from one shared rule.C7Overlays you can interruptMenus, the command palette and the Desk details panel animate with transitions, so closing mid-open works.G3Comb lintnpm run lint:comb counts raw values per area. Sub-12px text and weight 800 are already errors.G6llms.txt for coding agentsA plain-text summary of Comb's tokens, components and rules for agents writing KiBee UI.
Principles
One gold action per view
The main thing to do is gold, and there is only one of it. A stuck customer never chooses between two loud buttons.
Two faces, each with a job
Instrument Serif for page titles and empty-state lines. Poppins for every control, label and sentence.
Everything on the 4px grid
Spacing, line heights and control heights are multiples of four, so rows and icons line up.
Sentence case, verb first
Buttons say what happens, Resolve request or Add rule, and the confirmation uses the same words.
Never colour alone
A breach says breached. Colour backs the words and is never the only signal.
Tokens named for their job
Pick a token for what it means, not how it looks. Raw values are counted until they reach zero.