Design language

Four rules everything else follows from

• Containers recede, content leads. A box, a rule or a header never competes with the data inside it. Borders are 1px and pale; fills are rare. The data is the darkest thing in a box.
• Colour means something or it is absent. Neutrals are untinted greys. The accent marks the main action and the current location; it is ink unless a facility opts into its own colour. Status colours mark status and nothing else.
• The accent is never a message. Banners and notes use the fixed status colours, so a facility whose colour is red or yellow cannot make a notice look like an error or a warning.
• One loud thing per page. At most one page banner and at most one primary button. If nothing is wrong, the page is quiet.

Every table, token and name on this page is example data. This page is built from the portal's own tokens, Basecoat classes, af- extensions and Vue components, so an example cannot differ from what ships. Use the accent control above to try a facility colour; every example responds, and the theme control in the top bar switches light and dark.

Basecoat's own variables (--primary, --border, --ring, --chart-1 ...) are set from the portal's tokens in global.css, so a colour is changed once. These are their values on this page right now. Try an accent above: --primary follows it.

The default is a neutral monochrome theme: the accent is ink, near-black in light mode and near-white in dark. The portal does not give a facility an identity it has not chosen. A deployment may opt in by setting one colour (docs/portal-styling.md has the derivation); the portal derives the rest, so any colour is safe:

• The accent appears only as a fill (primary button, checked control, skip link) or a 3px marker (current sidebar item). It is never a text colour, so a pale facility colour cannot produce unreadable links.
• The on-accent colour is computed: white if it reaches 4.5:1 on the accent, otherwise near-black.
• In dark mode a dark accent is lightened until it reaches 3:1 against the page, unless the deployment supplies its own dark-mode value.

Typeface. IBM Plex Sans for headings and text; headings differ only in size and weight (600). IBM Plex Mono, from the same superfamily, for literal values, so a token string beside its label reads as one typeface in two modes.

• Weights in use: 400 for text, 500 for labels and buttons, 600 for headings. No others.
• Number columns are right-aligned with tabular numerals (af-num).
• Capital I, lowercase l and 1 are drawn differently, which matters for hostnames, token names and dataset IDs.
• Self-hosted and open-licensed (OFL). No letter-spacing is added to text; if a page feels tight, loosen row height and padding instead.
• Help text is capped at 80 characters per line, empty-state text at 52.

• Table headers are unfilled. No coloured stripe down one side of a container.
• The empty state (Basecoat's empty) is the only dashed border, and its content is centred, as Basecoat lays it out.
• Focus: Basecoat's controls draw a border and 3px halo from --ring; the portal's own links, nav items and summaries draw a 2px outline in the text colour, offset 2px. No element shows both.

• Only hover colour, a turning chevron, the sliding drawer, a small spinner and a chart's first draw move. Page content does not animate on load.
• With reduced motion requested, every transition and spinner stops and charts draw without animation.
• Two named exceptions are kept on purpose: the particle-track canvas (beside the Overview header and in the landing hero; one still frame under reduced motion) and the gateway diagram on the landing page (runs only on screen, never under reduced motion). Neither sits behind text a person needs to read.

• Icons are inline SVG, so they inherit text colour and need no network request or icon font.
• They come from the @lucide/vue and @lucide/astro packages, pinned in package.json; markup is never pasted by hand, so an icon can always be traced and updated.
• 16px beside text, 20px in a large button. Lucide's default stroke; no per-icon weights or colours. currentColor, aria-hidden when decorative.
• An icon-only button has an accessible name. Status uses the status mark, not an icon.

• First column is the name, in the text face at normal weight and full ink. It is the darkest thing in the row.
• Numbers are right-aligned with tabular figures (af-num). Dates and secondary facts are secondary text (af-sub).
• Row actions (af-act) are small buttons at the right edge. More than two go into a menu.
• Header is unfilled, 13px, secondary colour and sentence case. Rows are 44px, compact rows 32px.
• Under 600px the table scrolls sideways inside its box; the page does not.

• Bars are --chart-1 (secondary text) and their hover is --chart-2 (text): neutral steps, legible in both themes, never status colours. The grid is --border; axis labels are 12px in secondary text in the page font, with flat bars and no gradient or shadow.
• A canvas is opaque to assistive technology, so the chart is role="img" with a summary label and every value is repeated in a visually hidden table.
• It draws without animation when reduced motion is requested, and redraws with the new colours when the theme changes. Chart.js and Basecoat's chart script load only on a page that draws a chart, and only when it mounts.

• Dialog buttons sit bottom right, with the confirming action last. The confirming button repeats the title's verb. The title is the 20px step.
• A tooltip never holds information a person needs to complete the task. It is not reachable on touch.
• Prefer inline content to a dialog. Do not open a dialog from a dialog.
• A tooltip is flat: page background, strong border, 4px radius. It uses the native Popover API, so a scrolling ancestor cannot clip it.

• Not linked is off, not wrong. The off mark, the words "Not linked", a quiet row. It never raises a warning or problem banner; at most a hint. A service that needs no credential (the gateway's own) is never counted as unlinked. The Identities page needs no hint: its rows show the state and the action.
• Credential rejected is a warning, not "Not linked". The user did link, and the backend refuses what they set up. Warning mark, the words "Credential rejected", a row at full ink (never the quiet treatment), one sentence ("Your linked <identity> was rejected. Re-link it to use this service.") and a re-link action that names the identity and goes to its card. It raises a warning banner, ranked below misconfigured and unavailable and above a not-linked hint. It sorts with the things that need attention and is never counted as not linked. Its "Powered by" line shows no link state.
• A grid proxy warns only when it cannot renew itself and has under 1 hour left. An auto-renewing proxy never shows as expiring.
• Misconfigured and Unavailable differ. Misconfigured needs an operator: problem mark and a reference id to quote. Unavailable is temporary: warning mark, nothing to do but wait.
• Access required needs an administrator: warning mark, inline detail, no banner. A row shows its identity's link state only where that is the actionable fact.
• Maintenance is the slim information bar above the page, on every page including the landing page, not the page banner.