# Design Language for tnhec.com ## Aesthetics and Tone tnhec.com — The Never Happy Ending Chronicle — channels a hand-drawn aesthetic — the imperfect warmth, sketch-quality intimacy, and human-made authenticity of hand-drawn illustration applied to a novel story platform where endings are never quite happy. The site sketches — with the notebook-margin doodling of personal journals, the cross-hatched shadows of pen-and-ink illustration, and the deliberate imperfection of a storytelling platform that refuses the polish of happily-ever-after. Inspiration draws from the hand-drawn typography of Saul Steinberg's New Yorker covers, the illustrated marginalia of medieval manuscripts, the graphic novel artistry of Craig Thompson's Blankets, and the interactive fiction tradition of Choice of Games where every path leads somewhere bittersweet. The tone is friendly — warm, approachable language that softens the melancholic subject matter, creating the quality of a kind friend telling you a sad story they promise is worth hearing. The hand-drawn treatment transforms unhappy-ending narratives from depressing literature into intimate, personally rendered experiences — story chapters sketched as if in a personal journal, character arcs drawn with visible pencil construction lines showing the process of creation, and plot twists illustrated with the immediate quality of someone drawing the story as they tell it. Each component carries hand-drawn authenticity — borders with slight wobble suggesting pen pressure variation, typography with subtle baseline shifts, and decorative elements that look drawn rather than computed. The friendly tone creates safe emotional space for stories that don't end well. ## Layout Motifs and Structure The layout uses a **sidebar** architecture — persistent sidebar creating the book-index quality of a novel's table of contents always available alongside the currently-open page. **Sidebar Story Navigation:** - Sidebar: 240px fixed left, styled as journal margin - Main content: fluid width right of sidebar, max-width: 720px - Story blocks: generous 56px vertical spacing for reading breath - Mobile: sidebar collapses to drawer navigation - The sidebar creates the margin-notes quality of a hand-annotated manuscript **Section Sequence:** 1. **Title Page:** Hero with garamond-classic typography over hand-sketched illustration backdrop, marble-classical sculptural story motifs, progressive-disclosure interactive narrative chapter unveiling 2. **Chapter Index:** Story navigation in sidebar-linked chapter list — progressive-disclosure interactive expanding chapter summaries with marble-classical simplified classical reference 3. **Story Pages:** Full narrative content in generous reading layout with marble-classical ornamental chapter decorations and lens-flare light-through-pages effects 4. **Marginalia:** Author notes and story commentary in sidebar-style annotations with marble-classical delicate carved accents 5. **Colophon:** Footer as book colophon — friendly farewell with marble-classical final classical ornament **Spatial Philosophy:** - Sidebar creates the persistent-index quality of a novel's table of contents always within reach - Generous vertical spacing creates the page-turn quality of reading where each section is a separate leaf - The book metaphor makes digital storytelling feel like physical reading ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — garamond-classic at 2.0rem-2.8rem, weight 500. Its refined serif forms create the literary quality of classical novel typography from established publishing houses. - **Body Text:** "Lora" (Google Fonts) — serif at 0.95rem, weight 400, line height 1.85. Its warm curves create the intimate quality of personal journal handwriting refined to typographic elegance. - **Data:** "Courier Prime" (Google Fonts) — monospace at 0.8rem for chapter numbers, word counts, and story metadata. - **Labels:** "EB Garamond" at 0.6rem, weight 500, uppercase, letter-spacing 0.14em. **Color Palette:** - **Journal Cream:** #f7f2ea — warm cream for primary background - **Page White:** #fdfaf5 — warmer white for reading surfaces - **Ink Charcoal:** #2e2a24 — warm near-black for primary text - **Sketch Rust:** #8a5a42 — warm rust for primary accent (pen ink color) - **Pencil Lead:** #6a6258 — warm gray for secondary accent - **Margin Blue:** #5a7a9a — muted blue for annotation accent - **Erased Gray:** #a8a098 — light warm gray for secondary text - **Sketch Border:** rgba(138,90,66,0.12) — rust-tinted border for hand-drawn feel ## Imagery and Motifs **Lens-Flare Light Through Pages:** Subtle light effects suggesting sunlight falling on open book pages — radial-gradient(circle at 70% 20%, rgba(247,242,234,0.8) 0%, transparent 40%) creating the warm-reading-lamp quality of physical books illuminated by natural light. **Progressive-Disclosure Chapter Reveals:** Story content unfolds through progressive disclosure — collapsed chapter summaries expand on click with smooth height animation (max-height transition, 400ms ease-out), creating the page-turning quality of opening to a new chapter in a physical novel. **Marble-Classical Story Ornaments:** Decorative elements inspired by classical sculpture and book arts — SVG acanthus-leaf dividers, classical column borders, and sculptural flourishes (1.5px stroke, Sketch Rust at 0.08 opacity) creating the rare-book quality of hand-decorated manuscript pages. **Hand-Drawn Border Wobble:** Card and section borders with deliberate imperfection — SVG path borders with subtle wave variation (2px amplitude, irregular frequency) instead of straight lines, creating the authentically hand-drawn quality of pen-ruled lines on paper. **Sketch Texture Overlay:** Subtle cross-hatch texture on backgrounds — repeating CSS pattern at 0.02 opacity suggesting pencil shading, creating the hand-drawn quality of illustration preparation visible beneath finished content. ## Prompts for Implementation Build the page as a hand-drawn novel story platform. Sidebar: .story-sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; background: #f7f2ea; border-right: 1px solid rgba(138,90,66,0.12); padding: 32px 20px; overflow-y: auto; } .story-content { margin-left: 240px; max-width: 720px; padding: 48px 40px; } Progressive disclosure: .chapter-summary { max-height: 60px; overflow: hidden; transition: max-height 400ms ease-out; cursor: pointer; } .chapter-summary.expanded { max-height: 600px; } Hand-drawn border: .sketch-card { border: 1px solid rgba(138,90,66,0.15); border-radius: 2px; padding: 32px; background: #fdfaf5; } AVOID: Clean digital publishing platforms, corporate book-sales interfaces, and polished e-reader applications. Let hand-drawn warmth and friendly approachability create a storytelling platform where unhappy endings are rendered with the intimate care of a personally illustrated journal. ## Uniqueness Notes 1. **Hand-drawn for unhappy endings:** Sketch-quality imperfection creates the intimate quality of personally rendered stories that don't need polish. 2. **Sidebar as novel index:** Persistent navigation creates the physical-book quality of a table of contents always at hand. 3. **Friendly tone as emotional safety:** Warm language creates safe space for readers approaching stories with difficult endings. 4. **Marble-classical as rare-book ornament:** Sculptural decorative elements create the precious quality of hand-decorated manuscripts. 5. **Progressive-disclosure as page-turning:** Expanding content creates the sequential quality of physical book reading. **Seed/Style:** aesthetic: hand-drawn, layout: sidebar, typography: garamond-classic, palette: muted-vintage, patterns: progressive-disclosure, imagery: lens-flare, motifs: marble-classical, tone: friendly **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, minimal imagery. This design uses hand-drawn aesthetic, sidebar layout, garamond-classic typography, muted-vintage palette, progressive-disclosure patterns, lens-flare imagery, and friendly tone.