# Design Language for heisei.day ## Aesthetics and Tone heisei.day is **a faded undersea archive of the Heisei era (1989–2019) — a digital tide-pool where the thirty-one years between two emperors have sunk to the seafloor and gone the colour of old photographs.** The conceit holds two opposing aesthetics in a single frame and refuses to resolve them: the **seapunk** vocabulary of the early-2010s internet (cyan dolphin waves, hyper-saturated ocean GIF loops, the ⌐◨-◨ optimism of a generation that thought the future would be teal and chrome) is dredged up, salt-corroded, and re-printed in **sepia-nostalgic** tones — as if a Geocities ocean-scene had been left in a drawer for two decades until the cyan oxidised to amber and the chrome went the brown of a 1991 family album. This is seapunk *after the era ended* — a movement aesthetic embalmed in nostalgia for the very era that produced it. The tone is **authoritative** — not playful, not ironic, despite the seapunk source material. heisei.day speaks the way a museum wall-text speaks, or the way a public-broadcaster retrospective speaks on a New Year's broadcast: measured, declarative, slightly elegiac, certain of the dates. It is the voice that says "The Heisei era began on 8 January 1989 and ended on 30 April 2019" as a matter of record, then lets the sunken-ocean imagery carry the feeling underneath. The visitor should feel they have descended into a quiet, pressurised place — an archive that is also a wreck — where every artifact is labelled, dated, and gently encrusted. Authority delivered from the seafloor. Confidence with the lights low and the water heavy. Mood words: pressurised, embalmed, tidal, oxidised, archival, elegiac-but-certain. Think NHK's *Yuku Toshi Kuru Toshi* end-of-year broadcast reflected in a flooded aquarium. Think a CD-ROM encyclopedia of the 1990s recovered from a shipwreck. Think the exact moment cyan becomes amber. ## Layout Motifs and Structure The page is a **masonry** layout (8% of the corpus — among the rarer structural choices) — but a *deliberate, archival* masonry, not a Pinterest free-for-all. The metaphor is **a wall of museum vitrines of unequal height, stacked the way salvage crates stack on a recovery-vessel deck**: each item (a year, an event, a fragment of the era) is its own cabinet, and the cabinets tile into columns by their natural content height, leaving the ragged bottom edge that masonry produces — read here as *sediment*, as the uneven floor of a settled wreck. **The descent.** The document reads top-to-bottom as a *dive*: a full-bleed surface band at the top (bright-ish, the most cyan-leaning the palette ever gets), then the masonry wall begins and the palette darkens and warms with each scroll-depth — a CSS-driven gradient on the page background that runs from a pale sea-foam sepia at the top (`#E8DCC8`) down through amber-brown to a near-black abyssal brown (`#1C140C`) at the footer. Scroll position *is* depth. A thin fixed "depth gauge" rail on the left margin — a vertical hairline in `#3A6B6B` with tick marks and the years 1989…2019 mapped along it — tracks where the visitor is in the dive. **The vitrine grid.** Three columns on wide screens (each ~360px, gutters 32px), two on tablet, one on phone. Cards never have uniform height — content dictates it. Card widths are fixed; only height varies; that is the whole point of choosing masonry. Each vitrine is bordered by a 1px **grid-lines** frame (the grid-lines motif appears in only ~2% of the corpus) in a dim teal `#3A6B6B`, with a subtle inner double-rule like an old certificate. Cards carry a small monospaced catalogue number in the top-right (e.g. `HEI–1995–017`) and a date stamp. **Marginalia.** The wide left margin (where the depth gauge lives) and occasional full-width "stratum" bands between masonry sections (a single horizontal rule of encrusted texture with an era-name label like "後期 / late Heisei") break the grid and give the eye a horizon line in the murk. No hero CTA. No pricing. No stat-grid. No "features" row. The masonry wall *is* the content; the page ends at the abyss with a quiet colophon. ## Typography and Palette **Fonts — Google Fonts only, verified available.** - **Spectral** (weights 300, 400, 500, 600; plus *Spectral SC* small-caps) — the **serif-revival** voice (serif-revival is ~5% of the corpus — uncommon). Spectral is Production Type's screen-first serif: a calm, slightly old-style transitional face with generous spacing and a literary, almost encyclopedic temperament. It carries all body text, the museum-label copy, and the long datelines. Spectral SC handles the era-name straplines and the depth-gauge year markers — small-caps reading as inscription, as the lettering on a bronze plaque bolted to a hull. - **Cormorant Garamond** (weights 400, 500, 600; italic available) — used *only* for the giant display numerals: the year "1989", the year "2019", section years set at 96–180px. Cormorant's high-contrast, very-fine-hairline Garamond revival, blown up large, reads as engraved, fragile, slightly aristocratic — the way a date looks on a memorial. At display sizes its thin strokes look like they could be eroded by water; we lean into that. - **JetBrains Mono** (weight 400, 500) — the **mono** utility voice: catalogue numbers (`HEI–2011–003`), the depth-gauge tick labels, timestamps, the colophon. Mono here = ledger, accession register, the dry machine-hand of an archive's database. Never used for headlines. Type rules: body 17–19px Spectral 400, line-height 1.7, measure capped at ~64ch inside vitrines. Display numerals are *the only* large type — there are no big sans headlines anywhere. Letter-spacing +0.12em on all Spectral SC straplines and mono labels. **Palette — "the cyan that turned to amber."** Eight colours, sepia-nostalgic (sepia-nostalgic is ~4% of the corpus — rare). The trick: every hue is a *desaturated, browned* version of a seapunk colour. - `#1C140C` — **Abyssal Umber.** The deepest page-background colour at maximum scroll depth; near-black with a brown undertone. The bottom of the dive. - `#2E2316` — **Wreck Brown.** Footer and deepest vitrine fills; the brown of a waterlogged CD-ROM jewel case. - `#5A4A33` — **Tarnished Sepia.** Mid-depth backgrounds, card borders' shadow side, the "stratum" band texture. - `#8A7553` — **Old-Photo Amber.** The dominant mid-tone; body text on dark cards, encrusted rule lines, the warm wash over imagery. - `#C9B48E` — **Faded Foam.** Body text on dark, secondary backgrounds in upper vitrines. - `#E8DCC8` — **Surface Parchment.** The top-of-page background; the palest, "shallowest" colour; card fills near the surface; primary text on dark. - `#3A6B6B` — **Oxidised Teal.** The single surviving trace of seapunk cyan — muted, grayed, the colour of verdigris on a sunken bronze. Used *sparingly*: the depth-gauge rail, grid-line frames, link underlines, the dolphin-wave SVGs. It is the ghost of the original aesthetic. - `#B0654A` — **Rust Coral.** The one warm accent — corroded-iron orange-red. Active states, the "now" marker on the depth gauge, the period after a dateline. Used like a drop of rust bleeding through paint. Contrast pairs: Surface Parchment `#E8DCC8` on Abyssal Umber `#1C140C`; Old-Photo Amber `#8A7553` headings on Surface Parchment in the shallow zone; Oxidised Teal `#3A6B6B` strictly for lines and the rare link, never large text fills. ## Imagery and Motifs **No photography. No stock textures. No icon library. No Lottie. No 3D render.** Photography is 99% of the corpus; heisei.day carries **generative-art** imagery (~6% — uncommon) and the **grid-lines** motif (~2% — rare). Every visual is hand-built SVG or `` generative work, all rendered in the sepia palette. **1. The Oxidised Dolphin-Wave (seapunk, embalmed).** The single most loaded seapunk signifier — the leaping-dolphin-over-curling-wave — appears exactly *once*, in the full-bleed surface band at the very top: a slow, looping inline-SVG animation of two stylised wave curls and one dolphin silhouette, drawn in `#3A6B6B` Oxidised Teal at low opacity over Surface Parchment, with a 1px sepia "scanline/dither" overlay so it reads as a corroded GIF, not a fresh vector. As the visitor scrolls past, it fades to nothing — the surface receding. It never returns; the era is below. **2. Generative sediment / encrustation.** Each "stratum" divider band and the page's deep-background texture is a `` field of slow Perlin-noise-driven particles — fine grain that drifts downward like marine snow and settles, accreting denser toward the bottom of the page (toward the abyss). Particles are 1–2px, coloured from `#8A7553`→`#5A4A33`, opacity ≤ 0.18. It must read as *settling sediment in still water*, never as a busy particle toy. Respect `prefers-reduced-motion` by freezing it as a static field. **3. The depth-gauge rail.** A fixed left-margin vertical hairline in Oxidised Teal with 31 tick marks (one per Heisei year). Major ticks at era-thirds carry Spectral-SC year labels (1989, 2000, 2010, 2019). The current scroll position is marked by a small Rust Coral `#B0654A` filled triangle that slides as you dive. This is the only persistent UI element. **4. Vitrine frames (grid-lines motif).** Every masonry card is wrapped in a precise 1px outer rule plus an inset 1px rule 4px in — the double-frame of a museum label or an old stock certificate — in `#3A6B6B` over the card's sepia fill. Corners get a tiny 6px right-angle "bracket" tick, like registration marks on a print proof. Catalogue numbers (`HEI–YYYY–NNN`) sit in JetBrains Mono in the top-right inside the inner rule. **5. Generative "artifact plates."** Where a vitrine would, in a normal site, show a photo, heisei.day shows a small generated SVG glyph that abstractly represents the era-fragment — e.g. a flat geometric pictogram (a Tamagotchi-egg outline, a flip-phone rectangle, a low-poly Pokémon-ball circle, a CD ring, a torii) rendered as a single-weight line drawing in Old-Photo Amber on the card fill, all in one consistent ~2px stroke vocabulary so they read as a *set*. Generated/parameterised, never clip-art. **6. The browning gradient.** Not an image per se but the central visual device: the `body`/scroll-container background is a fixed vertical gradient `#E8DCC8 → #C9B48E → #8A7553 → #5A4A33 → #2E2316 → #1C140C` keyed to scroll depth, so descending the page literally darkens the water. Everything else is layered over this. ## Prompts for Implementation Build heisei.day as **one HTML document, one CSS file, one ES module, one inline SVG sprite (dolphin-wave loop + the era-thirds bracket ticks + the set of ~8 artifact-plate glyphs), one `` for the sediment field, and one favicon SVG (a single Rust Coral triangle descending a teal hairline)**. No framework. No bundler. No raster images. No WebGL. No video. No analytics. No service worker. No router. The page is **a dive into an archive: rendered once, read top-to-bottom as a descent, like sinking through thirty-one years of water.** **Document skeleton:** ```