# Design Language for nonri.xyz ## Aesthetics and Tone nonri.xyz is an **avant-garde lookbook of unreadable type** — a fashion-house portfolio where the garments on the runway are *glyphs that refuse to be read*. The conceit: "nonri" is a made-up word for the moment a letterform stops being a letter and becomes pure cut, weight, and silhouette. So this site presents nine "looks" — typographic specimens photographed like couture: dramatic, contoured, almost legible, then slipping away. It is a season catalogue for an alphabet that does not exist. The mood is **studio-cold and editorially severe**: a converted-warehouse photo studio at 6am, seamless paper backdrop, one hard rim-light, a single piece of gaffer tape on the floor as a registration mark. Nothing is decorative; everything is *placed*. The page behaves like a contact sheet that has been art-directed within an inch of its life — crop marks left visible, frame numbers in the margins, a grease-pencil circle around the chosen frame. The tone borrows from the production *bible* of a fashion shoot: terse capitalised slugs, "LOOK 04 / PLATE B / 28MM", credits set like a film end-card. The reader is never sold anything — they are walked through a collection and asked, with cool indifference, which silhouette they would wear. Restraint is the whole personality. This is **anti-design as discipline**: the layout deliberately breaks its own grid the way an avant-garde designer breaks a hemline — the rupture is the statement, not chaos. One alarm colour exists and is rationed like blood on a white shirt. Motion is slow, mechanical, like a copy stand descending. The overall effect: a viewer should feel they have wandered into a private press preview of a collection they don't fully understand but cannot stop looking at. ## Layout Motifs and Structure The site is **one continuous vertical contact sheet** — a single scrolling column of full-bleed "plates," each plate a broken-grid composition built on, then violating, a strict 14-column modular grid. The grid is *visible*: thin Tape Gray column ticks sit in the top and bottom margins of every plate, with frame numbers ("011 → 012") set beside them like a film strip's edge codes. Content then transgresses on purpose — a 280px specimen glyph hangs 2.5 columns past the gutter into the white margin; a credit block is rotated 90° and pinned to the left bleed; a headline straddles the seam between two plates so you read half of it before scroll and half after. Acts, top to bottom: 1. **COVER PLATE** — near-empty seamless white. A single oversized glyph-specimen, centred but nudged 1.2 columns left of true centre, lit by a soft simulated rim-light gradient. Below, hairline-ruled: "NONRI — SPRING COLLECTION OF UNREADABLE FORMS". A grease-pencil ellipse (hand-drawn SVG stroke) loops around the glyph as if a director circled it. 2. **THE BRIEF** — a production-bible page: a left-aligned 9-line manifesto in mono, set narrow (max 38ch), with marginalia annotations hanging into the right gutter ("← keep this one", "no.", "maybe"). Crop marks bracket the text block. 3. **LOOKBOOK SPREAD** — the core. Nine "looks" presented as a vertical run of asymmetric plates, **not a card grid** — each look is a full-viewport act: giant specimen glyph on one side, on the other a rotated credit stack ("CUT BY HAND / WEIGHT 880 / 1 OF 9 / MEDIUM: BLACK"). Alternating left/right, but every third plate breaks the rhythm and goes full-bleed centre. 4. **THE CONTACT SHEET** — a single moment of density: a 4×3 of *tiny* glyph thumbnails on a charcoal field with frame numbers and one grease-pencil circle around frame 07. Click a thumbnail → that plate scrolls into view full-screen (a "select" gesture, not a modal). 5. **CARE LABEL** — a faux garment-care tag (skeuomorphic woven-label texture, restrained) listing absurd "care instructions" for the typeface. Set tiny, centred, framed by crop marks. 6. **END CARD / COLOPHON** — film end-card credits: a slow vertical scroll-up of credits ("ART DIRECTION", "TYPE", "LIGHT", "CONTACT —"), centred, on black, the alarm colour used once on the contact line. Nothing else. No newsletter, no buttons, no logo wall. Whitespace (here, *white paper*) is the dominant material — `ma`-style negative space deliberately oversized so each specimen reads as a single object on a backdrop. Navigation is one fixed top-left slug counter ("PLATE 03 / 06") that ticks as you scroll; that's the only chrome. ## Typography and Palette **Type system — Google Fonts only:** - **Specimen glyphs / cover / "looks":** `Bodoni Moda` — a high-contrast Didone with hairline serifs and a fashion-magazine voice; set ENORMOUS (clamp from ~14vw up to ~26vw) so the thin/thick stroke modulation becomes the "silhouette." This is the runway garment. Italic cut used for one or two plates as a "draped" variation. - **Slugs / frame codes / credits / care label / colophon:** `Space Mono` — a fixed-width mono with quirky terminals that reads like production-bible labelling and film edge-codes. Always UPPERCASE, tracked `+0.12em`, small (11–13px). - **The Brief manifesto / marginalia / body:** `Newsreader` (text optical size) — a workhorse serif with a literary, editorial calm; used at modest sizes for the rare paragraphs so the page has one "human reading voice" amid all the cold labelling. Marginalia in `Newsreader` italic. Pairing logic: a screaming Didone specimen, a deadpan mono caption, a quiet literary serif aside — three registers, never blended, the way a lookbook pairs a couture image with a typewritten credit slip and a handwritten note. **Palette (minimum three, with hex):** - **Seamless White** `#F6F4EF` — the paper backdrop. Warm, photographic, not pure white; this is 80%+ of the surface. - **Iron Black** `#111110` — the ink; specimen glyphs, type, the charcoal contact-sheet field shifts to this. - **Tape Gray** `#9A958B` — gaffer-tape / pencil grey; all hairlines, grid ticks, frame numbers, crop marks, marginalia. - **Studio Shadow** `#3A3935` — a soft mid for the simulated rim-light gradient and the woven care-label texture. - **Cut Vermilion** `#E03A1E` — the single alarm colour. Rationed to: the grease-pencil director's circles, the active plate counter, the colophon contact line, and exactly one specimen glyph mid-collection ("LOOK 05" in red). Never used for buttons, never for backgrounds. ## Imagery and Motifs - **The specimen glyph** — the signature. Each "look" is one massive `Bodoni Moda` character (a letter, an ampersand, a question mark) treated as a fashion object: lit with a CSS radial/linear "rim-light" gradient layered behind it, a faint contact-shadow beneath, sometimes partially cropped by the plate edge as if shot too tight on purpose. - **Crop marks & registration ticks** — thin Tape Gray L-brackets at the corners of text blocks and the care label; column ticks with frame codes in every margin. These are pure print-production furniture, used decoratively-but-rationally. - **Grease-pencil annotations** — hand-drawn SVG strokes: looping ellipses around "selected" frames, a strikethrough, small marginal arrows. Drawn live with `path-draw` on scroll so the "director" appears to be marking the sheet as you read. - **The contact sheet** — a single dense 4×3 grid of micro-glyphs on charcoal, frame-numbered, with one red circle. The only moment of multiplicity in an otherwise one-object-per-screen site. - **Care-label weave** — a subtle skeuomorphic woven-fabric texture (tiled CSS gradient, very low contrast) on the care-instructions tag only. - **Film-strip motif** — sprocket-hole-like ticks running vertically down one bleed edge of the lookbook section, tying "contact sheet" and "end card" together. ## Prompts for Implementation Build nonri.xyz as **one HTML document, one CSS file, one ES module, one inline `` for the grease-pencil strokes** — no framework, no build step. It is a ~75–90 second scroll through six plates. **No CTA blocks, no pricing tables, no stat grids, no testimonials, no feature-card rows, no newsletter capture, no logo wall, no cookie banner, no chatbot, no social icons** — only the contact line in the colophon end-card. Storytelling and motion: 1. **COVER PLATE.** Open with the specimen glyph slightly under-lit; on load, a slow 1.4s CSS gradient sweep brings the simulated rim-light up across it (a "the lights came on" beat). The grease-pencil ellipse draws itself around the glyph (`stroke-dasharray` path-draw, ~1.8s, ease-out, slightly overshooting the loop closure like a real hand). The wordmark fades up letter-by-letter in `Space Mono`, staggered ~40ms. 2. **THE BRIEF.** Manifesto lines fade-reveal in sequence on scroll into view (`IntersectionObserver`, stagger ~120ms, 12px upward drift). Marginalia annotations draw their little arrows/strikes only after the line they annotate has settled. Crop marks snap in (no fade — a hard 1-frame appearance) for that mechanical contact-sheet feel. 3. **LOOKBOOK SPREAD.** Each "look" plate: the giant glyph enters with a slow vertical parallax (it moves ~20% slower than scroll, like a backdrop behind a model) plus a very subtle tilt-3d that tracks the cursor within ±3° — the specimen "turns to be looked at." The rotated credit stack on the opposite side slides in from the bleed with a brief elastic settle. Every third plate goes full-bleed centre and the glyph does a slow scale-up from 0.92→1.0 across its time on screen. "LOOK 05" is the lone Cut Vermilion glyph — when it enters, the fixed plate counter (top-left) flickers to vermilion for the duration of that plate, then back to Iron Black. 4. **THE CONTACT SHEET.** The 4×3 of micro-glyphs fades up on the charcoal field; frame numbers typewriter in beneath each cell (very fast, ~25ms/char). The red grease-pencil circle around frame 07 draws last. Hovering a cell lifts it ~4px and brightens it; clicking it triggers a smooth `scrollIntoView` to that look's plate (the "select" gesture) — never a popup, never a lightbox. 5. **CARE LABEL.** The woven-texture tag fades in centred with crop-mark brackets snapping around it. The absurd care instructions are static — no animation; it's a printed object. One tiny grease-pencil tick mark next to the funniest line, drawn on reveal. 6. **END CARD / COLOPHON.** Cut to a near-black plate; credits scroll *upward* slowly and continuously (film end-card style, ~24px/s) on a loop until the user scrolls back. The "CONTACT —" line is Cut Vermilion, the only colour on the plate. When it reaches centre, it holds for ~3s before continuing — a final beat. Global: respect `prefers-reduced-motion` by replacing parallax/tilt/draw-on with simple fades and showing all grease-pencil strokes already complete. Cursor: a small Tape Gray crop-mark cross replaces the pointer on the lookbook plates only. Keep the whole thing monochrome-plus-one; the discipline IS the design — if a colour or animation isn't doing narrative work, cut it. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **The site's content is a fictional typeface lookbook, and the layout-rupture *is* the avant-garde gesture.** Rather than using "broken grid" as a vague aesthetic, here a strict 14-column grid is drawn in the margins as film edge-codes and then violated plate by plate — the transgression is staged and visible, like a deliberately asymmetric hemline. No card-grid in the lookbook section at all (the corpus is 90% card-grid); each "look" is a full-viewport object on white paper. 2. **One alarm colour, rationed to four named uses, including exactly one specimen glyph.** Against a corpus that is 98% warm and 95% gradient-heavy, this is warm-but-near-monochrome (`#F6F4EF` / `#111110` / `#9A958B`) with a single `#E03A1E` that is forbidden from buttons and backgrounds — colour as a scarce editorial event, not decoration. 3. **Grease-pencil director's annotations as a live narrative layer.** Hand-drawn SVG circles/strikes/arrows that draw themselves on scroll, as if an art director is marking the contact sheet in real time — a hand-drawn motif (corpus-common) repurposed into a *behaviour* rather than static decoration, and tied to a real interaction (the frame-07 click-to-scroll "select"). 4. **Production-bible / film-end-card information architecture.** Slugs like "LOOK 04 / PLATE B / 28MM", a faux garment care-label tag, and a slowly upward-scrolling colophon styled as movie credits — replacing the usual nav/hero/footer furniture with photo-shoot and film-set conventions. No CTAs, no stats, no pricing — the reader is shown a collection, not pitched. Chosen seed/style: **avant-garde fashion lookbook** (with anti-design discipline and editorial/Didone styling). Avoided patterns from frequency analysis: glassmorphism (79%), generic cursor-follow/magnetic micro-interactions (89%/81%) — used here only as a restrained ±3° specimen tilt with narrative intent; card-grid layout (90%) — replaced by full-viewport one-object plates; gradient-heavy warm palettes (95%/98%) — replaced by warm near-monochrome plus one rationed alarm colour; hand-drawn aesthetic as decoration (96%) — repurposed as a functional annotation behaviour.