# Design Language for SocialDebug.Org ## Aesthetics and Tone SocialDebug.Org is **the field office of a fictional Werkbund Society for the Inspection of Social Systems, founded in Dessau in 1926 and reopened in 2026 as a registered .Org**. The conceit: a small, solemn, geometrically severe nonprofit that publishes monographs about *social bugs* — the unintended emergent behaviors of human institutions — using the visual rigor of late-period Bauhaus, the geometric purity of Futura's drafting compass, and a deep forest-green palette borrowed from forester's chalk and cartographer's contour ink. The mood is **authoritative** in the Werkbund sense: *the institution speaks; it does not entertain*. Pages do not greet you, do not offer testimonials, do not flatter the reader with hero CTAs. They issue **bulletins** the way a midcentury Swiss public-health office issued bulletins — calmly, in straight lines, in two colors and a half-tone of cream, with a single circle stamped in red lake to mark the priority of the case. The site reads like a **technical manual for civic life**. The "debug" is not playful, not tech-bro, not glitchy — it is **serious civic forensics**: the patient diagnostic stance of someone who has watched a society misallocate trust for forty years and has, finally, with some weariness, written the manual for finding the fault. The Bauhaus heritage is honored but not pastiched: the canonical primary triad (red square / yellow circle / blue triangle) is **deliberately refused** — replaced by a forest-green vocabulary that says *we are a civic body, not a design exercise*. The reader leaves the site with the same posture they would leave a long monograph at the Deutsche Werkbund-Archiv: quieter, slower-blinking, mildly chastened, and carrying a sense that *the system has parts and the parts can be named*. Where the sibling LegalDebug.com is a celestial dopamine observatory and the wider corpus reaches reflexively for warm sunset palettes, SocialDebug.Org commits to **cool, exacting, evergreen authority** — the color of a forester's wool jacket in November, the color of Eames-era technical chalk on a green slate board, the color of the felt under a microscope at a 1962 sociology faculty. ## Layout Motifs and Structure The structure is **minimal-navigation taken to its logical Werkbund extreme**: the page has **no header, no menu bar, no breadcrumbs, no skip-link, no hamburger, no footer-with-sitemap, no "back to top," no logo-link in the corner.** The single navigational artifact is a **42mm circular brass-engraved priority seal** rendered in inline SVG, stamped in the upper-right margin of every plate, on which the current bulletin number rotates slowly (one full revolution per 96 seconds) in Futura small caps: **CASE №01 // CASE №02 // … // CASE №07**. The seal is the entire navigation system. To advance, the reader scrolls. To jump, the reader clicks the rotating seal — it bookmarks the current bulletin and jumps to the next, with a single 480ms staggered cross-fade that obeys the project's stagger discipline. There are no other clickable navigation elements anywhere in the document. Beneath this navigation austerity, the structural commitment is **layered-depth**: the site is built as **seven translucent inspection plates stacked on the z-axis like a forester's overlay map**. Each plate occupies **100vh minimum (140vh for the central diagnostic plates)** and is composed against the same forest-green base, with successive plates appearing to lift toward the reader through a parallax-driven stagger. The depth is not decorative — it is the **content metaphor**. The reader is reading society at *seven inspection altitudes*, from the macro (Plate 1: "the institution at distance") to the micro (Plate 7: "the single misallocated trust"). Each plate is a discrete diagnostic specimen on its own translucent vellum, casting a soft drop-shadow onto the plate beneath it (`box-shadow: 0 -1px 0 #2D4A3A inset, 0 28px 56px -32px rgba(13, 28, 22, 0.32)`). **The grid is a strict Bauhaus 12-column field at 14px gutter** — but the gutter is the load-bearing visual element, not the columns. Empty gutter strips run the full height of the page in `#0F2620` (Werkbund Slate), 1px wide, every fourth column, like the ruling lines of an old ledger. Content sits on this ruled field with **deliberate Werkbund off-axis placement**: a paragraph that ends at column 7 leaves columns 8–12 entirely empty; a marginal note at column 11 leaves columns 1–10 empty. The negative space is the institution. **The stagger discipline governs every entrance.** No element appears at the same moment as another — every glyph, every rule line, every diagram primitive enters with a `--stagger-step: 38ms` IntersectionObserver-triggered cascade. A plate of 28 elements takes 1064ms to fully assemble. The cascade is **ordered top-to-bottom, left-to-right, in reading order** — the institution does not surprise the reader; it composes itself in front of them. There is **no hero.** Plate 1 opens with a **single 12mm forest-green Futura capital S** in column 2, row 4, against an otherwise empty page. The S enters with a 480ms stroke-draw, then waits 1.4 seconds, then reveals the rest of the bulletin masthead beneath it. There is no fold; there is no "above-the-fold." The entire site is **one long bound monograph**, and the reader is expected to descend through it the way one descends through a Werkbund publication: page after page, with patience. ## Typography and Palette **Typography (Google Fonts only — every face confirmed available):** - **Display / masthead face:** **Jost** (variable, weights 100–900). Jost is the **best-available Futura geometric** on Google Fonts — Owen Earl's open-source homage to Paul Renner's 1927 Futura, with the same single-story `a`, the same compass-perfect `o`, the same austere upward terminal on the lowercase `t`. Used at `clamp(72px, 11vw, 168px)`, weight 300, tracking -0.015em, for plate titles like **"CASE №01 // THE INSTITUTION AT DISTANCE."** Jost carries the project's geometric Bauhaus authority without veering into the warmer humanism that would be wrong here. Weight is held at 300 — *never* 700 or 900. The institution does not shout; it states. - **Subhead and small-caps face:** **Jost** at weight 500, `font-variant: small-caps`, tracking +0.18em, used for bulletin metadata (`BULLETIN ISSUED 09.MAY.2026 // SOCIETY FOR THE INSPECTION OF SOCIAL SYSTEMS // DESSAU OFFICE`). The +0.18em tracking is a deliberate Werkbund-publication tic — it forces the eye to slow, the way a 1927 wall placard slowed a passing stranger. - **Body / monograph face:** **Cormorant Garamond** (variable, weight 300, 400, 500, italic 300, 500). Cormorant Garamond is the calm, slightly austere serif companion to Jost — chosen because Renner himself used Garamond on the title pages of his books even while he was drawing Futura for the body. Used at 18px, weight 380, line-height 1.62, for all monograph prose. The combination of geometric Futura display against humanist Garamond body is **the Werkbund's own typographic posture**: machine for the title, hand for the argument. - **Numerical / diagrammatic face:** **JetBrains Mono** at weight 400, used **only** for case numbers, footnote markers, plate coordinates, and the small inline tags (`[BUG-2.7c]`, `[OBS-04]`) that mark the diagnostic specimens. Mono is restricted to the diagnostic apparatus — never used for prose. **Palette — forest-green axis with three supporting tones and a single restricted accent:** - **#0F2620 — Werkbund Slate** (the deep ground; near-black with a forest cast; used for the page base, ruling lines, and all structural rules) - **#1F3D2E — Forester Green** (the dominant body color of all primary text against cream; the color of a forester's wool jacket in November) - **#2D5A3E — Cartographer Green** (mid-tone diagrammatic ink; used for inline diagrams, contour lines, and plate borders) - **#5A8A6E — Slate Moss** (the softer companion green; used for secondary marginalia, annotations, and the staggered halftone fields beneath each plate) - **#A8B89C — Lichen Pale** (the lightest green; near-cream with a green cast; used as the translucent vellum tint of the upper inspection plates) - **#F2EDE0 — Bulletin Cream** (the paper itself; an old Werkbund publication cream, slightly warmer than pure off-white, with a perceptible aged-cellulose tint) - **#3A2820 — Ledger Brown** (a cool dark brown used *only* for the engraved seal stroke and for footnote rules — never for body text) - **#B23A2A — Lake Red** (the **single restricted accent**; appears exactly **three times** across the entire document: once as the priority dot inside the rotating seal, once as the underline-draw of the publication date, once as the final period of the closing sentence. Three appearances. No more. Lake red is treated as scarce ink the way the Werkbund treated red lake on title pages: scarce, exact, ceremonial.) The palette intentionally sits at the **2% prevalence** edge of the corpus — forest-green is used in only one other CMassC site, and that use is incidental. Here it is the **structural commitment**. ## Imagery and Motifs **There is no photography in the conventional sense, and no stock illustration.** The visual world is built from a **mixed-media discipline** — every plate composites four hand-built primitive media into a single still composition, exactly as a 1927 Werkbund poster composited drafted lines, halftone photo fragments, and stamped seals. **1. Drafted geometric primitives (the Bauhaus apparatus, recolored).** Every plate carries one or more of the Bauhaus triad — square, circle, triangle — but **recolored into the forest-green vocabulary** and **redefined as diagnostic instruments**, not decorative shapes. The square is the *frame of inspection* (rendered as a hairline stroke in `#2D5A3E`, never filled, always 1px). The circle is the *priority seal* (filled `#1F3D2E`, used exactly seven times across the seven plates, once per plate). The triangle is the *diagnostic pointer* (filled `#5A8A6E`, used as a marginal indicator at the start of every footnote). The triad is **never grouped** — never assembled into a Bauhaus tableau. Each shape appears alone, doing diagnostic work, the way a forester would use a single instrument at a time. **2. Halftone photo fragments rendered as forest-green duotone.** Each plate contains one (and only one) **halftone-screened photographic fragment** — a hand of a worker, a bolted railroad tie, a rotary telephone, an empty lecture-hall chair, a damaged ballot, a forester's compass, a single pressed leaf — chosen as a **physical-world specimen of the social bug under inspection on that plate**. Each photo is processed into a strict forest-green duotone (`#0F2620` for shadow, `#A8B89C` for highlight, mid-tones interpolated linearly via inline SVG ``) and overlaid with a 4lpi halftone screen rendered as an SVG pattern. The halftone dots are **never decorative** — they carry the historical weight of mid-century printed bulletins. No third color, no gradient mesh, no Instagram filter. Twelve photographs total across the entire site. No more. **3. Cartographer's contour annotations.** Each plate's translucent vellum carries **hand-drawn contour lines** — the kind a forester chalks across a topographic map — rendered as inline SVG paths in `#2D5A3E` at 0.4px stroke. The contours describe not actual terrain but **the topology of the social bug under inspection**: the contours of trust degradation, the contours of misinformation propagation, the contours of institutional decay. They are **legible as diagrams** but **decorative as composition** — Werkbund's exact instruction: *form follows function, but the form is also beautiful*. **4. Rubberstamp marks (used sparingly).** Each plate carries **exactly one rubberstamp mark** — a slightly imperfect, slightly rotated, slightly off-color (Ledger Brown `#3A2820` at 78% opacity) ink stamp bearing the institution's seal: a circle with the words **WERKBUND // SOCIAL DEBUG // DESSAU // 1926 — 2026** rotating around the circumference, and a single forest-green dot at the center. The stamp is rendered as inline SVG with a `feTurbulence`-driven roughness filter to give it the imperfect-paper-grain feel of a real stamp pressed on cream cotton paper. The stamp is **the only "decoration" the institution permits itself**. **Strictly forbidden imagery, by Werkbund decree:** - No icons, ever (the institution does not communicate through pictograms) - No emoji, ever - No 3D renders, no gradient meshes, no glassmorphic blur - No cursor-follow effects, no parallax sparkle, no neon glow - No stock illustration of "diverse teams," "abstract cityscapes," or "data flows" - No isometric anything ## Prompts for Implementation Build SocialDebug.Org as **a single immersive HTML document — a bound monograph in seven plates** — with no SPA, no routing, no second screen, no modal dialog, no popup of any kind. The reader's experience should be that of being handed a slim, soft-cover Werkbund pamphlet by a serious librarian, told *"this is the entire publication,"* and left alone in a forest-green reading carrel for nine minutes. **Mandatory storytelling sequence — seven plates, in order, no skipping (the rotating seal jumps the reader plate-by-plate; it never jumps multiple plates at once):** 1. **Plate 1 — THE INSTITUTION AT DISTANCE (0–110vh).** Page loads on `#F2EDE0` (Bulletin Cream). After 380ms, a single forest-green Futura `S` strokes onto column 2, row 4 — 12mm tall, the institution announcing itself. 1.4s later, the bulletin masthead assembles top-down with the 38ms stagger: `WERKBUND SOCIETY FOR THE INSPECTION OF SOCIAL SYSTEMS // DESSAU OFFICE // BULLETIN №01 // 09.MAY.2026`. The plate's halftone photographic specimen is **a wide-angle empty lecture hall**, duotoned forest-green, occupying columns 7–12, rows 6–10. A single hairline square frames it. Below the photo, in Cormorant 18/30, the opening monograph paragraph begins: *"At sufficient distance, every institution looks calm. The bug is not visible from this altitude. We descend."* 2. **Plate 2 — THE COMMITTEE ROOM (110vh–220vh).** The cartographer's contour lines now appear as the contours of *committee-table seating order*, drawn as a topographic plan in `#2D5A3E`. The photographic specimen is **a single wooden chair, empty**, halftoned. The marginal triangle pointer marks footnote 1: *"Note: the empty chair is the chair of the citizen who did not attend. We will return to this chair in Plate 7."* The Werkbund stamp appears in the lower-right margin, slightly rotated 4° clockwise. 3. **Plate 3 — THE LEDGER (220vh–360vh, 140vh tall).** The plate's vellum is tinted `#A8B89C` (Lichen Pale) at 22% opacity — the inspection has descended one altitude and the page is now slightly warmer-green. The diagram is a **forester's contour rendering of a municipal ledger**, with each contour line representing a degree of trust degradation between two parties. The photographic specimen is **a hand entering a number into a paper ledger**. The `Lake Red` accent makes its **first appearance** as a 6mm dot at the top of the ledger contour, indicating "priority case." This is the only red on the plate. 4. **Plate 4 — THE INTERVIEW (360vh–500vh, 140vh tall).** The plate is structured as a Werkbund-style two-column transcript, but the right column is a vertical Cormorant Garamond italic Q&A in Forester Green, while the left column is a Jost weight-300 timestamp ribbon. The photographic specimen is **a rotary telephone receiver, halftoned**. Footnote 2 begins: *"The respondent paused for 14 seconds before answering. The pause is the data."* 5. **Plate 5 — THE ENUMERATION (500vh–620vh).** A Werkbund vertical enumeration: seven items, each numbered in JetBrains Mono `[01.]` through `[07.]`, each set against the strict 12-column grid, each preceded by a tiny hairline square (the diagnostic frame). The items are the **seven categories of social bug** — *misallocated trust, asymmetric information, residual prejudice, eroded ritual, captured institution, abandoned commons, foreclosed future*. Each item enters with the 38ms stagger; the full enumeration takes 266ms to fully resolve. 6. **Plate 6 — THE FAULT TRACE (620vh–760vh, 140vh tall).** The deepest inspection altitude. The vellum is now tinted `#5A8A6E` (Slate Moss) at 28% opacity — the page has gone properly forest-green, the institution is at maximum diagnostic depth. A **fault-trace diagram** runs vertically down column 6: a single hairline path that branches and re-branches, with each branch annotated by a Mono tag in `#1F3D2E`. The photographic specimen is **a single damaged ballot**, halftoned. The `Lake Red` accent makes its **second appearance** as a 1px underline beneath the publication date in the masthead margin. 7. **Plate 7 — THE SINGLE MISALLOCATED TRUST (760vh to end).** The closing plate. The vellum returns to `#F2EDE0` Bulletin Cream — the institution has come back up to the cream surface, but the reader is changed. The diagram is reduced to a single circle in `#1F3D2E`, 38mm in diameter, alone in the center of the plate, with one Cormorant italic line beneath it: *"This is the chair of the citizen who did not attend."* (The chair from Plate 2.) The closing paragraph is one sentence: *"We have descended through seven altitudes and arrived at one empty chair. The bug, like all bugs, was a person. Bulletin №01 closes here."* — and the **final period of that final sentence is rendered in `Lake Red`**, a 4mm full-stop, the third and last appearance of red in the entire document. **Animation discipline (strict):** - Every entrance uses `--stagger-step: 38ms`, IntersectionObserver-triggered, ordered top-to-bottom, left-to-right. - Every glyph reveal is a 480ms `clip-path: inset(0 100% 0 0)` left-to-right wipe — never a fade, never a slide. - Every line drawing is an SVG `stroke-dashoffset` animation at 1.6s ease-in-out — drafted, not flicked. - Every photograph reveals via a 720ms vertical band wipe (`clip-path: inset(100% 0 0 0)` top-to-bottom), evoking a Werkbund letterpress passing under the platen. - The rotating seal in the upper-right is the **only continuous animation on the page** — 96-second linear infinite rotation, never paused, the slow patient work of the institution. - `prefers-reduced-motion: reduce` collapses every animation to `duration: 0.01s` and locks the seal upright; the document remains fully legible without any motion. **AVOID, by Werkbund Society decree:** - Hero sections with CTAs (the institution does not solicit) - Pricing tables, plans, tiers (the institution does not sell) - Stat grids, "trusted by" rows, testimonial carousels - Footers crowded with sitemap links (the seal is the entire navigation) - Cookie banners, modal popups, newsletter signups (no friction, no interruption) - Hover-lift cards, magnetic cursors, ripple effects, neon glow, parallax sparkle - Decorative emoji, decorative icons, decorative gradients - Any use of red outside the three sanctioned appearances **Required, by Werkbund Society decree:** - The 12-column 14px-gutter grid must be visually present on the page (the gutter rules are content, not styling) - Every plate must occupy at least 100vh; central plates 140vh - The rotating seal must always be visible in the upper-right - The stagger discipline must govern every entrance, without exception - The three Lake Red accents must appear exactly three times — not two, not four - The closing period must be rendered in Lake Red as the final mark on the page ## Uniqueness Notes Chosen seed: **aesthetic: bauhaus, layout: minimal-navigation, typography: futura-geometric, palette: forest-green, patterns: stagger, imagery: mixed-media, motifs: layered-depth, tone: authoritative**. This design's **eight differentiators**, each chosen explicitly against the corpus frequency analysis and against the sibling LegalDebug.com: 1. **Bauhaus without the canonical RGB triad — and without the warm sunset workaround.** The 7% of CMassC sites that touch Bauhaus reach reflexively for either the canonical primary triad or, in the case of the only existing bauhaus design (PPUZZL.bar), recolor the triad into a Persian-sunset palette. SocialDebug.Org refuses **both** moves. The triad is recolored into a **forest-green civic palette**, and the shapes are **never grouped into a tableau** — they are deployed as **isolated diagnostic instruments**, one shape per inspection function. This is Bauhaus as a *forensic instrument set*, not as a poster composition. 2. **Forest-green palette at 2% prevalence, executed as the structural commitment, not an accent.** Forest-green appears in only one other CMassC site as a 2% trace; here it is the **load-bearing color system**, with seven distinct forest-green tones forming the entire chromatic field, plus a single ceremonial Lake Red accent restricted to exactly three appearances. The corpus's 90% gradient/warm palette tendency is refused entirely. 3. **Minimal-navigation reduced to a single rotating brass seal.** The corpus's minimal-navigation precedent (SengGack.xyz) reduces nav to a draggable paperweight; SocialDebug.Org reduces it further — to a single passive **rotating seal** that the reader clicks (not drags) to advance one bulletin at a time. There is no header, no footer, no menu, no hamburger, no skip-link, no breadcrumb, and no "back to top." The seal is the only nav artifact in the entire document. 4. **Futura-geometric (Jost) used at weight 300 only — institutional restraint, not Bauhaus bombast.** The corpus's mono-typography tendency (92%) is refused; the design commits to a Futura-geometric display face, but holds the weight at 300 throughout — *never* using the heavy weights that would push Jost into mid-century-modern advertising or Wes Anderson pastiche. The institution states; it does not shout. 5. **Layered-depth as the content metaphor, not a parallax effect.** Layered-depth appears in 10% of the corpus, almost always as decorative card-shadow stacking. Here it is **the content scaffold**: seven translucent inspection plates representing seven *altitudes of social diagnosis*, with the vellum tint progressively greening as the inspection descends. The depth is the argument. 6. **Mixed-media imagery as a strict four-primitive composition system.** Where the corpus's 95% photography tendency uses photographs as decorative hero imagery, SocialDebug.Org composites four hand-built media types (drafted geometric primitives, halftone duotone photo fragments, cartographer's contour annotations, and rubberstamp marks) into every plate as a **diagnostic specimen** — twelve photographs total, no more, each one a physical-world correlate of a social bug. This is mixed-media as **forensic apparatus**, not as collage decoration. 7. **The 38ms stagger discipline applied to every single element, with no exceptions.** Stagger appears in 62% of the corpus as a hover or scroll garnish. Here it is **the institution's own temporal signature**: every glyph, rule line, and diagram primitive enters in strict 38ms IntersectionObserver-triggered cascade, top-to-bottom, left-to-right, in reading order, with no parallel reveals anywhere. The reader experiences the document as the institution composes itself in their presence. 8. **Authoritative tone (5% prevalence) executed as Werkbund civic forensics, not legal authority.** The corpus's existing authoritative designs read as legal-or-financial; SocialDebug.Org commits to a **third register** — the authority of a midcentury European civic-design society publishing technical bulletins about the failure modes of human institutions. The institution is named (Werkbund Society for the Inspection of Social Systems, Dessau Office, 1926–2026), its publication apparatus is depicted (rubberstamp, ledger, halftone bulletins, rotating seal, plate-numbered enumerations), and its ceremonial scarcity (three Lake Red appearances; twelve photographs; seven plates) is held with unbroken discipline across the document. **Patterns deliberately avoided from the frequency analysis:** parallax (92%, refused as a sparkle effect — depth here is structural, not decorative), cursor-follow (50%, refused), magnetic (35%, refused), spring (62%, refused — motion here is linear and patient, not springy), warm/gradient palettes (90% combined, refused entirely), photography as hero imagery (95%, refused — photos here are duotone halftone specimens). The **only** corpus-common pattern retained is `stagger` (62%) — and even there, the implementation is unusually strict (38ms steps, IntersectionObserver-triggered, reading-order ordered, no parallel reveals).