# Design Language for lrx.sh ## Aesthetics and Tone `lrx.sh` is a tiny command-line tool — a "log relay / extract" shell utility — but its website refuses the usual terminal-green-on-black cliché. Instead the site is presented as a **wabi-sabi ceramic studio catalogue**: the tool is treated like a single, hand-thrown earthenware vessel photographed on a paper-textured table. The mood is *quiet, imperfect, slow, considered* — the opposite of a hype landing page. Think of a Japanese mingei pottery monograph crossed with a man-page: cracks, kiln scars, uneven glaze edges, and a soft hush of negative space (*ma*). Nothing glows. Nothing pulses. The single piece of "code" on the page is shown the way a museum shows a brushstroke — framed, isolated, surrounded by air. Tone is **zen-contemplative and grounded-earthy**: short declarative sentences, lower-case headings, generous silence between thoughts. The reader should feel they are turning the pages of a thin clay-bound booklet, not browsing a SaaS site. Warmth here is the warmth of fired clay and tatami light, not the warmth of orange CTA gradients. ## Layout Motifs and Structure - **Single vertical column, off-centred** — content sits at roughly 38% from the left edge on wide screens, leaving a wide raw margin on the right like the untrimmed edge of handmade paper. This deliberate asymmetry (a `ma-negative-space` / `editorial-flow` hybrid) avoids the centred-everything default. - **Stacked "shelf" sections** separated not by lines but by large empty bands of paper texture — each section is one idea, breathing alone. - A persistent thin **"kintsugi seam"**: a hairline gold crack runs down the page as you scroll, drawn progressively via SVG `path-draw`, joining the sections like repaired pottery. - **No navbar.** A small vertical word-stack of section names floats in the right margin, rotated 90°, like a spine label on a book. - The one code block — `lrx access.log | lrx --extract 5xx` — is set inside a **deckle-edged "vessel" frame**: an irregular, slightly wobbly border drawn with SVG so no two corners match. - Footer is a single line of clay-coloured text, pressed low, like a maker's stamp on the underside of a bowl. ## Typography and Palette **Typefaces (all Google Fonts):** - Display / headings: **Zilla Slab** — a humble, slightly soft slab serif that reads like a worn rubber stamp. Headings are lower-case, loose tracking, light weight. - Body: **Spectral** — a calm, generous-x-height serif with real warmth; used at a large, slow reading size (1.25rem, line-height 1.85). - The lone code sample: **DM Mono** — used *once*, deliberately, so the monospace voice feels like a quiet aside rather than the site's identity. - Maker's-mark / labels: **Zilla Slab** small-caps, letter-spaced wide. **Palette (earth-tones, muted, low-contrast):** - `#EAE3D6` — *unbleached paper* (page background) - `#DAD0BD` — *kneaded clay* (section bands, vessel frame fill) - `#3A3329` — *kiln soot* (primary text) - `#8C6A4A` — *terracotta slip* (secondary text, the rotated spine labels) - `#A8956F` — *ash glaze* (hairlines, muted accents) - `#B08D3C` — *kintsugi gold* (the single repair-seam line and link underlines only — used sparingly, never as a fill) Contrast stays intentionally gentle; the gold is the only thing approaching brightness, and even it is dulled toward bronze. ## Imagery and Motifs - **Paper-and-clay textures**, generated in-browser with grain/noise overlays — no stock photography anywhere (a deliberate break from the 98% photography norm). - **Kintsugi crack** as the recurring motif: hairline gold fissures that "repair" gaps between blocks. - **Glaze-drip blobs**: a few soft, irregular organic shapes (CSS `border-radius` morphs / SVG) settle in the wide right margin like dried glaze runs — they drift extremely slowly, almost imperceptibly. - **Throwing-rings**: faint concentric circles, like the spiral marks left by a potter's wheel, sit behind the hero word `lrx`, drawn as thin SVG arcs. - **Maker's stamp** glyph: a small impressed-square mark used as the bullet character and the favicon. - **Edges that aren't straight**: every framed element gets a slightly hand-cut, wobbling SVG border. Imperfection is the brand. ## Prompts for Implementation - Build a **slow, scroll-led narrative**: one full-viewport "page" per idea — (1) the vessel itself: the word `lrx` huge in Zilla Slab over faint throwing-rings; (2) "what it does", set like a haiku, three short lines; (3) the single code sample inside the deckle-edged vessel frame; (4) "the pieces", a quiet stacked list of subcommands as if listing the parts of a tea set; (5) the maker's-stamp footer. - The **kintsugi seam** is the central interactive idea: an SVG `path` down the centre-left, its `stroke-dashoffset` tied to scroll progress, drawing a thin gold crack that visually "mends" the page as the reader descends. Where the crack passes a section heading, a tiny gold fleck settles. - Section text should **fade and rise in on entry** (`fade-reveal` + gentle translate, ~12px, ~700ms ease-out) — calm, never bouncy. No spring, no elastic, no magnetic cursor — those are forbidden here; the whole point is stillness. - Add a barely-there **paper grain** via an SVG `feTurbulence` filter layered at low opacity over the whole page; let the grain shift one or two pixels on slow `requestAnimationFrame` so the surface feels alive but never busy. - The glaze-drip blobs in the right margin: 2–3 of them, each `animation` cycle 40–80s, `border-radius` morphing between asymmetric values. They should be ignorable. - Type sets large and unhurried; line lengths short (≈58ch); whitespace is the loudest element. - Links: ink-coloured text with a thin **kintsugi-gold underline that hand-draws** left-to-right on hover (`underline-draw` via SVG, ~400ms). - AVOID: hero CTA buttons, pricing tables, feature stat-grids, testimonial carousels, dark-mode terminal styling, glassmorphism, neon, parallax photo layers, cursor-follow gimmicks, anything that "pops". This is a hushed object on a paper table, not a product page. ## Uniqueness Notes Differentiators from the other 314 designs: 1. **A `.sh` developer tool that completely rejects terminal/mono/dark-mode aesthetics** — instead it's a wabi-sabi ceramic catalogue. Monospace appears exactly once, on purpose, as a quiet aside. 2. **No photography, no glassmorphism, no hand-drawn doodles, no warm-orange gradients, no parallax, no cursor-follow, no spring/magnetic motion** — i.e. it deliberately sidesteps the most overused patterns in the corpus (photography 98%, glassmorphism 72%, hand-drawn 97%, parallax 95%, cursor-follow 88%, spring 86%, magnetic 80%, mono 93%). 3. **Kintsugi seam as the sole scroll interaction** — a single gold crack drawn via SVG path-draw that "repairs" the page, paired with deliberately imperfect wobbling hand-cut borders. Imperfection-as-identity rather than polish. 4. **Off-centred single column with a 90°-rotated spine label** instead of a navbar — book-as-object layout, not web-app layout. 5. Earth-toned, low-contrast, gentle palette (unbleached paper / kiln soot / terracotta slip / dulled kintsugi gold) — calm where the corpus skews bright and high-contrast. Chosen seed/style: **wabi-sabi imperfect ceramic** (wabi-sabi aesthetic used in only ~3% of designs; ceramic/clay vocabulary essentially absent). Avoided patterns flagged by frequency analysis: hand-drawn (97%), photography (98%), glassmorphism (72%), warm palette (98%), gradient (96%), parallax (95%), cursor-follow (88%), spring (86%), magnetic (80%), mono-as-primary-type (93%), card-grid (89%), centered layout (86%), full-bleed photo heroes (92%).