# Design Language for jill.stream ## Aesthetics and Tone jill.stream is **Swiss precision dropped into organic flow** -- a midnight-blue field manual whose Helvetica-condensed grid has been softened by a riverbank. The mood is **warm-inviting**: cold blues warmed by candlelight; a stranger's hand resting on your wrist as you read. Inspirations: Josef Müller-Brockmann's grid manuals, late-night photography of fjords reflecting the aurora borealis, Margaret Calvert's road signs, the warmly minimal kitchens of Faviken, and the gentle organic shapes of mid-century Finnish glassware (Aino Aalto's stacked tumblers). The Swiss vocabulary supplies the discipline -- ranged-left, mathematically derived columns, condensed sans serif, ample white space. The "organic flow" layout lets that discipline bend like water: column heights vary, blocks curve into one another, content meanders left-right across a long page like a river finding its grade. The midnight-blue palette adds nocturnal warmth -- this is Switzerland at 1 AM, not 9 AM. Typewriter-effect entrances stamp short captions like punched cards. Aurora-lights motifs in the gutter glow faintly. The voice is patient and welcoming. ## Layout Motifs and Structure A genuine **organic-flow** layout: content meanders across a soft serpentine path rather than snapping to a fixed grid. CSS grid + irregular block sizes create a river-like reading rhythm. - **Opening reach (90vh):** A 12-column Swiss grid hosts the wordmark "JILL.STREAM" in Oswald condensed at clamp(64px, 12vw, 200px), ranged-left across columns 1-9. A horizontal "stream marker" -- a 1px aurora line -- runs beneath at 10% opacity. - **Bend 01 (110vh):** Content slides to the right side of the grid (columns 7-12). A long-form essay opens with a typewriter-effect headline that stamps in character by character over 1.2s, followed by Cormorant body text in columns 8-12. - **Bend 02 (100vh):** Content swings back left (columns 1-7). A nature-element illustration (a single hand-drawn river-fern) anchors columns 1-4; body text continues in columns 5-7. - **Bend 03 -- pause (80vh):** Content settles to center (columns 4-9). A single short paragraph; a typewriter-stamped caption beneath; a faint aurora wash crosses the gutter. - **Bend 04 (120vh):** Content swings right again, this time with two parallel narrow columns (columns 7-9 and 10-12), separated by a thin 1px aurora rule. - **Bend 05 -- delta (140vh):** The content "splits into several distributaries" -- five short narrow columns of text fanning out across the full grid width, each in different vertical alignment. - **Closing pool (80vh):** Content returns to columns 4-9, single column, with a closing line in Oswald condensed: "thank you for following the stream this far." The flow path is implemented via `grid-column` placement varying per section; the layout looks like a meandering river when viewed at thumbnail scale. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Oswald" weight 500 condensed at clamp(56px, 11vw, 200px), tracking 1%. The narrow letterforms feel like signage along a Swiss highway, recontextualized for night reading. - **Sub-display:** "Oswald" weight 400 at clamp(28px, 3.8vw, 48px), tracking 2%. - **Body:** "Cormorant Garamond" weight 400 at 19px / 1.85. The Cormorant body softens the Swiss display into something more pastoral. - **Italic:** Cormorant italic at weight 400 for asides. - **Typewriter / caption stamps:** "Special Elite" at 14px / 1.4 for caption stamps that type in via the typewriter-effect. - **Small caps:** "Oswald" weight 300 small caps at 10px tracking 16%. **Palette (midnight-blue with aurora warmth):** - `#0a0e22` -- deep midnight (primary background) - `#162a48` -- river indigo (secondary surfaces) - `#284060` -- moonlit slate (mid-tone) - `#3a5a8a` -- riverstone blue (text accent) - `#9ec0e8` -- aurora pale (light text on dark) - `#e8d4a0` -- candle amber (the only warm tone, used like a flame) - `#b8e0d0` -- aurora mint (highlight, used sparingly for aurora lines) The candle amber is the warm-inviting anchor: it appears as the typewriter cursor blink, as the section markers, and as the underline beneath hover links. ## Imagery and Motifs - **Nature-elements (hand-drawn river anatomy):** Hand-drawn 1.5px ink illustrations of river-specific subjects -- ferns, otters, willow branches, river-stones, mayfly nymphs. Each one in candle amber on midnight blue. - **Aurora-lights motifs:** Long thin lines (1px) in aurora mint, animated subtly with `stroke-dashoffset` so the lines appear to gently shimmer left-to-right over 12s. They live in the gutters between content blocks. - **Typewriter caption stamps:** Each section caption stamps in character by character via the typewriter effect, with a small candle-amber cursor that blinks after the typing completes. - **River-bend section markers:** At each "bend" in the flow, a 32px-tall vertical aurora rule with a slight S-curve ornaments the top-right corner. They mark the user's progress along the stream. - **Aurora hover glow:** Hovering on links triggers a soft 200ms candle-amber glow on the underline. Hovering on illustrations triggers a 280ms aurora-mint stroke pulse. - **Stream parallax:** A faint horizontal aurora gradient slowly drifts across the bottom of the viewport (200ms behind scroll), suggesting a current. ## Prompts for Implementation The site is a meandering night river. Build it as a long vertical scroll where content drifts left-right across a 12-column grid in a serpentine path. - Use CSS Grid with `grid-template-columns: repeat(12, 1fr); column-gap: 24px; max-width: 1320px; margin: 0 auto;`. Each section sets its own `grid-column` placement to create the meander. - Typewriter effect: each caption is wrapped in `` and characters are revealed via JS using `setTimeout` (60-100ms per character, random within range). A candle-amber `::after` pseudo-element blinks at the caret position (1.2s pulse). - Aurora gutter lines: SVG paths with `stroke-dasharray: 8 4; animation: aurora-flow 12s linear infinite;` shifting `stroke-dashoffset` from 0 to 24 over the cycle. - Hand-drawn illustrations: inline SVG with `stroke="#e8d4a0" stroke-width="1.5" fill="none" stroke-linejoin="round";`. On hover, transition `stroke` to `#b8e0d0` over 280ms. - Reduced motion: typewriter effect renders instantly; aurora lines stop shifting; parallax stream halts. - AVOID CTAs, pricing modules, signup forms, "feature cards," stat counters. There is one mailto link at the end: "drop a stone in the stream" (mailto opens with a pre-filled subject). - Storytelling: the user enters at the source of the stream; each bend reveals a small essay or vignette; the delta section fans the writing into multiple short tributary columns; the closing pool ends the journey with a warm valediction. - Warm-inviting voice: "this stream begins on a winter morning, where the rocks meet your shoes." "stay as long as you like. there is no end of the page." "you have read this far; the river thanks you." ## Uniqueness Notes **Differentiators from other designs:** 1. **Swiss grid bent into a serpentine river:** Most Swiss sites are strictly rectangular. Here the 12-column grid hosts an organic-flow path of content that meanders left-right like a river, while preserving the underlying mathematical discipline. 2. **Midnight-blue + candle-amber as warm-inviting:** Cold midnight blue is paired with a single warm amber to produce "warm Swiss night" -- a register absent from other Swiss-style sites. 3. **Typewriter-effect as caption stamping:** Typewriter entrances are applied only to short caption stamps, not body text -- a precise restraint that keeps the Swiss legibility intact. 4. **Aurora-lights in the gutters:** Aurora is normally a hero-background. Here it is reduced to 1px gutter lines that subtly shimmer, used like a column-separator that breathes. 5. **River-as-page metaphor enforced by section bends:** The "bend 01, bend 02..." structure is communicated through grid-column placement, not by labels -- the layout speaks the metaphor. **Chosen seed:** swiss organic-flow Oswald condensed midnight-blue typewriter-effect nature-elements aurora-lights warm-inviting -- planned seed from assignment. **Frequency-aware choices:** `swiss` (4%), `organic-flow`, `midnight-blue`, `typewriter-effect`, `aurora-lights`, and `nature-elements` are all uncommon. Avoids overused `playful`, `corporate`, `photography` patterns. The Oswald + Cormorant pairing is unusual for Swiss-style work.