# Design Language for mybadge.id ## Aesthetics and Tone mybadge.id is a **cutaway exploded-axonometric blueprint of a single digital credential** — imagine the technical illustration plate from a 1970s machinery manual, but the machine being diagrammed is one verifiable badge: its issuer, its recipient, its cryptographic seal, its revocation pin, its evidence trail, all floating apart in 30-degree isometric space, connected by thin call-out lines and numbered tags, hovering above a faint engineering-paper grid. The aesthetic is **isometric** in the strict draughting sense — every element is a true 2:1 axonometric solid with no perspective vanishing point, no foreshortening, the kind of projection used in patent drawings, LEGO instructions, and `procreate`-era technical art — fused with the calm, slightly bureaucratic confidence of **isometric technical docs**: monospace annotations, revision numbers, a legend in the corner, hairline leader lines. The tone is **professional** without being corporate — it is the tone of a *spec sheet that happens to be beautiful*: precise, legible, quietly proud of its own internal logic. Nothing glows. Nothing is glassy or frosted. The badge is rendered as a small machined object — a coin-die, a stamped metal token, a tooled component — and the whole site is the act of taking it apart on a clean drafting table to show you exactly how trust is assembled, layer by layer. Inspiration: Otl Aicher's pictogram plates, the IKEA assembly booklet, isometric SimCity tilesheets, the Voyager Golden Record diagram, and the dry elegance of a well-set BSI standards document. ## Layout Motifs and Structure The page rejects the 90%-prevalent card-grid and the 88%-prevalent full-bleed hero. Instead it is a **single vertical drafting table** — one continuous sheet of pale engineering paper that scrolls, with the credential-object pinned at a fixed isometric "workbench" zone in the center-right of the viewport while **annotation columns** slide past on the left. The structural metaphor is the **exploded assembly diagram**: as you scroll, the badge-object literally separates into its constituent isometric layers — top plate (the visual badge face) lifts up and away, revealing the metadata slab beneath, which lifts to reveal the signature lattice, which lifts to reveal the issuer keystone at the base. Each separated layer gets a **numbered call-out tag** (`①`, `②`, `③`…) with a thin leader line connecting tag → layer → annotation paragraph. Layout primitives: - **The drafting grid**: a non-printing 1cm engineering grid (very faint `#D8DCE0` lines on `#F2F0E9` paper) covers the entire background, with slightly bolder lines every 5cm — it never moves, establishing that everything sits on one continuous sheet. - **The workbench zone**: a fixed-position isometric "table surface" — a single 2:1 rhombus of slightly warmer paper with a subtle bevel — occupying roughly the right 45% of wide viewports. The credential-object lives here. On narrow viewports it docks to the top and the annotations stack below. - **The annotation rail**: a left column, max-width ~38ch, set in a humanist sans, holding the prose. Each block is preceded by its call-out number in monospace and a thin horizontal rule (the "section bar" of a spec sheet). - **The legend block**: a small fixed panel, bottom-left, like the title block of a technical drawing — contains "SHEET 1 OF 1 · mybadge.id · PROJECTION: ISOMETRIC 30° · DRAWN BY: —" and updates the visible-layer indicator as you scroll. - **The seam**: between workbench and rail runs a single hairline vertical rule with tick marks every 5cm — the binding edge of the sheet. No bento boxes. No diagonal sections. No stat grids. No hero-dominant splash. The whole page is one technical plate that disassembles itself. ## Typography and Palette **Fonts (Google Fonts only):** - **`Atkinson Hyperlegible`** — the prose voice of the annotation rail and all body copy. Chosen because it is the rare humanist sans engineered for unambiguous letterform distinction (the dotted-vs-undotted i/l, the open apertures, the slightly flared terminals) — it reads exactly like the caption text in a well-made technical manual: warm enough to be human, disciplined enough to never editorialize. Used at 16–18px, generous 1.65 line-height, normal weight for body, 600 for the call-out lead-ins. - **`Spline Sans Mono`** — every annotation, tag number, dimension line, revision stamp, legend field, and the leader-line labels. A geometric monospace with subtly humanist curves — it carries the "this is technical documentation" signal without the brittle terminal-emulator harshness of the 94%-saturated generic mono look. Used uppercase with +0.08em tracking for legend/stamp text; sentence case for inline annotations like `// see fig. 2`. - **`Fraunces` (variable, opsz + soft + wght axes)** — used *only* for the single wordmark "mybadge.id" rendered as if it were the engraved title-block heading of the drawing, at large optical size, weight ~350, italic off, slight `SOFT` axis to give it the cut-into-metal feel rather than printed-ink. One other use: the big numeral on each separated layer's face. Serif-revival is at 12% — using it as an *engraving* face, not an editorial-blog face, is the twist. **Palette — "engineering paper + machined token + ink":** - `#F2F0E9` — *sheet* — the warm off-white engineering paper; the dominant surface. - `#E7E4DA` — *workbench* — a half-tone warmer paper for the table-surface rhombus. - `#D8DCE0` — *grid* — cool grey hairline grid lines (slightly bolder `#C2C7CD` every 5cm). - `#1B2733` — *ink* — near-black blue-grey for all primary text, leader lines, and outline strokes. Everything drawn is *outlined* in this, never filled solid black. - `#2E5E8C` — *blueprint* — the one accent: a desaturated draughting blue used for active call-out lines, the currently-focused layer's outline, hyperlinks (underlined, no color change on visited), and dimension arrows. - `#B8762E` — *brass* — a single warm metal tone for the credential-object's top-plate face (the badge itself reads as stamped brass), and for the legend's title-block keyline. - `#7A8087` — *graphite* — mid-grey for secondary annotations, the non-active layers (shown semi-transparent), and the tick marks. - `#C9412E` — *revision red* — used with extreme restraint: only the "revocation pin" component and a single `REV. A` stamp. It is the one alarming color and it appears once. Gradients are essentially absent (gradient/warm palettes are at ~95–98% — pointedly avoided); the only gradient-like effect is the soft bevel shading on the isometric solids, done with two flat tones plus a thin highlight edge, never a smooth ramp. ## Imagery and Motifs **The credential-object (the single hero, redrawn as inline SVG, never raster, never photographic):** A small machined token rendered as a true 30° isometric stack of four plates, each ~1 isometric-unit thick, with outlined edges and two-tone bevel shading: 1. **Plate ① — THE FACE** — the visible badge: a brass-toned octagonal coin-die with a stamped pictogram at center (an abstract `key-through-ring` glyph, drawn in confident bezier strokes like an Aicher pictogram), a recipient-name engraved around the rim in Spline Sans Mono, and a tiny milled edge. 2. **Plate ② — THE SLAB** — the metadata layer: a flat translucent-paper slab etched with a tidy field list (`issued`, `issuer`, `expires`, `criteria`) rendered as monospace lines with leader ticks; corners notched like a punch-card. 3. **Plate ③ — THE LATTICE** — the signature layer: an isometric truss/lattice of thin members forming a honeycomb-ish mesh (a visual metaphor for the cryptographic hash chain) — drawn as pure outlined struts, with one node highlighted in blueprint blue. 4. **Plate ④ — THE KEYSTONE** — the issuer anchor: a heavier isometric block at the base, like a foundation stone, stamped with the issuer's mark and a small `REV. A` plate; from one corner protrudes the **revocation pin** — a single small red isometric peg that, when "pulled" (on a specific scroll position / interaction), makes the whole stack flash graphite and stamp `REVOKED` diagonally. This is the only dramatic moment. **Recurring motifs:** - **Call-out tags** — small circles/rhombi containing `①②③④`, always connected by a thin elbowed leader line (one right-angle bend, like a real annotation) to both the diagram layer and its prose. - **Dimension lines** — thin lines with arrowheads and a mono label, used decoratively to "measure" things that don't need measuring (`∅ trust`, `42mm of provenance`) — a dry visual joke that stays in-character. - **The non-printing grid** — omnipresent, never animated, the silent proof that everything is on one sheet. - **The title block** — bottom-left legend panel, always present, the drawing's signature. - **Tick marks** — 5cm ruler ticks along the binding seam and along one edge of the workbench rhombus. No photography (98% of the corpus uses it — this site uses none). No gradient mesh, no neon glow, no organic blobs, no glassmorphic cards, no bokeh. ## Prompts for Implementation Build mybadge.id as **one HTML page, one CSS file, one ES module** — no framework, no bundler, no build step, no Lottie, no WebGL, no canvas, no service worker. All visuals are **inline SVG** (the isometric object, the leader lines, the grid can be a CSS background or a tiled SVG). All motion is CSS transitions + a small `IntersectionObserver` / scroll-progress driver in the ES module. **Document structure:** ```

mybadge.id

an exploded view of one verifiable credential

①

The Face

...

②

The Slab

...

③

The Lattice

...

④

The Keystone & the Pin

...

...what a badge is, fully assembled, in your hands.

``` **The exploded-assembly scroll mechanic (the core experience):** - The `.workbench` is `position: sticky` (or fixed within a tall scroll container) so the credential-object stays in view across the whole scroll length. - Scroll progress 0→1 is mapped to an "exposition timeline". As progress passes each threshold, the corresponding `.plate` translates **up and along the isometric Y-axis** (`transform: translate(Xpx, -Ypx)` matching the 30° projection) and its outline switches from `graphite` (semi-transparent, `opacity: .35`) to `ink` + `blueprint`-blue highlight; the matching `.callout` in the rail fades/rises into focus; the leader line connecting them animates its `stroke-dashoffset` to "draw" itself; the legend's `#layerReadout` updates. - Plates that have already been "lifted" stay lifted and slightly faded, fanned out like a real exploded diagram — by the end all four float apart, fully separated, fully labeled. - Near the end, a dedicated scroll segment is "THE REVOCATION PIN": the small red peg slides out of the keystone; the whole stack desaturates to graphite for ~600ms; a `REVOKED` mono stamp rotates in diagonally at ~-22°, then the pin slides back, color returns, stamp fades — demonstrating that trust is *withdrawable*. This happens exactly once and is the only moment with the revision-red color and the only "dramatic" beat. - Final state: the object **re-assembles** in a smooth reverse — all plates settle back into the stamped token, leader lines retract, and the closing annotation reads as the last line of the spec. **Detail directives:** - Every drawn solid: outlined stroke in `#1B2733` at ~1.5px, two flat fill tones for top/side faces (lighter top, ~12% darker side), one 1px highlight edge on the top-left contour. No smooth gradients inside fills. - Leader lines: single right-angle bend ("elbow"), 1px, `graphite` when idle, `blueprint` when their layer is active, with a tiny filled-circle terminator at the layer end and the tag-circle at the prose end. - The grid background: CSS `repeating-linear-gradient` in two passes (1cm faint, 5cm bolder) or a tiled 100×100 SVG — must be pixel-crisp, never blurred, never parallaxed (it is the *sheet*; the sheet doesn't move relative to itself). - Links: `#2E5E8C`, underlined with `text-underline-offset: 3px`, no visited-state color change, on hover the underline becomes a double-rule (like a confirmed measurement). - Decorative dimension lines should carry deadpan mono labels — `∅ trust`, `provenance: 1:1`, `tolerance ± 0` — that reward close reading. - Respect `prefers-reduced-motion`: skip the lift animations and the revocation flash; instead render the object **already fully exploded and labeled** as a static technical plate from first paint, with the revocation pin shown half-pulled and a static, non-rotating `REVOKED` ghost stamp at low opacity. - AVOID entirely: any CTA button, sign-up field, pricing table, feature-comparison grid, testimonial carousel, logo wall, stat counters, chatbot, cookie banner, FAQ accordion, hamburger menu, sticky promo bar. There is no nav. The page does not sell — it *diagrams*. The single closing line is the only "message." ## Uniqueness Notes Deliberate departures from the corpus and from the seed's defaults: 1. **Isometric used as literal technical draughting, not as decorative 3D icon clutter.** Isometric is ~12% in the registry and almost always shows up as a tiled tray of cute isometric app-icons or a city-block illustration. Here it is a *true 30° axonometric exploded-assembly diagram of one object* — patent-drawing discipline, numbered call-outs, leader lines, a title block — the engineering plate, not the icon set. 2. **The hero is one machined token that disassembles on scroll into four labeled layers.** Against the 90%/88%/84% card-grid + full-bleed + centered template, this is a single sticky workbench object plus a scrolling annotation rail — an exploded view that explodes itself. No grid of cards, no hero splash, no sections-with-stats. 3. **A near-gradient-free, near-glow-free, photography-free palette of engineering paper + brass + ink.** Warm + gradient palettes saturate the corpus at ~95–98% and photography at 98%; this design uses flat two-tone bevel shading, hairline outlines, zero photography, and reserves its one bright color (`#C9412E` revision-red) for a single 600ms moment. 4. **`Atkinson Hyperlegible` + `Spline Sans Mono` + `Fraunces`-as-engraving** — humanist clarity for caption prose, a humanist (not terminal-harsh) monospace for all annotation, and a serif-revival face used strictly as a *cut-into-metal title-block heading*, not as the ubiquitous editorial-blog serif. 5. **The interaction is "watch trust get assembled," including its withdrawal** — the revocation-pin beat is a rare honest gesture: the page demonstrates that a credential can be revoked, in-fiction, as the climax — no other badge/credential design in the corpus dramatizes revocation. Chosen seed/style: **isometric technical docs** (planned-seed fallback chosen from `seeds.json`: "isometric technical docs" — derived from the `isometric` aesthetic, `modular-blocks`/`layered-depth` layout, `tech-mono` typography, `cool-grays` palette). Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (78%), photography imagery (98%), card-grid (90%), full-bleed (88%), centered (84%), warm palette (98%), gradient palette (95%), generic mono treatment (94% — softened via Spline Sans Mono's humanist curves), cursor-follow (89%), magnetic (80%), spring (85%), parallax (92% — the grid pointedly does NOT parallax).