# Design Language for paraoligm.com ## Aesthetics and Tone **paraoligm** is a deliberate misspelling of "paradigm" — the missing *d* is not an error but a statement. To stand beside the paradigm, not inside it. The site inhabits the space of calm dissent: a manifesto written in a leather armchair, not shouted from a megaphone. The aesthetic is **pop-art serenity** — a contradiction held in productive tension. Pop art's bold graphic flatness (thick outlines, halftone dots, high-contrast panels) is stripped of its irony and aggression, then soaked in sepia warmth until it achieves something closer to an antique Japanese woodblock print crossed with a Roy Lichtenstein panel left in the sun for fifty years. Colors that should scream instead murmur. Outlines that should punch instead frame. Mood: the calm that arrives after a paradigm shift. Not the revolution — the morning after, when everything is rearranged and the light comes in differently. A scholar's desk at noon. Ink drying on a page. A single thought held up to the window. Tone is **calm-serene** throughout — no urgency, no countdown timers, no "act now." Every element should feel like it has always been there, that it will still be there after you close the browser and come back in a decade. The site does not sell, explain, or persuade. It simply *is* — like a found object on a shelf that you keep returning to look at. ## Layout Motifs and Structure **Minimal navigation as editorial restraint.** The corpus shows asymmetric layouts at 40% — this site inverts toward stark vertical centering within a deliberately narrow column, inspired by single-page manifestos and zine covers. The page is one continuous vertical scroll with exactly five compositional panels, each panel behaving like a separate woodblock print in a sequence. **Panel architecture:** - **Panel 1 — The Letterform:** Full-viewport hero. The word *paraoligm* set in enormous Baskerville, centered, at `clamp(8rem, 16vw, 18rem)`. Below it, a single hand-drawn ink circle orbiting the missing *d*, rendered as SVG. The background is sepia parchment #F2E8D5. No navigation visible — only the word and its orbit. - **Panel 2 — The Halftone Field:** A 60vw × 60vh rectangle of hand-drawn halftone dots arranged in a radial gradient pattern (dense center, sparse edges), all in burnt sienna #8B4513. The dots are SVG circles drawn slightly imperfectly — not perfectly round, slightly varying stroke widths — giving the mechanical halftone a human hand. Text floats inside the sparse outer region. - **Panel 3 — The Grid of Frames:** Three pop-art panels arranged in a triptych, each panel outlined with a thick 4px stroke in #3D2B1F (dark sepia-black). Inside each frame: a single hand-drawn object (a key, a lens, a compass rose) floating in negative space. No labels. No captions. The objects speak in silence. - **Panel 4 — The Particle Scatter:** Text content dissolves into and reconstitutes from a field of particle-dots as the user scrolls. The particles rest as punctuation marks (periods, commas, em-dashes) hand-drawn at different scales, then animate into lines of text on scroll entry. - **Panel 5 — The Colophon:** A narrow, centered block of small Baskerville italic text — a single paragraph, the site's only prose — followed by a hand-drawn signature-mark SVG. No links, no footer nav, no copyright date. **Spatial principles:** - Max content width: 760px, centered - Generous vertical breathing (min 20vh between panels) - No sticky header - Single page, no routes - Blur-focus as depth: elements closer to the conceptual "center" are in sharp focus; peripheral elements carry a CSS `filter: blur(0.5px)` that resolves to 0 on hover ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Primary:** [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville), weight 400 regular and 400 italic. Baskerville-refined means using the serif's natural elegance at extreme scale without ornamentation. The wordmark *paraoligm* is set entirely in Libre Baskerville regular. Never bold at display sizes — the weight comes from scale alone. - **Secondary / Body:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond), weight 400 regular, for all prose passages. Set at 1.125rem / 1.9 line-height. EB Garamond's slightly narrower proportions and more organic serifs complement Baskerville's authority with warmth. - **Accent / Annotation:** [`Caveat`](https://fonts.google.com/specimen/Caveat), weight 400, used exclusively for hand-lettered annotations, footnote markers, and the SVG-adjacent captions that look like pencil notes in the margin. Never used at body scale — only for 0.85rem annotations or SVG text elements. **Palette — Sepia Nostalgic:** | Role | Name | Hex | |------|------|-----| | Background / Parchment | Aged Paper | `#F2E8D5` | | Primary text | Deep Sepia Ink | `#2C1A0E` | | Secondary text / mid-tone | Sepia Brown | `#6B3F2A` | | Pop-art outline / frame | Sepia Black | `#3D2B1F` | | Halftone / accent marks | Burnt Sienna | `#8B4513` | | Warm highlight | Beeswax Yellow | `#D4A853` | | Particle / blur accent | Faded Ochre | `#C9A96E` | | Deep shadow | Walnut Dark | `#1A0F07` | All tones are warm-shifted analogs. No cool grays, no blue tones, no white. The white of conventional pop-art is replaced by parchment. The black is replaced by walnut-dark `#1A0F07`. ## Imagery and Motifs **All imagery is hand-drawn SVG.** No photography. No stock illustration. No raster images. The corpus uses photography at 85% — this site abstains entirely. Every visual element is constructed as inline SVG with stroke-based drawing: single ink color (`#3D2B1F`), variable stroke widths between 1px and 4px, no fills except flat sepia tones from the palette. **The drawn object vocabulary (recurring across panels):** - **The Orbiting Circle:** An imperfect ink circle — hand-drawn path with slight wobble in the SVG `d` attribute — that slowly orbits the letter gap where the *d* is missing in *paraoligm*. Rendered at `r≈60px`, stroke 2.5px, no fill. One slow rotation: `animation-duration: 40s`. - **Halftone Field:** Radial arrangement of SVG `` elements, each radius between 2px and 8px, fill `#8B4513`, with `rx` and `ry` made slightly unequal (1–3% deviation) to mimic hand-drawn imperfection. Generated procedurally in JS from a seeded random function so the pattern is deterministic. - **The Key (Panel 3, frame 1):** A skeleton key drawn in profile, thick outline style. Bow is a circle, bit has three rectangular notches. Stroke `#3D2B1F`, 3px, no fill. Floats in `#F2E8D5` panel background. - **The Lens (Panel 3, frame 2):** A magnifying glass with a slightly off-round lens. The glass interior receives `filter: blur(1.5px)` — the only in-image blur, literalizing the blur-focus motif as a visual metaphor. - **The Compass Rose (Panel 3, frame 3):** An eight-point compass rose with hand-drawn irregular points — not mechanically symmetric. The N-point is labeled in `Caveat` italic. - **Particle Field:** SVG punctuation marks (`.`, `,`, `—`, `;`) at 0.6rem to 1.4rem scale, scattered across Panel 4's viewport at random positions and slight rotations (±15°). On scroll-enter: CSS transition moves each mark from `opacity: 0, translateY(20px)` to its resting position, staggered by 30ms increments. On scroll-exit: reverse. The "particle effects" motif is realized as typographic debris that coheres into meaning. **Pop-art structural elements:** - Panel borders: 4px solid `#3D2B1F` — the comic-panel hard outline — applied to the three triptych frames in Panel 3 and the hero wordmark container. - Ben-Day dot pattern: the halftone field in Panel 2 is a direct homage. But unlike Lichtenstein's mechanical uniformity, every dot in this field was "drawn by hand" (slight rx/ry variation, stroke-only at small radii, fill-only at large). ## Prompts for Implementation **The story to tell.** Someone discovers a word: *paraoligm*. It is misspelled, or it is a new word — they cannot tell. They hold it up to the light. The dot orbits the gap where a letter should be. They scroll down and find a field of halftone dots — the substrate of mass reproduction, made singular and quiet. Further down, three frames hold objects without explanation. The visitor is an archaeologist working in silence, and the silence is the content. **Implementation principles:** - **No JavaScript frameworks.** Vanilla JS only. The particle field and halftone generator are `