# Design Language for honpo.net ## Aesthetics and Tone honpo.net (Japanese "honpo" meaning "the original shop / head office") is an **anti-design magazine** rendered as if a 1968 Wolfgang Weingart typography seminar had been dropped into a marble museum, then photographed at dawn under a fog of vellum. The mood is **dreamy-ethereal**: pages misalign, headlines collide, captions float untethered, but everything reads as gentle drift rather than aggression. Inspirations: Wolfgang Weingart's Typographische Monatsblätter covers, David Carson's RayGun spreads, the marble friezes of the Pergamon Altar, late-night photocopier zines, and the painted vellum of Hilma af Klint's late watercolors. The anti-design vocabulary -- broken alignment, mixed sizes, layered headlines, hand-scrawled annotations -- is held inside a magazine-spread layout where the spreads themselves are willfully wrong: the gutter falls at 70/30; pages overlap; pull-quotes pierce the margin and break onto the next spread. The voice is hushed: "the original shop is closed; the doors hum." The result is a misbehaving art catalogue that still teaches the reader something. ## Layout Motifs and Structure A **magazine spread** taken seriously, then sabotaged. Each spread is one section but the discipline is broken on purpose: gutters wander; pages overflow into one another; pull-quotes ignore the column. - **Cover spread (140vh):** Left page tilted -2deg, right page tilted +1.2deg. The wordmark "honpo.net" rendered in Recursive variable font at clamp(80px, 16vw, 280px), with each letter set to a different optical-size value so the word visibly disagrees with itself. A faint marble texture fills the background. - **Editor's letter spread (110vh):** A 70/30 gutter -- the small left page contains a single ranged-right paragraph; the large right page contains scattered annotations in handwriting-style font, overlapping a marble photograph. - **Centerfold (160vh):** A massive expressive headline spread across both pages, with characters at varying sizes from 32px to 280px, mixing weights and italics. The headline reads "everything in the original shop is original; nothing is the same." - **Critique spread (120vh):** Two parallax photographs of marble fragments stacked behind columns of dense body text. The columns tilt slightly (1deg) toward the gutter. - **Specimen spread (100vh):** A typographic specimen showing the Recursive font axis exploration -- the same word "drift" set at 14 different weight/slant/casual axis combinations, scattered as if dropped. - **Glossary spread (100vh):** Marginalia: short definitions in handwritten font, each pointing to a corresponding marble illustration on the opposite page. Lines drawn between them in pencil-textured strokes. - **Colophon spread (90vh):** A wandering left-aligned paragraph in muted ink, signed in handwriting, "the editors / the original shop." Across all spreads, photographs of marble (parallax-scrolled at 0.5x) form a connective tissue. Text overflows page boundaries by 24-48px deliberately. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / body / italic (single variable family):** "Recursive" (variable, with mono/sans, casual, weight, slant axes). The entire site exploits a single variable font's axes for an expressive typographic personality. Display headlines use Recursive Sans Casual=1, weight 900, slant -15. Body uses Recursive Sans Casual=0, weight 400, slant 0. Italic-substitute uses slant -8. Mono captions use Recursive Mono Casual=0, weight 500. This single-family approach yields enormous expressive range with one Google Fonts request. - **Handwriting accent:** "Caveat" weight 400 at clamp(14px, 1.6vw, 22px) for marginalia annotations -- the only non-Recursive face. **Palette (muted -- foggy marble / dawn vellum):** - `#ecebe5` -- vellum primary background - `#dad8cf` -- aged paper secondary - `#beb9ad` -- mineral fog (mid-tone surfaces) - `#8a8478` -- pencil stone (small annotations, hairlines) - `#3a3530` -- ink ground (body text) - `#a8784a` -- worn sienna (highlight, only used 3 times across the site) - `#c4c6cc` -- cool marble vein (color of the marble photographs after duotone) Every value sits in a soft muted register -- no chroma above 30%. The single sienna accent is the only warm color, used like a stamp. ## Imagery and Motifs - **Marble texture photography:** Marble slabs, fragments, and friezes captured with a soft cool duotone (deep mineral fog into cool marble vein). Each spread has at least one marble photograph; they parallax-scroll at 0.5x speed, suggesting they are floating in deeper space than the type. - **Hand-drawn annotations:** Pencil-textured arrows, brackets, underlines, and circles drawn over the text -- as if an editor marked up the spread in pencil and forgot to erase. - **Marble-classical motifs:** Small ornamental ionic capitals, fluted column fragments, and acanthus leaves rendered in 1px ink, used as section markers. - **Parallax depth via marble:** The marble photographs act as a quiet background plane that moves at half-speed, giving the type a feeling of floating above stone. - **Layered typographic ghosts:** Behind each large headline, a ghosted copy of the same headline at 8% opacity, offset by 6px and at a slightly different optical-size value. The headline disagrees with itself. - **Marginalia constellations:** Tiny circles and arrows scattered in the margins, drawing visual paths between captions and figures. ## Prompts for Implementation The site is a slow, dreamy mis-edited magazine. Every alignment is intentional. Every overlap is deliberate. Build for atmosphere first; structure follows. - The body uses CSS Grid with `grid-template-columns: 30fr 70fr` (for the 70/30 gutter spreads) or `1fr 1fr` (for centerfolds). Each spread is one CSS `@scope` section that establishes its own micro-grid. - Recursive is loaded once with `font-variation-settings` controlled per element via CSS custom properties. Each element sets its own `--wght`, `--MONO`, `--CASL`, `--slnt`. A handful of headlines animate their casual axis from 0 to 1 over 9s. - Marble photographs use `filter: grayscale(0.4) sepia(0.05)` and a `mix-blend-mode: multiply` on a vellum gradient, parallaxed by `transform: translate3d(0, calc(var(--scroll) * 0.5), 0)` via rAF. - Pull-quotes that break the column: absolute-positioned with `transform: translate(calc(50% + 40px), 0)` and high z-index, intentionally crossing the gutter. - Ghost headlines: each headline element has a `::before` containing the same text with `opacity: 0.08; transform: translate(6px, 2px); font-variation-settings: 'CASL' 1, 'wght' 700`. - Caveat marginalia: short handwritten lines positioned absolutely in margins with `transform: rotate(-3deg)` and varying tilt per instance. Pointing arrows are inline SVG paths. - Page tilts are subtle: -2deg to +1.2deg, applied via `transform: rotate()` on the section. Reading remains legible. - AVOID CTAs, pricing modules, signup forms, "feature cards," stat counters. There is exactly one mailto link in the colophon: "write to the editor." - Dreamy-ethereal microcopy: "the original shop opens on Tuesdays / the marble dreams in cool blue / type drifts; meaning settles." ## Uniqueness Notes **Differentiators from other designs:** 1. **Recursive variable font as the only typographic system:** A single variable family with five axes drives display, body, italic-substitute, mono captions, casual flavor, and weight pulses. No other design uses Recursive at this expressive range. 2. **Anti-design within a magazine grid:** Most anti-design sites are deliberately chaotic single-page experiences. This one organizes the chaos into magazine spreads with crop marks, colophons, and editor's letters -- producing an art-zine that misbehaves within a structure. 3. **70/30 gutter and tilted pages:** The conventional 50/50 magazine spread is replaced by a 70/30 split and slight page tilts, making the layout feel like a binder where pages have shifted under their tape. 4. **Marble-classical photography as parallax connective tissue:** Marble images move at 0.5x speed across all spreads, providing a quiet stone undercurrent beneath typographic drift. 5. **Ghost headlines that disagree with themselves:** Each headline has a slightly off-axis ghost copy at 8% opacity in a different Recursive axis value, creating a typographic shadow of dissent. **Chosen seed:** anti-design magazine-spread expressive-variable muted parallax hand-drawn marble-classical dreamy-ethereal -- planned seed from assignment. **Frequency-aware choices:** `anti-design` (2%), `expressive-variable` typography, `muted` palette, `marble-classical` motifs, and the Recursive variable font axis exploration are all uncommon. Avoids overused `playful`, `corporate`, `photography` (as primary imagery), and Inter/Space-Grotesk type pairings.