# Design Language for honpo.net ## Aesthetics and Tone honpo.net is **an atlas of origins** — a quiet, scholarly observatory built around a single Japanese word: 本舗 (*honpo*) — "the headquarters store," "the authentic maker," "the place a thing actually comes from." The site reads as a slim research monograph rendered for the screen: cool, certain, unhurried, more concerned with provenance than persuasion. Picture the reading room of a municipal archive at the top of a tall building — floor-to-ceiling glass, the city laid out below in steel and dusk, and on the long oak table a single open ledger that traces where every counterfeit, every imitation, every "official partner" eventually leads back to. That ledger is the site. The aesthetic is **evolved-minimal** — minimalism that has grown a spine. Not the brittle white-page minimalism of a portfolio template (minimalist sits at 4% in the frequency map, evolved-minimal at only 1%), but minimalism with weight: deep navy fields instead of white, brushed-metal hairlines instead of borders, generous negative space that is *charged* rather than empty, and exactly one accent of warm metallic light per section so the eye always knows where the argument is going next. The mood is **scholarly-intellectual** (3% in the tone analysis) — the site speaks like a careful curator: declarative sentences, footnotes, dates, a dry confidence. It never sells. It never shows a price. It catalogues. The governing metaphor throughout: **a city seen from above is a map of where things were made**. Every district was once a workshop, a foundry, a printing house, a *honpo*. The site treats the modern city skyline — at the blue hour, all navy shadow and metallic window-light — as the visual proof of its thesis: originals leave a footprint you can still read from the air. ## Layout Motifs and Structure **Strictly centered, single measured column** — a content well that never exceeds ~720px, axially symmetric, anchored dead-center in a wide navy field. Centered layout is common (85%), so honpo claims it not for default-ease but as a *deliberate scholarly gesture*: a monograph has one column, justified down the middle of the page, and the margins are wide precisely so the margins can breathe. The width of the well is fixed; what changes between sections is the *texture of the margin* — sometimes pure flat navy, sometimes a faint blueprint grid of the city, sometimes a single full-bleed blue-hour photograph bled out behind the column at 18% opacity so the text floats over a hushed skyline. The page is one long vertical scroll divided into **named chapters**, each introduced by a centered chapter number set in brushed metal (`Ⅰ` `Ⅱ` `Ⅲ` …, actual roman-numeral glyphs, letterspaced wide), a centered chapter title, a thin metallic rule that **draws itself outward from the center** on entry, and then the column of body text. Between chapters: a tall band of empty navy with one small centered detail — a hairline compass rose, a single photographed window-light, the word 本舗 at 8px in metallic grey. The negative space is the structure. Within the column, the only structural rhythm is **the marginal note**: short scholarly asides set in a smaller weight, indented and tinted, sitting in the left margin of the well like the annotations in a critical edition. On narrow screens they collapse inline as italic interjections. There are no cards. No grids of features. No bento boxes. No dashboards. The "components" are: chapter headers, body paragraphs, marginal notes, full-bleed photographic interludes, and a single closing colophon. That is the entire kit. One signature spatial move: **the centered column has a faint vertical metallic thread running down its exact center axis** — a 1px gradient line, navy-to-steel-to-navy, visible only as the eye rests on it — so the whole site reads as bound along a spine. Headings sit *on* the thread; body text flows symmetrically around it; the thread is the only thing that is ever truly centered, and everything else aligns to it. ## Typography and Palette **Type — Google Fonts only, two geometric-sans families, one mono for data, strict roles.** Geometric-sans sits at just 4% in the typography analysis; honpo uses it the way a Swiss cartographer would — for clarity and structure, never for fashion. - **Sora** — the display and headline voice. Sora is a geometric sans with subtly humanist proportions; set the site name *honpo.net* in Sora at clamp(40px, 7vw, 96px), weight 600, tracking -0.01em, in metallic light against navy, dead-centered. Chapter titles use Sora 500 at clamp(22px, 3vw, 34px), tracking +0.06em, uppercase. The period in *honpo.net* is rendered as a tiny filled metallic diamond via CSS pseudo-element styling — but the underlying text node is a plain `.` so it copies and reads correctly. - **Manrope** — the reading voice. The entire body text, marginal notes, and colophon are set in Manrope, weight 400 for prose at 18–19px / 1.65 line-height, weight 600 for inline emphasis, weight 300 for the marginal notes (slightly smaller, 14px, tinted). Manrope is a geometric sans that stays comfortable at long reading lengths — it carries the scholarly register without ever looking like a tech landing page. - **IBM Plex Mono** — used *only* for things that are literally data: dates (`1923–`), catalogue numbers (`HNP-04412`), coordinates, the small running footer. Tracked +0.04em, weight 400, in steel grey. Never used for prose. **Palette — navy-metallic** (3% in the palette analysis), a tight, disciplined set: - `#0E1726` — **Ink Navy**, the primary background. Deep, slightly cool, near-black but unmistakably blue. The page is this color. - `#16243A` — **Slate Navy**, secondary surface — the marginal-note tint band, the faint blueprint grid lines, the inset behind the colophon. - `#1E3454` — **Harbor Navy**, used for the blueprint-grid stroke and the dimmer end of metallic gradients. - `#C9D2DE` — **Paper Steel**, the primary text color — a cool light grey-blue that reads as "ink on a slightly blue page," never pure white (pure white would be too harsh against navy and too generic). - `#8C99AB` — **Mist Steel**, secondary text, marginal notes, captions, the running footer. - `#9A7B4F` → `#D9B877` → `#F2DCA8` — the **Brushed Brass** gradient, the *single* warm accent. Used for: the chapter roman numerals, the self-drawing rules, the center spine's brightest pass, link underlines, and the glints on the photographed window-lights. Exactly one brass element should be "lit" per viewport — it is the cursor of the argument. - `#5B7FB0` — **Cold Light**, a muted steel-blue used sparingly for the city-photo color-grade tint and for the hover state of links before they warm to brass. Contrast discipline: Paper Steel on Ink Navy for all reading text; Brushed Brass used only on type ≥ 22px or on hairlines, never for body copy. ## Imagery and Motifs **Primary imagery: photography** — but photography held to a single, strict editorial brief, because photography is at 98% in the imagery analysis and honpo must use it like a monograph, not like a stock-photo carousel. Every image on the site is a **blue-hour aerial or near-aerial photograph of a city** — rooftops, an overpass interchange seen from a tower, a grid of lit office windows at dusk, a harbor of cranes, a printing district at night. They are always: - **Color-graded to the palette**: crushed to Ink Navy in the shadows, window-light pulled toward Brushed Brass, mid-tones cooled to Cold Light. No photo appears at full saturation; each is treated as a duotone-leaning navy/brass plate. - **Used full-bleed and *behind* the column**, never inside it, never in a card, never as a thumbnail grid. They are interludes — a chapter ends, the screen opens to a held aerial photograph with one centered line of text over it (a quotation, a coordinate, a date), then the next chapter's navy field returns. - **Composed around verticals and grids** — the city's own orthogonal geometry rhymes with the centered-column layout and the blueprint margins. **Motifs — city-urban** (3% in the motifs analysis), rendered as quiet geometric marks rather than illustrations: - A faint **blueprint city-grid**, drawn in 1px Harbor Navy, that occasionally fills the wide margins outside the column — a plan-view street lattice, slightly skewed in perspective, dim enough to read as texture. - A **hairline compass rose** that appears in the empty bands between chapters and at the colophon — minimal, four-point, brass north. - **Window-light constellations** — small clusters of 2–3px brass dots, the abstracted lit windows of a far building, used as section dividers and as the bullet glyph for lists. - The kanji **本舗** itself, used once at full scale as a near-invisible Slate-Navy watermark behind the opening line, and again at 8px in Mist Steel in the running footer of every chapter. - A single **drawn isobar-free streetline** — one long curved SVG path representing a road threading through a district — used as the connective tissue between the final chapter and the colophon, drawn on with `stroke-dasharray`. No icons-as-UI. No illustration. No 3D. No mascots. The only non-photographic graphics are 1px lines and small dots, all in the navy/steel/brass set. ## Prompts for Implementation Build honpo.net as **one HTML file, one CSS file, and one small ES module (~5–7KB)** — no framework, no router, no build step, no GSAP/Three/Lottie. The animation budget is: CSS transitions and keyframes; CSS scroll-driven animations and/or a single `IntersectionObserver` for chapter reveals; SVG `stroke-dasharray` for the self-drawing rules and the streetline; and one `requestAnimationFrame` loop only if the center-spine glint needs it (a CSS keyframe is preferable). The whole page excluding fonts and photographs should sit comfortably under 70KB; photographs are loaded `loading="lazy"` and progressively. **Storytelling is the organizing principle — bias hard toward a full-screen narrative monograph, away from CTA-heavy landing layouts.** There is no hero-with-buttons, no pricing block, no stat-grid, no "features" row, no testimonial carousel. The site is read top to bottom like a short book about what it means to be *the source* of something. **Suggested chapter arc (each a centered text section between empty navy bands):** 1. **Ⅰ — The Word.** What 本舗 means. Why "headquarters store" is the wrong translation and "the place it actually comes from" is the right one. Set the kanji as a huge faint watermark behind the opening paragraph. The site name *honpo.net* resolves above it, letter by letter, with an **elastic settle** (see below). 2. **Ⅱ — The Footprint.** The thesis: originals leave a mark you can read from the air. First full-bleed blue-hour aerial photograph, one centered coordinate over it. 3. **Ⅲ — The Imitations.** A scholarly catalogue, in prose, of the forms imitation takes — the "official partner," the "as seen in," the lookalike. Marginal notes carry the dry asides. Catalogue numbers in IBM Plex Mono in the margin. 4. **Ⅳ — The Registry.** What honpo.net is *for*: a place that records, dates, and points back to the source. Second photographic interlude — a grid of lit windows, treated as a registry of rooms. 5. **Ⅴ — The Map Home.** The drawn streetline animates on, threading down toward the colophon. Closing line over a final aerial photograph at dusk. 6. **Colophon.** Set date (`1923–` or similar), the kanji at 8px, the compass rose, IBM Plex Mono metadata, a single quiet link. No newsletter box. No social row beyond, at most, one small text link. **Motion language — `elastic` (15% in the patterns analysis), used as the site's *only* characteristic motion, applied with restraint:** - The site name *honpo.net* assembles on load with each glyph dropping into place on a slightly **over-damped elastic curve** (`cubic-bezier(0.5, 1.6, 0.4, 1)` or a tuned spring) — a small overshoot, then settle. Tasteful, ~280ms per glyph, staggered ~40ms. - The metallic chapter rules **draw outward from the center** and then give one tiny elastic "snap" at full width. - Marginal notes **slide in from the margin with a soft elastic ease** as their paragraph enters the viewport. - The center spine's brass glint **travels down with a gentle elastic momentum** as you scroll, slightly lagging then catching up — the only thing on the page with inertia. - Links: on hover the underline **stretches elastically** from the link's left edge to its right, in Cold Light, then warms to Brushed Brass on settle. - Photographic interludes **scale in from 1.04 to 1.0** with the same over-damped curve as they pin into view. - Respect `prefers-reduced-motion`: all elastic curves degrade to plain 200ms ease-outs; the spine glint becomes static; nothing bounces. **Layout instructions:** centered well at `min(720px, 92vw)`; `body` is Ink Navy; the center spine is a `::before` on the column — a 1px vertical gradient, `position: fixed` or `sticky` so it runs the full height. Blueprint grid in the wide margins via a repeating linear-gradient in Harbor Navy at low opacity, optionally perspective-skewed with `transform`. Type uses `clamp()` throughout. Headings centered on the spine; body text symmetric around it; marginal notes break left of the well on wide screens, inline-italic on narrow. All photographs are CSS `background-image` on full-bleed `
`s with a navy-to-transparent gradient overlay so text stays legible. One brass element lit per viewport — enforce by giving only the in-view chapter's numeral the full brass gradient; others sit in Mist Steel. **Tone of the copy:** scholarly, declarative, dry. Dates and footnotes. No exclamation marks. No "we." Speak as a curator describing the collection. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Evolved-minimal (1% in the aesthetic map) executed as a *navy monograph*, not a white portfolio.** Almost every minimalist site in the registry is white-page, light-mode, airy-gallery. honpo inverts that: minimalism rendered in deep Ink Navy with a single brushed-brass accent — minimalism with weight and a spine, not minimalism as absence. 2. **The centered layout (85%, the default) reclaimed as a scholarly gesture.** Where most centered sites center because it's the path of least resistance, honpo centers because a monograph has one column — and then literally draws the spine of that monograph as a fixed metallic thread down the page's center axis, with all type aligned to it. The structure *is* the negative space. 3. **City-urban (3%) and photography (98%) used as *evidence for an argument about provenance*, never as decoration.** The skyline aerials are not "hero imagery" — they are exhibits in a thesis ("originals leave a footprint you can read from the air"), color-graded into the navy/brass duotone, used only as full-bleed interludes between chapters, never in cards or grids. 4. **Elastic (15%) deployed as the *single* signature motion, with one truly inertial object** — the brass spine-glint that lags and catches up as you scroll — rather than as a grab-bag of bounces. Restrained, over-damped, and switched off entirely under `prefers-reduced-motion`. 5. **Zero conversion furniture.** No CTA stack, no pricing block, no stat-grid, no feature row, no testimonial carousel, no newsletter box — explicitly avoiding the CTA-heavy patterns called out in the brief. The site is a short book about what it means to be *the source*, and it ends in a colophon, not a sign-up. Chosen seed / style: **aesthetic: evolved-minimal, layout: centered, typography: geometric-sans, palette: navy-metallic, patterns: elastic, imagery: photography, motifs: city-urban, tone: scholarly-intellectual.** Avoided per frequency analysis: hand-drawn (96%) and glassmorphism (67%) aesthetics; card-grid (87%) and full-bleed-as-default thinking; gradient/warm palettes (98%); mono-as-bodytext (95%); parallax/cursor-follow/spring/magnetic/stagger as the load-bearing motion (all 80%+) — here motion is elastic-only and minimal; pastoral-romantic/warm-inviting tones (the registry's most common) — here the register is dry and scholarly.