# Design Language for paraoligm.com ## Aesthetics and Tone paraoligm.com is **a Museum of Broken Reasoning, installed inside a malfunctioning syllogism**. The name is a deliberate misspelling — *paralogism*: a piece of reasoning that *feels* valid but isn't, a conclusion that arrived through the wrong door. The site treats this as its entire premise: it is a building whose floor plan obeys logic, whose signage is impeccably typeset, whose vitrines are lit like a serious institution — and yet the rooms connect *wrongly*. A corridor that should lead to Room 4 deposits you back in Room 2. A wall label cites a premise that contradicts the exhibit it labels. The aesthetic is **brutalist anti-design experiment crossed with surreal exhibition cartography**, executed with the cold confidence of a 1970s civic museum guide — Helvetica-era signage, concrete tones, ruled lines — but the system is *infested*. Things are square, gridded, authoritative; and then one cell of the grid is rotated 3 degrees and nobody acknowledges it. The tone is **edgy-rebellious in the way a deadpan joke is rebellious** — never loud, never neon, never "glitchcore." It is dry. It is the museum docent who keeps a straight face while describing an obvious absurdity. Mysterious-moody undertone: you are alone in this institution after closing time, the HVAC is running, and the exhibits are quietly arguing with each other. No warmth, no gradients-as-comfort, no friendly rounded corners. The page is a *premise* you are invited to walk through and discover, halfway down, that you were misled — pleasurably. ## Layout Motifs and Structure The site is a **broken-grid floor plan**: a strict 12-column, 8-row module grid is drawn (faintly, in 0.5px hairlines, always visible like an architect's underlay), and content is placed *on* it with rigid alignment — except every section commits exactly **one violation**. One block bleeds half a column past the margin. One row is 1.5× the height it "should" be. One numbered room is missing from the sequence (you scroll from Room III to Room V; Room IV is a blank gridded void with a small label: *"removed for restoration of the argument"*). Frequency analysis flags `broken-grid` at only 9% and `card-grid` / `full-bleed` / `centered` as the dominant trio (91% / 88% / 83%). This design refuses all three: no cards, no full-bleed hero photography, no centered column. Instead — **the museum-room scroll**: - **The Lobby (entrance).** A single ruled rectangle, dead-on the grid, containing only the wordmark `paraoligm` and a one-line wall text: *"Museum of Broken Reasoning — admission free, conclusions not guaranteed."* A floor-plan key sits in the bottom-left margin like a real exhibition map, listing seven rooms. It lies: it lists eight. - **Seven Rooms, scrolled vertically**, each a full-viewport "gallery hall." Each room is a different *fallacy* rendered as an installation: Affirming the Consequent, Circular Reasoning (a corridor that scrolls into itself), Equivocation (a word that changes meaning between two paragraphs), Slippery Slope (a section that physically tilts as you scroll), Hasty Generalization, Begging the Question, and the False Dichotomy (the room splits hard down the middle and *neither* side is correct). - **Margin apparatus.** Like an over-annotated museum catalogue: footnote numerals float in the outer margin, hairline leader-lines connect them to the text, and accession numbers (`P-001`, `P-002`…) tag every block. The accession numbers are non-sequential and never resolve. - **No nav bar.** Movement is by floor plan only — a persistent small map in the lower-left that highlights the room you're in. Clicking a room on the map sometimes takes you to the *wrong* room. (Honestly: it's part of the point.) ## Typography and Palette **Typefaces — Google Fonts only, three voices, never blended:** - **Display & Wall Labels — *Archivo Black*** (single weight 900). Heavy grotesque, ultra-tight tracking (−2%), set in ALL CAPS for room titles and the wordmark. Archivo Black has the blunt, slightly-too-bold civic-signage quality of a museum exterior letter — confident to the point of arrogance, which is exactly the joke. Room titles run at 7–11vw. The wordmark `PARAOLIGM` sits at 4vw, letter-spaced +1px, with the substring `OLIG` set 2px lower than its neighbours — a baseline fault you'll only catch on second read. - **Catalogue Body & Wall Text — *Roboto Slab*** (weights 300 / 400 / 700). A slab-serif (frequency `slab-serif` = 3%, severely underused; the corpus overwhelmingly defaults to `mono` at 94%, which this design pointedly avoids). Roboto Slab's mechanical, evenly-weighted serifs read like the body copy of a state-printed exhibition booklet — institutional, neutral, trustworthy. Used at 19px, leading 1.7, max-measure 62ch. The trust it projects is precisely what gets betrayed. - **Annotations, Accession Numbers, Footnotes — *IBM Plex Sans*** (weight 400, 500). Small (12–13px), tracked +0.4px, used for the margin apparatus, floor-plan labels, accession tags, and the docent's deadpan asides. Plain humanist sans — the voice of the institution's metadata, the part that's supposed to be reliable. **Palette — high-contrast, concrete-and-warning, no gradients as decoration:** - `#0E0E0F` — **Vantablack-civic**, near-black; primary text, hairlines on light, the void of Room IV. - `#EDEAE3` — **Gallery Plaster**, warm off-white; primary background, the walls of the museum. - `#C4C0B6` — **Wet Concrete**, mid-grey; the architect's underlay grid, secondary rules, the floor. - `#D63B1F` — **Accession Red**, a single hot vermilion; used *only* for the one violation per section, for the missing-room label, for the leader-lines pointing at contradictions. Never more than ~3% of any viewport. It is the colour of *"this is wrong and we know."* - `#1B3A5C` — **Catalogue Blue**, deep ink-navy; used for the floor-plan map, the wordmark's faulted `OLIG`, and footnote numerals — the colour of "official documentation." - `#8A8579` — **Faded Label Grey**, for tertiary metadata that has "aged." Backgrounds invert exactly once: the False Dichotomy room flips to `#0E0E0F` ground with `#EDEAE3` text — and the split-down-the-middle line is `#D63B1F`. No section uses a gradient except a single 1-stop-to-1-stop *imperceptible* vertical wash in the Slippery Slope room, to suggest the floor losing its footing. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No organic blobs. Every visual is SVG line-work or pure CSS — the diagrams of a logic textbook, redrawn at architectural scale.** - **Venn diagrams that don't close.** Two-circle and three-circle Venns where the intersection region is hatched in Accession Red but the circles are drawn with a 4px gap — they never actually overlap. Used as the recurring "exhibit object" in three rooms. - **Truth tables as wall vitrines.** Small CSS-grid tables of T/F values, framed in hairline boxes like specimen cases — but one row's conclusion column is left as a red `?`. - **Syllogism arrows.** Premise → Premise → Conclusion, drawn as ruled arrows with right-angle elbows. In every diagram, exactly one arrow points *backwards*, from conclusion to premise (the circular-reasoning tell). - **The architect's underlay.** The faint 12×8 grid is itself a motif — always visible, like graph paper showing through. It is the only thing in the building that is genuinely consistent. - **Floor-plan iconography.** Top-down room rectangles, doorway gaps, a directional "you are here" dot, a north arrow that points slightly off-north. Museum-map visual language, deployed as the site's actual navigation. - **Sharp-angles everywhere.** Zero border-radius sitewide. Every corner is 90°. The *only* curves permitted are the circles of the (non-closing) Venn diagrams. Even the cursor is reimagined as a small ruled crosshair. - **Accession tags.** Tiny `[P-0xx]` labels riveted to the corner of every block, in Plex Sans, in Faded Label Grey — exhibition catalogue numbering that never adds up. ## Prompts for Implementation Build paraoligm.com as **one HTML document, one CSS file, one small vanilla-JS module (~7KB)**. No framework, no router, no build step, no canvas, no WebGL. The page is a vertically-scrolled walk through eight rooms (the floor-plan key promises seven; Room IV is the void). Target page weight under 90KB before fonts. It should render on a slow connection like a museum's own ancient kiosk. **Storytelling spine — the walk through the broken museum:** 1. **The Lobby.** Wordmark `PARAOLIGM` on Gallery Plaster, the architect's grid faintly visible behind everything. Wall text in Roboto Slab: the deadpan admission line. The floor-plan map materialises in the lower-left and stays for the whole scroll. Footnote ¹ in the margin: *"This museum was constructed from a valid blueprint. The errors entered later, on their own."* 2. **Room I — Affirming the Consequent.** A syllogism diagram fades in line-by-line (`path-draw-svg`: arrows draw themselves, `path-draw-svg` is at 41% so use it sparingly — only the diagram strokes, nothing else). The conclusion box glows Accession Red for 0.4s, then goes neutral, as if the building hopes you didn't notice. 3. **Room II — Circular Reasoning.** A horizontal sub-corridor inside the room: as you scroll down, this band scrolls *sideways*, and at its end it seamlessly loops to its start (`scroll-triggered`, careful loop). The exit label says "→ Room III"; the entrance label, now visible again, also says "→ Room III." Both are true. Neither helps. 4. **Room III — Equivocation.** Two paragraphs of Roboto Slab body text. The word **"sound"** appears in both — bold, Accession Blue. On scroll into the second paragraph, a 0.3s `morph` swaps the word's letterforms imperceptibly (it stays "sound") while a margin footnote quietly redefines it from *"valid"* to *"audible."* The text now contradicts itself and pretends it doesn't. 5. **Room IV — [void].** A full viewport of nothing but the architect's grid on bare Gallery Plaster, and one small centred Plex Sans label: *"Room IV removed for restoration of the argument. Apologies for the inference."* Accession tag: `[P-???]`. 6. **Room V — Slippery Slope.** The entire room's content sits on a plane that, via scroll-linked `transform`, tilts from 0° to about 6° as you pass through — text, diagrams, accession tags all slide a few pixels downhill. A faint 1-stop vertical wash darkens the lower edge. The room title is, of course, numbered V — confirming Room IV is genuinely gone. 7. **Room VI — Begging the Question.** A truth table whose conclusion column is filled in *first*, then the premises are written to match it (cells populate in reverse order on scroll, `stagger`, reversed). A red leader-line connects the conclusion back up to "premise 1." 8. **Room VII — Hasty Generalization.** Three tiny data points plotted, then a confident bold line drawn straight through them and extrapolated off the edge of the viewport, Archivo Black caption: "THEREFORE, ALWAYS." Footnote: *"n = 3."* 9. **Room VIII — The False Dichotomy** (the eighth room the lobby map secretly promised). Hard background invert to Vantablack-civic. The viewport splits down the centre with a single Accession Red rule. Left panel: "EITHER." Right panel: "OR." A small line of body text below, spanning both: *"(There were always more rooms. You only walked the ones we drew.)"* The floor-plan map in the corner now shows the museum has *no exit marked.* 10. **Colophon strip.** A thin band, back on Gallery Plaster: accession numbers listed in full — non-sequential, with gaps — and the line *"paraoligm.com — every conclusion on this site is reached. None of them follow."* **Motion rules.** Use `fade-reveal` and `path-draw-svg` for diagram entrances; `scroll-triggered` for the circular corridor, the tilt, and the False Dichotomy split; `morph` exactly once (Room III). Use `cursor-follow` only for the crosshair cursor (a 12px ruled `+` that tracks the pointer with a 60ms `spring` lag — `spring` and `cursor-follow` are near-ubiquitous in the corpus, so here they're demoted to a single hairline crosshair, not a flashy blob). The architect's grid never moves — it is the one honest element. No parallax. No magnetic buttons. No tilt-3d on hover. No counters animating up. The page is calm; the *logic* is what's unstable. **AVOID:** no CTA, no "Get Started," no pricing table, no stat grid, no testimonial row, no email-capture, no hero photograph, no contact form, no cookie-cute illustrations, no neon glitchcore, no rounded corners, no card-grid, no full-bleed imagery. ## Uniqueness Notes Differentiators this design commits to. No other site in the corpus should duplicate them: 1. **Logical fallacy as the literal site architecture.** Each section *is* a named paralogism — not "themed around" one, but structurally enacting it (a corridor that loops for Circular Reasoning, a tilting floor for Slippery Slope, a missing Room IV, a literal split for False Dichotomy). The "broken reasoning museum" concept ties content, layout, and motion into one premise. Nothing in the frequency tables suggests this conceit exists elsewhere. 2. **Broken-grid as one-violation-per-section.** `broken-grid` is at 9% while `card-grid` (91%), `full-bleed` (88%), and `centered` (83%) dominate. This design rejects all three and adopts a rule no one else states: a rigid architect's underlay grid that is *visibly always there*, with exactly one deliberate breach per room. The grid is the constant; the breaches are the narrative. 3. **Slab-serif body, not mono.** `mono` typography is at 94% — effectively the corpus default. This design uses no monospace at all; its institutional voice is *Roboto Slab*, a `slab-serif` (3%), paired with `Archivo Black` display and `IBM Plex Sans` metadata — a museum-catalogue typographic system, not a terminal. 4. **Accession-Red as a 3%-of-viewport scalpel.** A single hot vermilion (`#D63B1F`) is rationed to mark *only the errors* — the one grid breach, the missing room, the backwards arrow, the unresolved `?`. Colour as forensic highlighter, never as decoration or gradient; the rest of the palette is concrete, plaster, and ink. 5. **Navigation by lying floor-plan only.** No nav bar. The sole wayfinding is a museum-style floor map that promises eight rooms while labelling seven, sometimes routes you to the wrong room, and ends with no exit marked. The interface itself is a paralogism. 6. **Anti-design executed as deadpan, not chaos.** `anti-design` (4%) here means *cold institutional confidence undermined by quiet contradictions* — the opposite of loud brutalist-neon. Surreal (6%) and edgy-rebellious tone delivered through dry exhibition prose, not visual noise. Chosen seed/style: **aesthetic: anti-design (with brutalist + surreal undertones), layout: broken-grid, typography: slab-serif, palette: high-contrast, patterns: scroll-triggered, imagery: geometric-abstract, motifs: sharp-angles, tone: edgy-rebellious** — derived from the "brutalist anti-design experiment" / "surreal dreamscape promo" seeds in seeds.json. Avoided patterns from the frequency analysis: `mono` typography (94%), `card-grid` (91%), `full-bleed` (88%), `centered` (83%), `photography` imagery (98%), `cursor-follow`/`spring`/`magnetic` as flashy effects (89%/85%/82% — present only as a hairline crosshair), `parallax` (91% — absent), `tilt-3d` hover (29% — absent), `hand-drawn` (96%) and `glassmorphism` (80%) aesthetics — none used.