The Register AuthBox's design system — every token and every component, in both themes

docs/plans/165 §1

The Register

AuthBox is a system of record for who may do what, and everything it draws is an entry in one. This page is the whole of the look: the tokens, the three faces, the spacing step, every piece of furniture a door composes from and the seven components — drawn twice, once on paper and once on the deep ground, from the same stylesheet the console, the object store, the portal and the front door's directory wear.

Rendered from internal/authboxkit — by make docs for the copy in the repository and the static tree, and on the spot by the console at /ui/docs/design-system. Nothing on this page is written by hand: a rule that changed in the sheet changed here.

Paper — the light theme

01 Tokens

Every custom property this theme declares, read out of the stylesheet itself. The same names are declared in the other theme; a name in one and not the other fails the kit's own test.

--bg#f7f4ee
--sf#fffdf8
--sf2#efe9dd
--ln#c7bda9
--ln2#e3dbcb
--tx#111c3a
--mu#495472
--fa#6b7490
--hd#0c3b70
--nv#0f3ac4
--nv2#0a2578
--ac#1746e3
--acfg#ffffff
--acb#dde5fb
--fr#0c6f66
--ag#9a6600
--st#c01d24
--frb#daeeeb
--agb#f6e9cf
--stb#f8dfdf
--tl#0c6f66
--tlb#daeeeb

The ground's two layers — --vig, a radial vignette toward the corners, and --grain, two crossed gradients at a 3 px period — are painted on this section and are why a panel sits on something rather than floating.

02 Type

Three faces, embedded under the OFL: Newsreader for a heading and a page's opening sentence, IBM Plex Sans for body and controls, IBM Plex Mono for anything a person copies. Every one names a fallback stack, so the page is right before they arrive.

Newsreader 600 · 20.5px — the page heading

Newsreader 400 · 14.5px — the sentence a front page opens with, at the measure a page of sentences is set to.

IBM Plex Sans 600 · 11px · the section label

IBM Plex Sans 400 · 13px — the body this whole product is set in, and the face every control takes.

IBM Plex Mono 400 · 11.5px — store.example/secret/harbour-watch/ · sha256:9f2c…41ab · authboxctl mission hold

03 Spacing

One step, five stops, and a page that uses a sixth is a page arguing with the grid.

--s1 4
--s2 8
--s3 12
--s4 16
--s6 24

04 The masthead, the profile and the status band

The masthead names the door and its sections; at its right end the PROFILE names the person the door is talking to, and the panel behind that name is where the certificate, the facts and the delegated chain live. It is the dropdown component with one more class, so a keyboard opens and closes it and no page serves script for it. There is no sign out in it: a certificate is the login, and the panel says so rather than offering a control that cannot work.

The store an object store, where the folder is the answer

And what a page OPENS with in the band's place: its own heading, the sentence under it, and — where the page is a view of marked data — THE MARKING OF THE PAGE ITSELF, in the open and never behind the menu. A person must be able to see what they are looking at without asking for it.

The store

Welcome back, Ada Harkness.

5 folders are open to your identity. A folder you cannot see is a mission you do not hold.

Marking of this page clearance:UNCLASSIFIED

The BAND is what is left of the strip a page used to open with, and it is a STATUS band now: a page with a status to state, which in this product is the store's refusal page and nothing else. Its cells are facts about the ANSWER — the address that was asked for, the code, the marking it travels under — and never about a person. Every other page opens with its own heading.

403 · AccessDenied

Forbidden

The door in front of this store refused this address for the certificate you are using.

You asked forstore.example/secret/harbour-watch/
Answer403 AccessDenied
This answer travels asclearance:UNCLASSIFIED

05 A numbered group of cards

Numbered sections are this system's habit, and a card lifts on hover by a hairline of accent rather than by a shadow.

06 Rows and the table

The five-column folder table, which stacks to two at phone width. Its header row is a row, so a narrow screen drops it rather than scrolling sideways.

A data table, named so a screen reader can list it
WordColourIt means
held, released, signed, permittedtealThe affirmative fact.
waiting on youamberNothing moves until you act.
refusedredThe authority said no.
the button, the link, the chosen chipblueThe action a person takes.

07 Chips and state words

A state is a WORD in a stamp with a coloured left edge — printed in black and white or read aloud, the page still says the same thing.

held waiting on you refused unknown

Level All Unclassified Secret

clearance:SECRET closed t1 t2 t3 t4

08 The form panel

One shape for an upload and for an authoring board: an accent hairline on top, a heading bar, the fields, and the one button that commits under a rule.

File a document

Into harbour-watch

Marking

09 The statement block, the answer, the hypothesis and the refusal

Bytes a person copies are set in the mono face behind an accent hairline — a quotation from a record, not a code sample. A refusal is the only red on any page. And the third thing a page of this product says: an ANSWER — a verdict, then the clauses behind it in the order they were checked, with a clause the reader may not see collapsed to one sentence whose POSITION is kept, so the count and the order of an answer stay honest while the name in it does not travel (docs/plans/170 §3, §4).

authboxctl mission hold hw/harbour-watch --for ada

sha256:9f2c41ab7d0e5583c1f6ae2b90d4471ca8e6f2b03d5197ee4c0ab7d21f3e6a54

The authority refused this request

Your clearance is UNCLASSIFIED and the folder is filed at SECRET. Nothing about the folder's contents is disclosed by that answer.

This deployment has no level order configured, so nothing is labelled.

The answer

No, not as things stand

Asked under a hypothesis, not a decision
as if also in
CN=watch,O=example
under
harbour-watch
through
CN=authboxproxy,O=example

Each line above was supplied with the question. The verdict below is about the deployment as those lines describe it, not as it stands.

Not permitted

  1. 1group not a direct member of CN=watch,O=example; membership does not roll up
  2. 2withheld a requirement you cannot see
  3. 3relay the subject satisfies this and a hop does not at hop CN=authboxproxy,O=example

The verdict grid

Combinations, one mark per cell and every cell a link to that pair’s whole answer. The only place in this product where an answer is a MARK and not a word, because sixty four state words is a wall of prose; the word travels with each mark out of sight, so a reader hears the verdict and the pair rather than “link”.

10 The eight components

Each is complete with no script at all. The portal's bundle adds a keyboard layer to two of them and the console's bundle to the tree; the store and the directory serve no script and draw them all.

Dialog

Release the mission

It will be held by Ada Harkness until 2026-10-01.

Release the mission — the no-script fallback

The same panel, opened in place instead of over the page. This is the shape the store's upload has always had.

Tabs

Two missions are held by you.

One request waits on an administrator.

Nothing has been refused this month.

Tabs that are pages

The same row, over links to other addresses rather than to panels on this one — for a family of pages that is one question asked three ways. A nav and not a tablist, because role=tab promises a panel in this document and these links replace the page.

Dropdown menu

Flash

Dismiss this notice

The mission was released to you.

Dismiss this notice

Your request is with the project's administrator.

Dismiss this notice

The authority refused the request.

Pagination

Tooltip

The store labels every answer at its The lowest level this store serves — what an answer about no object travels under., and a key is released by the KAS.

The tree, in two panes

Nested <details> with tree semantics: the browser gives the open, the close and the keyboard focus, the server marks the selected row with aria-current, and a branch past its page ends in an ordinary link. The console's bundle adds the arrow keys and turns that link into scrolling; nothing it adds is the only way to reach anything.

The tree

member · member of what holds it

Ada Harkness

person

clearanceSECRET
authorityhq

Open its own page — the explorer is navigation and never a second copy of a page.

11 The glyphs

Every flat line icon the set holds (glyphs.go), one stroke, no fill, and currentColor — so a glyph is the colour of the word beside it and turns with it on hover. Each is drawn once on a 20 box and served at TWO sizes, both shown here: 20 px beside a word, and 28 px at the head of a card, which is what the front door's tiles take (docs/plans/167 §2). There is no icon font in this product and there will not be one; these are written into the document, which is what lets the one page served to a caller holding nothing draw them under img-src 'self' with no second request. Every one sits beside a word that already says the thing, so all of them are aria-hidden.

applicationa service a browser opens
doora door that is not a web page
terminala host reached by a command
streama labelled stream a producer writes to
feeda published feed somebody subscribes to
consoleAuthBox's own console
storethe object store
foldera set of records held together
keya key, and the door that releases one
vaultwhere credentials are kept, and handed out
logina door you sign in at
claiman invitation, claimed once
badgewho somebody is, on the record
persona person, and the record that names them
compasswork done in the field
truckmoving things from one place to another
chartanalysis of what happened
clustera set of nodes decided together
deploymentone deployment, whole
fileone stored object, whatever is in it
outwardthis opens somewhere else
locka door that refused, and said no more
questionasking before a door has to answer
permitthe affirmative verdict, where a cell has no room for the word
denythe refusal, where a cell has no room for the word

12 Motion

One orchestrated arrival and nothing else: the groups, the cards and the rows above fade and rise on load, staggered 15 ms by their index, 175 ms each — a row of four is done at 220 ms. Hover and focus answer in 120 ms. A reader whose system asks for less motion gets none of it, and the front door's public directory never runs it at all.

Reload this page to watch it. If your system is set to reduce motion, nothing moved, and that is the correct behaviour rather than a broken page.

The deep ground — the dark theme

01 Tokens

Every custom property this theme declares, read out of the stylesheet itself. The same names are declared in the other theme; a name in one and not the other fails the kit's own test.

--bg#060c1c
--sf#0f1932
--sf2#182448
--ln#31457f
--ln2#212e58
--tx#e9efff
--mu#a1b2da
--fa#7183b0
--hd#8fb0ff
--nv#123fc0
--nv2#071a4d
--ac#5f8dff
--acfg#0a1633
--acb#17244f
--fr#49cfc4
--ag#f2af2e
--st#ff6b70
--frb#0c2f3c
--agb#2c2210
--stb#33161b
--tl#49cfc4
--tlb#0c2f3c

The ground's two layers — --vig, a radial vignette toward the corners, and --grain, two crossed gradients at a 3 px period — are painted on this section and are why a panel sits on something rather than floating.

02 Type

Three faces, embedded under the OFL: Newsreader for a heading and a page's opening sentence, IBM Plex Sans for body and controls, IBM Plex Mono for anything a person copies. Every one names a fallback stack, so the page is right before they arrive.

Newsreader 600 · 20.5px — the page heading

Newsreader 400 · 14.5px — the sentence a front page opens with, at the measure a page of sentences is set to.

IBM Plex Sans 600 · 11px · the section label

IBM Plex Sans 400 · 13px — the body this whole product is set in, and the face every control takes.

IBM Plex Mono 400 · 11.5px — store.example/secret/harbour-watch/ · sha256:9f2c…41ab · authboxctl mission hold

03 Spacing

One step, five stops, and a page that uses a sixth is a page arguing with the grid.

--s1 4
--s2 8
--s3 12
--s4 16
--s6 24

04 The masthead, the profile and the status band

The masthead names the door and its sections; at its right end the PROFILE names the person the door is talking to, and the panel behind that name is where the certificate, the facts and the delegated chain live. It is the dropdown component with one more class, so a keyboard opens and closes it and no page serves script for it. There is no sign out in it: a certificate is the login, and the panel says so rather than offering a control that cannot work.

The store an object store, where the folder is the answer

And what a page OPENS with in the band's place: its own heading, the sentence under it, and — where the page is a view of marked data — THE MARKING OF THE PAGE ITSELF, in the open and never behind the menu. A person must be able to see what they are looking at without asking for it.

The store

Welcome back, Ada Harkness.

5 folders are open to your identity. A folder you cannot see is a mission you do not hold.

Marking of this page clearance:UNCLASSIFIED

The BAND is what is left of the strip a page used to open with, and it is a STATUS band now: a page with a status to state, which in this product is the store's refusal page and nothing else. Its cells are facts about the ANSWER — the address that was asked for, the code, the marking it travels under — and never about a person. Every other page opens with its own heading.

403 · AccessDenied

Forbidden

The door in front of this store refused this address for the certificate you are using.

You asked forstore.example/secret/harbour-watch/
Answer403 AccessDenied
This answer travels asclearance:UNCLASSIFIED

05 A numbered group of cards

Numbered sections are this system's habit, and a card lifts on hover by a hairline of accent rather than by a shadow.

06 Rows and the table

The five-column folder table, which stacks to two at phone width. Its header row is a row, so a narrow screen drops it rather than scrolling sideways.

A data table, named so a screen reader can list it
WordColourIt means
held, released, signed, permittedtealThe affirmative fact.
waiting on youamberNothing moves until you act.
refusedredThe authority said no.
the button, the link, the chosen chipblueThe action a person takes.

07 Chips and state words

A state is a WORD in a stamp with a coloured left edge — printed in black and white or read aloud, the page still says the same thing.

held waiting on you refused unknown

Level All Unclassified Secret

clearance:SECRET closed t1 t2 t3 t4

08 The form panel

One shape for an upload and for an authoring board: an accent hairline on top, a heading bar, the fields, and the one button that commits under a rule.

File a document

Into harbour-watch

Marking

09 The statement block, the answer, the hypothesis and the refusal

Bytes a person copies are set in the mono face behind an accent hairline — a quotation from a record, not a code sample. A refusal is the only red on any page. And the third thing a page of this product says: an ANSWER — a verdict, then the clauses behind it in the order they were checked, with a clause the reader may not see collapsed to one sentence whose POSITION is kept, so the count and the order of an answer stay honest while the name in it does not travel (docs/plans/170 §3, §4).

authboxctl mission hold hw/harbour-watch --for ada

sha256:9f2c41ab7d0e5583c1f6ae2b90d4471ca8e6f2b03d5197ee4c0ab7d21f3e6a54

The authority refused this request

Your clearance is UNCLASSIFIED and the folder is filed at SECRET. Nothing about the folder's contents is disclosed by that answer.

This deployment has no level order configured, so nothing is labelled.

The answer

No, not as things stand

Asked under a hypothesis, not a decision
as if also in
CN=watch,O=example
under
harbour-watch
through
CN=authboxproxy,O=example

Each line above was supplied with the question. The verdict below is about the deployment as those lines describe it, not as it stands.

Not permitted

  1. 1group not a direct member of CN=watch,O=example; membership does not roll up
  2. 2withheld a requirement you cannot see
  3. 3relay the subject satisfies this and a hop does not at hop CN=authboxproxy,O=example

The verdict grid

Combinations, one mark per cell and every cell a link to that pair’s whole answer. The only place in this product where an answer is a MARK and not a word, because sixty four state words is a wall of prose; the word travels with each mark out of sight, so a reader hears the verdict and the pair rather than “link”.

10 The eight components

Each is complete with no script at all. The portal's bundle adds a keyboard layer to two of them and the console's bundle to the tree; the store and the directory serve no script and draw them all.

Dialog

Release the mission

It will be held by Ada Harkness until 2026-10-01.

Release the mission — the no-script fallback

The same panel, opened in place instead of over the page. This is the shape the store's upload has always had.

Tabs

Two missions are held by you.

One request waits on an administrator.

Nothing has been refused this month.

Tabs that are pages

The same row, over links to other addresses rather than to panels on this one — for a family of pages that is one question asked three ways. A nav and not a tablist, because role=tab promises a panel in this document and these links replace the page.

Dropdown menu

Flash

Dismiss this notice

The mission was released to you.

Dismiss this notice

Your request is with the project's administrator.

Dismiss this notice

The authority refused the request.

Pagination

Tooltip

The store labels every answer at its The lowest level this store serves — what an answer about no object travels under., and a key is released by the KAS.

The tree, in two panes

Nested <details> with tree semantics: the browser gives the open, the close and the keyboard focus, the server marks the selected row with aria-current, and a branch past its page ends in an ordinary link. The console's bundle adds the arrow keys and turns that link into scrolling; nothing it adds is the only way to reach anything.

The tree

member · member of what holds it

Ada Harkness

person

clearanceSECRET
authorityhq

Open its own page — the explorer is navigation and never a second copy of a page.

11 The glyphs

Every flat line icon the set holds (glyphs.go), one stroke, no fill, and currentColor — so a glyph is the colour of the word beside it and turns with it on hover. Each is drawn once on a 20 box and served at TWO sizes, both shown here: 20 px beside a word, and 28 px at the head of a card, which is what the front door's tiles take (docs/plans/167 §2). There is no icon font in this product and there will not be one; these are written into the document, which is what lets the one page served to a caller holding nothing draw them under img-src 'self' with no second request. Every one sits beside a word that already says the thing, so all of them are aria-hidden.

applicationa service a browser opens
doora door that is not a web page
terminala host reached by a command
streama labelled stream a producer writes to
feeda published feed somebody subscribes to
consoleAuthBox's own console
storethe object store
foldera set of records held together
keya key, and the door that releases one
vaultwhere credentials are kept, and handed out
logina door you sign in at
claiman invitation, claimed once
badgewho somebody is, on the record
persona person, and the record that names them
compasswork done in the field
truckmoving things from one place to another
chartanalysis of what happened
clustera set of nodes decided together
deploymentone deployment, whole
fileone stored object, whatever is in it
outwardthis opens somewhere else
locka door that refused, and said no more
questionasking before a door has to answer
permitthe affirmative verdict, where a cell has no room for the word
denythe refusal, where a cell has no room for the word

12 Motion

One orchestrated arrival and nothing else: the groups, the cards and the rows above fade and rise on load, staggered 15 ms by their index, 175 ms each — a row of four is done at 220 ms. Hover and focus answer in 120 ms. A reader whose system asks for less motion gets none of it, and the front door's public directory never runs it at all.

Reload this page to watch it. If your system is set to reduce motion, nothing moved, and that is the correct behaviour rather than a broken page.