# Design Language for heisei.boo ## Aesthetics and Tone **heisei.boo** is a **scholarly cartography of an era** — specifically the Heisei period (1989–2019), Japan's thirty-year epoch of bubble, bust, and digital becoming. The site treats this domain as the cover and interior of a lost academic monograph: one that was printed in a short run of 400 copies, bound in slightly foxed cream cloth, and shelved in the basement of a university library in Sendai where the fluorescent lights flicker once per hour. The aesthetic is **Swiss precision colliding with wabi-sabi impermanence**. Grid logic is absolute — a Müller-Brockmann column structure governs every element — but within that grid, the paper breathes. Ink bleeds at the edges of large type. The aurora-gradient palette bleeds through the yellowed substrate like light through rice paper held up to a window: scientific, cold, and deeply beautiful at once. The tone is **scholarly-intellectual without condescension** — the voice of a professor who has spent twenty-three years studying something nobody asked them to study, and who is now quietly electric with the opportunity to share it. The site is not a pitch. It is an annotated timeline, a field journal, a monograph introduction. It respects the reader's attention as a finite and serious resource. Visual inspiration: the spine design of Iwanami Shoten paperbacks, the column logic of Swiss journal *Typografische Monatsblätter*, and the spectral color bleed of old ink-jet proofs left in direct sunlight. ## Layout Motifs and Structure The layout is a **strict single-column scholarly article format** — not a blog, not a landing page, but a journal paper rendered as a live document. The column width is fixed at `min(680px, 88vw)`, centered on the page with equal white margins left and right. But "centered" is avoided as a layout *feel*: the column is ragged-right in content, footnote-heavy, and interrupted by full-width figure blocks that break the column momentarily before returning. **Structural rhythm:** - **Running head** (sticky, minimal): domain name left, section title right, separated by a hairline rule (`1px solid #c8bfa8`), sitting at 40px from the top. Font: `IBM Plex Mono` 11px, all caps, letter-spacing 0.15em. This is the only persistent UI element. - **Drop-folio**: each scroll section is numbered with a large folio numeral set in the bottom-left margin in `Cormorant Garamond` 120px, 10% opacity — a ghost number floating in the margin gutter. - **Figure interruptions**: every 3–4 paragraphs, a `width: 100vw; margin-left: calc(-50vw + 50%)` breakout hosts a wave-form visualization — not decorative, but a genuine frequency plot of cultural data (music releases, seismographic traces, stock indices) from each Heisei sub-era. - **Footnotes rendered inline**: on hover (desktop) or tap (mobile), footnote superscripts expand in place as a small callout card — no scroll-jumping. - **Vertical rhythm**: `line-height: 1.72` throughout body, `margin-bottom: 1.72em` between paragraphs, maintaining the consistent baseline grid. The page has **no hero section**, no above-the-fold CTA, no navigation bar beyond the running head. The first element encountered is a large drop-cap initial letter followed by the opening sentence of the text. The page begins *in medias res*. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Drop-cap / Folios**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 for the drop-cap (set at clamp(7rem, 16vw, 16rem), floated left, with `line-height: 0.8` and a 4-line drop), weight 600 italic for pull-quotes, weight 300 upright for the ghost folio numerals. Cormorant Garamond carries the optical delicacy of letterpress printing — at oversized scale it reads as both monumental and fragile, which is exactly right for an era ending. - **Body text**: [`Spectral`](https://fonts.google.com/specimen/Spectral), weight 400, size 17px / `1.72` line-height. Spectral is a screen-first serif commissioned for optimal reading at long measure — it has the quiet authority of a Dutch humanist type without the Victorian decorativeness of Garamond at body sizes. Used for all running text, footnotes (at 13px), and captions (italic, 14px). - **Running head / figure labels / metadata**: [`IBM Plex Mono`](https://fonts.google.com/specimen/IBM+Plex+Mono), weight 400, 11–13px. The mono type carries the archival data-entry quality of a catalogued museum specimen: cold, precise, factual. Used for dates, coordinates, citation keys, figure references. - **Section subheadings**: [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) weight 500 small-caps, `font-variant: small-caps`, tracking `0.08em`, 18px. Section heads feel like chapter titles in an academic text, not UI headings. **Palette — aurora-gradient through foxed paper:** The palette is built on the tension between aged substrate (warm cream, foxed brown, ink gray) and the spectral phenomenon of northern lights filtered through the era's electronic media. | Role | Name | Hex | |---|---|---| | Page substrate | Foxed Ivory | `#f4efe3` | | Body ink | Sumi Black | `#1c1a17` | | Running head / rule | Aged Steel | `#8a8070` | | Aurora North | Cold Violet | `#7b68c8` | | Aurora Mid | Ice Green | `#6ec4b0` | | Aurora South | Pale Magenta | `#c87ba8` | | Wave-form fill | Spectral Teal | `#4aa8a0` | | Pull-quote accent | Oxblood Faint | `#8a3040` | | Folio ghost | Cream Mist | `#d8cfc0` | The aurora colors appear **only** in the wave-form breakout figures and in the Lottie animation layer — never in body text, never in navigation. The page base is entirely achromatic-warm (ivory, sumi, steel) so that when aurora color arrives it is genuinely surprising, like seeing the northern lights from a university library window in February. ## Imagery and Motifs **Wave-forms as primary visual motif:** Every breakout figure is a genuine waveform visualization — not decorative sine waves, but data-derived frequency plots: - **Section 1 breakout**: a seismographic trace of the 1995 Kobe earthquake, drawn as an SVG `` with 2000+ data points in `Spectral Teal`, aurora-gradient fill below the baseline. - **Section 2 breakout**: a frequency spectrum of a 1993 J-pop chart single (rendered as a bar-frequency plot), colored with the Cold Violet → Ice Green aurora gradient. - **Section 3 breakout**: a Nikkei 225 index trace 1989–2002, drawn as a filled area chart, the crash visible as an irreversible descent — Pale Magenta fill, Sumi Black stroke. - These waveforms are generated programmatically from embedded data arrays, not imported images. **Paper-aged imagery:** - A subtle `noise` SVG filter (`feTurbulence` + `feColorMatrix`) is applied to the page substrate, simulating aged paper grain at 3–5% opacity. Not visible at arm's length, perceptible on close inspection. - Ink bleed simulation: the drop-cap letter has a radial gradient shadow in `#8a8070` at 8% opacity, spreading 4px — as if the letterpress impression pushed ink into the fibres. - No photography. No stock images. No icons from any icon font. **Lottie animation (the single animated element):** A single Lottie JSON animation plays in the far-left margin gutter, visible only on viewports wider than 1100px. It depicts a **slowly rotating compass rose** — the navigational instrument, not a decorative flourish — with needle oscillation that mimics magnetic declination drift. The animation runs at 0.3× speed, loops, and pauses on `prefers-reduced-motion`. The compass is rendered in Aged Steel (`#8a8070`) with aurora-gradient accent on the needle tip. This is the *only* animation on the page. It does not react to scroll or cursor. **Section dividers:** Between major sections, a horizontal rule rendered as a `` micro-waveform (a 3px amplitude sine wave, 100% column width, 1px stroke in `#c8bfa8`) replaces the conventional `
`. This is the Swiss rigor meeting the wave-form motif: functional but formally resonant. ## Prompts for Implementation **The story to tell.** A reader opens what appears to be a digitized academic article — sparse, column-set, respectful of silence — about the Heisei era of Japan. As they read, they discover the text is narrated by someone who *lived inside* that period: a researcher, a witness, someone who watched the bubble economy inflate and collapse, who felt the 1995 earthquake, who watched mobile phones transform human sociality, who watched the era end with an emperor's abdication in 2019. The page does not pitch, does not ask for email addresses, does not offer downloads. It simply unfolds, the way a monograph unfolds — one section, one idea, one era at a time. **Implementation vows:** **Vow 1 — Typography is the architecture, not the decoration.** Before writing any CSS, establish the vertical rhythm grid: `font-size: 17px`, `line-height: 1.72` on ``. Every spacing unit in the design (`margin`, `padding`, `gap`) must be a multiple of `17 × 1.72 = 29.24px`, rounded to `29px`. The column is `680px`. The column's `padding-inline` is `0` — the white space is provided by the viewport minus the column. Headings, folios, and pull-quotes are oversized exceptions to the grid, but they must still land on a baseline. **Vow 2 — Aurora appears only in data, never in furniture.** The colors `#7b68c8`, `#6ec4b0`, `#c87ba8` may appear *only* inside the `
` breakout elements and inside the Lottie animation. The running head, body text, footnotes, pull-quotes, and section rules use only the achromatic-warm palette. This constraint ensures that when a reader hits a wave-form figure, the color is a genuine event rather than a ambient decoration. **Vow 3 — The Lottie animation is a margin ornament, not a hero.** Load Lottie from CDN (`@lottiefiles/lottie-player`). The compass animation lives in `position: fixed; left: calc(50% - 380px - 80px); top: 50%; transform: translateY(-50%);` — pinned in the left gutter at vertical center. Width: 64px. It is invisible on screens narrower than 1100px (`display: none`). It must not interfere with reading. It should feel like finding a small pressed flower tucked into the margin of a library book. **Vow 4 — Waveforms are generated, not imported.** Each figure's waveform is a `` element with a `` or `` generated from a JavaScript data array embedded in the HTML. The arrays represent real historical data (simplified to ~200 points per waveform). The SVGs have `viewBox="0 0 680 120"` and `preserveAspectRatio="none"`. The aurora fill below each waveform uses a `` from the top aurora color to transparent at the baseline. **Vow 5 — The drop-cap is the opening gesture.** The `::first-letter` pseudo-element on the opening `

` is set in `Cormorant Garamond` weight 300, `font-size: clamp(6rem, 14vw, 14rem)`, floated left, `line-height: 0.78`, `margin-right: 0.06em`, `margin-bottom: -0.1em`. Apply the paper-aged noise filter via an SVG `filter` reference. The drop-cap letter should feel like a medieval folio initial printed on a Risograph at 150%. **Scroll behavior:** No snap points, no parallax, no scroll-jacking. Smooth, natural browser scroll only. The reading experience should feel like turning pages, not riding an elevator. **Lottie source:** A hand-crafted Lottie JSON (or sourced from LottieFiles under free license) of a compass rose with oscillating needle, run at `speed="0.3"`, `loop`, `autoplay`. If no suitable free asset is available, fall back to a pure-CSS rotating compass SVG with `animation: compassOscillate 8s ease-in-out infinite`. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **Aurora palette as a gate, not an ambient.** Every other design using gradients (82% of the registry) applies them as background washes, hero fills, or button accents — continuously present. This design locks all aurora color inside data-visualization figures only, making color arrival a semantic event rather than decoration. No other registry entry uses this constraint. 2. **Waveform figures as genuine historical data visualization.** The wave-forms motif (6% of registry) is almost always used decoratively — sine waves as section dividers, abstract oscilloscope backgrounds. This design uses wave-forms as the actual primary content medium: a seismograph trace, a stock market collapse, a frequency spectrum. The wave is the argument. 3. **Margin Lottie animation as a whispered aside.** Lottie-animation (rare in the registry) is almost always used as a loading screen, a hero centerpiece, or a feature illustration. Here it lives in the gutter — a 64px compass rose visible only on wide screens, never referenced in the text, never intrusive. It is the page's secret: a reader may finish the entire article without noticing it. 4. **Swiss grid discipline applied to a scholarly long-form essay, not a portfolio or product page.** Swiss aesthetic (11% of registry) is used in the registry almost exclusively for portfolios, agency sites, and product showcases — structured grids of cards or project thumbnails. This design applies Swiss grid logic to a *reading* experience: fixed column width, mathematical vertical rhythm, section-level modularity, zero decorative flourishes that aren't also structural. 5. **No scroll animation of any kind.** Parallax (90%), stagger (63%), scroll-triggered (39%) dominate the registry. This design opts out entirely. The only motion is the silent Lottie compass in the margin. This restraint is itself a differentiator: the page is fast, still, and deeply unusual in a registry of kinetic experiences. **Chosen seed (per assignment):** aesthetic = swiss, layout = single-column, typography = oversized-display, palette = aurora-gradient, patterns = lottie-animation, imagery = paper-aged, motifs = wave-forms, tone = scholarly-intellectual. **Avoided patterns (from frequency analysis):** centered layout (90%), full-bleed sections (76%), mono-only typography (84%), warm gradient as ambient background (93%), parallax (90%), stagger (63%), scroll-triggered animations (39%), hand-drawn aesthetic (66%), vintage motifs (53%).