# Design Language for amamiya-honpo.net ## Aesthetics and Tone amamiya-honpo.net is a starkly elegant gallery archive of the imagined sweets house ("甘味屋本舗 / amamiya honpo" — the same flagship shop interpreted through a different romanization), reframed as a brutalist-modernist archive in cool gray. Where the -hompo spelling sibling is moody and aurora-lit, this -honpo variant is austere, archival, museum-grade: a Helvetica-era sweets retrospective set in a concrete-and-steel exhibition hall. The shop's hundred-year history is documented here with the gravity and visual silence of a museum monograph. The aesthetic is **neubrutalism** -- bold, raw, deliberately plain, with thick black borders, oversized typography, hard rectangular blocks, and zero ornament. But this is the *quiet* register of neubrutalism rather than the carnival-color register: monochromatic cool grays from near-white concrete to charcoal pavement, deliberately desaturated, with one or two small black-key accents. Everything has a stamped, printed, museum-label feeling: thick borders that read as architectural beam, hard shadows that read as cast concrete, and a palette as cool as winter daylight in a glass atrium. The tone is **nostalgic-retro** -- not in the warm-nostalgia register, but in the cold-archive register. The voice is that of a curatorial monograph: third-person, past-tense, factual, almost detached. Headlines are dated entries: "1947 — the first mizuyokan log," "1962 — the year the kingyokuto recipe changed." Body copy is short, journalistic, precise. The retrospective stance treats the shop's history with the seriousness of architectural history. The site frames the brand as an institution rather than a storefront. The visitor is reading an archive, not browsing a shop. There are no products for sale, no current menu, no contact form. There is only the historical record: who, when, what, and why. ## Layout Motifs and Structure **MA-Negative-Space Architecture (the discipline of empty):** The structural device is **MA** (間, ma) -- the Japanese architectural concept of meaningful empty space. The site uses MA at radical scale: most viewports are 60-75% empty. A single dated entry, a single image, a single headline -- with vast surrounding negative space carrying tonal weight. The layout discipline draws from Japanese architectural drawing conventions, museum monograph layouts, and Otl Aicher's Olympiad systems. **Page Structure:** The site is a single long vertical scroll, divided into 9 distinct timeline-ordered "entries" -- each entry is one decade of the shop's imagined hundred-year history (1925, 1935, 1945, 1955, 1965, 1975, 1985, 1995, 2005). Each entry occupies a generous 200vh of scroll space, and within that space, content is intentionally sparse: - A massive year stamp (192-280px display) anchored to the upper-left of the viewport - A two-line dated headline (e.g., "1947 — the first mizuyokan log") - 1-2 short paragraphs of body copy in a narrow column (50ch) - A single thick-bordered image block (often empty as a placeholder for archival photographs that don't exist) - Vast negative space between these elements -- minimum 40vh of pure empty cool gray between the headline and the image, between the image and the body copy **Borders and Architectural Lines:** Every primary content block is bordered by a 4-6px thick black line, drawn with deliberate hand-imperfection (slight non-uniform thickness via SVG stroke). These borders are the dominant graphic element. They do not have rounded corners; they are sharp 90-degree angles. They suggest: - Architectural section drawings - Museum vitrine vitrine framing - Concrete formwork shadows - Letterpress hairline boxes The image blocks are particularly stark: 4-6px black borders containing a flat cool-gray fill (not a real photograph), with a small caption beneath in mono-spaced typography. **Scroll-Triggered Animation Pattern:** The entire site relies on **scroll-triggered** entrance animations as its primary motion vocabulary. Each element (year stamp, headline, image block, body paragraph) enters in a single deliberate movement when its scroll position reaches a defined threshold: - Year stamp: opacity 0 → 1 + translateY(40px) → 0, over 600ms with a hard cubic-bezier(0.16, 1, 0.3, 1) easing. - Headline: same pattern, triggered 200ms after the year stamp. - Image block: pure border-draw animation -- the 4-6px black border draws itself line-by-line (top, right, bottom, left -- 80ms per side) before the gray fill fades in. - Body paragraph: opacity 0 → 1 over 800ms, with a 100ms delay between each paragraph. There are no continuous animations on this site. Every motion is scroll-triggered, single-shot, and once-only. The site is mostly still; movement is reserved for the moment of arrival. **No Conventional Navigation Bar.** Instead, a single fixed text label in the upper-right corner reads "1925—2025 / archive" in 11px mono. Clicking it reveals a centered list of decade entries that the user can jump to. **No Footer.** The final entry (2005) ends with a single paragraph stating "the archive continues to be maintained in private," and abundant whitespace below. ## Typography and Palette **Primary Display Font:** "Cormorant Infant" (Google Fonts) -- an elegant serif revival with restrained calligraphic terminals and a refined book-like quality. Used for all H1 entry headlines, year stamps, and section titles. Weight 400 for headlines, weight 300 italic for the dated subheadings. The serif provides editorial gravitas that pure sans would lack. **Secondary Sans Font:** "Inter" (Google Fonts) -- weight 400 used for body copy. Letter-spacing -0.005em, line-height 1.55. Inter's neutral modernist forms balance the elegance of the Cormorant headlines. **Caption / Mono Font:** "JetBrains Mono" (Google Fonts) -- weight 400 used for image captions, year markers (the small ones beside captions), and the navigation label. Letter-spacing 0.04em, size 11-13px. **Type Scale:** - Year stamp: clamp(160px, 20vw, 280px) -- Cormorant Infant weight 400 - Entry headline: clamp(48px, 5.5vw, 80px) -- Cormorant Infant weight 400 - Dated subheading: clamp(20px, 1.8vw, 24px) -- Cormorant Infant italic weight 300 - Body: clamp(15px, 1.05vw, 17px) -- Inter weight 400 - Caption: 12px JetBrains Mono weight 400 Note on the seed: "elegant-serif" was specified — Cormorant Infant is the elegant serif anchor. The pairing with Inter as supporting sans (rather than another serif for body) is deliberate: it preserves headline elegance while keeping body copy clean and readable in the monochromatic palette. **Palette (Cool-Grays, museum-archive monochrome):** - Atrium white: `#eeeeee` (the page base, slightly off-white, like museum-card stock) - Concrete light: `#d4d4d4` (image block fills, surface elevated state) - Concrete medium: `#9e9e9e` (secondary annotations, faded captions) - Pavement: `#5e5e5e` (body text) - Charcoal: `#2a2a2a` (headlines, year stamps) - Black ink: `#0a0a0a` (the thick borders -- nearly black but slightly warm-shifted) - Single accent (used at most twice on the entire site): `#86344a` (a deep aged maroon, like dried azuki paste, used only for the closing paragraph's first letter and one small punctuation mark) This is an aggressively monochromatic palette. The only visual variation is value (light to dark gray); hue is suppressed entirely except for the single muted maroon accent. ## Imagery and Motifs **Minimal Imagery Discipline:** Following the **minimal** imagery seed direction, this site contains essentially no decorative imagery. Each entry has at most ONE image-position content -- and even that "image" is a flat cool-gray rectangle with a thick black border, captioned with a line of mono-text describing what the image *would* depict if it existed. This is intentional: the missing image is the imagery. The empty rectangles read as archival placeholders, suggesting that the photograph was lost, not yet found, or never taken. This evokes the actual experience of working in historical archives, where the absence of records is often more telling than their presence. **Abstract-Tech Motif (decorative ornament where it appears):** A small set of abstract-tech ornaments appear sparingly throughout the site: - **Index marks:** Tiny right-angle tick marks (8px, charcoal stroke) appear at the corners of every image block, like printer's registration marks. - **Cross-references:** Short numerical labels (e.g., "ref. 1947.03.14") appear in mono type beneath image blocks, suggesting an archival cataloguing system. - **Architectural section lines:** Faint horizontal hairlines (1px concrete-medium) span the full viewport width at the top and bottom of each entry, suggesting the floor and ceiling of the museum hall. - **Decade markers:** Each year stamp is preceded by a single small filled square (12px, charcoal) that suggests a typographer's bullet, lending typographic gravitas. These tech-archival ornaments are extremely restrained. Most viewports show none of them; a few show one or two at most. **Photography:** Forbidden, as established. The "image-shaped absences" of empty cool-gray rectangles serve as the only visual placeholders. **Iconography:** None. No icons of any kind. Where a UI affordance is needed, a text label suffices. ## Prompts for Implementation **Storytelling Frame:** The visitor enters a quiet museum hall and walks past nine cabinets, each containing a decade's worth of records about an imagined hundred-year-old sweets house. The records are sparse: a year, a single sentence, an empty image-shaped placeholder, a paragraph or two of factual prose. The visitor is invited to walk slowly, to read carefully, to feel the weight of accumulated history despite the visual scarcity. The site is short to read but rewards reverence and patience. **Entry Implementation Pattern:** Each decade entry is a `section` element 200vh tall. Within each section: - Massive year stamp at upper-left, in the first viewport (anchored ~20vh from section top, ~15vw from left). - 30-50vh of pure empty space below the year stamp. - Dated headline (e.g., "the first mizuyokan log") in a single line at center-left. - 30vh of empty space. - Image block: 320x240px or 480x360px rectangle with 4-6px black border, anchored center-right or center-left depending on entry parity (alternating). - Caption in mono, 24px below image block. - 30vh of empty space. - Body paragraph (50-70ch wide) in a narrow column anchored opposite to the image. - 40vh of empty space before the section ends. The exact positioning of these elements varies between entries -- the layout is composed individually for each decade rather than templated -- but the average composition follows this rhythm. **Border Drawing Animation:** Image block borders draw themselves on scroll-trigger using SVG `stroke-dashoffset` animation: ```css .image-block-border { stroke-dasharray: var(--total-length); stroke-dashoffset: var(--total-length); transition: stroke-dashoffset 320ms cubic-bezier(0.65, 0, 0.35, 1); } .image-block.in-view .image-block-border { stroke-dashoffset: 0; } ``` Each border edge draws sequentially (top first, 80ms; then right, 80ms; bottom, 80ms; left, 80ms; total 320ms). **Scroll-Trigger Architecture:** Use IntersectionObserver with thresholds at 0.20 and 0.40 to trigger entrance animations. Each element receives a `data-enter` attribute that the observer toggles to `in-view`. CSS handles the transition. **Alternating Composition Rhythm:** Even-indexed decades (1925, 1945, 1965, 1985) have their year stamp on the left, image block right-of-center, body paragraph aligned right. Odd-indexed decades (1935, 1955, 1975, 1995, 2005) have year stamp left, image block left-of-center, body paragraph aligned left. This alternation creates a subtle compositional rhythm across the long scroll. **Hover Affordances (minimal):** - Hovering an image block causes the 4-6px border to subtly thicken (5px → 7px) over 200ms, and the cool-gray fill to step lighter (#d4d4d4 → #dcdcdc) for 200ms. Returns on mouse-leave. - Hovering the year stamp causes its color to step from #2a2a2a to #0a0a0a over 200ms. Subtle. - Hovering body-copy paragraphs has no effect. Body copy is read, not interacted with. - Hovering the navigation label "1925—2025 / archive" causes the underlying gray rectangle to expand as a list of decades appears -- a momentary deviation from the otherwise still site. **The Single Color Accent:** The deep aged-maroon accent (#86344a) appears at exactly TWO locations on the entire site: - The drop-cap of the final paragraph in the 2005 entry (the closing statement "the archive continues to be maintained in private" — its first letter "T" is set in deep maroon). - A single period at the end of the closing paragraph, also in deep maroon. This restraint is deliberate. The two color points are the only chromatic moments in the otherwise grayscale site, suggesting that the archive's heart has the color of dried azuki — the brand's signature material. **Avoid Absolutely:** - Any color other than the cool-gray scale + the single deep maroon accent. - Decorative imagery, photography, illustration. - Animations that loop or persist (only single-shot scroll-triggered enters). - Hero CTAs, contact forms, "shop now" affordances, e-commerce of any kind. - Carousels, sliders, accordions, modals. - Drop shadows. The thick borders provide all separation; nothing else needs softening. - Centered layouts. The compositions are intentionally asymmetric and architectural. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Neubrutalism in cool-gray monochrome rather than carnival-colored** -- most neubrutalism in the corpus is bright primary colors. This is the rare austere register: thick borders, hard rectangles, but in museum-monochrome with a single deep-maroon punctuation accent. Neubrutalism aesthetic is at 0% in corpus. 2. **MA-negative-space at radical scale** -- 60-75% empty viewports, with content sparsely anchored. This level of empty space discipline is rare. 3. **Image-as-absence** -- using empty cool-gray rectangles with thick black borders as placeholder for missing photographs, captioned with text describing what would be depicted. The absence is the imagery. 4. **Decade-archive temporal structure** -- nine entries chronologically ordered from 1925 to 2005, treating the brand as a hundred-year institution rather than a contemporary store. 5. **Cool-grays palette at 8% in corpus** -- leveraged as the entire palette here, with one minimal accent. 6. **Distinct from this batch's amamiya-hompo.net (moody glass aurora)** -- where that sibling is the moody nocturnal flagship, this -honpo variant is the museum-archive cousin. Same imagined institution, opposite aesthetic stance: warm-aurora-mood vs cool-monochrome-archive. 7. **Scroll-triggered only animation discipline** -- no looping animations, no parallax. Every motion is single-shot on entry. **Chosen seed/style (from Batch_003 Planned Seeds):** aesthetic: neubrutalism, layout: ma-negative-space, typography: elegant-serif, palette: cool-grays, patterns: scroll-triggered, imagery: minimal, motifs: abstract-tech, tone: nostalgic-retro **Frequency-analysis avoidance notes:** - Avoiding the corpus-overused "botanical" aesthetic (66%), "photography" imagery (99%), "warm" palette (99%), "muted" palette (50%), "gradient" palette (70%). - Embracing under-used patterns: neubrutalism aesthetic (0%), cool-grays palette (8%), MA-negative-space at radical scale, minimal imagery (44%, but executed here with image-as-absence twist), and abstract-tech motif used as restrained ornament. - The combination of elegant-serif typography (Cormorant Infant) with neubrutalism aesthetic is genuinely unusual -- typically neubrutalism pairs with grotesque sans, not editorial serif.