# Design Language for nonri.org ## Aesthetics and Tone **nonri.org** is **The Anti-Rigor Atelier** — a self-published, full-bleed Memphis-Milano *manifesto* dressed as the public face of a fictional non-profit chartered specifically to **disestablish rigid thought**. The domain's pun is taken at face value and exploded outward: *non-ri* as **non-rigid, non-rigorous, non-right-angle, non-routine** — every meaning of "ri-" the eye can catch is treated as a liturgical refusal of orthogonality. The .org TLD is hijacked from its earnest non-profit register and re-cast as the wordmark of a 1981 Sottsass-era collective whose entire bylaws fit on a single ziggurat-shaped business card. This is not retro pastiche. It is **Memphis taken seriously as governance** — the thesis that a charitable organization which devotes its endowment to *playfulness as civic infrastructure* would in fact look like a Carlton bookcase, not a tax form. Every element of the site argues, with deadpan committee-minutes earnestness, that a triangle balanced on its tip is more morally serious than a 12-column grid. There is a real charter. There are real "annual reports." There is a real "board." All of it is rendered in confetti-blast color and squiggle-checkerboard pattern, and all of it is signed and dated with the kind of bureaucratic seriousness that makes the joke into a doctrine. The voice is **earnestly absurd, like a 1985 design manifesto translated by a notary public**: sentences end with periods, not exclamation points; squiggles get footnotes; every paragraph carries a marginal annotation in handwritten teal pen. The mood is *rigor's negation written in laminate.* ## Layout Motifs and Structure **The page is built on a deliberately broken 11-column grid** with one column missing — a 10/11 grid where column 7 has been "withdrawn" and replaced by a vertical bunting of black-and-pink checkerboard squiggle that runs the full document height. Content reflows around this missing column; nothing ever lives inside it. This is the structural pun: the grid is *non-ri* — non-right, non-regular, non-rigorous — by *one column* exactly. **Sections are not stacked.** They are **shelved at three diagonal terraces** — the entire long-form scroll tilts +3° (top of viewport tipping right), then -2° (correcting), then +5° (over-correcting), creating the impression of a Carlton bookcase viewed from twelve feet away. Each "shelf" hosts a single editorial unit: charter article, board member, annual report figure, manifesto clause. Background terrazzo pattern travels at 0.6× scroll speed; foreground squiggles travel at 1.4×; the column-7 bunting is fixed to the viewport. Three-layer parallax built from the same eight squiggle SVGs in different rotation/scale combinations. **No card-grid. No dashboard. No bento.** The page admits exactly four primitive shapes — **triangle balanced on tip, half-disc on the diagonal, squiggle of seven inflections, dotted ziggurat** — and arranges them as if they were displayed in an open-storage museum vitrine: each shape gets a hand-lettered tombstone label ("Triangle, *for refusal of stability*, 1981/2026, painted glass-fiber-reinforced HTML"). The shapes function as **section headers, navigation anchors, and footnote markers simultaneously**. **Header**: a horizontal terrazzo ribbon, 88px tall, full-bleed, hosting the wordmark *nonri.org* set as a hand-cut paper collage where each letter sits at its own baseline. **Footer**: a single 320px-square pink block, off-center to the right, containing the non-profit's "Articles of Disincorporation" in 8pt all-caps. The whole thing **reads top-to-bottom as one continuous editorial column** that *happens* to be 1140px wide, but every interior block tilts, slides, or terraces off the column edge by 12-72px — the design's animating principle is *the rigor of breaking rigor on purpose, exactly once per element.* ## Typography and Palette **Three Google Fonts, no exceptions:** - **Display / wordmark / shape-tombstones — `Bagel Fat One`** (Google Fonts). A bulbous, lacquered, retro-display face whose every glyph reads as a hand-cut laminate sign. Used at `clamp(4rem, 11vw, 9.5rem)` for the wordmark, at `clamp(1.6rem, 3.4vw, 2.6rem)` for shape labels. Letter-spacing -0.02em on the wordmark, +0.04em on labels. Color always **Hibiscus Pink #E94E77** on cream; never reversed. - **Body / charter / annual-report — `Fraunces`** (Google Fonts) at variable axes `opsz 144, soft 100, wght 460`. The "soft" axis is dialed to 100 deliberately — the serifs become almost-rounded, evoking the pillowy, half-melted quality of 1980s Memphis-printed catalogues. Set at `1.0625rem` / `1.74` line-height with hanging punctuation, optical kerning on, and ligatures `dlig + hlig` enabled. Used for every paragraph of running text — the voice of a notary. - **Marginalia / footnotes / pen-annotations — `Caveat`** (Google Fonts) at weight 500, set at `0.95rem` with -3° rotation in the right margin. This is the "teal pen" — every paragraph in the charter gets a handwritten gloss in the margin, set in **Aegean Teal #009999**, as if the chairman annotated the printed proof and the design team forgot to remove the marks. **Palette — the "Carlton Eight" plus one hidden variable:** | Role | Hex | Name | |---|---|---| | Cream ground | `#F4ECD8` | Laminate Cream | | Charcoal ink | `#1D1D1B` | Notary Black | | Hibiscus pink | `#E94E77` | Hibiscus | | Aegean teal | `#009999` | Aegean | | Sodium yellow | `#F2C233` | Sodium | | Cobalt | `#1E5BB6` | Cobalt 81 | | Verdigris | `#5BAA8A` | Verdigris | | Vermillion | `#E0533A` | Carlton Red | | Hidden lavender | `#C9B6E4` | (only appears in three places — see Imagery) | **Backgrounds** are always **Laminate Cream** (`#F4ECD8`) — never pure white — because Memphis printed on coated cardstock, not bond paper. Body text is always **Notary Black** (`#1D1D1B`). The seven accent colors are deployed in **rigid rotation**: each consecutive section uses the next color in sequence (Hibiscus → Aegean → Sodium → Cobalt → Verdigris → Carlton Red → Hibiscus…) so the color mood pulses through the document like a calendar of moods. The hidden lavender `#C9B6E4` appears in *exactly three places* on the entire site: the cursor trail, the inside of the Articles of Disincorporation block, and the 404 page. ## Imagery and Motifs **No photography. Anywhere.** Photography would betray the laminate-and-paint world the site insists upon. **The Eight Squiggle Library.** Every visual element on the site is built from one of eight bespoke SVG primitives, hand-drawn at 240×240 viewBox, line-width 18 for strokes and 0 for fills: 1. **Carlton Triangle** — equilateral triangle balanced on its lower vertex, filled Hibiscus, with a Notary-Black dotted half-disc punched through its upper-right. 2. **Sottsass Squiggle** — a seven-inflection sine that bends, double-bends, and terminates in a flat dot. Always Aegean. 3. **Bacterio Pattern** — a black-and-cream noise pattern of 1.4mm irregular dots; used as paragraph divider, never as background. 4. **Terrazzo Ribbon** — a horizontal repeating pattern of 11 colored confetti chips on Laminate Cream; appears in the header, the footer's signature line, and as the diagonal terraces between shelves. 5. **Ziggurat Dot Tower** — five stacked dotted squares of decreasing size; used as the section-anchor marker in the left margin. 6. **Half-Disc on the Diagonal** — a semicircle rotated 23° clockwise; used as the bullet point for every list. 7. **Memphis Checkerboard Squiggle** — a 4×24 checkerboard whose top edge has been "swiped" into a wave; this is the column-7 bunting that runs the page's full vertical extent. 8. **Tassinari Tassel** — a vertical drawn tassel of three pendant globules, used as the hover-flag on every interactive element (links, board photos, footnote markers). **The "board portraits" are dotted ziggurat avatars.** Every named board member has a portrait, but each portrait is a Ziggurat Dot Tower in their personal accent color, with a hand-lettered Caveat caption ("Mira J., *Treasurer*, prefers asymmetry"). These are the only portraits on the site. The non-profit insists this is a privacy policy. **The cursor is hidden** and replaced by a 14px Aegean Sottsass Squiggle that **trails behind the actual pointer with a 90ms spring delay**, leaving a 280ms-fading ribbon of squiggles in its wake — the **only** place lavender `#C9B6E4` appears in motion. The squiggle rotates to face the direction of travel. **Motif rule of three.** Every shelf must contain at least three Memphis primitives in non-mirrored arrangement, and no two adjacent shelves may use the same accent color or the same primary primitive. This rule is rendered as a *footnote* in the charter, and the design enforces it programmatically. ## Prompts for Implementation **Architecture: a single long-form scroll with three diagonal shelf-zones.** One HTML document, no router. The page is divided by SCSS into four narrative acts that scroll into one another without page reloads: 1. **Act I — *Wordmark and Charter.*** Full-bleed terrazzo ribbon. Wordmark `nonri.org` lands as 18 hand-cut paper letters that cascade in (stagger 60ms each, spring tension 180), each at its own baseline ±18px. The Articles of Disincorporation typewrite in Fraunces below at 22 chars/sec, with the teal Caveat marginalia drawing in (path-draw-svg) one annotation at a time, each delayed 220ms after its anchor sentence completes. 2. **Act II — *The Board.*** A diagonal terrace at +3°. Eight Ziggurat Dot Tower portraits, each in a different Carlton accent, arranged in a deliberately broken 5/3 split (column 7 still missing). On hover, the tower scales up 1.08×, the dots stagger-bounce in sequence top-to-bottom, and a Tassinari Tassel unfurls beside the name. Names typed in Caveat at -3° rotation. No photography — the tombstone is the portrait. 3. **Act III — *Annual Report (Vol. 1981/2026).*** The terrace tilts -2°. Five charter articles laid out as terrazzo-bordered tablets, each with: a colossal Carlton Triangle as section number (in the section's accent), a single Fraunces paragraph as the article body, and a Sottsass Squiggle that animates as the user scrolls past — drawing path-by-path along its seven inflections at 0.7× scroll speed. Numbers within the report ("$48,200 disbursed for the patronage of asymmetry") **counter-animate** from zero in Bagel Fat One when the tablet enters viewport. 4. **Act IV — *Articles of Disincorporation.*** A pink 320px-square footer block, off-center right. Inside: 8pt all-caps Fraunces text declaring the non-profit's intent to dissolve the moment any of its members starts taking it seriously. The square is the *only* place on the site where lavender `#C9B6E4` becomes the dominant ink, and it is the *only* fully right-angled element on the page — the joke is that the dissolution clause is the only rigorous thing. **Animation rules:** - **Spring motion only.** No linear easing anywhere. All transforms use a custom CSS spring `cubic-bezier(0.34, 1.56, 0.64, 1)` or a JS spring with tension 220 / friction 18. - **The column-7 bunting** is `position: fixed`, full viewport height, 64px wide, on the right of the missing column at 7/11 across. It does not parallax — it stays put. As the user scrolls, every other layer drifts past it; the bunting's checkerboard squiggle wave **redraws** itself once every 800px scrolled, the swipe-direction matching the scroll direction. - **Cursor squiggle ribbon** as described above, lavender, 280ms decay, only on devices with fine pointers. - **Path-draw-svg** is the *signature* animation. Every Sottsass Squiggle, every Tassel, every Carlton Triangle outline draws on entry from a single anchor point at 1200ms duration with `stroke-dasharray` techniques. This is the closest the design ever gets to "rigor" and the design admits it openly. - **Terrazzo confetti** in the header has 11 individual chips, each on its own 8-12s `@keyframes` shimmy of ±3px translation and ±4° rotation — the ribbon never fully rests. **Storytelling bias:** the visitor is invited to *read the entire charter*. There is no "skip" button, no CTA, no signup, no "donate" pill, no pricing, no stat-grid, no testimonial carousel. The annual-report figures **are** the testimonials. The charter **is** the value proposition. The Articles of Disincorporation **are** the contact form (they end with the line "if you wish to depose this committee, write to *non@nonri.org*"). Reading-time is 9-11 minutes; the design rewards finishing with a final, hidden Tassinari Tassel that unfurls at 100% scroll and gently sways for as long as the visitor remains on the page. **Mobile fallback:** the diagonal terraces straighten (transform: rotate(0)). The column-7 bunting becomes a 12px-wide right-edge fixture rather than a column. The 11-column grid collapses to single-column. Every other rule survives — the squiggles, the typewriter charter, the lavender footer, the cursor ribbon (replaced by a touch-ripple in lavender). ## Uniqueness Notes **Differentiators from the 350-DESIGN.md corpus:** 1. **Memphis-Milano taken as governance, not as decoration.** Memphis aesthetic appears in only ~2% of the corpus (motifs/aesthetic intersections), and where it appears it is treated as a "fun" surface. nonri.org alone treats the Memphis movement as the *organizational philosophy* of a fictional non-profit — the design *argues a thesis* rather than *applies a style*. This conceptual seriousness about a famously unserious movement is unique here. 2. **The deliberately-missing 7th column.** A 10/11 grid where column 7 is structurally absent and replaced by a fixed-position checkerboard-squiggle bunting is, to the corpus, novel. Most "broken-grid" entries (10% of corpus) break rhythm or alignment; none remove a column wholesale and replace it with a vertical motif anchor. 3. **Tilted shelves at +3°/-2°/+5° for entire sections** rather than for individual cards. Frequency analysis shows diagonal-sections at 4%, but those entries diagonal-cut backgrounds. nonri.org *physically tilts the document terrace itself*, building a Carlton-bookcase-from-twelve-feet metaphor across the whole scroll. No other design in the corpus structures vertical reading flow as a rotated stack of terraces. 4. **A hidden color (`#C9B6E4` lavender) appearing in exactly three controlled locations.** The corpus shows palette discipline as either "monochrome" (10%) or "gradient" (81%); a *9-color palette where the 9th appears in only three pre-declared spots* is a unique discipline-rule that no other entry articulates. It treats color as *liturgy*: the rare hue is meaningful precisely because it is rationed. 5. **A complete rejection of CTAs, dashboards, and stat-grids in favor of a narrative legal document.** Charter, Board, Annual Report, Articles of Disincorporation — these are the only four sections, and they are read as a continuous editorial scroll. No "donate" button, no email form, no pricing block, no testimonial carousel, no stats counter (counters exist, but they animate dollar-disbursement-figures *inside* charter prose, not in a grid). Compared with the 74% of the corpus tagged as "dashboard" and the 52% as "card-grid," nonri.org's editorial-only architecture is a deliberate refusal. 6. **Three Google Fonts deployed as voice-channels** — Bagel Fat One as **the wordmark and shape-museum**, Fraunces (with its rare *soft* axis dialed to 100) as **the notary**, and Caveat as **the chairman's teal pen** in the margins. The use of Fraunces's *soft* axis is, to the corpus, novel — most serif-revival entries (10%) use Cormorant or Playfair without invoking the variable axes. The teal-pen-marginalia layer in Caveat with -3° rotation is a unique typographic role no other site assigns. 7. **The Sottsass cursor ribbon in lavender.** Cursor-follow appears in 22% of the corpus, but the corpus's cursor effects are dots, glows, magnets, and crosshairs. A 14px squiggle that **rotates to face direction of travel** and leaves a *fading ribbon of squiggles* in the **only motion-bound use of the otherwise-rationed lavender** is unique to this design. 8. **A pun structure that nests four "non-ri" readings** into a single committee-minutes voice — *non-rigid* (the bent grid), *non-rigorous* (the tilted shelves), *non-right-angle* (the only right angle is the dissolution clause), *non-routine* (the rotation of accent colors per section). The corpus shows multilingual wordplay in only the related nonri.day (koi/logic/villa) and nonri.net (without principle/dragnet) sites; nonri.org alone constructs a *single-language fourfold pun* that is then literalized as four design rules. **Chosen seed (planned):** *memphis bold shapes portfolio* — used here as governance-by-Memphis rather than portfolio-by-Memphis. Frequency-table places memphis at 2% (motifs) and the seed unused as a stylistic frame for a non-profit charter genre, making this combination unique in the corpus. **Avoided patterns from frequency analysis:** dashboard (74%), card-grid (52%), full-bleed-photography (80%), gradient palettes (81%), warm palettes (81%), parallax-as-default (77%), stagger-as-default (69%), mono typography (81%), hand-drawn aesthetic (75%), friendly tone (66%). nonri.org uses none of these as primary devices; where it touches them (parallax, stagger), it does so within the specific Carlton-shelf and squiggle vocabulary so the technique reads as *Memphis kinetics*, not as the corpus's default behavior.