# Design Language for quirk.one ## Aesthetics and Tone quirk.one is a **self-aware anti-design experiment** — a single-page manifesto-museum that treats "the quirk" (the deliberate, unrepentant flaw) as a discipline rather than an accident. The mood is **edgy-rebellious with a deadpan curatorial wit**: imagine a wall-text from a contemporary art museum, but the institution is run by people who hand-set their own type slightly crooked on purpose, who scan their printouts off-axis because the scanner glass is the truth and the design grid is the lie. Nothing here apologizes. Mistakes are framed and labeled. The page reads like a zine that escaped from a Risograph workshop, got laminated, and was hung in a gallery that doesn't believe in gallery conventions. The visual register is **loud, raw, photocopied, and confrontational** — but it is *composed* rawness, the kind that only happens when someone with taste decides to break every rule on purpose and document why. There is dry humor in the copy ("Exhibit C: a button that is the wrong size. It has always been the wrong size. We will not be fixing it."), but the layout itself never winks — it commits. The overall feeling: you have walked into a one-room museum dedicated to imperfection, the lights are too bright, the labels are crooked, the floor is sticky, and somehow it is the most honest space you've been in all year. This is anti-design (5% in corpus), not "messy for fun" — every misalignment is intentional, every clash is curated, and the underlying engineering is precise. Rebellion with a registrar's ledger. ## Layout Motifs and Structure The page is built on a **deliberately broken grid** — a 12-column structure that exists only so it can be visibly violated. Content blocks are placed on a 4px sub-grid and then *kicked off it* by 7px, 13px, –9px increments, so everything is "almost aligned" in a way that feels itchy and alive rather than sloppy. There is **no centered hero**, no card-grid, no bento box. Instead: - **A vertical sequence of five "Exhibits"** stacked full-bleed, each one a single-room installation with its own crooked baseline and its own off-register color plate. - **Exhibit labels** are pasted onto each section as if printed on separate paper and taped down — rotated between –3.5° and +4°, with a faint drop-shadow and a torn-edge SVG mask along one side. - **The "wall text"** for each exhibit sits in a narrow column that is *never* the same width twice (varying 280px → 420px), and never starts at the same left offset. The reader's eye has to re-find the column each time. That friction is the point. - **A persistent registrar's strip** runs down the far right edge — a 28px-wide vertical band of monospace accession numbers (`Q.001`, `Q.002`…) and tiny condition notes, like the margin of a museum inventory book. It scrolls at a slightly different speed (parallax), so it drifts against the content. - **Footer that isn't a footer:** the page ends with a "Condition Report" — a single paragraph in 9px monospace, justified into an ugly river of whitespace on purpose, signed and dated. Negative space is used **wrongly on purpose** — huge empty gutters next to cramped text, things crowding the edge of the viewport, one exhibit that is intentionally too tall with dead space at the bottom. The composition is asymmetric and broken at every scale. ## Typography and Palette **Type system (Google Fonts only) — an eclectic-hybrid clash by design:** - **Display / Exhibit titles:** `Anton` — a single ultra-condensed grotesque weight, set HUGE (clamp 3rem → 9rem), tracked tight to –0.02em, and frequently set in ALL CAPS with one letter dropped a few pixels below the baseline. Anton is the "shouting headline" voice; it never feels polite. - **Body / wall text:** `Spline Sans Mono` — a monospaced humanist face used for *all* running copy, not just code. Setting prose in mono is the anti-design move: it refuses to "flow nicely," forces an even, typewriter rhythm, and makes every line look like evidence. (mono is 94% in corpus — but used as the *primary prose face for an art-museum voice* it reads completely differently from the usual "techy" mono.) - **Accent / accession numbers & taped labels:** `Redacted Script` is too obscure — instead use `Special Elite` (a distressed typewriter face) for the small "condition note" stamps and the taped-paper exhibit captions, so they look struck on an actual machine with a worn ribbon. - **One rogue serif:** `DM Serif Display` appears exactly twice on the whole page — once in the manifesto pull-quote, once in the Condition Report signature — as the "wrong" font intruding, an italic interloper among the grotesque and the mono. Letter-spacing, leading, and alignment are deliberately inconsistent between exhibits: Exhibit I is set ragged-right with loose 1.8 leading; Exhibit III is force-justified with tight 1.25 leading and visible rivers; Exhibit V is set centered, which is *also* wrong here, and that's the joke. **Palette — high-contrast, photocopier-harsh:** - `#0B0B0B` — near-black ink (text, rules, the heavy stuff) - `#F4F1E8` — bone / cheap-paper off-white (the "page") - `#FF3B14` — registrar's red, an aggressive cinnabar used for accession marks, the wrong-sized button, and one full color-plate - `#1E47FF` — a flat, slightly-too-bright process blue for the off-register "misprint" shadows behind headlines and one exhibit's flood-fill - `#FFE600` — a chemical highlighter yellow, used sparingly as a literal "highlighter" swipe behind certain words (skewed rectangles, multiply blend) - `#9A9384` — a flat warm grey for the "condition note" small print and torn-paper shadows Color is applied in **flat plates that don't quite line up** — a red rectangle behind a headline that's offset 6px right and 4px down from the text it's meant to back, like a four-color press out of registration. No gradients. No soft shadows. Just hard ink on cheap paper. ## Imagery and Motifs **Everything is a "found object" presented as an exhibit. Five plates, all SVG/CSS, no photography:** - **Exhibit I — "The Off-Register Headline":** a giant `Anton` word ("WRONG") printed three times in cyan, magenta-ish red, and black, each layer nudged 5–11px apart so it reads as a misprinted poster. A hand-drawn SVG registration crosshair (the little ⊕ marks printers use) sits in two corners, slightly smudged. - **Exhibit II — "The Button That Is The Wrong Size":** a single, real, clickable `