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.
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.
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.
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.
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.
store.example/secret/harbour-watch/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.
| Word | Colour | It means |
|---|---|---|
| held, released, signed, permitted | teal | The affirmative fact. |
| waiting on you | amber | Nothing moves until you act. |
| refused | red | The authority said no. |
| the button, the link, the chosen chip | blue | The 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.
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
The answer
No, not as things stand
- 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
- 1group
not a direct member of
CN=watch,O=example; membership does not roll up - 2withheld a requirement you cannot see
- 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”.
| me | CN=ada,O=example | |
|---|---|---|
| listEntities | Permitted — me for listEntities | Not permitted — CN=ada,O=example for listEntities |
| clearance SECRET | Cleared — me for clearance SECRET | —Not answered — CN=ada,O=example for clearance SECRET |
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 — 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
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.
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.
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.
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.
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.
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.
store.example/secret/harbour-watch/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.
| Word | Colour | It means |
|---|---|---|
| held, released, signed, permitted | teal | The affirmative fact. |
| waiting on you | amber | Nothing moves until you act. |
| refused | red | The authority said no. |
| the button, the link, the chosen chip | blue | The 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.
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
The answer
No, not as things stand
- 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
- 1group
not a direct member of
CN=watch,O=example; membership does not roll up - 2withheld a requirement you cannot see
- 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”.
| me | CN=ada,O=example | |
|---|---|---|
| listEntities | Permitted — me for listEntities | Not permitted — CN=ada,O=example for listEntities |
| clearance SECRET | Cleared — me for clearance SECRET | —Not answered — CN=ada,O=example for clearance SECRET |
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 — 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
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.
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.