# Design Language for hinagiku.dev ## Aesthetics and Tone hinagiku.dev is a **maximalist developer atelier** disguised as a minimalist art-deco gallery -- a long-form immersive scroll that begins like a quiet manifesto, then erupts into ornament, then collapses back into restraint. The visual story is a contradiction held in suspension: art-deco display faces, bokeh backgrounds, flowing curves, complementary blue/orange tension -- yet the **tone is minimal**, with phrases short enough to fit on a brass plaque. Inspirations: A.M. Cassandre's ocean-liner posters, the long vertical title sequences of Saul Bass, Wong Kar-wai's lens flares and tungsten bokeh, the molten lettering of mid-century engineering brochures, and the deliberate sparseness of a Donald Judd installation viewed from across a long gallery. The maximalism is structural -- ornamental columns, layered curves, a deep bokeh atmosphere -- but every screen is allowed to contain only one declarative sentence. The user feels surrounded by visual abundance yet is told very little; the page trusts the eye to do the talking. ## Layout Motifs and Structure A genuine **immersive scroll** that snaps to full-viewport panels (`scroll-snap-type: y mandatory`). The page is twelve scenes, each occupying 100vh, with continuous flowing-curve motifs that span panel boundaries by SVG path inheritance. - **Scene 01 -- The Plaque (100vh):** Centered art-deco wordmark "HINAGIKU.DEV" in geometric capitals, surrounded by a thin double-rule frame, with two ornamental flourishes that grow on entry over 1200ms. - **Scene 02 -- The Curve (100vh):** A single flowing curve (SVG path) crosses the viewport from bottom-left to upper-right at 16% opacity over a bokeh field, with one short line of text pinned to the curve's apex. - **Scene 03 -- The Manifest (100vh):** A bokeh-blurred photograph background of distant city lights, eight tiny declarative phrases scattered along an invisible spiral, each visible only on hover. - **Scene 04 -- The Spec (100vh):** A single tall column 320px wide centered in the viewport, holding the day's "spec" -- one paragraph in art-deco display set tightly. - **Scenes 05-09 -- Vignettes:** Each panel features one art-deco motif (sunburst, ziggurat, fanned arc, lotus rose, dynamic chevron) in oversized scale, paired with a single sentence. - **Scene 10 -- The Curve Returns:** The first curve from Scene 02 reappears, now reversed, suggesting a closed loop. - **Scene 11 -- The Atelier (100vh):** A bokeh photograph of brass instruments on a workbench, blurred to 18px Gaussian, with the word "Atelier" in art-deco display centered. - **Scene 12 -- The Plaque Returns (100vh):** The opening plaque reappears, now in inverse complementary hue, completing the loop. Between every two snap-points, a thin 1px brass rule travels horizontally across the lower third of the screen, varying its position by a few px per scene to suggest hand-drawn rules. The whole composition reads as a deliberately curated gallery walk. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Limelight" weight 400 at clamp(64px, 12vw, 192px) for the wordmark and scene titles -- a Google Fonts art-deco display face with theatrical drop-shadow potential and stylized geometric construction. Tracking 6%. - **Sub-display / scene labels:** "Limelight" at 36px, tracking 8%, used very sparingly. - **Body:** "Cormorant Garamond" weight 300 at 18px / 1.7, italic for asides. The slim Cormorant contrasts the heavy Limelight display and lets the minimal tone breathe. - **Numerals / scene markers (01, 02, ...):** "Limelight" at 22px, tabular figures, tracking 12%. - **All-caps small detail labels:** "Cormorant Garamond" weight 400 small caps at 11px, tracking 20%. **Palette (complementary -- deep navy vs. brass-orange):** - `#0c1a2e` -- deep ocean navy (primary dark background) - `#163554` -- midnight harbour (secondary background) - `#284b78` -- twilight steel (mid-tone) - `#e08a3c` -- brass orange (primary complementary accent) - `#f4c47a` -- gilded brass (highlight, ornament fills) - `#c95a2a` -- burnt copper (hover/active deeper) - `#f0ead0` -- ivory plaque (text on dark) The complementary tension between #0c1a2e and #e08a3c is the central chromatic argument. Every ornament uses brass on navy or navy on brass -- never both within the same shape. ## Imagery and Motifs - **Bokeh background photography:** Each scene's background is a heavily-blurred photograph treated with a navy duotone and lens-bokeh overlays (large soft circles in brass orange, 12-22% opacity, scattered like out-of-focus streetlights). - **Art-deco ornaments:** Sunburst fans, ziggurat columns, ribboned scroll cartouches, double-rule frames, fan-vault arches, lotus rosettes -- all in 2px line weight in brass on navy. Drawn as SVG primitives. - **Flowing curves (motif):** A library of three master Bezier paths used across the site -- the Wave, the Loop, the Cradle -- inherited by SVG `` and scaled to span panel boundaries with `clip-path`. - **Micro-interactions:** Each scene has exactly one micro-interaction. On hover of the scene title: a brass rule grows from 0 to full width over 280ms; on hover of the body: the body text shifts weight from 300 to 400 over 220ms. - **Tarnished brass texture:** A subtle CSS conic-gradient on brass shapes simulates polished metal: `conic-gradient(from 220deg, #c95a2a, #e08a3c, #f4c47a, #e08a3c, #c95a2a)`. - **Lens flare detail:** One scene (number 06) shows a single bright lens flare at the top-right, achieved via stacked radial gradients with `mix-blend-mode: screen`. ## Prompts for Implementation The site is twelve scenes you fall through, each holding the eye for exactly one breath. Build the immersive scroll with `scroll-snap` and reward the user for staying with each scene by introducing micro-motion that completes after ~400ms. - Use `scroll-snap-type: y mandatory` on the html element, with each `
` set to `scroll-snap-align: center; min-height: 100vh`. - Each scene's entry animation fires via IntersectionObserver at threshold 0.6 -- not on scroll position. Animations: ornament expansion (1200ms with `cubic-bezier(.2,.8,.2,1)`), curve draw (1800ms `stroke-dashoffset` from path length to 0), title type-in (per-character 35ms reveal). - The bokeh background uses two stacked elements: a heavily Gaussian-blurred photograph (`filter: blur(28px) brightness(0.4)`) and a layer of 18-24 absolutely-positioned `div` circles with `background: radial-gradient(circle, #f4c47a 0%, transparent 70%)` and varying sizes (40-220px), each at 14-22% opacity. - Flowing curves use a shared `` library. Each scene that uses a curve references it with `` and applies its own `transform` and `clip-path` so the same path appears to bend through multiple scenes. - AVOID CTAs, pricing blocks, stat grids, "feature cards," signup modals. The site is a brass plaque walked through. - Microcopy is minimal: one sentence per scene, often under nine words. Examples: "We grow software like a flower." / "Quietly. With patience." / "The atelier opens at dawn." / "Bring your own brass." - Reduced motion: snap behavior remains but all entrance animations become instant. - The maximalist quality lives entirely in the ornaments and bokeh; the minimal tone lives in the words. Maintain this contract on every scene. ## Uniqueness Notes **Differentiators from other designs:** 1. **Maximalist visuals + minimal tone as a held contradiction:** No other design enforces this contract: every scene must be visually rich (ornament + bokeh + curve) AND verbally spartan (one sentence). The site is a structural paradox. 2. **Twelve-scene snap-scroll as gallery walk:** Rather than a continuous parallax, the site uses scroll-snap to enforce a beat -- a museum step -- between scenes. The viewer cannot skim; they must stop at each painting. 3. **Limelight display face paired with Cormorant body:** This specific Google Fonts pairing (heavy art-deco display + slim Garamond italic body) creates an early-cinema poster cadence rarely seen on developer-facing sites. 4. **Shared flowing-curve library used as cross-scene continuity:** The three master Bezier paths reappear, reversed and rescaled, across multiple scenes -- a recurring visual rhyme that makes the gallery feel composed. 5. **Bokeh-as-ground, not as accent:** Every scene's background is bokeh photography (.dev sites usually carry IDE screenshots or code blocks). The atmosphere is the entire UI; code does not appear once. **Chosen seed:** maximalist immersive-scroll art-deco-display complementary micro-interactions bokeh-background flowing-curves minimal -- planned seed from assignment. **Frequency-aware choices:** Avoids overused `corporate`, `playful`, and `terminal` aesthetics common on .dev sites. Uses `maximalist` (3%), `immersive-scroll`, `bokeh-background`, `flowing-curves`, and `art-deco-display` -- all under 5% in frequency analysis. The Limelight + Cormorant pairing avoids the dominant Inter/Space-Grotesk pattern.