# Design Language for nonri.org

## Aesthetics and Tone

**nonri.org** is a library that grew soft edges. The domain reads as a syllable of something ancient — a first breath, a proper noun from a language you half-remember — and the site leans into that ambiguity. It is a reading room that has been left in the hands of a friendly archivist who also happens to love mid-2010s organic UI: the walls have gentle curves, the bookshelves bulge slightly at their centers, the reading lamps cast pools of cream on burgundy cloth. Nothing is rigid. Everything invites you to reach out and press it.

The aesthetic is **blobitecture applied to scholarly warmth**: an architecture of rounded, inflated, pulsing shapes — not the clinical blob of a fintech app but the round spine of a well-loved book, the swell of a leather reading chair, the soft dome of a lamp shade. Blobs here are made of knowledge, not startup optimism. Every container is slightly too round. Every background shape breathes.

The tone is **approachable-casual**: the archivist is delighted you came in, speaks conversationally, uses "you" and "we" freely, and has strong feelings about which tea goes best with which section of the library. There is no intimidation. This is not a place that demands credentials. The books are available to anyone who wanders in.

Primary mood word: **warm hospitality inside a very good library**.
Secondary mood: **gentle surprise** — a small animation that tells you "yes, this is interactive, and it is pleased you noticed."

## Layout Motifs and Structure

The layout follows the **F-pattern reading gravity** — the eye enters top-left, sweeps horizontally across a wide hero band, then drops and scans left, then drops again and scans a shorter horizontal, then settles into a vertical column along the left margin. This is not the clinical F-pattern of eye-tracking research papers; it is the F-pattern of someone settling into an armchair with a new book: wide sweep of the cover, narrower scan of the back matter, then straight into the opening page.

**Macro structure:**
- **Band 1 (hero / wide sweep):** Full-width blobitecture header zone. A large off-center blob shape in burgundy fills roughly 60% of the viewport height. The logo/wordmark "nonri" sits inside this blob in oversized cream display type, set flush-left with a generous left margin (~8vw). The subtitle floats below, also left-aligned, but smaller and lighter — the eye scans right to find a secondary icon cluster.
- **Band 2 (narrower sweep):** A two-column section directly below the hero. Left column (~65%) holds the primary text / content introduction. Right column (~35%) holds a tall stack of scholarly icon cards — each card is a rounded rectangle (border-radius: 2rem) containing a single large icon (SVG, 64px) and a one-line label. This column continues the blob language: the card stack itself sits inside a large cream blob-background shape.
- **Band 3 (left rail / reading column):** Below band 2, the layout narrows to a single-column reading flow (~680px max-width, centered within the left two-thirds of the grid). This is the long-form content zone. Section breaks are marked with a small decorative SVG blob divider, not an `<hr>`.
- **Footer:** Full-width, burgundy background, cream text. Contains a small icon row (5–6 icons at 24px) representing site sections, and the wordmark repeated small.

**Blob language rules:**
- Background blobs are SVG `<path>` elements with `filter: blur(0)` at resting state; they are not blurred. They have `border-radius`-equivalent curve control via cubic bezier handles in the SVG path. No CSS border-radius on the blob SVGs themselves.
- Content container cards use CSS `border-radius: 1.5rem–3rem` (varying by hierarchy — larger containers, larger radius).
- No right angles anywhere except body text paragraphs.
- Spacing is generous: minimum 2rem padding inside all blob-bordered containers.

**Grid:** 12-column CSS Grid with 2rem gap and 8vw outer margin on screens > 1200px. Below 768px, collapses to single column with 1.25rem outer margin.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Display / Wordmark:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 900 (Black), no italic for the wordmark, italic for pull-quotes. Set the hero wordmark "nonri" at `clamp(7rem, 16vw, 16rem)`, tracking `-0.02em`. Playfair Display Black at this size has the right combination of editorial authority and organic warmth — its serifs are slightly flared, its curves are generous, and it holds up inside a burgundy blob without feeling brittle.
- **Section Headings (H2):** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 700, size `clamp(2.2rem, 4vw, 3.5rem)`, tracking `0`.
- **Body / Running Text:** [`Lora`](https://fonts.google.com/specimen/Lora), weight 400, size `1.125rem` (18px base), line-height `1.75`. Lora is a literary serif designed for comfortable long-form reading on screen — it pairs naturally with Playfair Display because both descend from the same humanist-serif tradition, but Lora is softer and more text-like where Playfair Display is dramatic.
- **UI Labels / Icon Cards / Navigation:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans), weight 400 and 500, size `0.875rem`–`1rem`. DM Sans introduces a friendly geometric-sans contrast against the two serifs — it is the archivist's handwriting on the card tabs.
- **Pull-quotes / Callouts:** Playfair Display, weight 400 italic, size `clamp(1.4rem, 2.5vw, 2rem)`, cream on burgundy, inside a rounded blob callout box.

**Palette:**

| Role | Name | Hex |
|---|---|---|
| Primary background | Aged Cream | `#F5EDD8` |
| Hero blob / accent | Deep Burgundy | `#6B1A2C` |
| Secondary blob / card bg | Warm Blush | `#E8C9BA` |
| Text / primary dark | Ink | `#1C0A0F` |
| Muted text / captions | Faded Ink | `#5C3D42` |
| Icon accent | Dusty Rose | `#C27A7A` |
| Highlight / hover glow | Pale Gold | `#E8D4A0` |
| Footer background | Dark Burgundy | `#3D0B17` |
| Link / interactive | Burnt Rose | `#9E3B4A` |

**Color logic:** The page ground is `#F5EDD8` (Aged Cream) — the exact color of a quality paperback's pages after ten years. The hero blob is `#6B1A2C` (Deep Burgundy) — bookcloth, red wine, the velvet of a reading chair. The icon cards sit on `#E8C9BA` (Warm Blush) blobs — a lighter tint in the same warm family. Text is `#1C0A0F` (Ink) — not pure black, but a dark reddish-brown that belongs to the palette rather than imposing on it. Hover states glow to `#E8D4A0` (Pale Gold), like lamplight catching a page edge.

## Imagery and Motifs

**All imagery is icon-heavy SVG.** No photography. No 3D renders. No stock illustrations. Every visual element is a purpose-drawn SVG icon at one of three standard sizes: 96px (hero feature icons), 64px (card icons), 24px (inline and navigation icons). Icons are drawn in a consistent style:

- **Line weight:** 2px stroke, no fill except for deliberate accent fills on a single element per icon (e.g., a book icon has an open fill on its pages but stroke-only on the spine).
- **Color:** Stroke color is always `#6B1A2C` (Deep Burgundy) or `#C27A7A` (Dusty Rose). Fill accents use `#E8D4A0` (Pale Gold) sparingly.
- **Corner style:** Rounded stroke joins (`stroke-linejoin: round`, `stroke-linecap: round`), which echoes the blob architecture of the containers.
- **Motif vocabulary (recurring icon set):** open book with spread pages, fountain pen with ink drop, magnifying glass with page, stack of three books, single candle in holder, rolled-up scroll with ribbon, graduation mortarboard, leaf bookmark, ink bottle, reading glasses, laurel branch (single), hourglass, library card catalog drawer, compass rose (for navigation/discovery theme).

**The book-scholarly motif language** runs through every decorative layer:
- SVG blob background shapes subtly suggest book pages fanned open — a left blob curves like the spine of an open codex, a right blob curves like the open pages.
- The section divider SVG is a single horizontal ink stroke with two small circular ink blots at each end (like the ornamental rule at the end of a chapter in a Victorian novel).
- The footer contains a very small (48px) SVG of a closed book with a ribbon bookmark, tinted cream on burgundy, used as a colophon mark.
- Subtle background pattern on the `Aged Cream` ground: a very low-opacity (4–6%) repeating diamond grid in `#C27A7A` (Dusty Rose), 32px pitch, suggesting laid paper or a library card grid.

**No blob SVGs are filled with gradients** — flat fills only. The richness comes from the palette's warmth, not from gradient complexity.

## Prompts for Implementation

**The story to tell:** A reader discovers a beautifully designed online archive or reading community called nonri. The page opens with a large, breathing burgundy blob shape that holds the name in enormous cream type — not a product name, but a name like a place: quiet, confident, old enough to trust. As the reader scrolls, the F-pattern reveals: first the wide hero, then a tidy grid of icon cards (what is inside the library, what can you find here), then the long-form reading column where the actual content lives. Every scroll step feels like turning a page, not clicking a button.

**Animation approach — bounce-enter as the primary motion language:**
- All content panels and icon cards enter the viewport with a `bounce-enter` animation: they scale from `0.85` to `1.0` with a cubic-bezier that overshoots slightly — `cubic-bezier(0.34, 1.56, 0.64, 1)` — and simultaneously fade from opacity `0` to `1`. Duration: `0.45s`. This is a single gentle bounce (not oscillating), like a soft object landing on felt.
- The hero blob SVG shape itself has a continuous very-slow `morph` idle animation — its control points shift ±8px over 6 seconds on a smooth loop (CSS `@keyframes` with `d` attribute interpolation, or via GSAP morphSVG). This gives the background shape a breathing quality without being distracting.
- Icon cards on hover: `scale(1.06)` with the same `cubic-bezier(0.34, 1.56, 0.64, 1)` spring — a small confirming bounce. Background shifts from `#E8C9BA` to `#E8D4A0` (Pale Gold highlight).
- The wordmark "nonri" on page load: letters enter with a staggered bounce-enter, each letter delayed by `0.06s` from the previous, coming from `translateY(24px)` to `translateY(0)` plus the scale spring. Total wordmark entrance duration: ~0.7s.
- No parallax. No cursor-reactive effects. No scroll-hijacking. The motion must feel like a book being opened, not a device showing off.

**Scroll-triggered reveals:** Use `IntersectionObserver` with a `0.15` threshold. Each new section that enters the viewport triggers the `bounce-enter` for its children, staggered at `0.07s` intervals. The left-column content (body text) fades in without bounce — `opacity 0→1` over `0.4s`, `translateY(12px)→0`. Only the blob-container elements and icon cards use the full bounce.

**HTML/CSS implementation notes:**
- The hero blob is a `<svg>` positioned absolutely behind the text, `viewBox="0 0 1440 900"`, with a single `<path>` element. The blob path is hand-crafted as a smooth closed cubic bezier with 8 control points. It does not clip text; text sits above it in normal document flow.
- Icon cards are `<article>` elements inside a CSS Grid (`grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))`). Each card has `border-radius: 2rem`, background `#E8C9BA`, padding `1.75rem`, and contains: SVG icon (64px, centered), a `<h3>` in DM Sans Medium, and a one-line `<p>` in Lora at `0.875rem`.
- The repeating background diamond pattern is implemented as a CSS `background-image: url("data:image/svg+xml,...")` on `body`, low opacity.
- Avoid: hero CTA buttons, pricing grids, stat counters, testimonial carousels, sticky header with hamburger, mega-navigation, modal popups, notification banners.
- Embrace: long comfortable reading column, generous white space, section titles that feel like chapter headings, blob shapes as containers rather than decorations, icons that name things rather than sell things.

## Uniqueness Notes

**Three or more deliberate differentiators from every other design in the registry:**

1. **Blobitecture applied to scholarly warmth — an unrealized combination.** The registry shows `blobitecture` at 1% (only one or two prior uses), and those uses treat blobs as abstract tech/startup decoration. This design is the first in the registry to use the blob language as *architectural metaphor for books and reading* — blob shapes derive their curves from book spines, open pages, and reader's chair forms. The shapes have a reason beyond aesthetics.

2. **F-pattern layout at 3% — almost never used intentionally.** The corpus defaults to `asymmetric` (41%) and `single-column` (21%). This design commits to the F-pattern as a deliberate structure, not a default — the three horizontal bands and left-column gravity are engineered to match the natural reading scan path of someone approaching editorial content. No other design in the registry uses F-pattern as a primary composition principle.

3. **Bounce-enter as the sole motion language, at 2% frequency.** The registry's motion patterns are dominated by `ripple` (10%), `hover-lift` (10%), and `parallax`. This design uses a single animation primitive — the `cubic-bezier(0.34, 1.56, 0.64, 1)` spring bounce — for all enter animations, hover states, and wordmark reveals. Using one motion language end-to-end creates a coherent tactile personality (soft landing on felt) rather than a repertoire of effects.

4. **Icon-heavy imagery paired with literary motifs — tools that are also symbols.** At 5%, `icon-heavy` is used in the registry primarily for tech/SaaS product pages (listing features). Here the icon set is drawn from scholarly/library iconography (books, scrolls, quills, compasses) and serves as the primary decorative language rather than a feature checklist. The icons are decorative and atmospheric, not argumentative.

5. **Burgundy-cream palette at 3% used with aged-paper warmth rather than luxury-brand authority.** The prior uses of `burgundy-cream` in the registry lean toward premium wine, fashion, or upscale brand positioning. This design uses the same palette family but grounds it in worn paper, lamplight, and reading-room textiles — familiar and inviting rather than aspirational or exclusive.

**Chosen seed:** aesthetic: blobitecture, layout: f-pattern, typography: oversized-display, palette: burgundy-cream, patterns: bounce-enter, imagery: icon-heavy, motifs: book-scholarly, tone: approachable-casual

**Avoided overused patterns (from frequency analysis):**
- `asymmetric` layout (41% — most overused layout, deliberately replaced with f-pattern)
- `terminal` aesthetic (31% — most overused aesthetic overall)
- `glassmorphism` (20%)
- `single-column` layout (21%)
- `parallax` motion pattern (multiple entries in top-used)
- `hover-lift` (10%)
- `circuit` motif (13%)
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:49:26
  domain: nonri.org
  seed: seed:
  aesthetic: nonri.org** is a library that grew soft edges. The domain reads as a syllable of...
  content_hash: ff76b900db8d
-->