# Design Language for archetypic.dev ## Aesthetics and Tone `archetypic.dev` is **a clattering wooden toy-typewriter that prints generative-art trading cards for software-engineering archetypes** — picture a Saturday-morning kids' science museum exhibit from 1979 that has been re-imagined for senior staff developers. The site is a single, full-bleed **playroom-floor masonry wall** of irregular orange-laminated cards, each card describing one *engineering archetype* (THE REFACTORER, THE YAK-SHAVER, THE PR-NIGHTMARE, THE PRINCIPAL-ENGINEER-ON-PARENTAL-LEAVE, THE DEVOPS-DRUID, THE NIGHT-OPS-RESPONDER, THE STAFF-ICONOCLAST, THE DOC-WRITER, THE CHAOS-MONKEY-WRANGLER, THE LEGACY-WHISPERER, THE PUNCHCARD-ROMANTIC, THE NOTEBOOK-EVANGELIST, THE BUS-FACTOR-OF-ONE, THE PLATFORM-GARDENER), and each card carries an entirely unique, mathematically-generated wave-form portrait drawn at page-load time from a tiny seeded PRNG. The mood sits at a precise tonal coordinate that the corpus has never visited: **playful but not childish, technical but not cold, generative but not robotic**. The whole page feels like *a developer-conference badge swap mixed with a bowl of sliced cantaloupe at 11am* — sun-warmed, citrus-bright, slightly sticky, slightly absurd, and unapologetically *fun to poke at*. It is not minimalist. It is not editorial. It is not corporate. It is **playroom-grade**, in the most respectful sense of the phrase: every interactive element is sized to be poked at with a finger, every hover plays a faint "boing", and every form-field that's filled out wrong shakes its little head like a cartoon hippopotamus. Inspirations, named explicitly so an implementer can't drift toward generic playful: - **Sesame Street's Number-Six animation** (the pinball-roll counting sequence) — orange-on-orange chase logic, drawn at 12fps. - **Hundertwasser's spiraling apartment block in Vienna** — no straight lines, no equal columns, every window a slightly different size. - **The Tonka-truck plastic-orange of late-70s American toys** — saturated, unembarrassed, faintly waxy. - **Mark Lombardi's hand-drawn conspiracy network maps** — looping connective curves between scattered nodes. - **Trader-card kayfabe** (Topps 1986 baseball cards) — front-of-card portrait, back-of-card stat block, a deliberate fold in the corner. - **The Glasgow Toy Theatre tradition** — paper proscenium, hand-cranked scenery, audible "whirr". The tone of the *copy* itself is **playful-deadpan**. It must read like a senior engineer telling a campfire story about their team's worst incident, then chuckling. No exclamation marks except at the very end of the punchline. No corporate hedging ("might possibly help your workflow"). Use second-person ("you wake at 3:17am because Grafana paged"), use specific weird detail (the kind that proves the writer was actually there: "the on-call laptop's `t` key sticks, you keep typing `ouch` instead of `touch`"), and finish each archetype's blurb with a one-line *aphorism* set in italics, e.g. *"every refactor is a love letter to the next person."* ## Layout Motifs and Structure The page is **one full-bleed playroom floor**, scrolled vertically, on which **fourteen archetype cards** are pinned in a **true masonry pack** — *not* a CSS Grid. This matters: masonry is at 5% in the corpus, broken-grid is at 10%, but a *pure column-pack masonry of variable-height cards* is essentially unrepresented. We commit to it fully. **Wall geometry:** - Outer page wrapper: `100vw × auto`, background `#FFE6C7` (cantaloupe-cream), with a faint repeating CSS-painted **wood-grain SVG** at 6% opacity to make it feel like a school-gym floor. - Inner masonry: `column-count: 4` on `≥1440px`, `column-count: 3` on `≥980px`, `column-count: 2` on `≥640px`, `column-count: 1` below. `column-gap: 28px`. Each card uses `break-inside: avoid; display: inline-block; width: 100%;` so the column-pack walks naturally and leaves the small organic gaps that masonry produces. **No `grid-template-rows`. No flex with equal-row hacks. Real masonry.** - Card heights are *deliberately uneven*, in a Fibonacci-ish ladder: `220px, 280px, 340px, 380px, 460px, 520px, 600px, 700px`, distributed pseudo-randomly across the fourteen cards via a build-time seeded shuffle so the same person sees the same wall twice (hash of the card index plus a per-page-load `--shuffle-seed`). - Cards rotate by tiny irregular amounts: `transform: rotate(var(--tilt))`, where `--tilt` is computed per card from the same seed and ranges `−2.4deg → +2.4deg`. *Never zero.* The wall must feel hand-pinned. On hover the card rotates to `0deg` over `220ms cubic-bezier(.34,1.56,.64,1)` (a gentle overshoot — the toy "boing"). **Card anatomy** (every card identical structurally, infinitely variable visually): 1. **Punched corner.** Top-left of every card has a 22px circular die-cut (a CSS `mask-image: radial-gradient(circle at 0 0, transparent 22px, black 22px)`) — this is the trader-card binder hole. 2. **Wave-form portrait field.** Top 55% of the card is a square-ish canvas containing the card's unique generative wave-form (described in §Imagery). Background color of this field is `#C24A1F` (the burnt-orange anchor); the wave is drawn in `#FFD7B0` (cream) on top with one accent stripe in `#3B2A1A` (cocoa). 3. **Brass-plate label.** Spanning the seam between portrait and back-of-card text, a horizontal pseudo-element styled to look like a screwed-on metal plate: `#F2A37C` background with two tiny `#3B2A1A` "screws" at left and right (CSS `radial-gradient`), the archetype name engraved in Commissioner 900, FLAR 80, tracking `−0.02em`, set in `#3B2A1A`. The plate has a `1px` inset shadow on top and a `1px` outset shadow on bottom to feel embossed. 4. **Stat-strip.** Three tiny rows directly under the brass plate: `XP_DAYS`, `INCIDENT_DENSITY`, `BUS_FACTOR`. Each value is a generated number (e.g. `XP_DAYS 3,927`, `INCIDENT_DENSITY 0.41 / wk`, `BUS_FACTOR 1.0`) rendered in Commissioner Mono-style tabular figures (Commissioner has tabular numerals via `font-variant-numeric: tabular-nums`). The number itself animates from 0 to its final value when the card scrolls into view — `counter-animate` is at 2% in the corpus; we use it. 5. **Aphorism block.** Bottom 22% of the card: the playful-deadpan blurb in Commissioner 400 italic at `15px / 1.45`, ending in the one-line aphorism on its own paragraph in Commissioner 600 italic at `17px / 1.3`. 6. **Folded corner.** Bottom-right has a 36px triangular fold using two stacked `linear-gradient` backgrounds — the front face is the card's burnt-orange, the underside is darker `#8E3815`. On hover, this corner *peels back* a few more pixels via a `clip-path` transition (260ms ease-out), revealing a tiny serial number (`#0007 / 0014`) in `#3B2A1A` Commissioner 700 caps — a satisfying micro-discovery the user finds by accident. **Macro-rhythm of the wall:** The masonry order is *not* alphabetical and *not* by archetype-importance. It is sorted by *hue rotation of the card portrait* so the wall reads, top-to-bottom, as a slow drift through the burnt-orange family — from the most yellow-leaning card (`hsl(28, 78%, 56%)`) at the top-left down to the most red-leaning (`hsl(8, 76%, 38%)`) at the bottom-right. This creates a soft diagonal warmth-gradient *over* the random masonry pack, so the eye registers order beneath chaos. (Frequency note: most warm-palette designs in the corpus deploy gradient as a single hero-background sweep; here gradient is dissolved into discrete card hues that *sum* to a gradient.) **Above-the-fold:** - A **fixed top bar 64px tall** in `#3B2A1A` cocoa, holding the wordmark `archetypic.dev` (Commissioner 900, FLAR 100, set in `#FFE6C7` cream) on the left, and a **wave-form pulse oscilloscope** on the right that breathes at 0.6Hz — a 240×40px SVG strip whose path-length oscillates between 90% and 110% via `stroke-dashoffset` animation. No nav links. No "Get Started" button. **No CTA.** The site does not sell, it presents. - Below the bar, before the masonry begins, a **single H1 line set in fluid Commissioner**: "*A field guide to fourteen people you have already met in standups.*" at `clamp(34px, 5.4vw, 78px)`, weight 400, FLAR 0, italic, color `#3B2A1A`, with the word "*standups*" replaced live by a small `` of a standing-up wave-form whose amplitude pulses gently. This single typographic move is the only "logo lockup" the site has. **Below-the-wall:** A short **colophon bench** at the bottom — a horizontal strip styled to look like a varnished oak gym-floor bench, 120px tall, holding three lines of small-cap Commissioner: the build hash, the seed used for that page-load's shuffle, and a "made with one HTML file" claim. No social icons. No newsletter. No footer-nav. ## Typography and Palette **Typography — single Google-Fonts family, used architecturally:** - **Wordmark, archetype names, brass-plate labels, stat-strip values — [Commissioner](https://fonts.google.com/specimen/Commissioner)** (variable, axes `wght 100→900`, `FLAR −50→100`, `VOLM −100→100`). Commissioner is the load-bearing voice of the entire site. Its rare presence in the corpus (5%) plus its availability of three live axes makes it the right one-family solution. We use: - **Wordmark**: `wght 900, FLAR 100, VOLM 60`, tracking `−0.02em`, size `clamp(28px, 2.4vw, 36px)`. - **H1 hero line**: `wght 400, FLAR 0, italic`, `clamp(34px, 5.4vw, 78px)`. - **Archetype names on brass plates**: `wght 900, FLAR 80, VOLM 0`, tracking `−0.02em`, ALL CAPS, size `clamp(18px, 1.5vw, 22px)`, color `#3B2A1A` engraved on `#F2A37C`. - **Stat-strip labels** (`XP_DAYS`, `INCIDENT_DENSITY`, `BUS_FACTOR`): `wght 700, FLAR 60`, tracking `+0.08em`, size `11px`, ALL CAPS, color `#8E3815`. - **Stat-strip values**: `wght 600`, `font-variant-numeric: tabular-nums`, size `22px`, color `#3B2A1A`. - **Aphorism block / blurb**: `wght 400, italic`, size `15px / 1.45`, color `#3B2A1A`. - **Aphorism punchline**: `wght 600, italic`, size `17px / 1.3`, color `#C24A1F`. - **Colophon bench**: `wght 500, FLAR −20`, size `12px`, ALL CAPS, tracking `+0.14em`, color `#FFE6C7` on `#3B2A1A`. - **Why Commissioner**: it's a humanist sans with a cursive flair (`FLAR`) and an optical sizing axis (`VOLM`) that lets the same family act as serious technical type *and* as a slightly cursive, slightly playful display face — exactly the playful/technical contradiction this design needs. **No second family. No mono fallback.** Tabular numerals are sufficient for the stat strip; a real mono would tip the design back toward the corpus's 94%-mono cliché. **Palette — burnt-orange family (rare in corpus at 2%), with a cantaloupe-cream ground and a cocoa anchor:** | Token | Hex | Role | |---|---|---| | `--cocoa` | `#3B2A1A` | Body text, top-bar, brass-plate engraving, anchor of all gravity | | `--burnt` | `#C24A1F` | Primary card background; the loud orange | | `--burnt-deep` | `#8E3815` | Folded-corner underside, hover state, stat-label small text | | `--peach` | `#F2A37C` | Brass-plate background, tertiary accents, soft punch | | `--cream` | `#FFE6C7` | Page background, top-bar wordmark, the cantaloupe wash | | `--cream-warm` | `#FFD7B0` | Wave-form portrait line color, headline highlight | | `--shadow` | `#5C2C0F` | All shadow tints (never plain black; always cocoa-warmed) | | `--mint` | `#A6D5B7` | The single, deliberate cool accent — used **only** for the success state of a working wave-form, **only** for the colophon's "made with one HTML file" check-glyph, and **only** for the validate-OK micro-state. Otherwise prohibited. | The mint accent is *one teaspoon of contrast in a soup of orange*. Its scarcity is structural: it lets the warm-family palette stay at 99% saturation without becoming monotonous, because the eye knows the mint exists and waits for it. (No design in the current corpus deploys a single-occurrence cool accent inside a warm-family palette in this disciplined a way.) Per-card hue distribution: each of the fourteen cards has its `--card-burnt` set from a `hsl(H, 76%, 47%)` formula where `H` is sampled along `8°→28°` in irregular but seeded steps. So no two cards share the same orange — and yet the wall reads as one warm field. ## Imagery and Motifs **Zero photography. Zero stock illustration. Zero icons-from-a-pack.** The frequency analysis shows photography at 92% of the corpus; this design opts out completely. Every visual element on `archetypic.dev` is generated at page-load time from a tiny seeded PRNG. Generative-art is at 5% in the corpus; we use it as the *sole* visual language. **Imagery family 1 — wave-form portraits (the hero of every card).** Each archetype card carries a unique 1:1 portrait field rendered in `` (or stacked `` paths — both supported, canvas preferred for crispness on retina). The generator works as follows: 1. Seed the PRNG from `hash(archetype.name + pageload_seed)` so each archetype has a distinct portrait *family* but a different exact form per page-load. 2. Compose **three superimposed wave-forms**, one per row of the portrait field, each a horizontal sine-with-noise: - Top wave: low-frequency, high-amplitude — the archetype's *temperament* (calm Sage = slow rolling sine; chaos-monkey = jagged spike-train). - Middle wave: mid-frequency, mid-amplitude — the archetype's *cadence* (PR-Nightmare wave is densely-packed crests; Doc-Writer wave is widely-spaced). - Bottom wave: high-frequency, low-amplitude noise — the *background hum* of their existence (Night-Ops wave has visible 3am dropouts; Refactorer wave has perfectly metronomic micro-vibrations). 3. Stroke each wave in `--cream-warm` over a `--card-burnt` fill, with one **accent stripe** in `--cocoa` placed where the three waves' phases coincide — a tiny "where it all clicks" event. 4. Above the wave field, place the archetype's **glyph** — a single irregular shape extracted from the wave geometry (e.g. the apex of the temperament wave punched out as a `` filled in `--cream-warm`). The glyph is shape, not iconography. It is *of* the wave, not *next to* it. Because the three waves are parameterized by archetype, the wall reads as a **collective electrocardiogram of an engineering team** — and because the seed shifts on each page-load, every visit is subtly different. This is the difference between *generative-as-decoration* (the corpus's 5%) and *generative-as-content* (this site). **Imagery family 2 — the wood-grain ground (CSS-painted SVG noise).** The page background is not a flat `#FFE6C7`. It is `#FFE6C7` plus a **`` of low-amplitude horizontal grain** turned into a `data-uri` and tiled at `background-repeat`. The grain rate is roughly `60px × 6px`, in `--shadow` at 6% opacity, with random `feTurbulence`-driven warps so the grain isn't a regular line pattern. This makes the cantaloupe-cream look like a varnished maple gym floor — and it gives the masonry wall a *physical surface* to be pinned against. **Imagery family 3 — connective curves (Lombardi conspiracy lines).** Behind the masonry pack, an `` layer at `z-index: 0` draws **three to five hand-curved Bézier paths** that loop between random pairs of cards, set in `--burnt-deep` at 18% opacity, `stroke-width: 1.4px`, `stroke-dasharray: 2 6`. These are the conspiracy lines connecting (e.g.) THE REFACTORER → THE LEGACY-WHISPERER → THE PR-NIGHTMARE, suggesting a private logic the visitor doesn't get to see in full. The lines redraw on resize. They never have arrowheads. They never have labels. They just *imply*. **Imagery family 4 — the oscilloscope strip in the top bar.** A single `` in `--cream` at `stroke-width: 2px`, breathing at 0.6Hz via `animate stroke-dashoffset`. It is the **same wave-form algorithm** as the cards, evaluated continuously across the bar's 240px width. So the top-bar oscilloscope is, mathematically, a *summary* of the wall it precedes — a tiny EKG of all fourteen archetypes averaged together. **Motifs — wave-forms, repeated at every scale (rare in corpus at 2%):** Wave-forms are not decoration. They are the site's organizing geometry. They appear: - As the portrait of every archetype (largest scale, ~280px tall). - As the top-bar oscilloscope (medium scale, 40px tall). - As the underline beneath every internal link (tiny scale, 6px tall, drawn via SVG `path-draw-svg` on hover — `path-draw-svg` is at 33% in the corpus; here it is repurposed as a wave, not a generic line). - As the **shake-error pattern** when an archetype card is "miscategorized" (described below) — the shake itself is a wave plotted on the time axis. - As the cursor trail on hover — a faint 6-frame wave that follows the cursor at 12fps for 240ms after each move, in `--cream-warm` at 30% opacity. **Motifs — the shake-error microinteraction (rare in corpus at 0%):** The site has a single playful conceit: at the bottom of the masonry wall, a tiny "**Sort by archetype**" widget offers four buttons (`TEMPERAMENT`, `CADENCE`, `HUM`, `CHAOS`). Clicking a button re-orders the masonry by that wave-property — *except* for one button per page-load (chosen at random), which is "the wrong button". When you press the wrong button, the entire masonry wall **shakes its head** like a cartoon hippopotamus — a 3-cycle horizontal wobble at `±6px` over `420ms` with a slightly damped sine envelope, accompanied by a soft 80ms "boing" using a tiny WebAudio oscillator (one A3 → A2 glissando, gain `0.05`, instantly killed). The corpus has zero shake-error implementations; this is the design's signature microinteraction. **No error message appears.** The shake is the message. Clicking again on a different button is allowed; the "wrong" button changes per page-load but never lies twice in a row. ## Prompts for Implementation Build `archetypic.dev` as **a single full-bleed playroom-floor masonry wall holding fourteen archetype trader-cards, each with a unique generative wave-form portrait**. Implement it as one `index.html` file with one `style.css` file and one `main.js` file. **No framework. No bundler. No npm.** Vanilla JS only. Total payload target: under 80KB excluding the Commissioner web font. Bias every implementation decision toward **playroom-grade tactility** and **mathematical-but-warm storytelling**. Specifically: - **Masonry must be true masonry.** Use `column-count` with `break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;` on every card. Do *not* simulate masonry with absolutely-positioned JS layout — that would betray the "pegboard wall" feeling. The slight visual oddness of column-packed masonry (cards reading top-to-bottom-then-rightward instead of left-to-right) is a *feature* — it makes the wall feel rotated 90° from a normal grid, more like reading a museum display than a magazine page. - **Per-card seed is set in JS at first paint**, not at SSR time. Each card's `--tilt`, `--card-burnt` hue, `--shuffle-position`, and three wave-form seeds are computed once on `DOMContentLoaded` and written as CSS custom properties on the card's root element. From then on the wall is static — no rerolling on scroll, no rerolling on hover. The same visit shows the same wall the entire session. - **Generative wave-form rendering** uses one shared `` per card, sized to its portrait field's `getBoundingClientRect()` and re-rendered only on resize (debounced 200ms). The renderer is one ~50-line function: `drawArchetypeWave(ctx, w, h, seed, params)` where `params` encodes temperament/cadence/hum amplitudes & frequencies for that archetype. Provide all fourteen `params` objects as a single inlined JSON literal at the top of `main.js` — it should be readable in ten seconds, like a cast list. - **Counter-animate the stat-strip** when the card crosses an `IntersectionObserver` threshold of 0.4. Animate from 0 to the final value over 1.2s using a quadratic ease-out, so the numbers *land* rather than ticking up linearly. Use `font-variant-numeric: tabular-nums` so the digits don't jitter. - **Hover behavior on a card**: the tilt resets to `0deg` with a `cubic-bezier(.34,1.56,.64,1)` overshoot (the toy "boing"), the folded corner peels open by 10 more pixels via `clip-path` transition, and a faint `box-shadow: 0 14px 28px -10px var(--shadow)` lifts the card 6px upward. *Don't* scale. *Don't* flip. *Don't* parallax-shift. Just tilt-zero and lift. Restraint is what keeps the wall feeling like real pinned cards rather than a JS-driven funhouse. - **The "wrong button" shake-error is mandatory.** Implementation: pick one of the four sort-buttons at random on `pageload` (store its index in a closure), and when clicked, run an animation on the masonry wrapper: ``` @keyframes shake-error-wave { 0% { transform: translateX(0); } 14% { transform: translateX(-6px); } 28% { transform: translateX( 5px); } 42% { transform: translateX(-4px); } 56% { transform: translateX( 3px); } 70% { transform: translateX(-2px); } 84% { transform: translateX( 1px); } 100% { transform: translateX(0); } } ``` applied for 420ms, paired with a tiny WebAudio "boing" (A3→A2 glissando, sine, gain 0.05, attack 5ms, release 80ms). On the second wrong-press in a row, the shake is *gentler* (amplitude halved) — the site is teaching, not scolding. - **Generative top-bar oscilloscope**: one continuous `` whose `d` attribute is regenerated every 1666ms (60bpm) by sampling the average of all fourteen archetype waves at 80 sample-points across the path's width. Animate `stroke-dashoffset` from `0 → totalLength` over the same 1666ms with a linear ease, so the line *redraws itself in time* — like an actual oscilloscope sweep. This is the only repeating animation on the page. - **Conspiracy curves** behind the wall: on `DOMContentLoaded`, pick five random pairs of cards, get their `getBoundingClientRect()` centers, and draw five SVG cubic Béziers between them with control points offset by `±120px` in random directions. Set `stroke: var(--burnt-deep); stroke-opacity: 0.18; stroke-dasharray: 2 6; fill: none;`. Redraw on `resize` (debounced 250ms). The lines must sit at `z-index: 0`, *behind* the masonry wrapper but *in front of* the wood-grain background. - **Cursor trail wave**: on `mousemove`, push the cursor `{x, y, t}` into a 6-slot ring buffer; render the buffer as a smoothed SVG polyline in `--cream-warm` at 30% opacity, with `stroke-width: 2px`, fading the tail by reducing each point's opacity by 16% per slot. Throttle to `requestAnimationFrame`. Disable on `pointer: coarse` media — touch users get no trail (their finger already is the trail). - **No CTAs.** No "Get Started", no "Join the Beta", no "Contact Us", no email-capture, no pricing tiers, no testimonials block, no stat-grids of "10,000 happy developers". The site presents the fourteen archetypes and stops. The folded-corner serial number (`#0007 / 0014`) is the *only* affordance hinting at "more" — and there is no more. There are exactly fourteen cards, and that is the entire site. - **No hero video, no parallax sections, no scroll-jacking.** Scroll is native. Scrollbar is visible. The wall is taller than the viewport on purpose (~3.4 viewport-heights on desktop), and the user's job is to walk it like a museum visitor. - **Storytelling is the function**, not a feature. Write each archetype's blurb as a 60–90 word in-the-trenches vignette in playful-deadpan. Then write the one-line aphorism. Then commit. Don't iterate-toward-corporate. Don't soften. The voice is what makes the site memorable; the design is the frame. - **The colophon bench** at the bottom carries three lines: 1. `BUILD #{git-sha-7}` in cream-on-cocoa Commissioner 500 small-caps. 2. `WALL SEED {pageload-seed-as-base36}` — a permalink-able seed so a visitor can share *their* version of the wall. 3. `MADE WITH ONE HTML FILE ✓` where the `✓` is the only mint-green pixel on the page outside of error-success states. **AVOID, explicitly:** - AVOID parallax-sections, scroll-triggered hero reveals, magnetic cursors, tilt-3d card hovers — the corpus is saturated with these (parallax 89%, scroll-triggered 64%, stagger 64%, tilt-3d 15%). Our hover is *one* tilt-zero plus *one* lift. Done. - AVOID terminal aesthetics, mono fonts, glitch-text. The corpus is at 94% mono. We are 0% mono. - AVOID photography, hero images, full-bleed video. We are 100% generated. - AVOID dashboard/sidebar layouts. We are one wall. - AVOID emoji, icon packs, illustration packs. Every glyph is a wave-extracted shape. - AVOID dark mode toggle, language switcher, cookie banner, newsletter modal. None of these exist on this site. - AVOID any straight border-radius hierarchy ("buttons are 6px, cards are 12px, sections are 24px"). All radii are derived from the card's wave-amplitude — slightly different per card — so the geometry feels hand-cut. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **playful**, layout = **masonry**, typography = **commissioner-versatile**, palette = **burnt-orange**, patterns = **shake-error**, imagery = **generative-art**, motifs = **wave-forms**, tone = **playful**. **Frequency-analysis context** (from `tools/design/frequency.sh`, 39 designs): - **shake-error** is at **0%** in the corpus. This site is the first explicit shake-error implementation — and we make it a *signature microinteraction* (the "wrong button" wall-wobble) rather than a form-validation afterthought, which is the standard usage. The shake is the message; no error text appears. - **burnt-orange palette** is at **2%** — extremely rare against the corpus's 97% warm-everything cliché, because we commit to a *tight* warm family (cocoa + burnt + peach + cream + cream-warm) rather than the typical "warm-gradient-everywhere" look. The single `--mint` accent, deployed exactly three places on the entire site, is the structural foil that prevents palette-fatigue. - **wave-forms motif** is at **2%** — and where it does appear elsewhere, it's typically as a decorative SVG divider. Here, wave-forms are the *organizing geometry* of every visual element, from the 280px-tall card portraits to the 6px hover-underlines to the `420ms` shake-error envelope itself. - **masonry layout** is at **5%** in the corpus, and even within that 5%, most implementations are flexbox-faked or grid-faked. We commit to actual `column-count` masonry, with deliberately Fibonacci-uneven card heights, which produces the genuine pegboard-wall feeling that "fake masonry" cannot. - **commissioner-versatile typography** is at **5%** — and uniquely here it is the *only* family on the page, used across six FLAR/VOLM combinations to act as both technical type and slightly-cursive playful display. No mono fallback, no second display family, no system-ui escape hatch. One axis-rich family, six voices. - **generative-art imagery** is at **5%** — and this site uses it as *content*, not decoration. Each card's wave-form encodes the archetype's temperament, cadence, and hum into a unique portrait sampled from a seeded PRNG. The wall as a whole becomes a *team electrocardiogram*, mathematically meaningful, not just procedurally pretty. - **playful aesthetic** is at **15%**, and **playful tone** is a sub-1% word in the corpus's tonal spread. Most "playful" sites in the corpus reach for memphis, dopamine, candy-bright, or pop-art tropes. We deliberately do not. Our playful is *senior-engineer-dad-joke playful*: sun-warmed, tactile, deadpan, and willing to be slightly absurd while remaining typographically disciplined. **Three-plus differentiators from every other site in the corpus:** 1. **Generative-art-as-content rather than generative-art-as-background.** Every wave-form portrait is a mathematical signature of an archetype's temperament/cadence/hum — clicking around the wall is *reading the team's vital signs*. No other site in the corpus uses generative art to encode meaning rather than ambient texture. 2. **The "wrong button" shake-error.** A single per-page-load button is wired to wobble the entire masonry wall like a hippo shaking its head, paired with an A3→A2 WebAudio glissando "boing". No error message ever appears. The shake is the entire UX of being wrong. This is shake-error promoted from form-validation utility to *playful-deadpan central conceit*. Zero corpus precedent. 3. **The single-mint-teaspoon discipline.** In a 99%-warm-orange palette, exactly one cool color (`#A6D5B7` mint) appears, and only in three places — the colophon's `✓`, the validate-OK micro-state, and the success "boing"-completion frame. No other corpus site practices this strict single-accent-occurrence palette discipline within an otherwise monochromatic warm field. 4. **Hue-sorted random masonry.** The fourteen cards' positions in the masonry pack are randomized per page-load, but their *hues* are sorted along an `8°→28°` arc of the burnt-orange family. The wall therefore looks chaotic up close (random tilt, random heights, random column-pack), and ordered from a distance (a soft warmth-gradient diagonal). No other corpus site overlays a hue-gradient on a randomized masonry pack. 5. **Commissioner as the only family, used across six FLAR/VOLM voices.** Most multi-mood sites in the corpus either pair a serif with a mono, or pair a display with a humanist, or use system-ui as a fallback. This site refuses every fallback and rides Commissioner's variable axes into wordmark, hero italic, brass-plate engraved caps, tabular-num stat readouts, italic body copy, and italic punchline-aphorism. One typeface, six personalities. 6. **Lombardi conspiracy curves under the wall.** Three-to-five faint dashed Béziers loop between random card pairs at `z-index: 0`, suggesting a hidden network of archetype-relationships (`THE REFACTORER → THE LEGACY-WHISPERER → THE PR-NIGHTMARE`). The lines never have labels, never have arrows, never explain themselves. No other corpus site deploys connective conspiracy-graph curves as a sub-rosa background motif. 7. **Fourteen cards, no more, no less.** The site is content-finite. The folded-corner reveals serial `#X / 0014`. There is no pagination, no "show more", no infinite scroll, no related-content rail. This finiteness, in a corpus where 92% of sites use photography (an inherently extensible asset class), is itself a differentiator. **Avoided patterns (per frequency analysis):** - Avoided: photography (92%), parallax (89%), centered + full-bleed (92%/87%), warm-gradient (89%), mono typography (94%), scroll-triggered (64%), stagger (64%), spring (43%), path-draw-svg as generic line (33%), magnetic cursor (20%), tilt-3d (15%), terminal aesthetic (23%), glassmorphism (33%), hand-drawn aesthetic (84%), vintage motifs (87%). - Each was considered and explicitly rejected in favor of a less-trodden choice that still serves the playful/masonry/burnt-orange/wave-form/generative seed combination.