# Design Language for hinagiku.quest ## Aesthetics and Tone hinagiku.quest is a **botanical questline** -- a Victorian field-guide expedition treated like a tabletop role-playing campaign sheet. The mood is **bold-confident** with a desert-traveler's voice: maps unrolled, lanterns lit, daisies catalogued like rare beasts. Inspirations: Maria Sibylla Merian's 17th-century insect plates, vintage Boy Scout merit-badge posters, the burnt-orange field manuals of 1970s archaeology textbooks, Saul Bass's Vertigo title hexagons, and the hexagonal Catan board imagined as a mountain pass scattered with flowers. The botanical aesthetic supplies leafy ornament, taxonomic labels, and hand-drawn specimen sheets; the questline framing supplies hexagons, sigils, and a sense of forward motion. The page is laid out as a hexagonal honeycomb of "objectives," each a small narrative chamber. The tone is bold and confident, not playful: "objective 03 -- locate the alpine daisy at altitude 2,400m," "reward: one pressed petal," "estimated walking time: four days." The user is treated as a serious explorer. ## Layout Motifs and Structure A **hexagonal honeycomb** as the primary content grid -- not as gimmick, but as the actual structure of the page. Each hexagon is an "objective tile" 320px in width (point-to-point), arranged in a staggered honeycomb across a long vertical canvas. - **Field headquarters (100vh):** Centered above the honeycomb, a large oval crest containing "HINAGIKU.QUEST" wordmark and a quest banner unfurling beneath. Skeleton-loading shimmer animates across the crest on first paint for 1400ms before content settles. - **The honeycomb canvas (variable height):** A 5-column hexagonal grid (3 hexes high in rows that offset by half a hex). Each hex is an objective tile with: - A floating quest icon at top (compass, flower, lantern, scroll, etc.) - An objective number in burnt-orange display type - A 2-line objective brief - A small skeleton-loading bar that pulses until the tile is scrolled into view - **Field-guide spread (90vh):** Below the honeycomb, a single botanical-field-guide spread -- a hand-drawn daisy specimen with anatomical labels (peduncle, ligulate floret, disk floret) and a long description. - **Quest-board sidebar (left, sticky 220px):** A vertical sidebar containing the user's "current objective" with a floating animated daisy marker that bobs gently (translateY ±4px, 4.6s cycle). - **Field guide footer (60vh):** A pressed-paper signature line: "Cartographer: H. Daisy. Edition I." with a wax-seal stamp. Hexagons are not just decorative -- they tile contiguously. Each hex shares edges with up to six neighbors. Hover on any hex causes its six neighbors to ripple-highlight in succession. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Alfa Slab One" weight 400 at clamp(48px, 9vw, 144px). A heavy slab serif that reads like a Western-saloon poster -- bold-confident, authoritative, the kind of slab used on canyon-tour signage. - **Sub-display:** "Roboto Slab" weight 700 at clamp(24px, 3.4vw, 44px). Used for objective titles inside hexagons. - **Body:** "Roboto Slab" weight 400 at 17px / 1.7. The slab body keeps the field-guide tone consistent. - **Numerals (objective numbers):** "Alfa Slab One" weight 400 at clamp(48px, 7vw, 96px), with tabular alignment. - **Captions / labels:** "Roboto Slab" weight 500 small caps at 10px tracking 12%. **Palette (burnt-orange field expedition):** - `#f5ecd8` -- desert canvas (primary background) - `#e8d8b0` -- linen scroll (secondary surfaces, hex fills) - `#c47a3a` -- burnt orange (primary accent, objective numbers) - `#8a4520` -- canyon umber (hex strokes, ornament line work) - `#3a2418` -- field ink (body text on cream) - `#6a8a5a` -- moss sage (hex highlights, daisy leaves) - `#d8a050` -- sun amber (hover/active accent) The palette is grounded in burnt orange and umber, with a single moss-sage accent to honor the botanical motif. No bright whites, no pure blacks -- everything sits in a parchment register. ## Imagery and Motifs - **Abstract shapes (hexagons + crests):** The entire content layer is hex tiles. Crests, banners, and shields appear at section breaks, drawn in canyon-umber 2px line work with subtle burnt-orange fills. - **Hand-drawn botanical specimens:** Each hex contains a small line-drawn daisy variant -- different species per hex, with leaf shape, petal count, and stem character varied. All drawings use single-weight 1.5px strokes in field ink. - **Floating elements:** Inside hexagons, small floating quest tokens (a compass, a feather, an acorn, a coin) drift gently with a 4-second sine-wave translation -- this is the "floating-elements" motif made literal. - **Skeleton-loading shimmer:** Before each hex's content is visible, a gradient shimmer (linear-gradient(110deg, transparent 30%, rgba(216, 160, 80, 0.4) 50%, transparent 70%)) sweeps across at 1.6s intervals until IntersectionObserver fires. - **Wax seals and stamps:** Three or four wax-seal motifs throughout the page -- circular embossed marks with stylized initials. - **Botanical taxonomy plaques:** Each specimen drawing carries a small label box with Latin name (Bellis perennis), discovery date, and altitude. ## Prompts for Implementation The site is a quest log unrolled like a map. Build the hexagonal grid as the primary structural element; everything else hangs off of it. - The honeycomb uses CSS `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)` on each `
` hex. Stagger rows by half a hex via grid placement: odd rows at column 1/3/5, even rows at column 2/4 with `transform: translateY(-30%)` to interlock. - Each hex is a CSS Grid with three rows: icon (1fr), objective number (auto), brief (1fr). The icon floats with `@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }` (4s cycle, varied delays per hex). - Skeleton-loading: each hex has a `::before` overlay with the gradient shimmer animated at 1.6s linear infinite, removed when the hex enters viewport via IntersectionObserver. - The neighbor-ripple-highlight: on hex hover, JS finds the six adjacent hex IDs (precomputed from grid coords) and applies a `.ripple` class with 60ms cascading delays, each adding a soft sun-amber box-shadow for 320ms. - Use CSS custom properties for hex size; mobile (under 720px) collapses to a single-column vertical stack with no clip-path (rounded rectangles instead). - AVOID CTAs, pricing modules, signup forms, "feature cards," and generic stat counters. The user "accepts" objectives by clicking them, which simply scrolls to a deeper specimen sheet below; no commitment, no tracking. - Storytelling: the field crest unfurls; the user is welcomed by name of "explorer"; objectives appear hex by hex; each objective leads to a botanical specimen; the page ends with the cartographer's wax seal. - Voice (bold-confident): "Objective 03. Locate the alpine daisy at altitude 2,400m." "Reward: one pressed petal." "Estimated walking time: four days. Bring boots." ## Uniqueness Notes **Differentiators from other designs:** 1. **Hexagonal honeycomb as actual content grid:** Most "hexagonal" designs use hexagons as accent shapes. Here, the entire content layer is a contiguous hexagonal tiling with shared edges, neighbor relationships, and ripple propagation -- the geometry is the information architecture. 2. **Botanical aesthetic + bold-confident tone:** Botanical sites typically lean delicate or pastoral. This design uses Alfa Slab One display and Western-saloon palette, asserting that botany can be expeditionary, not ornamental. 3. **Quest framing without gamification:** Despite "objective," "reward," and "quest" language, there are no points, badges, progress bars, or unlock mechanics. The metaphor lives entirely in the copywriting and the hex tile vocabulary. 4. **Skeleton-loading as ritual, not utility:** Skeleton shimmer is normally a UX patience-pacifier. Here it is part of the storytelling -- each hex "develops" before the explorer's eyes. 5. **Floating quest tokens inside hex tiles:** Each hex has a literally floating sub-icon (4s sine drift) that makes the honeycomb feel inhabited rather than gridded. **Chosen seed:** botanical hexagonal-honeycomb slab-serif burnt-orange skeleton-loading abstract-shapes floating-elements bold-confident -- planned seed from assignment. **Frequency-aware choices:** Uses `botanical` (12%) but in an unusual register (expeditionary instead of pastoral). `hexagonal-honeycomb` layout is rare. `skeleton-loading`, `burnt-orange` palette, `abstract-shapes`, and `floating-elements` are all uncommon. Avoids overused `playful` aesthetic and `photography` imagery.