# Design Language for renai.dev ## Aesthetics and Tone renai.dev is a **dark-mode** notes-and-journal for a developer who writes love letters between commits — a sidebar-organized personal log where each entry is a quiet observation on programming, attention, or the act of waiting for tests to finish. The aesthetic embraces the dark-mode UI rhythm of modern dev tooling (Linear, Notion's dark theme, GitHub's dark-dimmed mode) but layers an unexpected pastel accent system on top, so the page reads as a developer journal rendered by someone who also reads Mary Oliver. The tone is **conversational** — copy is written as if speaking to a friend over a shared screen ("come look at this, I think I broke the parser again"). Inspiration draws from Linear's dark-mode UX, the lens-flare and amber bloom of Nathan Boyer's spacial OS demos, *McSweeney's* tone in its software-essay archive, and the layered-depth shadow systems of Material Design 3 dark theme. ## Layout Motifs and Structure The architecture is a **sidebar** layout — a sticky left rail 320px wide hosts the entry list (a vertically scrollable archive of journal entries with collapsible months: *2026 May*, *2026 April*, etc.), while the right side (calc(100vw - 320px)) holds the currently-open entry as a long-form reading column. The sidebar uses pastel-tinted folder icons rendered in soft cream, with entry timestamps in mono microcopy. The main reading column is a centered 720px reading width on a dark ground, with the entry title set in serif-revival, body text in soft cream, and inline code blocks in a deeper-shadow rounded panel. A small bottom-right floating "lens" widget — a circular thin-line dial — animates a lens-flare softly on hover, evoking the warm spillover of a desk lamp on a midnight keyboard. **Morph** patterns animate the sidebar's entry list: hovering an entry morphs its folder icon from a closed pastel-pink folder to an opening pastel-mint folder via SVG path interpolation. ## Typography and Palette **Typography** is led by Cormorant Garamond (the **serif-revival** brief): Cormorant Garamond 64pt Regular for entry titles, Cormorant Garamond Italic 28pt for entry subtitles, and Cormorant Garamond Regular 18px / 1.7 for body text. A secondary face, JetBrains Mono 13px / 1.55, handles all inline code (`useEffect(() => {`) and the sidebar entry timestamps. A third face, Inter Variable at 12px tracked +160 uppercase, handles sidebar section labels ("2026 / MAY / DRAFTS"). Numbers are oldstyle when in body text and tabular when in mono blocks. **Palette** is **pastel** on dark — the unexpected pairing: - `#0E1116` — true dev midnight (page ground) - `#161B23` — sidebar surface (secondary ground) - `#1F2630` — code block ground (deepest content surface) - `#E8D9C4` — paper cream (body type) - `#F5C9D8` — pastel pink (folder icon closed-state, link hover) - `#C7E9D9` — pastel mint (folder icon open-state, success state) - `#D8C7F0` — pastel lavender (in-line emphasis, hover-state glow) - `#FFD466` — soft amber (lens-flare highlight, single warm accent) The three pastel accents (pink, mint, lavender) are folder-state colors — they appear only in the sidebar; the reading column stays cream-on-dark. ## Imagery and Motifs Imagery is built around **lens-flare** — the floating bottom-right lens widget emits a 6-rayed amber lens-flare on hover, and the entry titles each have a small lens-flare anchor at the colon-position when an entry title contains a colon (e.g., "On Parsers: A Letter"). Flares are CSS radial-gradients with `mix-blend-mode: screen`. **Layered-depth** motifs reinforce the journal-as-pages feel: code blocks float on a slightly elevated dark surface with a subtle inset shadow plus a 4px below shadow, suggesting paper layers; entry titles cast a long soft drop-shadow into the cream body type. Decorative furniture includes a small renai-glyph 恋 stamped at the top of each entry in pastel lavender at 8% opacity, hand-drawn ink-blot marginalia on three entries (small SVG sketches), and a single thin pastel-pink hairline running along the top of the sidebar. ## Prompts for Implementation Build a sidebar-organized dark-mode developer journal. Use `grid-template-columns: 320px 1fr;` with the sidebar `position: sticky; top: 0; height: 100vh; overflow-y: auto;` and the reading column scrolling normally. The signature interaction is **morph**: each sidebar entry has an SVG folder icon with `` defining the closed-folder shape; on hover, the path interpolates to the open-folder shape via Web Animations API `animate([{d: 'closed-path'}, {d: 'open-path'}], {duration: 260, easing: 'cubic-bezier(0.25, 1, 0.5, 1)'})` with simultaneous fill-color transition from pastel-pink to pastel-mint. The bottom-right lens widget is a thin 80px circular `` with a 6-rayed amber lens-flare CSS radial-gradient overlaid at `mix-blend-mode: screen; opacity: 0; transition: opacity 700ms ease;` — on hover, opacity goes to 1, bathing the bottom-right corner in warm light. Cormorant Garamond 64pt entry titles enter with a 320ms `letter-spacing` reveal on entry-switch. Code blocks `font-family: JetBrains Mono, monospace; background: #1F2630; padding: 16px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.4);`. Avoid CTA stacks, pricing menus, signup ladders, stat grids — this is a personal journal, not a developer portfolio site. The footer is a Cormorant Italic line: "renai.dev — entry log, 47 unfinished, 1 to go." ## Uniqueness Notes - **Differentiator 1:** Dark-mode aesthetic with a *pastel* palette as accent layer — almost no design in the registry pairs `dark-mode` aesthetic with `pastel` palette. - **Differentiator 2:** Folder icons morph from closed-pink to open-mint via SVG path interpolation — narrative use of morph, not generic shape-shift. - **Differentiator 3:** Lens-flare attached to colons in entry titles — a typographic affordance that almost no other registry design includes. - **Differentiator 4:** Conversational tone in a sidebar layout — most sidebar layouts in the registry are functional, this one is voiced. - **Differentiator 5:** Three-color sidebar accent system (pink/mint/lavender) restricted to the sidebar only — the reading column stays cream-on-dark. - Planned seed: aesthetic=dark-mode, layout=sidebar, typography=serif-revival, palette=pastel, patterns=morph, imagery=lens-flare, motifs=layered-depth, tone=conversational. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.