Skip to content

# Design System Lab

The site's own instrument panel, taken apart: archetypes, the severity scale, the answer band, the signature moves, and the closed verdict roster. Every figure below is computed from the tokens and rules pah.moi actually ships.

Rendered when the site was built, from the same core the interactive panels use. No JavaScript required.

## Archetypes

8 archetypes

The archetypes a tool is composed from
Archetype | What it does | Its tell | Where it is worn
--- | --- | --- | ---
Verdict | Grades what it was given and says so once, at the top. | The answer band, immediately after the input. | 8 tools · file-forensics, email-analyzer, security-headers, packet-analyzer, unicode, hasher, hashprint, binary-inspector
Readout | Reads a stream and reports what is in it, line by line. | A tally that keeps its empty cells, so the scale stays still. | 3 tools · log-parser, cvss, grep
Inspector | Opens one artifact and lays its parts out in order. | A ledger: keys in a right-aligned column, values in a left-aligned one. | 5 tools · jwt, certs, openssl, http, dig
Builder | Assembles a command or a pattern out of choices. | The output is the thing you copy, and the copy control has one x position. | 7 tools · regex, nmap, wget, ssh-config, cron, chmod, editor
Converter | Turns one representation into another and concludes nothing. | No answer band at all: a conversion is an outcome, not a judgement. | 8 tools · subnet, base, epoch, aspect-ratio, display, display-planner, text-width, contrast
Canvas | Colour is the subject rather than the emphasis. | The one archetype allowed to spend colour on content, and it says so. | 2 tools · theme-builder, ascii-studio
Generator | Makes something new from entropy or from rules. | A strength reading that is a measurement, never a compliment. | 2 tools · passwd, encoder
Gated (overlay) | Any of the seven, when what you paste is sensitive. | A consent gate before the instrument, and nothing leaves the tab either way. | worn by any of the seven

## Severity scale

6 tokens

WCAG 1.4.3 asks 4.50:1 for normal text and 1.4.6 asks 7.00:1. Every figure below is the token as text on that surface, because the scale is outlined and never filled.

Severity tokens on the three page surfaces, dark appearance
Token | Band | Hex | On root | On panel | On elevated | Clears AA
--- | --- | --- | --- | --- | --- | ---
--severity-none | None / informational | #bcc7d2 | 11.20:1 | 10.59:1 | 9.89:1 | yes
--severity-low | Low | #96cdf2 | 11.27:1 | 10.66:1 | 9.95:1 | yes
--severity-medium | Medium | #e6d179 | 12.59:1 | 11.91:1 | 11.12:1 | yes
--severity-high | High | #fbb69c | 11.23:1 | 10.62:1 | 9.92:1 | yes
--severity-critical | Critical | #fbabd4 | 10.87:1 | 10.28:1 | 9.60:1 | yes
--severity-pass | Pass (a verdict, not a band) | #94dcb2 | 12.03:1 | 11.37:1 | 10.62:1 | yes

Severity tokens on the three page surfaces, light appearance
Token | Band | Hex | On root | On panel | On elevated | Clears AA
--- | --- | --- | --- | --- | --- | ---
--severity-none | None / informational | #3f4a55 | 8.35:1 | 7.60:1 | 9.04:1 | yes
--severity-low | Low | #14527a | 7.70:1 | 7.01:1 | 8.34:1 | yes
--severity-medium | Medium | #6b4a06 | 7.43:1 | 6.77:1 | 8.05:1 | yes
--severity-high | High | #8f2e14 | 7.55:1 | 6.87:1 | 8.17:1 | yes
--severity-critical | Critical | #7d1a4d | 9.11:1 | 8.30:1 | 9.87:1 | yes
--severity-pass | Pass (a verdict, not a band) | #0e5934 | 7.76:1 | 7.07:1 | 8.41:1 | yes

## Answer band

5 states

Every state of the answer band, including the two that render nothing
State | Chip | Verdict sentence | Why | The rule it shows | Seen on
--- | --- | --- | --- | --- | ---
pass | [ PASS ] | Every key you typed matched the profile. | 8 of 8 correct, in order, with no retries. | A band follows a conclusion the page already drew. | /learn/keyboard/
partial | [ PARTIAL ] | Most of the sequence matched. | 6 of 8 correct: two keys were right but out of order. | The chip carries the band; the sentence carries the plain language. | /learn/keyboard/
fail | [ FAIL ] | The prediction did not hold. | You committed to ZF set; the step cleared it. | One vocabulary. No second display word above the chip. | /learn/cpu/
measurement | no band | 63 bits in, 72 bits out. | LZ77 grew this input, which is correct behaviour on 3 bytes. | A measurement is not a grade, so it gets no band at all. | /learn/compression/
nothing-yet | no band | Change one character in the second message. | Two identical messages flip zero bits, which measures nothing. | Nothing measured means no band and no placeholder: §10's hint instead. | /learn/avalanche/

## Signature moves

4 moves

The four moves that make a page recognisable
Move | Defined in | What it promises | What it prevents
--- | --- | --- | ---
Section rule | toolset-style-guide §2 | A region has a name you can land on with a heading key, and a count that was computed. | A typed count, which is a number that can disagree with the thing beneath it.
Counted disclosure | toolset-style-guide §7 | Reference material ships closed, and the summary says how much is inside, including zero. | Content deleted to buy density, and empty sections you can only find by opening them.
Ledger row | toolset-style-guide §3 | Keys sit muted in a right-aligned column so the values are what your eye lands on. | A key and its value competing for the same emphasis, twice per row, forever.
Button tiers | toolset-style-guide §6 | At most one primary button per view, and zero is allowed; disabled is dimmed, not dashed. | Five equally loud buttons, and a dashed border meaning two different things.

## Verdict roster

1 critical · 5 high · 6 medium · 1 low · 9 none · 6 pass

28 words in the register, and it is closed: a word that is not here may not be chipped.

The closed verdict register, read from the module that enforces it
Word | Chip | Tone
--- | --- | ---
NONE | [ NONE ] | its own band
LOW | [ LOW ] | its own band
MEDIUM | [ MEDIUM ] | its own band
HIGH | [ HIGH ] | its own band
CRITICAL | [ CRITICAL ] | its own band
PASS | [ PASS ] | pass
VALID | [ VALID ] | pass
STRONG | [ STRONG ] | pass
OK | [ OK ] | pass
FAIL | [ FAIL ] | high
MATCH | [ MATCH ] | pass
VERIFIED | [ VERIFIED ] | pass
MISMATCH | [ MISMATCH ] | high
INVALID | [ INVALID ] | high
DECODED | [ DECODED ] | none
PARTIAL | [ PARTIAL ] | medium
BEST GUESS | [ BEST GUESS ] | medium
FALLBACK | [ FALLBACK ] | medium
NO DECODE | [ NO DECODE ] | high
NO EVIDENCE | [ NO EVIDENCE ] | graded
WEAK | [ WEAK ] | graded
LIKELY | [ LIKELY ] | graded
DETECTED | [ DETECTED ] | graded
UNVERIFIED | [ UNVERIFIED ] | none
NOT MEASURED | [ NOT MEASURED ] | none
CAUTION | [ CAUTION ] | medium
WARN | [ WARN ] | medium
NOTE | [ NOTE ] | none

Both halves of the arithmetic on this page have a tool of their own: the Contrast Checker runs the same WCAG ratio over your two colours rather than the shipped tokens, and the Theme Builder composes the palettes whose severity scale this lab deliberately does not retune.

About this lab3 paragraphs

Five panels, in the order a page is built: the archetypes a tool is composed from, the severity scale with every ratio recomputed here, the answer band and the two states in which it correctly renders nothing, the four signature moves, and the closed verdict roster.

The numbers are arithmetic, not quotations. Contrast is computed in fixed point from the shipped palette hexes (a 256-entry integer table for the sRGB transform, luminance in units of 10-11, ratios as integers times 100), so the figure you read here is the same integer on every machine and cannot drift from the stylesheet it grades. The verdict words are read from the module that closes the register, so a word retired there leaves this page in the same commit.

What it does not do is read your current theme. The severity scale is deliberately not retuned per palette, so the two appearances below are the whole of it in all seventeen; sampling the live document for the other tokens is a browser capability rather than a pure one, and it is recorded as a deferred extra rather than faked.