# Design Language for hinagiku.dev ## Aesthetics and Tone **hinagiku.dev** is staged as **a deep-sea film studio that only shoots one actor: a daisy** — "hinagiku" being the Japanese word for daisy, here dropped into a flooded marble screening room two thousand metres down where the projector still works because nobody told it the building sank. The aesthetic is unapologetically **cinematic**: letterboxed black bars, anamorphic lens flares stretched into horizontal streaks, slow dolly-zooms, focus-pulls, a title card that fades up out of total black, end-credits that scroll. But the *subject* of all this gravitas is gleefully absurd — a single white daisy, drifting in a tank, being filmed as though it were Marlon Brando. The tone is **playful**: the site treats its own production values as a joke it's in on, captioning shots with deadpan "DIRECTOR'S NOTE:" asides, naming color-grades after moods the daisy is allegedly feeling, and letting the credits roll over a blooper of a bubble bonking the lens. The mood: **bathysphere matinée.** Picture the Criterion Collection restoring a 1962 art film that was shot entirely inside a sunken Carrara-marble bath-house — caustic light rippling across fluted columns, motes of plankton catching the key light like dust in a projector beam, the water itself acting as a giant soft-box. Everything has the heavy, deliberate pacing of prestige cinema, undercut at every turn by the fact that the leading lady is a flower the size of your palm and the special effects budget was clearly "a fish tank and some food coloring." Reference touchstones, named explicitly so the build can chase them: the **opening crawl darkness** before a Coen Brothers title card; **anamorphic flares** from a Panavision lens (those flat blue horizontal streaks); the **underwater photography** of Jacques Cousteau crossed with the **chiaroscuro marble interiors** of a Visconti period piece; the **caustic shimmer** on the floor of an ancient Roman bath; **A24 trailer typography** doing its slow tracking-out word reveals; the **Letterboxd four-star half-ironic review** voice; a **Wes Anderson chapter card** but waterlogged; the **DVD-menu "Scene Selection"** grid of a film you loved as a kid; and the gentle indignity of a **blooper reel** played over the credits. ## Layout Motifs and Structure A **broken-grid** layout treated as **a film editor's lightboard / contact sheet that someone knocked askew underwater** — frames of "footage" pinned at slight rotations, some bleeding off the letterbox, some overlapping, none sitting on a tidy CSS grid. The page is *not* a scrolling brochure; it's a **screening** that progresses, with content revealed the way a film reveals — cut by cut, title card by title card. Structure: - **Permanent letterbox** — fixed black bars top and bottom (≈ 8–11vh each), present from first paint, framing everything in 2.39:1 cinemascope. The top bar holds a tiny mono "REEL 01 // hinagiku.dev" slug and a running timecode (`00:01:24:07` style, ticking). The bottom bar holds the current "scene title" and a thin scrubber line that fills as you scroll, like a film's progress bar. - **The Title Card (hero)** — opens on *pure black* inside the letterbox. After a beat, the word **hinagiku** fades up — oversized, variable-weight, tracking out slowly — then a subtitle types beneath in mono: *"a motion picture in which nothing happens, beautifully."* A faint caustic-light loop begins to play across the marble behind it. Scroll, and the black "iris-wipes" open into the studio. - **The Contact Sheet** — a deliberately *broken* grid of 5–9 "frames": rectangles of varying aspect ratio (a tall 9:16 "screen test," a wide 21:9 "establishing shot," a square "ID photo of the daisy"), each rotated −3° to +4°, slightly overlapping at corners, casting soft drop-shadows, each with a white grease-pencil scribble in the margin ("TAKE 4 — too theatrical", "the bubble was improvised"). These frames are the navigation/content blocks: *The Footage* (what the site/project is), *Director's Notes* (the playful manifesto), *Scene Selection* (links/sections), *The Crew* (credits/colophon), *Behind the Tank* (technical/dev notes — the `.dev` wink). - **Diagonal "filmstrip" gutters** — between sections, a strip of sprocket-holes runs at a slight diagonal across the page, sometimes vertical along an edge, never axis-aligned — a structural element that *refuses* the grid. - **The Credits Roll (footer)** — the page ends, literally, in **end credits**: white serif/variable names scrolling up over black inside the letterbox — "DAISY ............ herself", "WATER ............ also herself", "PROJECTIONIST ... you" — and then a tiny blooper loop of a bubble hitting the lens, then the "iris" closes to a dot. The colophon hides here. - **Negative space is the screening-room dark** — never empty: faint floating motes, the occasional bubble crossing, the breathing flicker of projected light. Avoid: hero-banner→feature-cards→pricing→CTA funnels; three-column plans; stat-grids with "+" signs; testimonial carousels; "Trusted by" logo walls; any sign-up. The "frames" look like UI cards only by accident — they are *footage*, and the only call to action is *keep watching*. ## Typography and Palette **Display / titles — expressive-variable:** **"Fraunces"** (Google Fonts), run hard on its variable axes — heavy optical-size for the giant "hinagiku" title card so the serifs go lush and dramatic (the *Soft* and *WONK* axes dialed up for that warm, almost liquid feel), lighter optical-size for chapter cards. This is the "prestige film poster" voice. Secondary expressive-variable display: **"Bricolage Grotesque"** (Google Fonts) for the broken-grid frame headings and the deadpan "DIRECTOR'S NOTE:" labels — its slightly off-kilter variable weights suit the askew lightboard. **Body / captions — variable sans:** **"Inter"** (Google Fonts, variable) for readable copy in the frames and director's notes — neutral on purpose, so the *writing* (which is the joke) does the work, not the letterforms. **Mono / timecode / sprocket labels — mono:** **"DM Mono"** (Google Fonts) for the running timecode, the "REEL 01" slug, grease-pencil-style technical scribbles set in type, and the subtitle typewriter line — the "production paperwork" voice. Palette — **ocean-deep** core (the flooded screening room), with the warm tungsten glow of the projector and the cold blue of an anamorphic flare as the only color: - `#04080d` — **Reel Black** — the letterbox bars, the title-card void, the credits background; deeper than pure black feels, faintly blue - `#0a1822` — **Abyss Floor** — primary deep background, the water at the bottom of the room - `#10303f` — **Marble Shadow** — mid-tone, the fluted columns in shade, frame backplates - `#1f5d6e` — **Caustic Teal** — the rippling projected light on the marble, scrubber fills, active states - `#4ec3d6` — **Anamorphic Cyan** — the flat horizontal lens-flare streak, key highlights, the glow on the daisy's edge, link hover - `#c8e9ee` — **Screen-Light Pale** — soft cyan-white for body text on dark, the projector beam's edge - `#e8b873` — **Tungsten Amber** — the warm projector-bulb glow, the grease-pencil scribbles, "DIRECTOR'S NOTE:" label, the one warm human touch in all that water - `#f6f1e6` — **Daisy White (warm)** — the daisy's petals, the credits type, the rare lit "frame" — never pure #fff, always slightly cream like film stock Default state is the dark flooded room; exactly one "frame" may be a backlit lightbox in Daisy White, like a lit slide on the editor's bench. ## Imagery and Motifs - **The Daisy, filmed reverently** — a single white daisy is the recurring "actor": rendered as crisp inline SVG (eight-ish petals, a tungsten-amber core), it appears as the title-card subject, as the "frame" content for screen tests, drifting/rotating slowly in the screening-room dark, sometimes mid-"performance" with a caustic highlight sweeping its edge. Treat it like a movie star — soft key light, gentle rim glow, never crowded. - **Anamorphic lens flares** — the signature mark: flat *horizontal* streaks of Anamorphic Cyan that bloom across the top of bright elements, plus the occasional starburst with horizontal "wings." On hover, a frame catches a flare. Used sparingly, like a real DP would — one per shot, max. - **Caustic light field** — a live `` (or layered animated SVG) drawing the rippling net of light that water throws on a pale surface: interfering ripples in Caustic Teal over Marble Shadow, drifting forever, draped across the "marble columns" behind content. This is the room's ambient light. Respects `prefers-reduced-motion` by freezing on one beautiful caustic still. - **Marble-classical columns** — fluted Doric/Ionic columns rendered as subtle SVG line-art or low-contrast backplates flanking the title card and the credits — the "screening room" is a sunken classical bath-house. Veining drawn as faint amber-grey threads. - **Filmstrip sprockets & frame borders** — diagonal sprocket-hole strips as structural gutters; each "frame" edged in a thin Daisy-White rule with rounded film-frame corners and a tiny "FRAME 142" mono tag in the corner. - **Bubbles** — slow-rising, sparse Daisy-White-edged bubbles drifting up through the room and occasionally *crossing the lens* (a bubble passes in front of the "camera," briefly distorting/magnifying what's behind it). One bubble bonks the lens in the credits blooper. Restrained — atmosphere, not a snow-globe. - **Grease-pencil annotations** — hand-set type in DM Mono / Bricolage at slight angles in frame margins: "TAKE 4 — too theatrical", "she nailed it", "buy more food coloring" — the playful editorial voice made visual. - **Texture** — a faint film-grain overlay everywhere, a soft vignette darkening the corners (it's a projected image), and a barely-there gate-weave wobble on the whole frame (≤1px) so it feels *projected*, not rendered. ## Prompts for Implementation - Build it as a **single immersive full-screen "screening" inside a permanent letterbox** — fixed black bars top & bottom from first paint, content in 2.39:1 between them, a ticking timecode in the top bar and a scroll-driven film-scrubber in the bottom bar. The visitor is in the dark, watching; they are not "browsing a site." - **Open on pure black, then fade up the title card.** First paint = Reel Black void inside the letterbox. After ~700ms, "hinagiku" fades in (Fraunces, huge, heavy optical-size, `letter-spacing` animating from tight to `0.06em` as it settles — a slow "tracking out" reveal), then the mono subtitle types beneath it (DM Mono, typewriter effect). A caustic-light loop quietly starts behind it. On first scroll, an **iris-wipe** (expanding `clip-path: circle()`) opens the void into the Contact Sheet — the projector "starting the film." - **progressive-disclosure is the page's whole grammar.** Content arrives the way a film does: cut by cut. Each "frame" in the broken grid is hidden until its scroll-cue, then it *cuts in* (no slow fade — a hard 1–2 frame "splice": instant appear + a tiny grain-flash + a settle). Director's-note text reveals **line by line** as you scroll, like subtitles appearing. The "Scene Selection" frame's links unfurl one at a time. Nothing is shown before its moment. Provide a "SKIP TO CREDITS" tiny link in the bottom bar for the impatient — itself a joke. - **The broken grid must actually look broken.** Frames at `transform: rotate(-3deg … +4deg)`, overlapping at corners with layered `z-index`, varied aspect ratios (9:16, 21:9, 1:1, 4:3), some bleeding past the letterbox edge and clipped by it. Soft, long, low-opacity drop-shadows so they feel *pinned to a lightboard*. On hover: a frame straightens slightly (`rotate(0)`), brightens, and catches a single horizontal anamorphic-cyan flare across its top edge. Diagonal sprocket-hole gutter strips run between/along sections, never axis-aligned. - **The caustic light field**: a `` summing 3–5 drifting ripple sources, sampled to a translucent net of light in Caustic Teal `#1f5d6e` over Marble Shadow `#10303f`, draped behind the "marble columns." Plus a separate, rarer pass: every ~12–20s a slow horizontal **anamorphic flare** sweeps once across the top of the screen. `prefers-reduced-motion` → freeze the caustics on one frame, kill the flare sweep, kill the gate-weave. - **Animation vocabulary:** dolly-zoom on the title card (very slow `scale(1)→scale(1.04)` over 20s + a matching `translateY` so it feels like the camera creeping in); focus-pull on hover (off-frames at `filter: blur(2–4px)`, the hovered/centered frame snaps to `blur(0)` + a brightened cyan rim — a real rack-focus); bubbles rising on independent timers, one occasionally crossing the "lens" with a brief magnify distortion; grain always; gate-weave ≤1px; the timecode genuinely incrementing; spring-ease the frame straightening; the credits genuinely scrolling (`translateY`) at a stately pace. - **Content sections, as footage not funnel blocks:** *Title Card* (hero — "hinagiku" + the deadpan logline + caustics); *The Footage* (what this is — a short, dryly grand paragraph in a 21:9 "establishing shot" frame, captioned like a film); *Director's Notes* (the playful manifesto — line-by-line subtitle reveal, "DIRECTOR'S NOTE:" labels in Tungsten Amber, the daisy "feeling things"); *Scene Selection* (links/sections as a kid's DVD-menu grid of thumbnail frames); *Behind the Tank* (the `.dev` wink — terse technical/colophon notes set like a production sheet, "SHOT ON: a fish tank. GRADE: 'Melancholy Petal'."); *End Credits* (footer — full scrolling credits over black, the bubble-bonks-lens blooper loop, iris-close to a dot, colophon hidden in the credits). - **AVOID:** CTA-stacked landing layouts, pricing tables, big-number stat grids with "+" signs, "Trusted by" logo walls, sign-up forms, popup modals, testimonial carousels, generic card-grid→footer. The "frames" are footage; the "scrubber" is a film progress bar, not a funnel; the only ask is *keep watching to the credits*. - **Type treatment:** Fraunces enormous and lush on the title card (heavy optical-size, *Soft*/*WONK* axes up, warm and almost liquid), lighter optical-size for chapter cards; Bricolage Grotesque for the askew frame headings and "DIRECTOR'S NOTE:" labels; Inter at comfortable reading size for the actual copy so the *writing's* deadpan does the comedy; DM Mono tiny, uppercase-ish, wide-tracked for timecode, "REEL 01", grease-pencil scribbles, and the typewriter subtitle. - **Palette discipline:** dark flooded screening-room default (`#04080d` letterbox / `#0a1822`→`#10303f` room gradient), Anamorphic Cyan `#4ec3d6` reserved for lens flares + key highlights + link hover + the daisy's rim, Caustic Teal `#1f5d6e` for the rippling projected light and scrubber, Tungsten Amber `#e8b873` as the *only* warm color (projector glow, grease-pencil notes, "DIRECTOR'S NOTE:" label, the daisy's core), Daisy White (warm) `#f6f1e6` for petals/credits/the one lit frame — never pure white anywhere, it must read as film stock. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **A flooded deep-sea film studio whose only actor is a daisy** — cinematic aesthetic (~8%, rare) used *fully* (permanent letterbox, anamorphic flares, iris-wipes, dolly-zoom, literal end credits with a blooper) but pointed at a deadpan-absurd subject, so the prestige-film gravitas and the playful tone (the "DIRECTOR'S NOTE:" voice, "GRADE: Melancholy Petal") are in constant tension. Nothing else here weds full cinema-grammar to a joke. 2. **progressive-disclosure as the controlling metaphor, not a touch** — this pattern appears in only ~3% of designs and almost never as the *spine* of the page. Here the entire site reveals "cut by cut": iris-wipe to open, hard splice-cuts for each broken-grid frame, line-by-line subtitle reveals for the manifesto, the DVD-menu links unfurling one at a time, a "SKIP TO CREDITS" escape hatch. The page *is* a screening that progresses. 3. **A genuinely broken grid built as an editor's askew underwater lightboard** — broken-grid layout (~5%, rare) rendered as rotated, overlapping, varied-aspect "footage" frames bleeding past the letterbox, with diagonal sprocket-hole gutters that actively refuse axis-alignment — not a tidy bento box pretending to be edgy. 4. **expressive-variable typography pushed hard on Fraunces' Soft/WONK axes** — expressive-variable type (~4%, rare); the giant liquid-serif "hinagiku" title card vs. lighter chapter cards vs. the askew Bricolage frame headings is a real range, with Inter deliberately neutral so the *writing* carries the comedy and mono confined to "production paperwork." 5. **ocean-deep palette with marble-classical motifs and a single tungsten warmth** — the cool ocean-deep room (~4%, rare) is a sunken Carrara bath-house (marble-classical motifs ~5%, rare: fluted columns, caustic-lit veining), and the *only* warm color in the whole site is the tungsten projector glow / grease-pencil amber — restraint as a feature, not warm-gradient default. 6. **Real cinema mechanics as the animation budget** — anamorphic flare sweeps, rack-focus on hover, dolly-zoom on the title card, gate-weave wobble, film grain, a ticking timecode, a scroll-scrubber that's a film progress bar, water-bubbles that cross the "lens" with a magnify distortion (water-bubbles imagery ~6%, used as in-camera FX not decoration), and an actual scrolling end-credits roll with a blooper — instead of the usual parallax/cursor-follow/magnetic reflexes. Chosen seed: **aesthetic: cinematic, layout: broken-grid, typography: expressive-variable, palette: ocean-deep, patterns: progressive-disclosure, imagery: water-bubbles, motifs: marble-classical, tone: playful** Avoided per frequency analysis: no hand-drawn (~96%) or glassmorphism (~66%) aesthetic; no photography-led imagery (~99% — imagery here is SVG daisy + generative caustics + in-camera bubble FX); no card-grid (~87%) / full-bleed (~94%) / centered (~84%) default layout — the grid is deliberately broken and letterboxed; no warm/gradient default palette as the whole story (~98% each — warmth is one deliberate tungsten accent against ocean-deep); no mono-only typographic crutch (~95% — mono is confined to "production paperwork"); and explicitly no parallax-heavy / cursor-follow / magnetic over-reliance (~96% / ~87% / ~80%) — motion here is cinema mechanics (flares, rack-focus, dolly-zoom, gate-weave, credits roll), not the usual reflexes.