# Design Language for paraligm.com ## Aesthetics and Tone paraligm.com is a **paradigm-shift instrument rendered as an avant-garde type specimen** — the name is a deliberate misspelling-collision of *paradigm* + *paralign* (parallel + align), and the site treats that collision as its entire thesis: two ways of seeing the same thing, held in tension, never resolved. The visual world is an **avant-garde fashion-lookbook page that has been re-tooled into a scientific calibration chart** — imagine the inside cover of an obscure 1970s Wim Crouwel grid catalogue, photocopied at 142% onto warm-grey lab paper, then annotated by someone who thinks in vectors. The mood is **edgy-rebellious crossed with cold instrument precision**: confident, a little severe, never warm in the cottage sense — warm only in the sense that old monochrome ink on bone paper is warm. This is not a SaaS landing page. There is no product to sell, no testimonials, no pricing — paraligm presents itself as a *manifesto for a way of looking*. Every section is a "plate" in a calibration manual: Plate I introduces the broken axis, Plate II demonstrates the realignment, and so on. The tone of voice in any copy should read like terse exhibition wall-text written by a structural engineer who reads poetry: short declaratives, technical nouns, the occasional unexpected verb. The single emotional engine of the page: **the moment a tilted grid snaps to true.** Every scroll milestone should deliver a version of that snap — a satisfying, near-mechanical click of misalignment becoming alignment, then (crucially) drifting back off-true so the visitor wants to scroll again to re-trigger it. The paradigm never stays shifted. That restlessness *is* the brand. ## Layout Motifs and Structure The page is built on a **broken-grid that is literally the subject matter** (broken-grid sits at only 9% in the frequency analysis — this site makes it load-bearing). Start from the most rigid possible substrate: a true Swiss **16-column grid**, 1440px reference width, 16px gutters, 8px baseline rhythm, rendered as faint hairlines that are *always faintly visible* on the page (3% opacity ink). This grid is the "true" state. Then introduce **the second grid** — an identical 16-column lattice, but rotated **−4.2°** and offset 9px right / 14px down, rendered in a contrasting hairline (3% opacity vermilion). The whole site lives in the moiré between these two lattices. Content blocks are pinned to one grid or the other; the drama of each plate is content migrating from the rotated grid to the true grid (or vice versa). - **Five vertical "plates", stacked, single long HTML document.** Total scroll length ~520vh desktop, ~640vh mobile. No router, no SPA, no carousel. Plates are `
`. - **Plate I — The Two Axes.** Full-bleed. The wordmark "paraligm" is set twice, exactly overlapping at first, then on first scroll the two copies separate — one stays true, one rakes to −4.2° — and the negative space between them becomes the headline well. A vertical hairline "plumb line" descends the full viewport on the left third; a second plumb line, raked, crosses it. - **Plate II — Realignment Demonstration.** A 4×4 module of square cells, each cell containing a single glyph or numeral, all initially rotated to random small angles between −7° and +7°. On scroll-progress through this plate, the cells snap to 0° one by one in a stagger sequence reading left-to-right, top-to-bottom — the "calibration pass." - **Plate III — Parallax Strata.** Three depth-layers of hairline grids moving at different rates (the only place parallax appears — parallax is at 91%, so we use it once, precisely, and call it out). The mid-layer carries the manifesto text; foreground and background carry only grid debris and tick-marks. - **Plate IV — Specimen Wall.** An asymmetric broken-grid of 7 plates-within-the-plate: oversized letterforms, a calibration target, a phase diagram, a column of measurement annotations. Each item is pinned to either the true or raked grid; hovering a cursor near one tugs it (magnetic, used sparingly) toward true, then it springs back when the cursor leaves. - **Plate V — Colophon / The Shift Reset.** Everything that was true through the page now rakes; everything raked snaps true. A final hairline ruler runs edge to edge with the domain name engraved into it like a millimetre scale. Minimal-navigation only: a thin top-left index "I·II·III·IV·V" that was present throughout, finally reaching V. Navigation is **minimal-navigation** (5% in frequency): just that roman-numeral index, top-left, hairline-thin, with the active numeral underlined by a drawn line (underline-draw). No hamburger, no footer nav, no logo cluster. ## Typography and Palette **Type system — Google Fonts only. Three voices, deliberately unblended (eclectic-hybrid stance).** - **Display / wordmark — `Archivo Black`** (single weight, 400 — which renders heavy). Used for "paraligm", plate numerals, and the four oversized specimen letterforms in Plate IV. Set at 11–22vw. Archivo Black is chosen for its near-monolithic, almost industrial blackness and tight sidebearings — it behaves like a printed ink slab, which is exactly what we tilt and snap. Tracking: `-0.02em` at the largest sizes. - **Structural sans / all UI, wall-text, annotations — `Archivo`** (variable, 100–900, plus the `Expanded` width via `Archivo Expanded` if loaded; otherwise plain Archivo). This is the Swiss-grid workhorse: neo-grotesque, civic, neutral. Body copy at weight 400, 17px/1.55; micro-labels and tick annotations at weight 600, 11px, `letter-spacing: 0.14em`, uppercase. Using the *same superfamily* (Archivo / Archivo Black) for both display and text is intentional — it's the typographic equivalent of "two grids, one lattice." - **Mono / measurement readouts, coordinates, the millimetre ruler — `Spline Sans Mono`** (variable). Every number that represents an angle, an offset, a coordinate, a percentage of scroll-progress appears in this face, weight 400, `letter-spacing: 0.02em`. It is the instrument's display panel. (Mono typography is at 94% — near-ubiquitous — so it is used here *only* for genuine numeric readouts, never for body or headlines, which keeps it earning its place.) **Palette — high-contrast monochrome warmed to bone, with one surgical accent.** (High-contrast is 25%, monochrome 15% — both far below the 95–98% gradient/warm defaults; there are *no* gradients anywhere on this site.) - `#F4F1E9` — **Bone Paper.** The page ground. A warm off-white like aged technical-manual stock. Used full-bleed as the base of every plate. - `#EAE5D7` — **Bone Shadow.** A half-tone of the ground, used for the faintest cell fills and the "behind" depth-layer in Plate III. - `#16140F` — **Ink Black.** Near-black with a trace of warm brown. All headline type, the wordmark, the primary hairlines, all body text. This is the "true grid" ink. - `#3A372E` — **Graphite.** A softer ink for secondary annotations, captions, and the manifesto body when it sits on a tinted layer. - `#D7402A` — **Calibration Vermilion.** The single accent — a slightly oxidised industrial red. Used *only* for: the raked second grid hairlines, the active state of the roman-numeral index, the calibration-target rings in Plate IV, and the instant of "snap" (a one-frame flash). Never used for large fills. Its scarcity is the point. - `#9AA0A6` — **Cool Ash.** A neutral cool grey (the one cool note in an otherwise warm scheme) for disabled tick-marks, the foreground grid-debris layer, and hairlines that are "out of focus." ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No hand-drawn doodles** (hand-drawn is at 96% — this site is the opposite of that: everything is constructed, measured, vector-true). All imagery is SVG or CSS, built on the dual-grid geometry. - **Hairline grids & tick-marks (the core motif).** Two full-page lattices (true Ink, raked Vermilion) at ~3% opacity, plus per-plate dense tick-rulers along the left and bottom edges with major ticks every 8 baseline units and minor ticks every 1. grid-lines as identity (grid-lines is at 6% — underused; this site treats it as the whole visual language). - **Calibration targets.** Concentric-ring registration marks (the kind on a printing press sheet — circle, crosshair, four corner crops) drawn in Ink with Vermilion inner rings. One large one anchors Plate IV; tiny 12px versions sit at the corner of every plate like sheet-registration crops. - **Oversized letterforms as objects (oversized-display motif).** In Plate IV, four single letters from "paraligm" (p, a, l, g) are rendered at 30–48vw in Archivo Black, each treated as a physical specimen: each casts a flat 1px offset "ink-shadow," each is annotated with its own bounding-box dimensions in Spline Sans Mono ("x-height 412px", "skew 0.0°"). - **Phase / alignment diagrams.** Simple abstract line diagrams — two sine-like paths drifting in and out of phase, an angle-of-rake gauge with a needle, a small bar showing "drift / true" as a sliding marker. Pure stroke, no fill, Ink + Vermilion only. These are the only "data-viz"-flavoured elements, and they're diagrammatic, not chart-junk. - **The millimetre ruler.** A single full-width horizontal ruler in Plate V with the literal string "paraligm.com" engraved as the scale labels at regular intervals, numbered in Spline Sans Mono. It is the page's signature object. - **Negative space as material (ma-negative-space, 16%).** The well between the two wordmark copies in Plate I, and generous bone-paper margins everywhere — the emptiness is dimensioned with tick-marks, so even the void is measured. ## Prompts for Implementation Build paraligm.com as **one long static HTML document** — no framework, no router, no SPA. Plain HTML + CSS + a single small vanilla-JS module driving scroll-progress. Five `
` stacked vertically; total scroll ~520vh desktop / ~640vh mobile. **The dual-grid substrate.** Two fixed-position full-viewport `` layers behind all content: `.grid-true` (Ink hairlines, 0°, ~3% opacity) and `.grid-raked` (Vermilion hairlines, `transform: rotate(-4.2deg) translate(9px,14px)`, ~3% opacity). These are *always* visible. Generate the lines programmatically (16 columns + baseline rows) so they're crisp at any width. On `prefers-reduced-motion` the grids stay static but everything below still works. **The "snap" — the heartbeat of the page.** Implement a reusable `data-snap` behavior: an element starts at a small random angle (`--rake: var(--n)deg` where n ∈ [−7, 7]) and, when its plate crosses a scroll-progress threshold, transitions to `rotate(0deg)` with a spring-like cubic-bezier (`cubic-bezier(0.22, 1.4, 0.36, 1)` — slight overshoot, like a needle settling). On the exact frame of snap, briefly add a `.flash` class that paints a 1-frame Vermilion outline, then removes it. As the visitor scrolls *past* the plate, ease the elements back toward a *new* small random angle — never let "true" be permanent. Stagger groups of snaps with ~40ms increments (the "calibration pass"). **Plate-by-plate:** - **I — The Two Axes:** "paraligm" in Archivo Black, two stacked copies perfectly registered at scroll-0. As scroll enters the plate, the back copy rakes to −4.2° (snapping to the *raked* grid) while the front copy stays true; the gap between them opens into a column where the manifesto's opening line types in (typewriter-effect, used once, here). Left-third: an Ink plumb-line drops top-to-bottom (path-draw-svg); a Vermilion raked plumb-line crosses it; their intersection is marked with a tiny calibration target whose readout shows the live angle "−4.2°". - **II — Realignment Demonstration:** A 4×4 grid of square cells, each holding one glyph of "PARALIGM·COM·" plus tick-marks, each pre-rotated random ±7°. Scrolling through runs the calibration pass — cells snap to 0° one by one, each emitting its 1-frame Vermilion flash, each updating a corner readout from e.g. "+5.3°" to "0.0°". When all 16 are true the whole module pulses once (pulse-attention, used once) then the cells very slowly start drifting off-true again as you continue. - **III — Parallax Strata:** Three hairline-grid depth layers at parallax rates ~0.4 / 0.8 / 1.0 (this is the *only* parallax on the site — make it count). The 0.8 (mid) layer carries the manifesto body in Archivo / Graphite; the other layers carry only grid debris, tick-rulers, and one drifting calibration target. Fade-reveal each manifesto paragraph as it enters. - **IV — Specimen Wall:** Asymmetric broken-grid of 7 items pinned alternately to the true and raked grids: the four oversized letters p / a / l / g (Archivo Black, 30–48vw, each with 1px ink-shadow and Spline Sans Mono bounding-box annotations), one big calibration target, one phase diagram (two drifting sine paths + an angle gauge with a settling needle), one column of measurement annotations. Cursor near an item → it tugs toward true (magnetic, subtle, ~6px max travel) then springs back on leave. Items not under the cursor very slowly oscillate ±1.5°. - **V — Colophon / The Shift Reset:** Global inversion — every element that read "true" all page rakes −4.2°; every raked element snaps to 0°. The full-width millimetre ruler animates in, drawing its tick-marks left-to-right (path-draw-svg), with "paraligm.com" engraved as the scale labels and Spline Sans Mono numerals. Colophon copy in small Archivo. The roman-numeral index, top-left throughout, reaches "V" and its underline finishes drawing. **Hard constraints:** No gradients, anywhere. No box-shadows except the flat 1px offset "ink-shadow" on the specimen letters. No rounded corners except the rings of calibration targets. No imagery that isn't SVG/CSS. **AVOID entirely:** hero CTAs, "Get started" buttons, pricing tables, stat-grids, feature-card carousels, testimonial blocks, glassmorphic cards, blurred frosted panels, photographic backgrounds, mesh gradients. This is a manifesto instrument, not a funnel. ## Uniqueness Notes **Differentiators from other designs in the batch:** 1. **The dual-grid as literal content, not decoration.** Two full-page lattices (one true, one raked −4.2°) are permanently visible and every section's narrative is content migrating between them — broken-grid (9%) and grid-lines (6%) are used as the entire visual thesis, not as a styling touch. 2. **A zero-gradient, zero-shadow monochrome system.** Against the batch's 95% gradient / 98% warm / 96% hand-drawn defaults, this site is flat warm-bone-and-ink with a single surgical vermilion accent and no soft styling at all — closer to a Crouwel print catalogue than a web page. 3. **The "snap that never stays" interaction primitive.** A reusable misalignment→alignment→re-drift behavior with a settling-needle spring and a 1-frame vermilion flash, deployed at every scroll milestone — and crucially the page *un-aligns* itself in Plate V, refusing resolution. 4. **Single-superfamily typography (Archivo / Archivo Black) plus mono used only for genuine numeric readouts** — sidestepping the 94% blanket-mono trend by reserving mono for instrument-panel numbers exclusively. 5. **No CTA, no funnel, no product** — the entire site is exhibition wall-text for "a way of looking," structured as five calibration plates rather than marketing sections. **Chosen seed / style:** `experimental type layout` — interpreted as *avant-garde aesthetic + broken-grid layout + oversized-display & eclectic-hybrid typography + high-contrast monochrome palette + grid-lines/oversized-letterform motifs + edgy-rebellious tone + immersive-scroll structure.* (No seed was supplied in the assignment; this one is absent from the reference designs reviewed.) **Avoided patterns from frequency analysis:** glassmorphism (80%), hand-drawn (96%), photography (98%), warm-gradient palettes (95–98%), card-grid (91%), centered (83%), blanket parallax (91% — used exactly once here, in Plate III), blanket cursor-follow (89% — magnetic tug used sparingly in Plate IV only), pastoral-romantic tone (35%).