Comb

Typography

Comb sets type by job, not by size. Pick the role that matches what the text is for and you get its size, line height, weight and family together.

Typefaces

Comb uses two faces, and each has a job. Using only these two keeps the console calm and lets the serif mark the few places that matter.

Billing queue

Instrument Serif, regular only

Page titles, empty-state lines and the readout figure. Never bold, never below 20px.

Assign to me

Poppins, 400 to 700

Every control, label, sentence and number. Medium is the default inside components.

Text styles and tokens

Each example is set with its token, and the value column is read back from your browser: size and line height in px, then weight and family. If a token changes, this table changes with it.

Type role tokens
ExampleTokenValueUsage
Requests waiting on youHeading XL--comb-font-heading-xlReadingReserved for the largest page title.
Billing queueHeading L--comb-font-heading-lReadingEvery page title, and empty-state lines.
Export stops at the March reportHeading M--comb-font-heading-mReadingPanel titles and an open request's title.
NotificationsHeading S--comb-font-heading-sReadingSection and plate titles.
AssigneeHeading XS--comb-font-heading-xsReadingCard titles and side-panel section headings.
Open the report and choose Export. KiBee keeps your place.Body L--comb-font-body-lReadingLong reading: help articles and descriptions.
Assigned to you by the Billing ruleBody M--comb-font-body-mReadingThe default inside components.
Updated 12 min agoBody S--comb-font-body-sReadingHelper text, timestamps, fine print. The 12px floor.
1,284Metric L--comb-font-metric-lReadingSingle-value tiles and totals.
312Metric M--comb-font-metric-mReadingSecondary tiles.
48Metric S--comb-font-metric-sReadingInline totals.
92%Readout--comb-font-readoutReadingStat values in the serif readout look, tabular.
KB-1042Code--comb-font-codeReadingIdentifiers only: request keys, API key previews.

Using typography

Write the role shorthand first, then any longhand that changes it. The shorthand resets numeric variants, so tabular figures go after it. When a rule only needs a size, take the size and leading tokens together.

.queue-count {
  font: var(--comb-font-body-s);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.kb-btn--sm {
  font-size: var(--comb-font-body-s-size);
  line-height: var(--comb-font-body-s-leading);
}

Typography rules

These come from the typography and shape decisions in the Comb learnings. Shipped rules are enforced in the console today; planned ones have tokens but not yet every call site.

  1. TY1

    Product type is a set of roles: heading XL to XS, body L, M and S, metric L, M and S, and code. Each is one font shorthand token with weight, size, a fixed line height and family. The console uses roles; the older text scale stays for the landing page.

    Shipped
  2. TY2

    Line heights are fixed values on the 4px grid (14/20, 12/16, 16/24, 20/24, 24/28, 28/32), never ratios.

    Shipped
  3. TY3

    Instrument Serif is for page titles and empty-state lines only, heading L and up. Every other heading is Poppins. Metrics keep the serif readout look at metric L size with tabular numerals.

    Shipped
  4. TY4

    Medium is the default weight in components and next to icons; semibold for headings and buttons; bold only for metrics. Never 800.

    Applies now
  5. TY5

    12px is the floor. No 10 or 11px text; fine print uses body S.

    Shipped
  6. TY6

    Numbers in badges, counts, tables, metrics and SLA timers use tabular figures, so counts do not jitter when they update.

    Shipped
  7. TY7

    Radius follows the role of the shape: 2px badges and checkboxes, 4px lozenges and tags, 6px buttons and inputs, 8px cards and menus, 12px modals and tables, full for avatars and pills.

    Planned
  8. TY8

    One focus ring: 2px, drawn 2px outside the element, following its corners, from one shared rule.

    Shipped
  9. TY9

    Selected states, such as an active tab or a chosen row, use a 2px indicator paired with the selected colour, never colour alone.

    Applies now
  10. TY10

    A request's title in the detail pane is an object title: heading M, clamped to three lines, with the full text in a tooltip. Customer-written text is never set in the display face.

    Shipped
  11. TY11

    List rows: title in body M medium, two lines at most; a meta line of key, channel and age in body S subtle with tabular numbers; one chip row. The chosen row gets a tint and a 2px indicator, not a shadow card.

    Shipped
  12. TY12

    No uppercase text transforms in the Desk, key caps excepted. Author labels are sentence case, body S semibold, subtle.

    Shipped
  13. TY13

    Side-panel hierarchy: section heading in heading XS subtle ink, field label in body S, value in body M. A value is never larger or heavier than its section heading.

    Shipped
  14. TY14

    Gold fill appears once per view, on the main action. Other header actions are ghost buttons, and a status shows once.

    Shipped

Do and don't

Billing queue

DoSet the page title in the serif, at heading L.

Hi, my export has stopped at March again

Don'tSet a customer's words in the display face. Their text is an object title in heading M.

Assignee

DoWrite labels in sentence case, in heading XS subtle ink.

Assignee

Don'tShout a label in tracked capitals. Capitals slow reading and the Desk has none.
Waiting 1,284
DoUse tabular figures for counts so a live number keeps its width.
Waiting 1,111 then 1,888
Don'tLeave counts proportional; a ticking number shifts the row beside it.
Updated 12 min ago
DoUse body S, 12px, for the smallest text.
Needs help
Don'tReach for the loud lozenge to make small text heard. It is only for a flag that must be read first.