# Design Language for hinagiku.moe ## Aesthetics and Tone **Hinagiku** is Japanese for "daisy" — and `hinagiku.moe` is the studio portfolio of an imaginary atelier that grows *living circuit-flowers*: pressed daisies whose veins have been re-soldered in gold and neon, mounted like rare specimens behind museum glass. The governing aesthetic is **wabi-sabi** — but a wabi-sabi of *electronics*: the beauty of the chipped, the oxidized, the asymmetric, the obviously hand-finished — applied to copper traces, ceramic substrates, kintsugi-mended PCBs, and dim phosphor glow. Nothing here is mass-produced or perfectly aligned. Edges are torn. Solder joints are uneven and proud of it. A trace stops mid-run because the maker's hand stopped there. The tone is **luxurious** — not loud luxury, *quiet* luxury: heavy matte-charcoal stock, deep negative space treated like a velvet vitrine, a single object lit and venerated at a time. Think a high-end gallery monograph crossed with a Japanese tea-ware catalogue crossed with the back of a vintage synthesizer whose circuit board someone decided was too beautiful to hide. The dopamine-neon hits are *rare and reverent* — a hot magenta trace here, an acid-lime via there — like gold leaf in a lacquer box: precious because there's so little of it against all that dark. The mood: **a hush, then one bright nerve firing.** The whole site sits in soft focus, slightly defocused like breath on cold glass, and the visitor's gaze is what brings each specimen into sharp, glowing clarity. Reference touchstones: kintsugi repair on raku tea bowls, exposed bare-PCB "art electronics," Edmund de Waal's white-vitrine installations, pressed botanical herbaria, the warm hum and faint glow of tube amplifiers, Issey Miyake fragrance packaging, and the way a circuit board photographed macro looks exactly like a city seen from orbit — or a flower seen too close. ## Layout Motifs and Structure A **portfolio-grid** — but a *deliberately imperfect* one, a "specimen wall" rather than a tidy CSS masonry. Picture a curator who hung the frames by eye: a strict underlying baseline grid exists, and then every tile is nudged a few pixels off it, rotated a fraction of a degree, given slightly different margins — wabi-sabi asymmetry inside an implied order. Structure: - **The Vitrine (hero)** — a full-bleed near-black field with one hero specimen floating slightly off-center: a single generative circuit-daisy, glowing faintly, defocused, with the wordmark "hinagiku" set in heavy display caps and a one-line maker's statement in light italics. No nav bar across the top — instead a thin **brass index rail** down the left edge: tiny mono numerals (01 · 02 · 03 …) like the catalogue numbers on museum labels, each a jump-link to a specimen. - **The Specimen Grid** — a 12-column baseline with tiles of varied span (a 7-col "feature" specimen, paired 5-col and 4-col tiles, the occasional full-bleed bleed-tile). Each tile is a **vitrine card**: a thin hairline frame with one corner deliberately *unclosed* (the trace runs off the edge), a faint inner glow, a kintsugi gold seam running diagonally across roughly one tile in four as if the glass once cracked and was mended. Tiles are *not* uniformly aligned — vertical rhythm is intentionally syncopated, like stones in a Japanese garden. - **The Maker's Margin** — a generous right-hand gutter (or, on the feature specimen, a wrapped column) holds quiet annotations in mono: material, "fired" date, edition size, a coordinate, a haiku-length caption. These read like herbarium labels, never like product specs. - **Depth of field as composition** — the page has a literal focal plane: items near the visitor's attention are crisp and bright; everything else recedes into soft blur and dimmer glow. Scrolling or moving the cursor re-racks focus down the wall. - **The Colophon (footer)** — settles into the deepest charcoal, a single centered brass daisy-mark, a line of mono credits, and one last neon trace that draws itself to a dead end. - Negative space is *the vitrine velvet* — never empty filler, always intentional darkness framing one lit thing. Avoid: hero-banner-then-feature-cards-then-CTA funnels, three-tier pricing, big-number stat grids with "+" signs, testimonial carousels, sticky top navs, logo walls. The catalogue numerals are wayfinding, never KPIs. ## Typography and Palette **Display / headings — display-bold:** **"Archivo Black"** (Google Fonts) for the wordmark and the largest specimen titles — dense, confident, almost industrial weight, but used sparingly and very large so it reads as *sculpture*, not shouting. **"Bricolage Grotesque"** (Google Fonts), at its heaviest optical sizes, as the secondary display for section headers and specimen names — its slightly idiosyncratic, hand-tuned curves carry the wabi-sabi "made by someone" feeling into the type itself. **Body / statement text — humanist serif for warmth:** **"Newsreader"** (Google Fonts), especially its italic, for the maker's statements, captions, and any reading copy — a soft, literary serif that gives the catalogue its hushed, monograph gravity against all the hard copper geometry. **Labels / annotations / numerals — mono:** **"Spline Sans Mono"** (Google Fonts) for the brass index rail numerals, herbarium-style annotations, coordinates, edition numbers, timestamps — quiet instrument precision, never a full terminal aesthetic. Palette — **dopamine-neon**, but rationed like leaf-gilding over a deep wabi-sabi charcoal-and-clay base: - `#0c0c0e` — **Vitrine Charcoal** — deepest background, the velvet of the case - `#16161a` — **Slate Substrate** — primary card background, a degree warmer than the void - `#23211d` — **Fired Clay** — warm earthen mid-tone, the ceramic body of a specimen, secondary surfaces - `#8a8378` — **Oxidized Ash** — muted warm grey, body text on dark, hairline frames, the patina of age - `#c9a24b` — **Kintsugi Brass** — the mended-gold seam, the index rail, the daisy-mark, restrained metallic warmth - `#ff2e88` — **Dopamine Magenta** — the rarest, hottest neon trace; active states, the one nerve firing — used like a single drop of dye - `#c6ff2e` — **Acid Lime Via** — secondary neon, solder-pad highlights, hover sparks — equally rationed - `#3df0e0` — **Cyan Phosphor** — cool tertiary glow for circuit traces in the generative art, the faint hum behind the dark - `#f4efe6` — **Specimen Ivory** — near-white for the rare lit caption and high-emphasis display text, the paper of the label Default state is the dark vitrine; the neon trio (magenta / lime / cyan) together should never exceed a small fraction of any viewport — they are the dopamine *hit*, not the wallpaper. Brass and ivory carry the luxe; clay and ash carry the wabi-sabi. ## Imagery and Motifs - **Generative circuit-daisy specimens** — the heart of the site. Each portfolio "specimen" is a live `` (or layered animated SVG) generative system: a daisy whose petals are drawn as branching **circuit traces** — copper-colored paths with right-angle bends, vias as little glowing solder pads, a central "ground plane" disc — radiating from a seed point, no two flowers alike, each given a wabi-sabi imperfection (an unfinished petal, an off-center core, a single trace that doubles back). Faint cyan phosphor glow; one trace per flower picked out in Dopamine Magenta or Acid Lime. - **Kintsugi seams** — thin irregular gold cracks (`#c9a24b`) running diagonally across about one in four cards and through the hero plate, drawn as hand-jittered SVG polylines with a soft glow, as if the vitrine glass — or the ceramic substrate — broke once and was lovingly rejoined. The break is *featured*, never hidden. - **Circuit-lines as ornament** — beyond the flowers, thin trace-paths wander the dark margins: a single copper line leaving a card and finding a via three tiles away, right-angle "bus" routes underlining section headers, a ground-fill hatch pattern faintly visible in the deepest panels. The PCB is the decorative grammar everywhere — sparse, elegant, deliberate. - **Herbarium / catalogue framing** — every specimen is presented like a pressed-flower mount: hairline frame, mono label block, a catalogue numeral, a torn-paper edge texture on the rare ivory label. Museum-vitrine restraint, not scrapbook clutter. - **Soft-focus / blur-focus default** — all imagery sits behind a real blur and dimmed glow by default; it sharpens and brightens only when it becomes the focal specimen. The page's resting state is gently defocused, like looking through breath-fogged display glass; *focusing* is the visitor's act of leaning in to inspect. - **Texture** — a faint film grain over everything, a barely-there warm vignette pulling the eye to center, and a subtle "oxidation" speckle on the brass elements. Tactile, aged, hand-finished — never glossy or sterile. - **Restraint clause** — no particles-everywhere, no snow-globe, no glitch storm. One flower lit, one nerve firing, the rest a hush. ## Prompts for Implementation - Build it as a **single immersive full-screen "specimen vitrine"** the visitor moves *through*, not a scrolling sales brochure. First paint: a near-black field, the hero circuit-daisy already alive but defocused and dim, the wordmark "hinagiku" assembling in heavy Archivo Black, a kintsugi gold seam drawing itself across the plate (stroke-dashoffset), and the maker's statement fading up in Newsreader italic. Then a single Dopamine Magenta trace lights along one petal — the one nerve firing — and holds. - **Blur-focus is the primary interaction grammar.** Off-focus specimen cards carry `filter: blur(4–7px)` with reduced opacity and dimmed glow; the card under the cursor (or scrolled into the focal band) racks to `blur(0)`, full opacity, and its trace highlights flare to full neon. Implement with `transition: filter .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, filter-brightness .55s ease`. Keep a baseline `blur(0.4px)` on the whole page so it always feels like looking through glass. Re-rack focus on scroll: whichever card crosses the viewport's golden-ratio line becomes crisp. - **The generative circuit-daisy engine**: a `` that grows a flower per specimen — from a seed point, fork petal-traces outward with right-angle (Manhattan-routing) bends, drop glowing via-pads at junctions, fill a central ground disc; seed the RNG per card so each is unique and stable on reload; bake in one wabi-sabi flaw each (an unclosed petal, an asymmetric core, a doubled-back trace). Animate the traces *drawing* themselves on first focus. Respect `prefers-reduced-motion` by rendering one finished, beautiful still frame. Tint copper/brass for the body, cyan phosphor for ambient glow, and exactly one petal per flower in `#ff2e88` or `#c6ff2e`. - **Animation vocabulary:** stagger specimen cards in on load (long, gentle — .5–.9s, spring ease, slight overshoot); kintsugi seams and circuit-bus underlines draw themselves with `stroke-dashoffset`; a few px of buoyant parallax — cards drift opposite the cursor like specimens floating in resin; neon trace highlights *travel* (a bright dash running the length of a path) on hover; the brass index numerals tick to active with a tiny scale-pop. Keep everything *slow and reverent* — this is a gallery, not a game. Quiet luxury, not energetic. - **Content sections (as catalogue specimens, not funnel blocks):** the Vitrine (hero — wordmark, maker's statement, the lit hero circuit-daisy, the brass index rail); the Specimen Grid (the portfolio works themselves, each a generative circuit-flower in an imperfect vitrine card with a mono herbarium label: title in Bricolage Grotesque heavy, material/edition/"fired" date in Spline Sans Mono, a haiku-length caption in Newsreader italic); the Maker's Margin (a quiet annotated column on the feature specimen — process notes, a coordinate, the studio's philosophy in two sentences); the Colophon (footer — brass daisy-mark, mono credits, one final neon trace drawing to a dead end). A persistent left brass index rail for wayfinding. - **AVOID:** CTA-stacked landing layouts, pricing tables, big-number stat grids, "Trusted by" logo walls, popup modals, testimonial carousels, sticky top navbars, generic uniform card-grid-then-footer. The catalogue numerals and herbarium labels are *curatorial framing*, never metrics or conversion funnels. - Type treatment: Archivo Black enormous and tight (`letter-spacing: -.01em`) for the wordmark and a few hero titles only — used like sculpture; Bricolage Grotesque heavy for specimen names with its quirky curves left intact; Newsreader italic at comfortable size with generous leading for all hushed reading copy; Spline Sans Mono tiny, uppercase or numeric, wide-tracked, in Kintsugi Brass or Oxidized Ash for every label, coordinate, and timestamp. - Palette discipline: Vitrine Charcoal `#0c0c0e` → Slate Substrate `#16161a` as the resting dark; Fired Clay `#23211d` for warm ceramic surfaces; Kintsugi Brass `#c9a24b` for the mended seams, index rail, and daisy-mark (the luxe); the neon trio — Dopamine Magenta `#ff2e88`, Acid Lime Via `#c6ff2e`, Cyan Phosphor `#3df0e0` — rationed to a tiny fraction of any view, the dopamine *hit*; Specimen Ivory `#f4efe6` for the rare lit label and hero display text. If a viewport ever looks "colorful," dial the neon back — wabi-sabi austerity wins. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **Wabi-sabi applied to electronics** — not a clean tech site and not a rustic ceramics blog, but *the imperfect beauty of hand-finished circuit boards*: torn frame corners, uneven solder joints, traces that stop mid-run, kintsugi-gold mended PCBs. Wabi-sabi aesthetic (~2%) and circuit motifs (~7%) are both rare here, and welding them — with the explicit "the break is featured, never hidden" principle — is the core idea. 2. **Dopamine-neon as rationed gold leaf** — dopamine-neon palette (~9%) used *against* its grain: instead of saturated maximalist candy, the neon trio is a tiny precious fraction over a deep charcoal-and-clay base, like a single drop of dye in a lacquer box — paired with a *luxurious* tone (~4%), which almost never co-occurs with dopamine palettes. 3. **A "specimen vitrine" portfolio-grid** — portfolio-grid layout (~2%) reframed as a curator's deliberately-imperfect specimen wall: strict baseline grid with every tile nudged a few px off it, syncopated vertical rhythm, herbarium-style mono labels, museum catalogue numerals — explicitly *not* a tidy uniform masonry, and with zero stat-grids, zero pricing, zero CTA funnel. 4. **Generative circuit-daisies** as the literal portfolio works — each "specimen" is a unique, seed-stable `` flower whose petals are Manhattan-routed copper traces with glowing vias and one wabi-sabi flaw each (generative-art imagery, ~7%) — the artwork *is* the generative system. 5. **Blur-focus as the controlling metaphor, not a decoration** — the entire page rests in soft focus behind "fogged display glass," and *bringing one specimen into crisp, neon clarity* is the visitor's primary verb; blur-focus appears in only ~6% of designs and almost never as the page's governing interaction grammar. Re-racking focus down the wall on scroll, with a baseline page blur, makes it structural. Chosen seed: **aesthetic: wabi-sabi, layout: portfolio-grid, typography: display-bold, palette: dopamine-neon, patterns: blur-focus, imagery: generative-art, motifs: circuit, tone: luxurious** Avoided per frequency analysis: no hand-drawn/glassmorphism aesthetic, no photography-led imagery (every "photo" is a live generative specimen), no card-grid/full-bleed/centered default layout (the grid is intentionally broken and asymmetric), no warm/gradient default palette as the whole story (warmth is brass-and-clay restraint, neon is rationed), no mono-only typographic crutch (mono is confined to herbarium labels), and explicitly no parallax-heavy / cursor-follow / magnetic over-reliance — parallax here is reduced to a few px of buoyant float in service of the "specimen suspended in resin" feel.