Objects
The molecules between Elements and Components — small, named clusters of two to four elements that repeat across the app. An object owns a tiny layout (a label beside a value, a name above a dotline) but isn’t a whole screen unit. Components are assembled from objects; objects are assembled from elements.
Field row
The atom of every detail surface: a 160px mono-caps label paired with a value that can hold text, a chip, or links, divided by a hairline. Stack them inside a card to build any detail page.
Shop description
A shop's identity line: its name as the only title (in the UI/shop-name font), with #id · city riding underneath as a quiet subtitle dotline. Opens every review card; reusable wherever a shop needs naming above its content.
.km-loc__name + .km-loc__id.km-dotline —
name leads; #id · city is a UI-font subtitle, not mono. Each token is
a discrete unit so the divider spacing never drifts.Reviewer byline
Who left the review and when — author · date · time as three discrete tokens on a dotline. The name carries a touch of weight; the timestamps recede to mono. A named element so attribution reads identically on a review today and a customer message later.
.km-review__by.km-dotline — .km-review__author (semibold ink-900) + two .km-review__when (mono, ink-400). Three units, one dotline.Filter facets
The system's first true filter primitive. A selectable chip that borrows the toggle's selection language: resting = surface + strong border (the input/secondary-button shell); active = ink-900 fill + white text. Control height to line up with buttons and inputs; the count doubles as a live tally. Hover = neutral, selection = brand/ink — the same rule the dropdown follows.
.km-facet — aria-pressed="true" = active
(ink fill). Count (__n, bold ink) + label (__l, ink-500). This demo is live — click a facet. Reuse anywhere a row of countable filters is
needed.Workload metric
One hero figure per view. Prominence comes from scale, not colour — the same logic as “one primary action per view”. The number leads at page-title size; its label rides beside it as .km-subtext; the meter fills green with work done (green = done, system-wide; the goal is a full bar); the ambient total recedes to a mono caption.
.km-metric-hero — label + figure right-aligned so the number’s right
edge lands on the bar’s end; --ok meter fills toward a full bar;
total in mono --ink-400. The figure rolls in on the value-roll
behaviour and the meter fills with inertia + a whisper of sheen — both core motion.Icon link
A link carried entirely by icons — for when a label would compete with surrounding content. It pairs a platform identity glyph (here the Google G) with the system's external ↗, so it reads as “go to this platform, off-site” without words. The full meaning lives in the title + aria-label.
.km-btn--icon button modifier wrapping .km-review__plat (identity glyph) + .km-review__ext (the muted ↗). Icon-only, so meaning rides on title/aria-label.Dropdown menu (custom listbox)
The native select can't style its option list, and the OS positions that list over the field with its own highlight. This is a real dropdown menu: the trigger keeps the input look; on click a menu opens directly below using the overlay recipe — surface + hairline + --shadow-pop. The selected row uses --brand-tint (the active wash) + a brand-press check; the caret flips on open. Hover = neutral, selection = brand, so “pointer is here” and “this is your choice” never read alike.
.km-dropdown — the Dropdown component wires open/close (click-out +
Esc) and selection. This demo is live. Use it wherever an option list deserves design; reserve
the native .km-select for plain fallbacks. It belongs to the Dialogs & overlays family.