# Design Language for reiwa.boo ## Aesthetics and Tone reiwa.boo is **a haunted almanac of an era that has not finished happening yet** — a single, slow, vertically-scrolling broadcast in which the *ghost of the Reiwa era* narrates itself in the past tense even though we are still living inside it. The `.boo` is taken literally: this is a friendly, melancholy spectre — not a horror jump-scare — a translucent attendant in a railway-station waiting room, reading the era's time-signal aloud from a brittle paper schedule. The visual register is **late-Showa Japanese art-deco — *teikan yoshiki* / "imperial-crown" modernism — rendered as if printed on lacquerware and then left in a sunlit window for fifty years**: stepped ziggurat brackets, sunburst fans, lacquer-red seals, gold-leaf hairlines, all sun-bleached toward indigo and bone. Think the cover of a 1930s Tokyo department-store catalogue crossed with an NHK "this is the time signal" interstitial crossed with the faint phosphor afterglow of a CRT that has just been switched off. Nothing glows aggressively; everything *lingers*. The mood is **zen-contemplative dressed in deco regalia** — ceremonial but exhausted, ornamental but quiet, the way a shrine bell sounds at 5:00 a.m. Tone words pinned to the page: *valedictory, ceremonial, faintly mechanical, gently spectral, archival.* The copy voice is a recorded announcer — short declarative bulletins, era-stamps, half-remembered weather reports — never marketing, never "we", never "you should". ## Layout Motifs and Structure The page is **one continuous vertical timeline read top-to-bottom — a paper tape unspooling from a brass time-clock** — not a grid, not bento, not cards. The spine of the layout is a single **2px gold rule running dead-center down the entire scroll**, and the era's "entries" hang off it like seal-stamps clipped to a wire: alternating left and right, each anchored to the spine by a small stepped-ziggurat bracket (a tiny deco corbel) that visually "clamps" the entry to the line. Structure, in scroll order: 1. **THE GATELEAF** — full-viewport overture. A centered stacked-deco emblem: the word *令和 · REIWA* set inside concentric sunburst fans, the whole thing slightly transparent like a watermark held to light. A single line of recorded-announcer text beneath. The gold spine descends from the bottom of the emblem. 2. **THE TIME SIGNAL** — three horizontal "pip" bars (the radio time-signal: pip — pip — pip — *tone*) drawn as deco stepped bars; below them an era-clock reading the current year of the era. 3. **THE LEDGER OF YEARS** — the main timeline body. Each year of the era is one entry hung off the spine: a deco-bracketed plaque with an era-stamp (令和X年), a one-line "field note" of that year, and a thin sun-faded rule. Entries alternate sides; vertical rhythm is intentionally irregular (some years sit close together, some leave long silences of empty spine) to feel like an *uneven recording*. 4. **THE WEATHER REPORT** — a single full-bleed panel: a deco-framed "forecast" written in announcer's cadence, set over a faint sunburst. 5. **THE COLOPHON SEAL** — the page closes on a single red hanko-style seal (square, lacquer-red, with the domain rendered as a faux-seal-script monogram) stamped at the very bottom of the spine, as if signing off the broadcast. Margins are wide and asymmetric — the timeline is offset slightly so there is always more "paper" on one side, the way a tape printer leaves margin. On narrow screens the spine slides to the left edge and all entries flow to its right in a single column; the alternation collapses but the bracket-clamps remain. ## Typography and Palette **Type system — Google Fonts only:** - **`Cinzel`** (regular 400, bold 700) — the display face for *REIWA*, the era-stamps (令和), section titles, and the colophon seal monogram. Cinzel's chiseled, inscriptional Roman capitals read as *carved* — perfect for the "engraved on lacquerware" feel. Always set in ALL CAPS, with wide tracking (`0.18em` to `0.42em` on the largest sizes). Never used below 18px. - **`Shippori Mincho`** (regular 400, medium 500, semibold 600, bold 700) — the CJK + serif body voice: every Japanese character (令和, 年, the seal text), every announcer bulletin, every field note, every weather line. A modern Mincho with deliberate, slightly old-fashioned strokes — it carries the "brittle paper schedule" register. Set at 17–19px, leading `1.85`, tracking `0.02em`. Italic is avoided; emphasis is done with letter-spacing and the vermilion accent instead. - **`Major Mono Display`** — used *sparingly* for the era-clock readout, the time-signal pip labels, and timestamps (e.g. `2026.05.11 · 05:00 JST`). Its monospaced, all-caps-by-design glyphs give the "mechanical recording" texture without leaning into a generic terminal look. Never more than ~5% of the page's text. **Palette (deco regalia, sun-bleached):** - `#13182E` — *yoru-ai* "night indigo": the base background. Deep, slightly violet ink — the page is dark, but it is the dark of dusk, not of space. - `#1C2440` — *kon* indigo, raised: panel fills, the weather-report frame, entry-plaque backgrounds. - `#F4ECDA` — *gofun* bone-white: primary text and the timeline's "paper" highlights. Warm, like aged washi. - `#C8A24A` — *kinpaku* gold leaf: the central spine rule, all hairlines, deco brackets, section underscores. Matte, not metallic-shiny — use a faint inner texture, never a glossy gradient. - `#B23A2E` — *shu* vermilion lacquer: the hanko seal, the time-signal "tone" bar, era-stamp accents, the single most important word in any bulletin. Used like a wax seal — small, decisive, never large fields. - `#8C93A8` — *nezumi* slate-grey: secondary/announcer-aside text, faded rules, the "silence" between timeline entries. - `#E8DCC0` — a lighter bone for hover/active states on the bone text (a very subtle warming, not a color flip). Contrast spine: bone `#F4ECDA` and gold `#C8A24A` on indigo `#13182E`; vermilion `#B23A2E` is the only saturated note and appears in tiny doses. ## Imagery and Motifs **No photography. No 3D render. Everything is hand-built CSS/SVG deco ornament** — this site is a *printed object*, not a photographed scene. Core motif kit: - **The stepped ziggurat bracket** — a small 3-step deco corbel (CSS clip-path or inline SVG) that clamps each timeline entry to the gold spine. Mirrored on alternating sides. Also used as the top-corners of the weather-report frame. - **The sunburst fan** — concentric radiating gold hairlines behind the gateleaf emblem and behind the weather panel. Drawn with `conic-gradient` repeating stripes or an SVG `` of rotated lines; kept faint (12–20% opacity) so it reads as an embossed watermark. - **The time-signal pips** — three short deco bars + one taller "tone" bar in vermilion, recreating the NHK 時報. These can subtly pulse once on entry into view. - **The hanko seal** — a square vermilion stamp with a 2px inset border and the domain rendered inside as a vertical faux-seal-script monogram (use Cinzel rotated/stacked, or a simple SVG mark). Slightly rough edges (an SVG turbulence displacement or a layered box-shadow) to look ink-stamped. - **The paper-tape texture** — a near-invisible repeating horizontal hairline at 4% opacity across the whole background, so the page feels like a continuous strip of receipt paper. - **Era-stamp cartouches** — each 令和X年 sits in a thin gold rectangle with clipped/stepped corners. - **The phosphor afterglow** — a single very soft radial vignette in cool indigo at the top and bottom of the scroll, like the residual glow at the edge of a switched-off tube. Decorative grain: a static, low-opacity film-grain/noise layer (CSS or a tiny SVG `feTurbulence`) over the whole page — *static, never animated as TV snow* — to give the "sun-faded print" surface. ## Prompts for Implementation Build reiwa.boo as **a single HTML page, one CSS file, one small ES module — no framework, no build step.** It is one long vertical scroll: a broadcast that plays as you descend. **Narrative spine.** The user is "tuning into" the era's own self-recording. From the gateleaf down to the colophon seal, every section is a segment of one announcement. Write real announcer-style copy — short bulletins, era-stamps, weather lines like "*令和八年、五月。 The morning is overcast and unremarkable. The time signal will sound shortly.*" — never feature copy. **Animation philosophy: ceremonial, not bouncy.** Everything eases slowly (long `cubic-bezier` ease-outs, 600–1100ms). Use: - a **path-draw on the central gold spine**: as the user scrolls, an SVG stroke-dashoffset "writes" the spine line downward just ahead of the viewport — the timeline literally being printed as you go. - **fade-and-rise reveals** for each timeline entry (translateY ~24px → 0, opacity 0 → 1), *staggered* so the era-stamp lands first, then the field note, then the hairline draws across. - a **one-time pulse** on the time-signal pips when they scroll into view (scale 1 → 1.06 → 1, the vermilion "tone" bar last and longest). - the **hanko seal stamps in** at the end: it scales from 1.4 → 1 with a brief ink-bleed (a quick `filter: blur(3px)` → `blur(0)`), a soft thud, then holds. - a faint **always-on drift** on the sunburst watermarks: extremely slow rotation (one full turn over ~240s) so the page is never fully still — like a record turning. - respect `prefers-reduced-motion`: drop the spine-draw and pulses, keep static layout. **Texture & depth.** Layer order from back to front: indigo base → paper-tape hairlines → sunburst watermarks → phosphor vignette → content → film-grain overlay. The grain and vignette sit *above* content at very low opacity to unify everything as one printed surface. **Type behavior.** Era-stamps (令和X年) in Shippori Mincho semibold beside Cinzel section labels; the era-clock and timestamps in Major Mono Display; all section titles in tracked Cinzel caps with a gold hairline underscore that draws in on reveal. **AVOID, explicitly:** no hero CTA buttons, no pricing tables, no stat-grids or counters, no testimonial blocks, no logo walls, no newsletter/email capture, no contact form, no FAQ accordion, no feature-comparison table, no chatbot, no cookie banner, no card-grid of "services". This is a broadcast and an almanac, not a landing page. Also avoid: glassmorphism/frosted blur panels, hand-drawn doodle illustration, neon glow, cursor-follow gimmicks, full-bleed photo heroes, and 3D tilt cards — all overused in the corpus and all wrong for this printed-lacquer register. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Art-deco rendered as *sun-faded lacquerware*, not as gold-and-black Gatsby luxury.** Art-deco appears in only ~5% of the corpus and where it does it skews toward opulent gold-on-black glamour. reiwa.boo uses the *teikan-yoshiki* (Japanese imperial-crown) branch of deco — stepped brackets, sunburst fans, hanko seals — and immediately *bleaches* it toward indigo and bone, so the ornament reads as weathered and ceremonial rather than glitzy. 2. **A vertical timeline as the *entire* page, with path-drawn spine.** `timeline-vertical` is ~4% of layouts and almost always a sub-section; here it *is* the site — a single gold rule down the center with seal-clamped entries, the line being "printed" by scroll. No card-grid (91% of corpus), no bento, no hero-dominant block. 3. **The "friendly ghost of an era still in progress" conceit.** The page narrates Reiwa in the past tense while we live in it — a `.boo` taken as a gentle spectre, not horror. The voice is a recorded NHK-style announcer, not a brand. No other design frames itself as a self-recording broadcast almanac. 4. **CJK-serif (Shippori Mincho) + inscriptional Roman (Cinzel) + sparing Major Mono Display** — a tri-script "engraved paper schedule" pairing, deliberately steering clear of the corpus's dominant mono/humanist/hand-drawn type stacks. 5. **Strictly zero photography and zero 3D** — every ornament is CSS/SVG deco built by hand (ziggurat brackets, sunbursts, ink-bled seal), with only a static film-grain + phosphor vignette for surface. Counter to the 98%-photography corpus norm. **Chosen seed/style:** `art-deco ornate luxury` — interpreted as *aesthetic: art-deco · layout: timeline-vertical · typography: art-deco-display (Cinzel) + serif-revival (Shippori Mincho) · palette: midnight-blue + gold-black-luxury reworked toward sun-bleached indigo/bone/vermilion · patterns: path-draw-svg + stagger + fade-reveal · imagery: vector-art / generative-art (CSS-SVG deco) · motifs: sharp-angles (stepped ziggurat) + star-celestial (sunburst) · tone: zen-contemplative + elegant-sophisticated*. **Avoided patterns from frequency analysis:** hand-drawn (95%), glassmorphism (82%), photography (98%), card-grid (91%), full-bleed photo heroes, warm-gradient palettes (95–98%), parallax (90%), cursor-follow (89%), spring/magnetic bounce (84/80%), tilt-3d (29%) — none of these appear in this design.