# Design Language for taisho.day ## Aesthetics and Tone taisho.day is a **fever-dream of 1920s Tokyo transmuted into burning gold circuitry** — the Taisho era (1912–1926) was Japan's most electrified moment: Western jazz records playing on imported gramophones, printed cotton kimonos on women who read Proust on the Yamanote Line, and a crackling new electrical grid throwing arc-lamp shadows across kabuki posters. The site captures that exact moment when the gaslight became electric and the old world did not disappear but rather **conducted itself through wire and filament**. The aesthetic is **dark-academia incinerated by neon gold** — not the cozy brown-leather quietude of English literature departments, but the *Japanese dark-academia* variant: a charred lacquered desk in a Meiji-era library, a single arc lamp overhead, its tungsten filament spelling circuits on the ceiling. Ink-stained fingers. The smell of wet typeset lead. Every surface is lacquer-black (#0a0700) with gold calligraphy burns (#d4a017) crawling through it like the veins in a gold-kintsugi bowl. **Tone: energetic-intellectual** — not restless or anxious, but *crackling* — the energy of a mind at the exact moment it understands something new. Sentences end mid-phrase and resume mid-thought. The typography moves like a Morse telegrapher who has urgent news. The page does not wait to be read; it transmits. **Mood board:** arc lamp over lacquered desk, Taisho-era woodblock print electrified with circuit traces, gold leaf on black lacquer, a typewriter key mid-stroke, lens flares through shoji paper screens. ## Layout Motifs and Structure **Full-bleed as lacquered stage**. Every section is full viewport — there are no margins, no off-white gutters, no container boxes. The viewport is a **lacquer screen**, and content is painted directly onto it. Full-bleed here is not the corpus default of photography-behind-text; it is **pure black field with gold geometry erupting from it**. **Macro structure (top to bottom):** 1. **The Electrified Torii** (`100svh` opening panel). A full-black viewport. From the dead center, a single gold line traces upward at 2px stroke weight — it becomes a torii gate outline, but the crossbeams are printed circuit traces. Routing junctions mark where gold drips from the lintel in kintsugi hairlines. The wordmark `taisho.day` appears in the crossbeam in Bebas Neue at 14vw, tracked +0.2em, letter by letter in typewriter cadence (20ms between characters). Beneath it, a 1-line subtitle fades in: one word at a time, typewriter-style. 2. **The Transmission Hall** (`200svh` scrolling section). Left edge: a vertical timeline spine — a single gold `1px` line running floor to ceiling labeled with year markers (1912, 1914, 1917, 1920, 1923, 1926) in monospace numerals. From this spine, horizontal circuit traces branch rightward, terminating in gold circuit junction nodes. Each node anchors a content panel (200px wide, positioned absolutely) containing a headline and 2–3 sentences, printed in typewriter bursts as the panel scrolls into view. The content panels float at various depths (z-axis staggered using `translateZ` on a perspective container) creating the illusion of telegrams pinned to a wire board. 3. **The Arc Lamp** (full-bleed feature section). A cinematic full-screen moment: an SVG arc lamp hangs from the top of the viewport by a twisted wire that traces as you scroll. The lamp casts a `radial-gradient` of gold-amber light onto the black field below — `#d4a017` at center fading to `#0a0700` at edges. A lens flare SVG overlay — four gold spikes extending from the lamp center — pulses softly (opacity 0.6 → 1.0 on a 3s loop). No photography. The light is pure gold mathematics. 4. **The Kintsugi Grid** (portfolio / content section). A CSS grid of 6 panels, each `1fr`. Grid gaps are `0px` — panels butt directly. Each panel: black background, gold circuit-trace border (drawn as `clip-path` polygon with circuit-corner cutouts at 45°). On hover, the panel border illuminates from a top corner and traces the perimeter in 0.6s. 5. **The Typewriter Footer**. Full black, 50svh tall. A single paragraph of text types itself character by character across the full viewport width, wrapping naturally, using a `monospace` cursor-blink at the insertion point. When complete, the text fades to 15% opacity, revealing a final single line in Bebas Neue: the domain as colophon, `— TAISHO.DAY`. **Spatial rhythm:** The page reads in alternating rhythms — stillness (full black pause, 30svh) then eruption (dense circuit geometry for 100svh) then stillness again. Transitions between sections use a horizontal gold-line wipe (a `scaleX(0→1)` line drawn across the viewport at the section boundary). **No sidebar. No sticky nav.** Navigation is a single gold dot (`8px` circle) fixed top-right. On hover it expands to a 280px panel of anchors in monospace type. On scroll, the dot pulses in the same rhythm as the typewriter cadence. ## Typography and Palette **Typography — display-bold meeting Japanese-modernist letterpress:** - **Display / Wordmark:** `Bebas Neue` — weight 400 (the face has only one weight; its extreme display compression and industrial stroke geometry match Taisho-era Japanese grotesque sans used on train station signage and film posters). Used at 10vw–20vw for section openers and the wordmark. Tracking: `+0.3em` for uppercase blocks, `0` for the wordmark. All caps. - **Headline / Circuit Labels:** `Space Mono` — weight 400, weight 700 bold. Used at 1.8rem–4rem for all section headlines, timeline year markers, circuit-node labels, and the typewriter-effect body reveals. Monospace geometry reinforces the telegraph-transmission metaphor. Letter-spacing: `+0.05em`. - **Body / Telegram text:** `Libre Baskerville` — weight 400, weight 700. Used at 1rem–1.4rem for the short content-burst paragraphs anchored to circuit nodes. Baskerville's high-contrast stroke (thick stem, hairline serif) under gold-on-black conditions creates a typeface that looks like hot-type lead pressed into lacquer. Italic variant for quotations and datelines. - **Accent / Japanese label:** `Noto Serif JP` — weight 600, used at 0.8rem for subtle bilingual labels (e.g., `大正` beside `TAISHO`, `電気` beside circuit node labels). Adds authenticity without requiring custom fonts. Only Google Fonts, verified. **Palette — gold-black-luxury with amber-ember accent:** - `#0a0700` — **Lacquer Black**. Primary background. Not pure black — it carries a faint warm-brown undertone that reads as old lacquerware under candlelight rather than digital void. - `#d4a017` — **Arc Gold**. Primary gold. Warm amber-leaning — the color of a tungsten filament at operating temperature. Used for all circuit traces, wordmarks, borders, and the lens flare. - `#8b6914` — **Oxidized Gold**. Secondary gold, 50% darker. Used for inactive circuit traces, year-marker numerals, footer colophon text. - `#1c1400` — **Charcoal Lacquer**. Panel backgrounds — one step up from Lacquer Black. Creates the depth-layering in the Kintsugi Grid without requiring shadows. - `#f5e6a0` — **Filament White**. Near-white with gold tint. Used ONLY for body text at the 1rem size — pure white would burn on the black field; filament white reads as printed vellum. - `#2a1f00` — **Smoked Amber**. Hover states on panels, active states on navigation dot. A rich dark amber that bridges lacquer black and arc gold. ## Imagery and Motifs **No photography.** All imagery is SVG or CSS geometry. The frequency report shows photography at 87% across the registry — taisho.day abstains entirely. **Circuit motif as Taisho infrastructure:** The circuit traces are not generic PCB lines — they are stylized versions of actual Taisho-era Tokyo electrical grid maps (the 1920 Tokyo trolley and lamp grid). Junction nodes are circular pads (`12px` radius, gold fill, black inner circle `6px`). Traces route at 45° diagonals and 90° right angles only — no curves. Every trace terminates either at a content node, a year marker, or at the page edge (implying the circuit continues beyond the frame). **Lens flare as arc lamp physics:** The lens flare is a custom SVG element — not a CSS filter, not a stock graphic. It consists of: - A central disc (`r=4px`, `#f5e6a0`, `opacity:1`) - Four radial spikes: two long (`120px`), two short (`60px`), gradient from `#d4a017` at origin to `transparent` at tip - A secondary hexagonal halo ring (`r=40px`, `stroke: #d4a017 2px`, `opacity:0.3`) - A chromatic fringe: three concentric ellipses (`r=12, 18, 24px`) in `#d4a017`, `#8b6914`, `#2a1f00` at descending opacities This SVG sits at the exact lamp-filament position in the Arc Lamp section and also appears as a decorative accent (at 30% scale) in each circuit node on hover. **Typewriter cursor:** A monospace cursor (`2px × 1.2em`, `#d4a017`) blinks at `0.8s` intervals using a CSS animation. It appears at the active typewriter insertion point throughout the page — in the hero, in the footer, and in each node label as it types in. **Kintsugi trace:** On hover over any panel in the Kintsugi Grid, a gold crack-pattern SVG appears as an overlay — three irregular fracture lines radiating from one corner, `1.5px` stroke, `#d4a017`, with a `drop-shadow(0 0 4px #d4a017)` glow. These look like real gold kintsugi repair seams growing across the panel surface. **Torii gate silhouette:** Used only in the hero. Pure geometric SVG — two vertical pillars, two horizontal beams, circuit traces replacing the ornamental molding. The total gate bounding box is `320px × 280px`, centered in the viewport. It appears first as a hairline trace drawing itself in at `2s`, then locks solid at `2px` stroke. ## Prompts for Implementation **The story to tell.** A visitor arrives at the exact moment when 1920s Tokyo flipped on its electrical grid — the moment the gaslight died and the arc lamp blazed. The site does not explain what it is (no hero headline "We are X"). It simply transmits. The first thing a visitor sees is a single gold line drawing itself upward from the center of a black screen and becoming a torii gate crossed with a circuit board. Their name is not asked for. Their conversion is not sought. They are standing in the Transmission Hall, and the messages are already printing. **Implementation imperatives:** 1. **Typewriter engine.** Build a lightweight JS typewriter that respects `prefers-reduced-motion` (instant reveal if set). Characters appear at `18–24ms` intervals with ±6ms jitter for mechanical irregularity. A cursor blinks at the insertion point. On completion, the cursor blinks 3 times then freezes. No libraries — implement with `requestAnimationFrame` and a character queue. 2. **Circuit trace SVG animation.** All circuit traces use SVG `stroke-dasharray` / `stroke-dashoffset` animation. Traces draw themselves in triggered by `IntersectionObserver` when they enter the viewport. Duration: `0.8s` per 100px of trace length. Ease: `cubic-bezier(0.25, 0, 0.75, 1)` — linear forward, slight deceleration at end. On the vertical timeline spine, the gold line draws continuously from top to bottom over the full scroll height. 3. **Arc lamp lens flare pulse.** The flare SVG uses a CSS animation: `opacity: 0.55 → 1.0`, `scale: 0.95 → 1.05`, duration `2.8s`, `ease-in-out`, `infinite alternate`. The four radial spikes rotate at `0.1deg/frame` — almost imperceptible drift, just enough to suggest light refraction physics. 4. **Scroll-driven depth.** The Transmission Hall section uses a CSS `@scroll-timeline` (or a lightweight JS equivalent for browser compat) to translate content panels at different rates — closer panels translate at 0.8× scroll speed, distant panels at 1.2× — creating parallax depth without 3D CSS. 5. **Kintsugi hover effect.** On mouse-enter of any grid panel, the kintsugi crack SVG fades in over `0.3s` and the border glow activates (`box-shadow: 0 0 8px #d4a017, inset 0 0 8px rgba(212,160,23,0.1)`). On mouse-leave, the crack fades out over `0.6s` — slower exit than entry, as if the gold cools reluctantly. 6. **Full-bleed with no scrollbar.** Use `overflow-x: hidden` on `body`. Use `scrollbar-width: none` (Firefox) and `::-webkit-scrollbar { display: none }` (Chrome/Safari). The scroll position is tracked in JS and a custom gold progress bar — a `1px` horizontal line at the very top of the viewport — fills from left to right as the user scrolls. 7. **Navigation dot.** The gold dot (`8px × 8px`, `border-radius: 50%`, `background: #d4a017`) is fixed `top: 24px; right: 24px`. On click or hover, it expands via `clip-path` from circle to a `280px × 200px` rounded rectangle containing monospace anchor links. The expand animation uses `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring overshoot) at `0.4s`. 8. **Color system variables.** Define all six palette colors as CSS custom properties on `:root`. Never hardcode hex values in component rules. This enables a single-property theme inversion (not needed here, but architecturally clean). 9. **No framework.** Vanilla HTML5 + CSS3 + ES2020 JS. No React, no Vue, no Tailwind. The build surface is a single `index.html`, one `style.css`, one `script.js`. The Taisho era had no frameworks — it had craft. 10. **Performance note (ignored per instructions):** focus on visual completeness, not Lighthouse scores. **AVOID:** - Sticky headers with logo left, nav right - Hero sections with CTA buttons and subheadlines - Pricing blocks, stat counters, testimonial carousels - Any shade of blue or purple - Photography, stock art, icon fonts - Gradients that are not directional gold-to-black ## Uniqueness Notes 1. **Dark-academia as Japanese Taisho-era scholarship, not English boarding school.** The registry's 2% dark-academia usage defaults to brown leather, candlelight, Oxford typography. taisho.day reroutes the aesthetic entirely — the dark-academia library is a 1920 Tokyo university library, the candles are arc lamps, the leather is lacquerware, and the marginalia is printed in Noto Serif JP. This specific cultural inflection does not exist in any registry entry. 2. **Circuit motif decoded as historical infrastructure, not generic PCB abstraction.** At 14% frequency, circuit traces in the registry are decorative — they mean "tech" in a generic sense. Here, the circuit trace is the 1920 Tokyo electrical grid map, routed to the same topology as a period engineering document, with year-marker nodes at historically accurate power-expansion dates. The motif carries actual meaning, not just visual texture. 3. **Lens flare as physics of arc lamp light, not as camera artifact.** Registry lens flares (3%) are invariably photographic — camera lens effects over photography backgrounds. taisho.day has no photography. The lens flare is a precisely specified SVG replicating the chromatic aberration of a 1920s carbon-arc projector: four asymmetric spikes, a hexagonal aperture ring, and chromatic fringing. It is light-source behavior, not post-processing filter. 4. **Typewriter-effect as telegraph transmission, not 'typing feels.'** The 5% typewriter uses in the registry add characters one by one to create familiarity. Here, the typewriter engine simulates Morse code delay patterns with inter-character jitter, a cursor that freezes on completion, and content that reads as actual telegraph transmissions from Taisho-era dispatch wires. 5. **Planned seed:** `aesthetic: dark-academia, layout: full-bleed, typography: display-bold, palette: gold-black-luxury, patterns: typewriter-effect, imagery: lens-flare, motifs: circuit, tone: energetic` 6. **Avoided overused patterns:** `full-bleed` (63%) used but subverted — no photography behind text, pure geometric gold-on-black geometry only. `photography` (87%) avoided entirely in favor of SVG. `minimal` (43%) avoided in favor of maximalist circuit geometry.