A snapshot: read at commit 707a04c7ce8 on 2026-10-18T00:06:01Z by majordomus 0.29.0. Nothing on this page is read again. See it live
Design
What every surface of this tool is rendered with, from the one declaration this executable carries.
One declaration, every surface
comparing the stylesheet with the executable22rolesthe declaration
5statusesthe declaration
110state wordsthe declaration
4type stepsthe declaration
29site synonymsthe declaration
66palette entriesthe declaration
- Source
share/design/tokens.yaml- Fingerprint
944a896b2646060d5dc100adcc36737fd5d8086e2f53d43d6858ac6fdad39540- On every page
--mj-design: "944a896b2646"- Dark means
.dark- Choice stored under
color-theme- Audited at
- 320px390px1024px1280px1600px
The site published to GitHub Pages, this Cockpit, the pages the executable renders itself and the Swagger shell are projections of the one file named above. A value changed there and regenerated reaches every surface; a value chosen anywhere else fails the design gate.
Roles
| role | light | dark | the site's names | for |
|---|---|---|---|---|
--mj-bg | white | gray-950 | --color-neutral-primary | the page |
--mj-raised | white | gray-900 | --color-neutral-primary-soft--color-neutral-primary-medium--color-neutral-primary-strong | a card, a panel, a header bar that sits on the page |
--mj-sunken | gray-50 | gray-800 | --color-neutral-secondary--color-neutral-secondary-soft--color-neutral-secondary-medium--color-neutral-secondary-strong | a well, a table stripe, a code block, a header cell |
--mj-line | gray-200 | gray-800 | --color-default--color-default-subtle--color-default-medium--color-default-strong | every border and rule |
--mj-fg | gray-900 | white | --color-heading | headings, identifiers, values; the text that carries the page |
--mj-body | gray-600 | gray-400 | --color-body | reading text |
--mj-muted | gray-500 | gray-400 | --color-body-subtle | secondary text; labels, captions, provenance |
--mj-faint | gray-500 | gray-400 | the quietest text; placeholders, disabled text, a navigation group's heading. Measured, not chosen - gray-400 read 2.60:1 on the page and gray-500 4.16:1 on the dark page, so it carries muted's values until the palette holds a Tailwind step between them. | |
--mj-accent | blue-700 | blue-400 | --color-fg-brand | links, the focus ring, the one colour that means interactive |
--mj-accent-strong | blue-900 | blue-400 | --color-fg-brand-strong | the accent where it must read as text on the accent's soft ground |
--mj-accent-soft | blue-50 | blue-950 | --color-brand-softer | the accent as a ground; a selected row, the current navigation entry |
--mj-accent-line | blue-200 | blue-900 | --color-brand-subtle | the accent as a border around its soft ground |
--mj-accent-fill | blue-700 | blue-600 | --color-brand | a primary action's background; always carries on-accent text |
--mj-on-accent | white | white | text on a primary action | |
--mj-series-1 | blue-600 | blue-400 | the first colour of the categorical series; a vocabulary a drawing cannot know in advance | |
--mj-series-2 | orange-600 | orange-400 | the second colour of the categorical series | |
--mj-series-3 | emerald-600 | emerald-400 | the third colour of the categorical series | |
--mj-series-4 | violet-600 | violet-400 | the fourth colour of the categorical series | |
--mj-series-5 | cyan-600 | cyan-400 | the fifth colour of the categorical series | |
--mj-series-6 | rose-600 | rose-400 | the sixth colour of the categorical series | |
--mj-series-7 | lime-600 | lime-400 | the seventh colour of the categorical series | |
--mj-series-8 | fuchsia-600 | fuchsia-400 | the eighth colour of the categorical series |
Status
| status | as a badge | text | ground | border | the words filed under it |
|---|---|---|---|---|---|
ok | ok | emerald-900 | emerald-50 | emerald-200 | okpasspassedsucceededcompleteddonecurrentdeclaredcoveredhealthylivepresentsyncedstableread-onlyconnectedacceptedenforcedwiredbehaviorally-verifiedvalidcleanmergeddocumentedproven |
warn | warn | orange-900 | orange-50 | orange-200 | warnwarningstalepartialadvisorycancelledcancellingnot-generatedreconnectingverifyexecutableaheadbehinddirtyproposeddeprecateddegradedexperimentalephemeral |
bad | bad | rose-900 | rose-50 | rose-200 | badfailfailederrormissingblockedrejectedblockingrefuseddisconnectedofflineloststderrsupersededunwiredunsupportedowedforeignmisplacedfailingunrunnable |
info | info | blue-900 | blue-50 | blue-200 | inforunningqueuedactiveverifiedgeneratedcachedruntimeresourcependingloadingstreamingimplementedfeaturedexemptinheritedunmergeddetachedinputs-unchanged |
neutral | neutral | fg | sunken | line | neutralunknownguaranteedexternalplanneddescribeddraftreadyinactivestoppedidlequerycommandbuiltindeclarativevendoredhighmediumlowsetupbeginworkinspectconcludenot-runno-test |
Type
| step | as itself | size / leading | utility | for |
|---|---|---|---|---|
--text-meta | 10px/1.4 | text-meta | the smallest legible step; counts, provenance, table headers | |
--text-label | The quick brown fox jumps over the lazy dog | 11px/1.4 | text-label | labels, badges, breadcrumbs, keys of a fact list |
--text-small | The quick brown fox jumps over the lazy dog | 12px/1.5 | text-small | secondary text at density; notes, log lines, monospace inline |
--text-dense | The quick brown fox jumps over the lazy dog | 13.5px/1.6 | text-dense | the body text of a control plane |
Type stacks, layout, radius, motion
| token | kind | value | for |
|---|---|---|---|
--font-sans | font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | the system stack every surface reads in |
--font-mono | font | ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace | the monospace stack for code, identifiers and logs |
--tracking-caps | tracking | 0.12em | the letter-spacing of an uppercase label |
--tracking-kicker | tracking | 0.24em | the letter-spacing of the uppercase line that names a page's section above its headline |
--mj-measure | layout | 62rem | the widest a reading column gets |
--mj-cockpit | layout | 1600px | the widest the Cockpit's layout gets before it centres |
--mj-topbar | layout | 2.75rem | the Cockpit's top bar; the sidebar and a sticky header sit under it |
--radius-sm | radius | 0.25rem | a badge, a chip, an input |
--radius-md | radius | 0.375rem | a button, a code block |
--radius-lg | radius | 0.5rem | a card, a panel |
--mj-motion-fast | motion | 150ms | a progress bar, a hover; anything a state change animates |
Projections
| projection | read by |
|---|---|
share/design/theme.css | both Tailwind builds: the site's and the Cockpit's |
share/design/surface.css | both Tailwind builds: the site's and the Cockpit's |
share/design/status.css | both Tailwind builds: the site's and the Cockpit's |
apps/majordomus-cli/src/web/tokens.css | the pages the executable renders itself, and the Swagger shell |
apps/majordomus-cli/src/design/tokens.yaml | this executable: the design capabilities and the Cockpit |
apps/majordomus-cli/src/cockpit/logo-mark.svg | the Cockpit's shell |
site/data/registry/design.json | the site's templates and the browser probes |
docs/generated/design.json | a reader |
docs/generated/design.yaml | a reader |
docs/generated/design.md | a reader |