# Design Language for imouto.quest ## Aesthetics and Tone imouto.quest (Japanese "imouto" meaning "younger sister") is a **dark-mode forest journal** -- a quiet personal log laid out as a vertical timeline through a deep pine canopy at midnight. The mood is **minimal**: very little is said, very little is shown, but what is shown is precisely placed. Inspirations: Hilma Granqvist's Finnish forest-walk photographs, Donald Judd's bookshelves of singular forms, Jenny Holzer's quiet text projections on stone walls, vintage NHK weather-pattern stamps, and the matte-green sumi-ink prints of late Edo botanical inventories. The dark-mode aesthetic is not gamer-neon: it is moss and night. The forest-green palette is muted, cool, and slightly damp. The vertical timeline runs the entire height of the page like a slim trail through trees. Each timeline node is a quiet entry -- one date, one line, one image. The "imouto" is not named but implied: this is a sister's diary, written by lantern in the woods, transcribed for the screen. ## Layout Motifs and Structure A **timeline-vertical** layout, strictly literal: a 2px hairline runs down the center of the page from top to bottom, with marker dots at each entry. Time flows downward. No content sits more than 400px from the spine. - **Title node (90vh):** At the very top of the spine, a small marker dot expands into a circle containing "imouto.quest" in Commissioner at clamp(36px, 6vw, 80px). Below the title, a single subtitle line in italic: "an inventory of small forest hours." - **Timeline trunk (variable height):** The 2px vertical hairline continues down the page for the entire scrollable length. Every entry is a node: - A 12px filled circle on the spine - A date label to one side (alternating left/right) - A short line of body text below the date - Optionally, a small marble-texture circular thumbnail (40x40px) on the opposite side - **Marble pause panels:** Every 6 entries, the spine widens briefly to host a larger 240x320px marble-texture panel that breaks the rhythm -- a forest stone the user encounters mid-path. - **Forest depth layers:** Behind the spine, layered translucent green vertical bars (representing tree trunks) parallax at varying speeds, creating layered depth -- a slow scroll suggests walking through a clearing. - **Footer node (60vh):** The spine ends at a small star-mark dot with the closing line: "the sister sleeps. the forest watches." Entries stagger in a clean 64ms cascade as they enter the viewport. The spine itself has a tiny moving "current" dot that follows the viewport center as the user scrolls. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Commissioner" (variable, weight 600, optical-size set for headlines) at clamp(36px, 6vw, 80px). Commissioner's calligraphic terminals carry warmth into the cool palette. - **Sub-display:** "Commissioner" weight 500 at 22px / 1.4 for date labels. - **Body:** "Commissioner" weight 400 at 17px / 1.7. Italic at weight 400 for one-line entries. The variable axes do all the work -- one font carries display, body, and italic. - **Numerals (dates):** "Commissioner" weight 600 tabular figures. - **Captions / small labels:** "Commissioner" weight 500 small caps at 10px tracking 16%. **Palette (forest-green, cool damp):** - `#0c1410` -- midnight pine (primary background) - `#162018` -- forest floor (secondary background, marble panels) - `#1e2c22` -- moss shadow (mid-tone surfaces) - `#2d4030` -- pine needle (timeline spine fill) - `#4a6850` -- damp fern (text accent) - `#9ab09c` -- lichen mist (small body text contrast) - `#e8e2c8` -- candle vellum (primary text on dark) Every value sits in a cool green-black register. The vellum text color is the only "warm" tone, used like the small flame of a single candle. ## Imagery and Motifs - **Marble texture (cold-stone variant):** Marble used here is a cold green-grey variant -- not classical Italian. Each marble thumbnail is a 40x40px duotone (forest floor to lichen mist) with a faint veining pattern. The marble pause panels are larger (240x320px) and feel like wet rocks underfoot. - **Layered-depth tree trunks:** Behind the spine, vertical bars (8-32px wide) in moss shadow and pine needle, with `opacity: 0.18` and parallax rates 0.4x, 0.6x, 0.8x. These represent receding tree depth. - **Stagger pattern:** Each timeline entry's content (date, text, thumbnail) staggers in via three short fades (200ms total, 64ms offset between siblings) when the entry enters the viewport. - **Lichen marks:** Small irregular dots (4-8px) in lichen mist, scattered along the spine like moss growing on the timeline rule. About one per entry, randomized in offset. - **Trail markers:** Tiny chevron-shaped 1px ink marks beside each date, pointing in the direction of the corresponding text. - **Bioluminescent flecks:** Three or four times across the page, a tiny dot near the spine glows softly (`box-shadow: 0 0 8px rgba(232, 226, 200, 0.6)`) and slowly pulses, suggesting fireflies in the dark. ## Prompts for Implementation The site is a single quiet trail. Build it as a vertical timeline where the spine is structural, not decorative. Every entry should sit close to the spine; no element wanders far. - The spine is a single `
` with `position: fixed; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent 0%, #2d4030 8%, #2d4030 92%, transparent 100%);` so it fades at the top and bottom. - The "current" dot follows the viewport: a small absolute-positioned dot updated via a single `scroll` listener (rAF-throttled) that sets `top: 50vh; transform: translateY(-50%)` on the dot relative to the page (i.e., it floats at viewport center). - Each entry is `
` with a CSS Grid layout: `grid-template-columns: 1fr 24px 1fr` so the dot column is fixed center. Entries alternate which column holds the date label. - Stagger animation: a base `@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }` is applied with `animation-delay: calc(var(--i) * 64ms)` where `--i` is the entry index, triggered when the article intersects the viewport. - Forest-depth bars: 5 vertical `
` elements fixed-position with `data-depth="0.4|0.6|0.8"`. On scroll, their `transform: translateY()` is updated proportionally. - Marble pause panels are inserted every 6 entries. They contain a single short reflection (one paragraph in italic) and a marble-texture SVG noise fill. - Bioluminescent flecks animate with `@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }` at 6.4s cycles, with each fleck having a random delay. - AVOID CTAs, pricing modules, signup forms, "feature cards," and stat counters. The only interactive element is one mailto link in the footer: "write to the sister." - Minimal microcopy: "march 12. the spider returned to its corner." "march 13. it rained until noon." "march 14. she did not write today." ## Uniqueness Notes **Differentiators from other designs:** 1. **Timeline-vertical as literal spine, not visual trick:** The 2px hairline truly runs the full page height with fading caps. Most "timeline" sites use card stacks; this one obeys the metaphor. 2. **Cold-stone marble texture (green-grey, not classical Italian):** The marble motif appears in a forest-cold variant, far from typical luxury-marble aesthetics. 3. **Commissioner variable font as the entire type system in dark mode:** The variable axes (weight, optical-size) handle display, body, italic, captions, and tabular numerals -- one Google Fonts request. 4. **Forest-depth parallax layers behind a strict timeline:** A layered-depth motif applied to a vertical timeline is unusual; most timeline sites use flat backgrounds. The trees suggest atmospheric distance behind the line. 5. **Bioluminescent flecks as the only animation:** No bouncing, no carousels, no hovers. Only the slow pulse of soft fireflies along the spine. The dark-mode minimalism is total. **Chosen seed:** dark-mode timeline-vertical Commissioner forest-green stagger marble-texture layered-depth minimal -- planned seed from assignment. **Frequency-aware choices:** `dark-mode` (4%), `timeline-vertical`, `forest-green`, `marble-texture`, and `stagger` patterns are all under 5%. Avoids overused `corporate`, `playful`, and `photography` patterns. Commissioner is rarely used in dark-mode forest aesthetics.