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.
| 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 |
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.
| 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 |
| 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 |
| 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/ |
| 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. |
28 words in the register, and it is closed: a word that is not here may not be chipped.
| 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.