Design System Lab
The site's own design system, taken apart: the archetypes a tool page is built from, the severity colours, the band that holds a tool's answer, four recurring interface moves, and the fixed list of verdict words. 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 rows, so the scale does not jump as the numbers change. | 5 tools · log-parser, cvss, grep, keyboard-tester, regex-reference |
| 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 button always sits in the same place. | 6 tools · nmap, wget, ssh-config, cron, chmod, editor |
| Converter | Turns one representation into another and concludes nothing. | No answer band at all. A conversion has no verdict to report. | 8 tools · subnet, base, epoch, aspect-ratio, display, display-planner, text-width, contrast |
| Canvas | Colour is the subject rather than the emphasis. | The only archetype that uses colour as part of the content, and the page tells you that. | 2 tools · theme-builder, ascii-studio |
| Generator | Makes something new from entropy or from rules. | A strength reading, stated as a number rather than as praise. | 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 shows the band. The sentence beside it says the same thing in plain words. | /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 gets no band, because there is nothing to grade. | /learn/compression/ |
| nothing-yet | no band | Change one character in the second message. | Two identical messages flip zero bits, which measures nothing. | When nothing has been measured there is no band and no placeholder. The page shows a hint about what to do next. | /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 hand-typed count. A typed number can drift out of step with the list under it. |
| Counted disclosure | toolset-style-guide §7 | Reference sections start collapsed, and the heading says how many items are inside, even when there are none. | 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 on every row. |
| Button tiers | toolset-style-guide §6 | At most one primary button per view, and zero is allowed; disabled is dimmed, not dashed. | Five buttons shouting equally loudly, and a dashed border used for two different meanings. |
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.
Every number on this page is computed here, not copied from somewhere else. Every contrast ratio is worked out from the palette hexes the site actually ships. The arithmetic is done in whole numbers rather than floating point: a 256-entry integer table for the sRGB transform, luminance in units of 10-11, and ratios held as integers a hundred times their true size. You read the same figure on every machine, and it cannot drift from the stylesheet it grades. The verdict words come from the same code that defines them for the whole site, so retiring a word there removes it from this page in the same change.
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 themes. Reading the rest of your theme would mean sampling the live page, which this lab cannot do without leaving pure computation. It is on the list of things to add rather than faked.