Cordy/Cairn
2
1
Fork 0
Code Issues 20 Pull requests Projects Releases Packages Wiki Activity Actions
Page: UI-Design-System
Pages
Architecture Design handoff rules Home OCM Federation UI-Design-System
1 UI-Design-System
Cordy edited this page 2026-09-01 17:31:07 +00:00
Unescape Escape
Table of Contents
This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Cairn UI design system (settled during the v0.6.8x–v0.6.100 admin epic)

product-ui/admin-mockup.html (Nikola's local copy) is the visual authority. Copy exact values from its stylesheet — eyeballed sizes overshoot every time. All admin surfaces and the user space share one design language; a change to a shared element (tabs, kebabs, tallies) must propagate everywhere it appears.

Typography

  • Row/item names and labels: 13.5px, weight 500, --ink.
  • Descriptions and helper text: 12.5px, --muted, max-width:60ch, 3px top margin. Sits WITH the setting, not as a hint paragraph after the group.
  • Mono paths: --mono 11.5–12.5px (12.5 in wide rows, 11.5 in dense log rows).
  • Sans metadata lines (owner · by · date): 12.5px muted.
  • Tally strips: number 17px/600 --ink tabular-nums over 12px muted label; flex with gap:8px 20px; the last stat gets margin-left:auto; text-align:left.
  • Section headings inside pages (.tpugrp, h3): 13–13.5px/600 --ink-2; group counts use an em dash: "Eligible now — 2".
  • Rail/sidebar section headings (.navgrp, .admgrp): 10.5px/600, letter-spacing .11em, uppercase, muted, padding 14px 10px 5px. Identical in user space and admin.
  • Nav items: 14px at 8px/10px padding, radius 6, no inter-item gap; active = weight 500 + tinted plate, never 600.
  • Weights: 400/500/600 only; 600 reserved for tally numbers, headings and name emphasis — never active nav.

Surfaces and cards

  • One card level only: --surface, 1px --rule border, 12px radius (8px on legacy setboxes — 12 preferred), overflow:hidden. Never nest a bordered box inside a card (the .qbox-in-.setbox and flex-card-row bugs).
  • Rows inside a card are separated by 1px --rule hairlines (border-bottom, :last-child none), padding ≈13–14px 14–16px.
  • Sunk/inert variants (protected lists, disabled halves): --sunk background on the row or box.
  • Read-only info tables ("tables not directly editable which display information"): opt into the shared .admkv grid — grid-template-columns:180px minmax(0,1fr) auto; gap:14px, key muted/auto width, value --ink, chips/badges in the auto column. admkv goes on the section/wrapper element (rules are descendant selectors).
  • Settings rows (.srow pattern): name+description left, control right (justify-self:end), grid minmax(0,1fr) auto, gap 18px, padding 14px.

Controls

  • Inputs: 13.5px, padding 8px 10px, 1px --rule-2 border, radius 6, --paper background; numeric inputs 104px, right-aligned, tabular-nums, unit beside in --ink-2. Focus: no outline, --accent border + 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) ring. Always set the border explicitly — the UA default reads half-grey.
  • Compact buttons (filters, inline confirms): 12.5–13.5px, padding 5px 10px – 8px 13px, radius 6, 1px --rule-2 border, --surface background. Danger variant: outline red (--bad, #b3261e border+text, no fill). Filled red is reserved for dialog-level destructive buttons (#tpuall-go, #spacedel-go).
  • Row action links: borderless 13.5px text buttons — accent for safe actions (Restore), red for destructive (Purge), muted for inert labels (Protected).
  • Kebabs (.kebabbtn): 30×28 borderless grid, muted three-circle SVG (16px), hover = sunk plate, radius 6. Menus via shared .pmenu/.pmi.
  • Switches for on/off policies, not checkboxes.
  • Tabs: shared segmented control (.admtabs/.ptabs) — one idiom everywhere.
  • Chips: 11px; inline mid-row chips are square-ish (radius 6), end-of-line status chips rounder.

Interaction patterns

  • Confirmations happen inline in the row's right-hand action column: quiet 12px muted caption above compact buttons — never a full-width red banner, never a row-widening insert. Dialogs only for multi-item operations (purge all, delete space with type-the-name).
  • Errors surface inline under the affected row (12.5px red note) when the row survives the failure; tpu-msg-style page messages otherwise.
  • Primary add-actions sit below their table (.peeraddrow pattern: "Add a peer", "Add a rule").
  • Save-bar dirty tracking must cover every editable control (admFields includes textareas).

Copy

  • en-GB: "licence" (noun), "license" (verb), title "Licensing". Licence tag "Bao" is the plan name.
  • Sentence case, verb-first actions, descriptions state consequences plainly ("0 means no limit, and Cairn will fill the disk").
  • All four locales (en/de/fr/it) for every new i18n key; file stores \uXXXX escapes — anchor splices on ASCII key names.