# Design Language for nonri.day

## Aesthetics and Tone

nonri.day is **a single unhurried day spent making small things by hand, transcribed onto unbleached paper**. The name reads as *놀이* (*nori* / *nonri*) — the Korean word for the kind of play that has no scoreboard: whittling, folding, kneading, sweeping, the slow arrangement of objects on a windowsill. The TLD *.day* binds it to one rotation of light: this is not a portfolio, not a shop, not a "studio site" — it is **a workbench photographed at six moments between waking and dusk**, each moment holding exactly one object that someone's hands were busy with.

The aesthetic is **evolved-minimal / muji-grade restraint** — the rarest tier in the corpus (evolved-minimal at 0%, muji at 2%, japanese-minimal at 2%). Where the registry overwhelmingly leans hand-drawn (96%) and glassmorphism (79%), this site refuses both: no doodled marginalia, no frosted panels, no glow. Instead it pursues the discipline of a Muji paper-goods catalogue crossed with a wabi-sabi tea notebook — surfaces are matte, edges are honest, and the only "decoration" is the faint tooth of recycled stock and a single dyed thread.

The tone is **zen-contemplative, grounded-earthy** — slow breathing made visible. Text is sparse and present-tense. Nothing shouts. The most dramatic event on the page is a thread being pulled taut. The mood: a clean room, late-morning sun on a wooden table, the small satisfaction of a thing finished and set down.

## Layout Motifs and Structure

The page is a **single column, ruthlessly centered, ma-negative-space at its most severe** — single-column at 17% (preferred over the 90% card-grid and 83% generic-centered crowding), ma-negative-space at 15%. There is **no header bar, no nav menu, no sidebar, no footer columns, no card-grid, no bento-box, no dashboard.** Roughly 80% of every viewport is empty paper. Content sits in a column **no wider than 38rem**, drifting slightly off true-center (left by 4vw) so the right margin reads as deliberate breathing room — the *ma* of a hanging scroll.

The day is structured as **six "beats" stacked vertically**, each beat one full viewport tall, each holding **one object only**:

1. **06:12 — the unwound bobbin** (the day begins; a spool of red thread)
2. **09:40 — the folded square** (a single sheet of paper, one crease)
3. **11:55 — the half-turned bowl** (an unglazed ceramic form, still wet)
4. **14:30 — the swept line** (a broom's worth of dust gathered into a curve)
5. **17:08 — the mended sleeve** (sashiko stitches, the red thread reappearing)
6. **18:44 — the objects set down** (all five objects arranged on a sill, the thread connecting them)

Between beats there is **one full empty viewport of nothing** — paper, a hairline, a timestamp, and silence. This "rest beat" is structural, not accidental: it is the pause between two strokes of a brush. A **vertical hairline** (0.5px, ink-grey, 30% opacity) runs down the exact center of the column the entire length of the document — the "spine" of the daybook — and the red thread is rendered as an SVG path that **weaves across that spine**, in front of and behind it, as the only continuous element binding all six beats.

Object placement within a beat follows a **strict modular rhythm**: object centered horizontally, sitting on the lower third (a "shelf line" at 66vh), timestamp set in mono at top-left of the column, a two-line caption set in humanist sans below the shelf line. Never more than these three text blocks. Never an image and a heading side by side.

## Typography and Palette

**Fonts — Google Fonts only, verified available. Three voices, each with one job, never blended:**

- **Zilla Slab** (weights 300, 400, 500; italic 400) — *the daybook hand*. A gentle slab-serif by Typotheque (commissioned for Mozilla), with soft slab feet and an unfussy, almost stationery quality. Used for the wordmark "nonri.day", the six object titles, and any line that is "spoken." Titles set at `clamp(2rem, 5.5vw, 4.25rem)`, weight 300, `letter-spacing: -0.01em`, color ink-grey. Slab-serif sits at only 3% of corpus typography — chosen here for warmth without nostalgia.
- **IBM Plex Mono** (weights 400, 500) — *the clock*. Carries only timestamps (`06:12`, `09:40`, …), the tiny "beat n / 6" counter, and a one-word verb stamp per beat (`winding`, `folding`, `turning`, `sweeping`, `mending`, `resting`). Set at 0.72rem, `letter-spacing: 0.16em`, uppercase, color thread-red at 70% opacity. Mono is near-universal (94%) — but here it is rationed to fewer than 30 glyphs on the whole page, a near-silent use.
- **Albert Sans** (weights 300, 400) — *the caption breath*. A humanist sans by Andreas Rasmussen. Carries the two-line captions only. Set at 0.95rem, weight 300, `line-height: 1.7`, color ink-grey at 80%. Humanist at 46% — used here in its quietest register.

**Palette — paper-and-thread, six values, matte throughout. No gradients beyond a single 4%-opacity paper vignette.**

- `#F4F1E8` — **unbleached paper** (page background; the color of recycled muji stock)
- `#EAE6D9` — **deep fold** (the rest-beat background, one step warmer/darker, like paper in shadow)
- `#2B2A26` — **sumi ink-grey** (all primary text, object line-drawings; never pure black)
- `#9A968A` — **graphite wash** (hairlines, the spine, secondary captions, drawing under-strokes)
- `#C0442E` — **vermilion thread** (the single dyed thread, timestamps, verb stamps, the one accent — used on less than 3% of pixels)
- `#7E8A6E` — **dried-sage** (a near-imperceptible second accent: the broom's bristles, a leaf on the sill, used once or twice total)

This pairing is deliberately outside the corpus's 98%-warm / 95%-gradient default: it is *warm* only in the muted, papery sense, and there is essentially **no gradient** — flatness is the point.

## Imagery and Motifs

**Every object is rendered as a hand-weight SVG line-drawing — never photography (the 98% default), never 3D, never raster texture, never stock illustration.** The drawings are made of **single-weight 1.25px graphite strokes with open corners** (lines don't quite meet — the wabi-sabi imperfection), as if traced with a 2H pencil. Each of the six objects gets one drawing of 6–14 strokes maximum. No shading, no fills except a single 6%-opacity wash inside the bowl and the bobbin.

**The Thread (the only continuous motif).** A single SVG `<path>` in vermilion, `stroke-width: 2px`, `stroke-linecap: round`, that begins at the unwound bobbin in beat 1 and travels the entire document — sometimes a slack curve, sometimes pulled into a straight diagonal, weaving over and under the central spine via stacked path segments with alternating z-order. In beats 5 and 6 it becomes literal sashiko running-stitch (a dashed segment). It is the spine of the narrative and the only element animated continuously.

**Paper tooth.** A subtle SVG `feTurbulence` grain filter (baseFrequency ~0.9, very low alpha, ~3% opacity) overlaid on the whole page so the background reads as fibrous stock, not flat #F4F1E8. One barely-visible vignette (radial, paper-darker, 4%) at the page edges.

**Margin marks.** In the far-left margin of each beat, a tiny mono fraction (`1/6`, `2/6`…) and a 12px graphite tick mark — the only "navigation," like page numbers pencilled in a notebook corner.

**No icons. No logos but the wordmark. No buttons that look like buttons.** A "link" is an underlined word in Zilla Slab; the underline is a graphite hairline that draws itself left-to-right on hover (underline-draw, 17%).

## Prompts for Implementation

Build nonri.day as **one HTML file, one CSS file, one small JS module, one inline SVG sprite** — no framework, no router, no build step, target under 55KB uncompressed. The SVG sprite holds the six object line-drawings, the thread path keyframes, and the grain filter.

**Treat the page as a ~70-second slow scroll through one quiet day.** There is no CTA, no pricing block, no stat grid, no testimonial row, no email signup, no contact form, no "our services." There is only: wordmark, six object-beats, five rest-beats between them, and a closing line.

**Document skeleton:**

```
<body>
  <div class="grain" aria-hidden="true"></div>           <!-- feTurbulence overlay -->
  <main class="daybook">
    <header class="mark">nonri.day — <span>a day of small making</span></header>
    <svg class="spine" aria-hidden="true">…</svg>          <!-- center hairline + thread path -->
    <section class="beat" data-beat="1">…</section>        <!-- 06:12 unwound bobbin -->
    <section class="rest"></section>                       <!-- empty paper, deeper fold -->
    <section class="beat" data-beat="2">…</section>        <!-- 09:40 folded square -->
    <section class="rest"></section>
    … (beats 3–6 with rests between) …
    <footer class="dusk">the things are set down. tomorrow there will be others.</footer>
  </main>
</body>
```

**Animation & interaction (all spring-eased, never bouncy):**

- **The thread is the protagonist.** On load it is slack at the bobbin; as the user scrolls, a single SVG `stroke-dashoffset` animation "draws" the thread downward beat by beat, scrubbed to scroll position (path-draw-svg, 40%). When a beat enters the viewport its segment of the thread *pulls taut* over ~600ms (a slight straightening of two control points), then relaxes 4px as it settles — like a stitch being cinched.
- **Objects assemble, they don't fade in.** Each object's line-drawing reveals stroke-by-stroke on enter — `stroke-dashoffset` per `<path>`, staggered 60ms apart (stagger, 72%), so a bowl appears to be *drawn* in 8 quick strokes over ~700ms. The open corners mean the strokes never quite close — leave them.
- **Timestamps tick.** The mono timestamp counts up from the previous beat's time to the current one over ~900ms when the beat enters (counter-animate, 14%) — `06:12` rolls forward digit by digit. The verb stamp (`winding`) types itself in 7 letters (typewriter-effect, 12%), once.
- **Rest beats breathe.** During a rest beat the page background eases from `#F4F1E8` to `#EAE6D9` and the grain opacity lifts ~1% — a held breath — then releases as the next beat enters. Optional: a faint 0.04 parallax on the spine hairline only (parallax, 92% — used here at homeopathic strength).
- **Hover is a pencil line.** Links underline via a graphite hairline drawing left→right (underline-draw). The wordmark, on hover, has its single red thread-loop pull slightly tighter. No tilt-3d, no magnetic cursor, no glow, no card-flip.
- **Cursor (optional, faint):** a 3px graphite dot, no trail, no follow-lag — or omit entirely. Default to omitting; this page does not chase the mouse.

**Bias the whole build toward stillness and one continuous thread.** When in doubt: more empty paper, fewer words, slower easing, and let the vermilion line carry the story.

## Uniqueness Notes

Deliberate departures from the 434 designs in the registry and from generic minimalism:

1. **Evolved-minimal / muji at the 0–2% floor — and *kept* minimal.** Most "minimal" entries in the corpus drift into glassmorphism (79%) or hand-drawn doodles (96%). nonri.day commits to genuine Muji-grade restraint: matte surfaces, recycled-paper background, no glow, no doodles, no gradients beyond a 4% vignette. This is the rarest aesthetic tier in the corpus, executed without flinching.
2. **A single SVG thread as the only continuous motif and the only protagonist.** No registry design uses one dyed-thread path that weaves over/under a central spine hairline and is scrubbed by scroll as the narrative spine. The "thread pulls taut on beat-enter" gesture is bespoke.
3. **Structural rest-beats — one empty viewport between every content viewport.** Deliberately empty, color-shifting "pause" sections as a first-class layout element (the *ma* between brush strokes) rather than incidental whitespace.
4. **Palette outside the 98%-warm / 95%-gradient default.** Paper-and-thread: `#F4F1E8` unbleached paper, `#2B2A26` sumi ink, `#C0442E` vermilion on under 3% of pixels, `#7E8A6E` dried-sage used once or twice. Essentially zero gradient — flatness is the thesis.
5. **Mono typography rationed to under 30 glyphs total.** Mono is at 94% across the corpus; here it appears only as six timestamps, six verb stamps, and tiny page-fractions — a near-silent use of an over-used face.
6. **Object-as-line-drawing with open corners (wabi-sabi imperfection)** — no photography (the 98% default), no 3D, drawings that intentionally don't close, revealing stroke-by-stroke like a hand sketching.

Chosen seed/style: **muji clean functional** (with evolved-minimal / wabi-sabi-imperfect-ceramic accents from `seeds.json`).

Avoided overused patterns from the frequency analysis: hand-drawn (96%), glassmorphism (79%), photography (98%), card-grid (90%), full-bleed-as-default (88%), generic-centered stacking (83%), cursor-follow (89%), magnetic (81%), tilt-3d (27%), warm-gradient palettes (95–98%), and the pastoral-romantic tone (35%) — replaced here with zen-contemplative / grounded-earthy.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:49:48
  domain: nonri.day
  seed: unspecified
  aesthetic: nonri.day is **a single unhurried day spent making small things by hand, transcr...
  content_hash: 7f8b7ffbf37b
-->