# Design Language for hinagiku.moe ## Aesthetics and Tone hinagiku.moe is a **seapunk magazine spread** -- a quarterly editorial dropped from a coral-reef printing press onto a tatami floor. The mood is **professional** despite the .moe TLD: this is the masthead of a fictional botanical-marine review, not a fandom landing page. Inspirations: 1990s i-D Magazine fold-outs, Marina Abramović's tidepool photography, "Sailor Moon" closing-credits gradients run through a Risograph, the bubble-laden splash pages of vintage Japanese aquarium catalogs, and the pastel coral wash of mid-90s teen-zine art direction. The seapunk vocabulary -- bubbles, kelp, dolphins, jagged crystals, gradient skies -- is rendered with editorial restraint: every illustration is hand-drawn in single-weight ink and laid out on a strict baseline grid. The tone never giggles; it reports. Photo-cards have captions, columns have running heads, and the daisy is treated as the cover subject of a serious botanical-marine biome report. Pastel waves wash quietly behind dense type. The professionalism comes from typography (condensed, ranged-left, with serious tracking) and from the editorial discipline of a magazine layout; the seapunk comes from the imagery and palette. ## Layout Motifs and Structure A genuine **magazine spread** -- two-page layout where every "section" is a left page + right page composition, with running heads, folios, and pull quotes. Twelve such spreads stack vertically, each 100vh tall on desktop (collapsing to single column on mobile). - **Masthead spread (100vh):** Left page (cream): the wordmark "HINAGIKU.MOE" in condensed type, ranged-left, with a tiny issue/volume notation ("VOL. 12 / TIDEPOOL EDITION"). Right page (pastel gradient): a single hand-drawn daisy submerged in water, leaves becoming kelp, illustrated as if for a botanical-marine field guide. - **Cover story spread (100vh):** Left page: a 2.5x photo of a tidepool (cropped to right edge), with hand-drawn bubble overlays. Right page: the cover article opens with a 6-line drop intro in condensed bold, then settles into two-column body text. - **Field notes spread (100vh):** Left page: three small hand-drawn vignettes (a starfish, a daisy, a strand of kelp) at top, each labeled in 10px caps. Right page: a single column of running notes. - **Pull-quote spread (100vh):** Both pages are a single massive pull quote: "Even the daisy learned to swim." Set in condensed bold at clamp(72px, 12vw, 168px). - **Sidebar spread (100vh):** Left page contains a 3-column index of marine-botanical specimens with thumbnails. Right page has one large hand-drawn diagram with annotated labels. - **Spreads 06-11:** Each carries a single editorial concept (centerfold, the gutter, the inside back cover, etc.) rendered with the same magazine vocabulary. - **Colophon spread (100vh):** A masthead-style listing of "contributors" (all imagined) and a small box giving printing details. Each spread uses a strict 12-column baseline grid with a 24px gutter and 8px vertical rhythm. Between spreads, a single hairline rule and a "fold mark" -- a tiny pair of crop-mark crosses -- appears in the center to suggest a folded magazine. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / wordmark:** "Oswald" weight 700 condensed at clamp(48px, 9vw, 168px), tracking -1%. The narrow letterforms read as authoritative editorial display, professional and dense. - **Section headlines:** "Oswald" weight 500 at clamp(28px, 4vw, 56px), tracking 1%. - **Body:** "Oswald" weight 400 at 17px / 1.5 in two-column flow at 280px column width with hyphenation. Oswald used at body sizes is unusual and gives the magazine a tabloid-broadsheet rhythm. - **Italic:** Oswald has no italic; instead, italic captions and pull-quotes use "EB Garamond" italic weight 400 -- a careful editorial counterpoint. - **Captions / folios:** "Oswald" weight 300 at 10px small caps, tracking 12%. **Palette (pastel sea-witch -- soft but not babyish):** - `#f4f0e6` -- bleached paper (primary background) - `#e8d8e2` -- coral-pink mist (pastel accent #1) - `#c8e0d8` -- seafoam mint (pastel accent #2) - `#b8c8e8` -- mermaid lavender (pastel accent #3) - `#7896c8` -- deep tide blue (mid-tone, sidebar fills) - `#3a4a78` -- ink navy (text) - `#d8a8b8` -- conch peach (highlight accents, pull-quote color) The four pastel accents are used as full-page background washes on the right pages of spreads, rotating in a fixed sequence (mist, mint, lavender, peach, mint, lavender, mist, peach...) so the magazine has tonal pacing. ## Imagery and Motifs - **Hand-drawn botanical-marine illustrations:** Every visual is drawn in single-weight 1.5px ink in ink navy. Subjects: daisies, kelp, starfish, ammonites, jellyfish, bubbles, dolphins, coral fans, brittle stars, tide pools. No fills -- pure linework. Each illustration looks like a marine-biology field-guide plate. - **Bubble overlays:** Light-pastel circles (4-22px) scattered in groups over photos and headlines, opacity 30%, blend mode `multiply` on pastel backgrounds. - **Leaf-organic motifs:** Hand-drawn kelp ribbons, leaf-veins, and frond curls used as section-break ornaments. They appear in 18px ink-navy strokes, often spanning the gutter between left and right pages. - **Bounce-enter animation for illustrations:** Each hand-drawn illustration bounces in (28px rise, 1.05 overshoot, settle) when it scrolls into view -- a small editorial flourish that lets each drawing arrive like a turned page. - **Crop marks and folios:** Tiny printer's crop marks at the corners of every spread; folios (page numbers) at the bottom-outer corners in Oswald small caps. - **Running heads:** A 12px running head at the top of every spread that names the current section ("FIELD NOTES // SPREAD 03 // HINAGIKU.MOE"). ## Prompts for Implementation The site is a quarterly magazine printed onto the screen. Every section reads like a two-page spread; transitions feel like turning a page. - Build each spread as a single `
` containing a flex/grid pair of two `
` halves. On viewports under 880px, the right half stacks below the left and the "page" becomes a vertical single. - Use CSS `column-count: 2; column-gap: 28px; column-rule: 1px solid #d8c8c0` for the body-text sections on the right pages to reinforce the magazine column rhythm. - Bounce-enter: a single keyframe `@keyframes magBounce { 0% { transform: translateY(28px) scale(0.96); opacity: 0; } 65% { transform: translateY(-3px) scale(1.03); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }` triggered by IntersectionObserver on each illustration with a 60ms stagger per element. - All hand-drawn illustrations are inline `` with `stroke="#3a4a78" stroke-width="1.5" fill="none"`. They live in the source as small reusable symbols. - The fold-mark between spreads is a CSS pseudo-element on each `
`: two pairs of crop crosses in 1px ink navy, with a thin hairline rule across the full width. - AVOID CTA banners, pricing modules, signup forms, "feature cards." The site is reading material; the only interactive element is a small "subscribe to the next issue" mailto link in the colophon. - Storytelling: open with the masthead; cover story sets the editorial premise; spreads alternate between long-form essay, image-led, sidebar, and pull-quote rhythms; colophon closes the issue with imagined credits and a printer's mark. - Microcopy professionalism: "Volume 12, the Tidepool Edition." "Photographs by the staff." "Printed on the morning tide." "Submissions welcomed; queries to the desk by post." ## Uniqueness Notes **Differentiators from other designs:** 1. **Seapunk with full editorial restraint:** Most seapunk work is loud, holographic, and chaotic. This design uses the seapunk vocabulary (pastel waves, bubbles, kelp, dolphins) within a strict magazine grid and Oswald condensed body, producing a "serious botanical-marine review" that no other seapunk site attempts. 2. **Oswald used as body type:** Oswald is overwhelmingly used as a heavy display face. Here it carries 17px body in two columns, which gives the magazine a Victorian-broadsheet rhythm unusual in modern editorial design. 3. **Twelve-spread magazine structure:** The site is not a "long scroll" or a "card grid" but a stack of two-page spreads with running heads, folios, and crop marks -- a deliberate metaphor of a print magazine, not a website. 4. **Hand-drawn illustrations only:** Despite a seapunk palette, the site uses no photography of dolphins or 90s 3D dolphins; every visual is a single-weight ink illustration. The discipline of medium creates the editorial tone. 5. **Pull-quote spread as full-page interruption:** Spread 04 is nothing but one quote at 168px across two pages. This editorial pause is rare on websites and signals magazine pacing. **Chosen seed:** seapunk magazine-spread condensed pastel bounce-enter hand-drawn leaf-organic professional -- planned seed from assignment. **Frequency-aware choices:** `seapunk` is at 2%, `magazine-spread` is underused, `condensed` typography is uncommon, `hand-drawn` imagery is at 13% but used here in an unusual editorial register. Avoids the overused `playful` aesthetic and `photography` imagery. The seapunk + professional pairing has no precedent in the registry.