# Design Language for jill.stream ## Aesthetics and Tone jill.stream is a **fog-walked mountain almanac told in honeycomb cells** — picture the field-notebook of a woman named Jill who has spent thirty seasons walking the same ridge above the same braided meltwater stream, and who records each walk not as a paragraph but as a single waxed hexagonal tile pressed into a beekeeper's frame. The site is that frame: a wall of muted, sun-bleached comb cells, each one holding a sliver of weather, a smear of ridge-line, a held breath of low cloud. The mood is **ethereal but boot-shod** — mist that you can walk through, not mist that floats decoratively. Nothing here is glossy, nothing is neon, nothing pulses for attention. The reference image is a **1970s Ordnance Survey map left folded in a damp rucksack pocket for a decade** — the cyan contour lines have gone dove-grey, the orange road has faded to dried-apricot, the paper has taken on the colour of weak tea and woodsmoke. Over that, a **single moving veil of bokeh**: out-of-focus motes of morning light, like sun caught in spider-silk between heather stems, drifting whenever the visitor moves their cursor — the only thing on the page that behaves like breath. The emotional register is **grounded-earthy**: quiet, weathered, unhurried, faintly melancholic in the way a long view is melancholic. Jill does not sell anything. She does not have a newsletter. The site is a place you wander into the way you wander into a bothy — you shelter, you read the visitor's book, you look at the view through the small window, you leave. The tone of any text is the tone of a hill-walker's log: terse, observational, weather-first. "Wind backing NW. Cloud base 600m. Saw the stream had jumped its left bank." No exclamation marks. No hype. The honeycomb is not a UI metaphor borrowed from a dashboard — it is a literal beekeeper's super, because Jill keeps bees at the foot of the hill and the comb is the first thing she sees every morning before the climb. The whole site smells, if a site could smell, of beeswax, wet bracken, and cold granite. ## Layout Motifs and Structure The composition is **hexagonal-honeycomb** in the most committed possible sense: the entire page is a single tessellated field of flat-topped hexagons (pointy sides left and right, flat edges top and bottom), packed in offset rows so every cell touches six neighbours. This is **not** decorative hex-shaped cards floating on a normal grid — it is a true comb that fills the viewport edge to edge with no rectangular containers anywhere. On desktop the comb is roughly **9 cells wide and 6 rows deep**, sized so the wall is just slightly larger than the viewport, inviting a small pan. On mobile it collapses to a **3-wide column of stacked hexes** that you scroll vertically through, each hex full-bleed-width minus a thin margin. Cell roles, all built from the same hex primitive: - **The View Cell** — one hexagon, upper-centre, twice the linear size of the others (it spans the height of two offset rows), holds the only real "imagery": a wide bokeh-blurred ridge-line photograph cropped to the hex. This is the window of the bothy. Everything else orbits it. - **Almanac Cells** — twenty or so ordinary hexes, each containing one log entry: a date in the corner, a one-line weather note, a tiny SVG contour-fragment drawn inside the cell. Hovering raises the wax (a soft inset-to-outset shadow flip) and the contour fragment redraws itself with `path-draw-svg`. - **Capped Cells** — a scattering of hexes that are "still sealed with wax": flat opaque honey-coloured fills, no content, purely rhythmic — the comb is never fully built, a real frame always has empty and capped cells. These give the wall its irregular, hand-tended texture and prevent the grid from feeling machine-perfect. - **The Stream Seam** — a single irregular line of cells running diagonally down through the comb whose interiors are filled with a slow, near-still animated gradient the colour of glacial flour in water — the meltwater stream, threading the hill. It is the only continuous element; everything else is discrete cells. - **The Margin Note** — bottom-left, three cells fused into a small cluster, holds the site's only navigation: tiny lowercase labels (`ridge` · `comb` · `stream` · `who is jill`) that pan-and-zoom the comb rather than loading new pages. Spatial logic: depth is conveyed by **wax thickness**, not drop-shadows in the SaaS sense — filled cells sit "proud" with a warm rim-light on the upper-left bevel and a cool shadow on the lower-right, as if lit by a low sun coming over the ridge. The comb has a faint overall **tilt of about 4 degrees** as though the frame is propped against a wall. No section dividers, no headers, no footer — the comb runs to all four edges and is gently masked by a vignette of woodsmoke-grey at the corners. ## Typography and Palette **Typefaces — Google Fonts only, two families, strict roles.** - **Hanken Grotesk** (the sans-grotesk workhorse — weights 300, 400, 600) — carries everything readable: the log entries, the date stamps, the margin-note navigation, the "who is jill" prose. Hanken Grotesk has a slightly humanist warmth inside an otherwise neutral grotesque skeleton — the lowercase `a` and `g` keep a little hand in them — which suits a personal field-notebook far better than a colder Helvetica-clone. Set body log lines at **15px / 1.6**, weight 400, letter-spacing `0.01em`, colour the dark tea-leaf brown. Date stamps at **11px**, weight 600, `0.14em` tracking, uppercased, in faded-cyan-grey. Navigation labels at **13px**, weight 300, lowercase always, letter-spacing `0.05em`. - **Fraunces** (display, the "soft optical-size serif" — weight 400 and 500, `opsz` cranked high, slight `SOFT` axis) — used **only** for the woman's name `jill` and for the View Cell's single caption line. Fraunces at high optical size has a wistful, slightly old-almanac quality — the swelling terminals read like ink that sat a moment too long. Set `jill` lowercase at **clamp(56px, 11vw, 132px)**, weight 400, line-height 0.9, in the dried-apricot accent, sitting half-inside the View Cell's lower-left bevel as if hand-inked onto the photo's white border. Never use Fraunces for more than four words at a time. **Palette — muted-vintage, the weak-tea-and-woodsmoke set. Six anchors.** - `#E7DFCE` — **Waxed Paper** — the base of every unfilled cell and the page void; the colour of an old map's blank sea. - `#D9C7A8` — **Sealed Honey** — the fill of capped cells; warm but dusty, never golden. - `#A8B0AE` — **Faded Contour** — the desaturated grey-green that the map's cyan contour lines have aged into; used for SVG fragments, date stamps, hairlines. - `#C9A07E` — **Dried Apricot** — the only "warm accent", aged from a 1970s map's orange roads; used for the name `jill`, active nav, the redrawing contour stroke on hover. - `#5A4D3B` — **Tea Leaf** — primary text and the dark side of every bevel; a brown so deep it nearly reads black but never quite. - `#9FB0B4` — **Glacial Flour** — the pale blue-grey of meltwater silt; reserved exclusively for the Stream Seam's slow gradient and the cool side of bevels. Everything else is these six at varying opacity. No pure white (`#FFFFFF`) and no pure black anywhere — the lightest light is Waxed Paper, the darkest dark is Tea Leaf. The bokeh veil uses Dried Apricot and Waxed Paper motes at 8–22% opacity over a near-invisible Glacial Flour wash. ## Imagery and Motifs **Four motif families, all hand-quiet, none photographic except one.** **1. Mountain-landscape (the load-bearing motif).** The single View Cell holds a real wide ridge-line image — a long undramatic horizon of layered hills receding into haze — but it is **never shown sharp**: it lives permanently behind a heavy gaussian-blur and a duotone treatment mapping shadows to Tea Leaf and highlights to Waxed Paper, so it reads as *memory of a view* rather than a view. Behind that, a **CSS-only parallax of three more ridge-line silhouettes** built as repeating SVG `path` ranges in Faded Contour, Glacial Flour, and Sealed Honey, shifting a few pixels with cursor movement so the hills "breathe" relative to each other. The ridges are the spine of the page even though they occupy one cell. **2. Bokeh-background (the only motion that feels alive).** A full-viewport canvas of **40–70 soft circular motes**, radius 6–40px, each a radial-gradient bloom in Dried Apricot or Waxed Paper at low opacity, each with its own slow drift vector. The whole field gently **leans toward the cursor** — `cursor-follow` applied to the *aggregate*, not per-mote — so moving the mouse is like tilting a jar of trapped sunlight; the motes pool and then settle back. On idle, they keep their lazy independent drift. This veil sits *above* the comb but at low enough opacity that it never hides content; it is the air in the bothy. **3. Contour fragments.** Inside each Almanac Cell, a tiny SVG of **two or three concentric closed contour loops** — the shape of a small knoll, drawn in 1px Faded Contour. They are pre-generated as gentle blobs (no real terrain data needed), each cell's slightly different. On hover the topmost loop **erases and redraws itself** via stroke-dashoffset in Dried Apricot, taking ~900ms — like a finger tracing a hilltop on a map. **4. Beeswax texture & the comb itself.** The hexagon edges are not crisp vector lines — they carry a **1px irregular hand-cut wobble** (a subtle `feTurbulence` displacement on the cell borders) so the comb looks built by bees, not Illustrator. Capped cells get a faint concentric-ring fill suggesting wax laid in coils. A barely-there **paper-grain noise overlay** (2–4% opacity, Tea Leaf speckle) sits over everything to kill the digital flatness. No icon sets. No illustrations of people. No logos. The closest thing to an icon is the contour fragment. Jill herself is never depicted — only her handwriting (Fraunces), her notes, and her view. ## Prompts for Implementation Build jill.stream as **a single, non-scrolling (desktop) honeycomb wall** — one `index.html`, one stylesheet, one ES module, one `assets/` folder holding exactly one ridge photograph and a handful of pre-generated SVG contour blobs. **No framework, no router, no build step, no React.** The page is a viewport-filling comb the visitor pans gently (drag, or arrow keys, or the margin-note labels) — it does not behave like a marketing landing page and it has **no hero pitch, no call-to-action button, no pricing block, no stat-grid, no testimonial row, no email capture**. The visitor arrives inside a beekeeper's frame propped against a wall, the bokeh breathes, and they wander. Construction notes: - **The comb.** Build hexagons with CSS `clip-path: polygon(...)` on flat-topped hexes, laid out with a CSS grid where alternate rows are offset by half a cell via negative margins (or a `grid-template-columns` trick with the cells spanning and overlapping). Do **not** use background images of hexagons — every cell is a real element so it can hold text and respond to hover. The wobble on edges comes from an SVG filter (`feTurbulence` + `feDisplacementMap`) applied to a pseudo-element border, very low scale (~1.5). - **Storytelling order.** There is no scroll narrative — instead, **the comb tells its story by where the eye lands**: the oversized View Cell pulls focus first; the diagonal Stream Seam leads the eye down-right; the Almanac Cells are discovered by hovering, each revealing its date and weather line with a 250ms cross-fade and the contour redraw. The "who is jill" content is one fused cluster of three cells, reached via the margin note, that gently zooms the comb in on itself to reveal a longer Fraunces+Hanken passage — still inside hexagons. - **Cursor-follow.** Implement *one* `mousemove` handler driving *two* things with different easing: (a) the bokeh aggregate leans ~20px toward the cursor with a slow spring (stiffness low, ~0.04 lerp), (b) the three SVG ridge silhouettes parallax-shift 2–8px each, nearer ridge moves more. On `pointerleave` everything eases home over ~1.2s. Respect `prefers-reduced-motion` by freezing the bokeh drift and disabling parallax (the static comb is still complete). - **Hover choreography.** An Almanac Cell on hover: wax-flip (inset shadow → soft outset, 200ms), text fade-in, contour top-loop redraw via `stroke-dashoffset` over 900ms with `ease-out`. A Capped Cell on hover does *almost nothing* — a 1px lift, a faint warm glow — it stays sealed. The View Cell on hover slightly *reduces* its blur (sharpens by ~15%) as if you leaned to the window — never fully sharp. - **The Stream Seam.** A single `` path or a chain of cells with an animated linear-gradient in Glacial Flour shades, drifting at ~30s loop, almost imperceptibly — it should read as "barely moving water", not a progress bar. - **Type loading.** `@import` Hanken Grotesk (300/400/600) and Fraunces (`opsz` variable, `SOFT` axis) from Google Fonts. Fraunces appears in exactly two places — the name `jill` and the View caption. - **Atmosphere.** Page void is Waxed Paper. A corner vignette in woodsmoke-grey (Tea Leaf at ~12%). A 3% paper-grain noise overlay (a tiled data-URI PNG or an SVG `feTurbulence` layer). The whole comb tilted ~4deg via `transform: rotate(-4deg)` on the wall wrapper, with extra cells around the edges so the rotation never shows a corner of bare background. - **No** modals, carousels, accordions, skeleton loaders, parallax-on-scroll, or scroll-jacking. Motion is limited to: bokeh drift, ridge parallax, hover wax-flip, contour redraw, stream gradient. That is the entire vocabulary. The feeling at the end: the visitor has stood at a small window in a stone shelter, watched light move in dust, read a few weather notes in someone else's hand, and felt the cold of the hill — then stepped back out. Quiet. Earned. Slightly haunted. ## Uniqueness Notes Distinct departures from the 270+ designs already in the registry: 1. **A true edge-to-edge honeycomb as the *entire* layout, not hex-shaped cards.** `hexagonal-honeycomb` sits at ~2% in the cohort, and even those instances tend to use hexagon decorations over conventional grids. jill.stream commits to a real tessellated comb with no rectangular containers anywhere, irregular hand-wobbled cell edges, and intentionally "capped"/empty cells for organic rhythm — the comb *is* the page. 2. **Ethereal × grounded-earthy is a deliberate contradiction the cohort doesn't hold.** `ethereal` (~5%) usually pairs with dreamy/celestial/blue tones; `grounded-earthy` tone (~3%) usually pairs with warm-rustic-craft aesthetics. Their intersection — "mist you walk through in boots", fog that is *weather* not decoration — is, as far as the frequency data shows, unoccupied. The whole emotional design rests on that tension: airborne bokeh above a heavy, propped, beeswax-and-granite comb. 3. **Muted-vintage rendered as a *specific decayed object*: a damp Ordnance Survey map.** `muted-vintage` palette is ~2% of the cohort and tends toward generic sepia. jill.stream pins its six colours to the precise way a 1970s contour map ages in a wet rucksack — cyan contours → dove-grey, orange roads → dried apricot, paper → weak tea — and forbids pure black and pure white entirely. No `#FFFFFF`, no `#000000`, lightest is Waxed Paper `#E7DFCE`, darkest is Tea Leaf `#5A4D3B`. 4. **Bokeh used as the single living element, governed by cursor-follow on the aggregate.** `bokeh-background` imagery is ~5% and `cursor-follow` is everywhere (~88%), but jill.stream's combination is unusual: the bokeh is not background filler — it is *the only thing that moves like breath*, and the cursor doesn't push individual motes, it tilts the whole jar of trapped light. Restraint as a feature: motion vocabulary capped at five named behaviours, no scroll-jacking, no carousels, no CTAs. 5. **Mountain-landscape motif as "memory of a view", never shown sharp.** `mountain-landscape` motif is ~2%; most uses show crisp dramatic peaks. Here the one real photograph lives permanently behind heavy blur + duotone, framed inside a single oversized hex like a bothy window, backed by CSS-SVG ridge silhouettes that parallax-breathe. The site is a hill-walker's almanac, not a travel brochure. Avoided overused patterns from frequency analysis: no `card-grid`, no `full-bleed` hero, no `centered` landing column, no `dashboard`/`bento-box` arrangement of equal rectangles, no `glassmorphism`, no `hand-drawn` doodle aesthetic, no `photography`-led hero, no `gradient` warm-sunset wash, no `stagger`/`magnetic`/`tilt-3d` button choreography, no `typewriter-effect`, no stat counters. The only intersection with the cohort's dominant patterns is `cursor-follow` and `parallax`, and both are used minimally and atmospherically rather than as interaction flourish. Documented chosen seed/style: aesthetic: ethereal, layout: hexagonal-honeycomb, typography: sans-grotesk, palette: muted-vintage, patterns: cursor-follow, imagery: bokeh-background, motifs: mountain-landscape, tone: grounded-earthy — honored exactly as planned, with no substitutions.