# Design Language for paragram.dev ## Aesthetics and Tone paragram.dev is a **typographic laboratory** — a single-page experiment that treats *the letter itself* as the only subject worth photographing, animating, or believing in. A paragram is a play on words by alteration of letters; the site takes that literally and builds an entire visual world out of the act of substituting, sliding, mirroring and recombining glyphs. The mood is **cold, exact, slightly clinical** — think a phototype foundry circa 1968 crossed with a contemporary kinetic-type studio reel. No warmth, no gradients, no soft glassy panels. Everything is **ink on bone-white paper, or bone-white light on ink-black void**, and the only "color" is a single acid signal hue used the way a proofreader uses red pencil. The tone is **raw-authentic and quietly experimental** — confident enough to leave whole regions of the screen empty, weird enough to let a headline physically dismantle itself when you scroll past it. It should feel less like a product landing page and more like the title sequence of a film about language: every section is a *plate* in a specimen book, numbered, captioned in tiny caps, and devoted to one transformation of one word. The visitor is walking through a typographer's notebook that has been animated. This is **anti-design discipline**, not anti-design chaos: the grid is brutal and visible, the type is enormous, the captions are microscopic, and the contrast between those two scales *is* the design. ## Layout Motifs and Structure The page is a **vertical sequence of nine "specimen plates"**, each one full-bleed (100vw × 100vh), separated by hard cuts — no fades between plates, the next one simply *replaces* the previous like a slide projector advancing. Within each plate the composition is governed by a **brutal exposed 12-column / 8-row baseline grid** drawn as 0.5px hairlines that are always faintly visible (4% ink) so the visitor sees the scaffolding the type is pinned to. This is **broken-grid on purpose**: the giant display word usually *violates* the grid — bleeding off two edges, sitting on a half-row — while the tiny captions obey it absolutely. The tension between the obedient micro-text and the rebellious macro-text is the recurring structural motif. Navigation is a **left-edge vertical "contents strip"** — nine ultra-condensed numerals (01–09) stacked down the far left margin in 11px caps, rotated 90°, with the active plate's numeral inverted to a solid block. No top bar, no logo lockup, no hamburger, no footer nav. There is a one-line colophon at the very bottom of plate 09 and nothing else chrome-like anywhere. Each plate follows the same skeletal arrangement so the *content* surprises but the *frame* never does: - **Top-left corner:** plate number + a 2–4 word plate title in 12px uppercase, letter-spaced +0.18em. - **Center / bleeding mass:** the transformation itself — one or two words at 18–34vw, the hero event of the plate. - **Bottom-right corner:** a single hairline-boxed caption, 11px, describing the operation in dry lexicographic prose ("substitution: e→a, medial"). - **Right margin:** a thin vertical scroll-progress rule that fills with the signal hue as you advance. No card grids. No bento boxes. No stat tiles. No pricing. The entire layout vocabulary is **plate / margin / hairline / caption / colossal word**. ## Typography and Palette This site is *made of type*, so the type system is the heart of it. All faces below are on Google Fonts. - **Display / hero face — `Anton`** (single weight, ultra-condensed grotesque sans). Used only at gigantic sizes (12vw–34vw). Its tall, tight, slab-flat caps make a perfect "specimen letter" — monolithic, almost architectural. This carries every transformation event. - **Alternate display for mirrored/contrast plates — `Bodoni Moda`** (variable, optical sizes, weights 400–900, plus italic). A high-contrast Didone whose hairline serifs *shatter* beautifully when animated; used on the two plates that deal with reflection and ornament, set at 14vw–22vw, italic where the word is being "flipped." - **Caption / UI / colophon face — `Space Mono`** (regular + bold + italic). All the tiny things: plate numbers, lexicographic captions, the contents strip numerals, the colophon. Monospaced because a specimen book wants its annotations to align like a concordance. Always small (11–13px), often uppercase, always letter-spaced. - **Running annotation face — `Newsreader`** (variable, with italic) for the rare 1–2 sentence paragraph of prose that appears on plate 01 and plate 09 only — a literary serif voice that signals "this is editorial commentary, not interface." **Palette — strict, three-anchor, plus one signal:** - `#0B0B0C` — *Ink* (near-black, the primary mark color and the dark-plate background). - `#F4F1E9` — *Bone* (warm-neutral paper white; the light-plate background and the light-on-dark mark color). - `#9B978C` — *Graphite* (the muted mid-grey for hairline grids, inactive numerals, secondary captions). - `#FF3B2F` — *Proof Red* (the single acid signal hue — used ONLY for: the active scroll rule, the inverted active plate numeral, and the *one* letter in each transformation that is changing). Never more than ~2% of any screen. Optional fifth, used on exactly one plate (the "negative" plate 07) to invert the whole scheme: `#101820` deep blue-black as a near-black variant so plate 07 reads subtly colder than the rest. High-contrast monochrome. No gradient meshes, no glassmorphic translucency, no warm sunset washes — the deliberate refusal of the corpus's dominant `warm` + `gradient` palettes is part of the point. ## Imagery and Motifs There is **no photography, no stock imagery, no hand-drawn doodles**. Every visual is generated from text and hairlines. The "imagery" set: 1. **The colossal glyph** — the recurring hero object. A word, or a single letter, at architectural scale, treated like a sculpture under raking light (a single soft long shadow cast at 8% ink, no blur halo). 2. **The proofreader's mark layer** — thin SVG carets, deletion strokes, transposition curls (the classic ~ between two letters), and circled corrections, all drawn in `Proof Red` at 1px, animated to *draw themselves on* (path-draw-svg) as each plate enters. These are the only "decoration." 3. **The exposed baseline grid** — 0.5px hairlines in Graphite, omnipresent, the literal grid the type sits on, occasionally *animated* (a column briefly highlighting as the hero word snaps into it). 4. **Ghost-glyph palimpsest** — behind some hero words, the *previous* state of the word sits at 6% opacity, slightly offset, so you see what it transformed *from*. A typographic onion-skin. 5. **Specimen ticks & measurements** — tiny ruler ticks and "x-height / cap-height / baseline" labels in Space Mono, as if the page were a type-design worksheet. 6. **The contents strip** — nine rotated numerals down the left edge; minimal, mechanical, the only persistent element. Decorative motif language overall: **hairline rules, registration marks, proof corrections, palimpsest offsets, ruler ticks** — the visual grammar of a foundry's proof sheet, nothing organic, nothing photographic. ## Prompts for Implementation Build paragram.dev as **one HTML file, one CSS file, one ES module** — no framework, no build step. The page is roughly a 75-second scroll through nine specimen plates, each demonstrating one paragrammatic transformation of one word. **There is NO call-to-action, NO pricing block, NO stat grid, NO testimonials, NO email capture, NO logo wall, NO FAQ, NO contact form, NO cookie banner, NO chatbot.** The "product," if any, is implied only in plate 09's one-line colophon. This is a narrative full-screen experience, a title-sequence, not a funnel. **Plate sequence (each full-viewport, hard-cut transitions):** 1. **Plate 01 — "What is a paragram"** — Light/Bone plate. A single `Newsreader`-italic sentence centered in a sea of empty grid: *"A paragram is a pun made by changing a letter."* As you begin to scroll, the word *letter* loses its second `t` (it deletes itself with a red strikethrough) and becomes *leter* → then the `e` becomes `a` → *latter*. The transformation is the table of contents. 2. **Plate 02 — "Substitution"** — Dark/Ink plate. `Anton` at 30vw: **HEART**. One letter (the `H`) is wrapped in `Proof Red`; on scroll it slides left out of frame and an `E` slides in from the right → **EARTH**. Ghost-glyph of HEART lingers at 6%. 3. **Plate 03 — "Transposition"** — Light plate. **CALM** in Anton; the proofreader's transposition curl (red SVG, path-drawn) appears between `A` and `L`, and the two letters physically swap arcs → **CLAM**. Caption bottom-right: `transposition: A⇄L, positions 2–3`. 4. **Plate 04 — "Anagram cascade"** — Dark plate. **LISTEN** dissolves: each letter detaches, the six glyphs orbit briefly on hairline tracks (use spring physics here, sparingly), and reassemble → **SILENT**. The grid columns light up one by one as each letter lands home. 5. **Plate 05 — "Insertion"** — Light plate. **GLITER** with an obvious gap; a `Proof Red` caret blinks (typewriter-effect cursor), then a `T` types into the gap → **GLITTER**, and the whole word gets a one-frame mechanical shimmer (a sweep of the hairline grid, not a glow). 6. **Plate 06 — "Mirror"** — `Bodoni Moda` italic, 22vw: **bod** rendered so its reflection across a horizontal hairline reads as **pod** (b↔p, d↔p flip). The Didone hairlines visibly *snap* during the flip. This is the one heavily-serif plate. 7. **Plate 07 — "The negative"** — Inverted plate using `#101820` ground. Everything that was ink is now Bone, everything Bone is now near-black. The word **DARK** sits in white; on scroll the figure/ground inverts in a hard wipe and it reads **(dark, reversed)** — a moment of pure contrast theatre. No transformation of letters here, only of the *field*. 8. **Plate 08 — "Lipogram"** — Light plate. A paragraph of `Newsreader` text where, on scroll, every instance of the letter `e` audibly *vanishes* (each `e` gets a red deletion stroke then collapses, the line reflowing live), demonstrating writing-without-a-letter. The reflow itself is the animation. 9. **Plate 09 — "Colophon"** — Dark plate. `Anton`: **PARAGRAM** at 24vw, then the `P` becomes a red `?` for a beat and back. Below, in `Space Mono` 12px, a single colophon line: what the site is, who made it, the type credits. The contents strip's 09 goes solid. End. **Motion principles:** - Transitions between plates are **hard cuts driven by scroll position** (scroll-snap or a scroll-progress controller) — no parallax drift, no fade-through. - Within a plate, the transformation is **scroll-scrubbed**: scrolling forward runs it, scrolling back *reverses* it exactly. The visitor controls the timeline. - Use **path-draw-svg** for every proofreader's mark (carets, strikethroughs, transposition curls draw themselves on). - Use **typewriter-effect** for the insertion plate's caret and for the colophon line's reveal. - Spring physics appear only on plate 04's orbiting letters — used once, deliberately, not as a global feel. - The active-plate scroll rule on the right edge fills with `Proof Red` continuously. - Honor `prefers-reduced-motion`: collapse all scrubbed transformations to their *final* state instantly, keep the marks static. - Respect the empty space — at least 50% of every plate is bare grid. Resist filling it. **Build a story, not a sales page.** The arc is: *here is the idea → watch it happen eight ways → and the eighth way is the site's own name questioning itself.* ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Type *is* the imagery — nothing else exists.** Where 98% of corpus designs lean on photography and 96% reach for hand-drawn illustration, this site has zero of either. Every pixel of "art" is a glyph, a hairline, or a proofreader's mark. The subject of the page is the alphabet performing operations on itself. 2. **Scroll-scrubbed, fully reversible transformations instead of parallax.** 91% of the corpus uses parallax and 89% uses cursor-follow; this site uses neither. Motion is a *timeline the visitor scrubs* — every animation runs forward and backward under direct scroll control, like a Steenbeck flatbed editor. The page is an interactive title sequence. 3. **Brutal exposed grid + microscopic caps + colossal display, monochrome only.** It refuses the corpus's dominant `warm` (98%) and `gradient` (95%) palettes entirely — three neutrals plus one acid red used at homeopathic doses, on a visible 12-column hairline scaffold. The whole aesthetic is the *scale war* between 11px monospace captions and 34vw condensed-grotesque headlines. 4. **Anti-design as discipline, not chaos.** Unlike the few `anti-design` (4%) entries that read as messy or ironic, paragram.dev is rigorously systematic: nine identically-framed plates, fixed corner positions, dry lexicographic captions. The "rule-breaking" is confined to one element per plate — the hero word — which makes the breaks legible. 5. **No CTA, no pricing, no stats, no funnel — a 75-second typographic film.** It is structured as a specimen book / title sequence, ending with the site's own name turning into a question mark. Storytelling over conversion, full-screen plates over component grids. **Chosen seed / style:** *experimental type layout* — aesthetic: anti-design + swiss-rigor, layout: broken-grid + full-bleed plates, typography: oversized-display + tech-mono + bodoni-didone, palette: monochrome + high-contrast, patterns: typewriter-effect + path-draw-svg + scroll-triggered, imagery: generative type / line, motifs: grid-lines + registration marks, tone: raw-authentic + experimental. **Avoided overused patterns (from frequency analysis):** hand-drawn (96%), glassmorphism (80%), photography (98%), card-grid (91%), warm palette (98%), gradient (95%), mono-as-only-type used differently here (paired with massive display, not as the whole identity), parallax (91%), cursor-follow (89%), magnetic (82%), spring used once not globally (85%). Leaned instead into underused territory: anti-design (4%), swiss (5%), broken-grid (9%), oversized-display (2%), high-contrast monochrome, typewriter-effect (13%), path-draw-svg (41% but used here as the *core* device, not garnish), raw-authentic tone (3%).