# Design Language for taisho.day ## Aesthetics and Tone taisho.day is a **Taishō-roman lacquer box left open on a rainy mezzanine in 1923** — the brief, electric window (1912–1926) when Japan dressed Art Nouveau curves in kimono silk and Western Art Deco geometry crept into the *kissaten* tile floors. This is not "Japanese minimalism." It is the opposite: the moiga-banzuke poster, the *Subaru* literary magazine cover, the matchbox label, the department-store wrapping paper from Mitsukoshi when escalators were brand new. The mood is **ornate, melancholic, gas-lit, and a little decadent** — *haikara* (high-collar Westernized fashion) bleeding into *taishō-roman* nostalgia. Everything looks printed by hand on slightly-too-thin paper: dense linework, ink that pools at corners, gold that has tarnished to brass. The site behaves like a single artifact: you do not "browse" taisho.day, you **turn it over in low lamplight**. The tone is whispered, curatorial, a curator describing one object — never selling, never listing prices, never a stat-grid. It romanticizes the in-between: the era is named after an emperor's short reign, and the whole design lives in that 14-year doorway between the gaslight 19th century and the radio 20th. ## Layout Motifs and Structure The composition is a **single vertical scroll built as a stack of "kake-jiku" panels** — hanging-scroll proportions, each one taller than the viewport, framed top and bottom by a printed border the way a kakemono is mounted on brocade. There is **no card-grid, no bento-box, no dashboard**. Instead, **broken-grid editorial flow**: text columns set ragged, drop-folio numbers in the outer margin, illustrations bleeding off one edge and stopped hard by a ruled line on the other. - **The double-rule frame.** Every panel is bounded by a *futae-keisen* — a thick rule and a hairline rule running parallel, 4px apart, in tarnished brass. Corners are mitred with a tiny stamped chrysanthemum-roundel where the rules meet. This is the single most-repeated structural element. - **Asymmetric mei-mei columns.** Body text never centers. Each panel splits roughly 5:3 — a wide column of prose and a narrow rail carrying a vertical caption (set top-to-bottom, right-to-left, in the rail), a folio number, or a stacked date glyph. - **Bleed-and-stop illustrations.** Decorative imagery enters from the left or bottom and is amputated by a vertical or horizontal rule — never floated free, never given a rounded card. The rule does the cropping; the image obeys it. - **The mezzanine break.** One panel mid-scroll tilts its content 6° as if a sheet slid off the stack — the only diagonal in the design, used exactly once, like a turned page. - **Margins as proscenium.** Generous outer margins (12vw on desktop) painted a half-shade darker than the page, so each panel sits in a vignette like a photograph in an album with black corner-mounts (and yes — small black photo-corner triangles render at the four corners of every illustration). ## Typography and Palette **Fonts (Google Fonts only — a three-voice ensemble: a Western display serif playing "haikara," a stamped sans for labels, and a Japanese serif for vertical captions):** - **Display / Wordmark — *Cormorant Garamond* (700, and 400 italic).** The "taisho.day" wordmark and all panel titles. Cormorant's high contrast and thin, almost-fragile hairlines read like 1920s lithographed magazine titling. Set large (96px → 180px), letter-spacing slightly loosened (+0.04em), and the descender of the *y* extended with a hand-drawn SVG flourish that loops back under "da" — a faux-engraved swash. - **Labels / Folios / Rail captions (Latin) — *Oswald* (300 and 500).** Tall, narrow, slightly condensed — the typeface of a matchbox spec line or a tram timetable. Used uppercase with wide tracking (+0.18em) for folio numbers, the date stamp "TAISHŌ • 大正", section eyebrows, and the footer colophon. - **Vertical Japanese captions & era glyphs — *Shippori Mincho* (500 and 600).** A genuine *mincho* with old-style stroke modulation. Set vertically (writing-mode: vertical-rl) in the narrow rail of each panel for one-line poetic captions, and at huge scale for the kanji 大正 ("Taishō") used as a watermark behind the hero. - **Body prose — *Cormorant Garamond* (400) at generous size (20px) and leading (1.85),** justified with hanging punctuation, first line of each panel indented by a small printed *gankake* asterisk-flower glyph rather than whitespace. **Palette — "tarnished lacquer & gaslight":** - `#1C1A17` — *sumi-on-warm-black*, the page ground (never pure #000; it has a brown undertone like aged ink) - `#F2E8D5` — *zarakami*, an unbleached cream used for inverted "paper" panels and all body text on the dark ground - `#A8842E` — *tarnished brass*, the primary rule/frame/flourish color (a gold that has gone dull, not shiny `#FFD700`) - `#7C2E2E` — *bengara*, the iron-oxide red of old lacquerware and torii — used for accents, the wordmark on cream panels, vertical caption ink - `#3B4A3F` — *rokushō*, oxidized-copper green — secondary illustration fill, link underlines - `#C9462E` — *shu-iro vermilion*, used **once**, for the single mezzanine-tilt panel and the cursor mark, like a hanko seal pressed on the page - `#6E6A60` — *ash gray*, for hairline rules, photo-corner triangles, and the darker margin vignette Gradients are forbidden as backgrounds; the only "gradient" allowed is a faint paper-grain noise overlay and a radial lamplight vignette darkening the margins. ## Imagery and Motifs **Everything is hand-built SVG line-illustration in a 1920s lithograph register — single-weight ink outlines, flat fills in the palette above, occasional cross-hatching for shadow. No photography. No 3D renders. No stock vectors.** The motif library is drawn straight from Taishō-roman ephemera: - **The chrysanthemum-roundel (kikkō-mon).** A small stamped flower-in-a-circle that marks every mitred corner of every double-rule frame. It is the punctuation of the whole site. - **Gaslight standards & tram wires.** Slender wrought-iron lamp posts and a single drooping electric line traverse the hero, the lamp glow rendered as a soft `#A8842E` halo with hand-drawn radiating hatch-lines. - **The high-collar figure.** One recurring illustrated woman in *haikara* dress — a Western blouse with a kimono-print skirt, holding a Western umbrella — appearing in silhouette-with-linework at the edge of three panels, always cropped by a rule. - **Tortoiseshell & seigaiha lattice.** Background watermarks: hexagonal *kikkō* tortoiseshell netting and overlapping *seigaiha* wave-arcs, set at 6% opacity in tarnished brass behind body text. - **Matchbox & ticket fragments.** Small decorative blocks styled as torn matchbox labels and tram tickets — used for the colophon and date marks, complete with perforation dotted-lines and a faux serial number in Oswald. - **The phonograph horn & the kissaten cup.** Two "object plates" — a morning-glory gramophone horn and a Western coffee cup on a Japanese saucer — rendered as detailed engravings, each filling a half-panel as the site's only "centerpiece" images. - **Pressed-petal corners.** Where illustrations meet rules, a single pressed chrysanthemum petal (rokushō green) overlaps the line as if caught between pages. ## Prompts for Implementation Build taisho.day as **one HTML file, one CSS file, one JS module — a single vertical scroll through eight kake-jiku panels**, experienced like turning over a lacquer box for ninety unhurried seconds in lamplight. **No CTA buttons, no pricing block, no stat-grid, no testimonial row, no feature cards, no email signup.** There is only the panel sequence and the colophon. **Storytelling structure (eight panels, vertical scroll):** 1. **The Doorway.** Black-warm ground, the huge 大正 *Shippori Mincho* watermark dead-center at 8% opacity, gaslight standards rising from the bottom edge with their `#A8842E` halos, a single tram wire drooping across. The "taisho.day" wordmark in *Cormorant Garamond* fades up letter-by-letter; the *y*-flourish draws itself with an SVG `path-draw` animation (~1.4s, easing like ink flowing). A vertical *Shippori Mincho* line in the right rail reads a one-line epigraph about the fourteen-year doorway. 2. **The High-Collar Street.** Inverted cream panel. The *haikara* figure illustration bleeds in from the left, cropped by a vertical brass rule; prose column to the right on `kissaten` mornings. Photo-corner triangles snap in on scroll. 3. **The Phonograph Plate.** Object-plate panel: the morning-glory gramophone horn engraving fills the left two-thirds; the right rail carries vertical caption + folio. A faint concentric-ring `ripple` emanates from the horn mouth on enter, drawn as expanding hand-hatched arcs. 4. **The Mezzanine (the tilt).** The single 6° diagonal panel, the only place `#C9462E` vermilion appears in volume — as if a sheet slid loose. Content rotates into place with a slight `elastic` overshoot. This is the page's heartbeat. 5. **Tortoiseshell Interlude.** Dark ground, *kikkō* + *seigaiha* watermarks at 6%, a sparse poetic passage set wide with hanging punctuation, drop-folio in the margin. Almost empty — a breath. 6. **The Kissaten Cup.** Second object-plate: the Western-cup-on-Japanese-saucer engraving, rokushō-green steam rising as a slow looping SVG line. 7. **Matchbox & Ticket.** A loose composition of torn-label and tram-ticket blocks scattered (still on the broken grid), each with perforation dotted-lines and Oswald serial numbers, each a fragment of a sentence — the visitor assembles the thought. 8. **The Colophon (closing the box).** Returns to black-warm ground. The double-rule frame draws closed around the whole viewport (`path-draw`, ~2s), chrysanthemum-roundels stamping into the four corners last. A quiet colophon in Oswald: domain, era, "set in Cormorant Garamond & Shippori Mincho", a final *bengara* hanko-mark. **Interaction & motion principles:** - **Ink-flow easing.** Custom cubic-bezier roughly `(0.16, 1, 0.3, 1)` everywhere — things settle like wet ink, never bounce like rubber (except the deliberate mezzanine `elastic`). - **The hanko cursor.** Replace the cursor with a small `#C9462E` square seal-mark; on hover over any illustration it presses down (scale 0.9) with a faint ink-bleed `ripple`. - **path-draw frames.** Every double-rule frame and the *y*-flourish and the steam/horn arcs are SVG strokes animated via `stroke-dashoffset` on scroll-into-view, staggered ~120ms. - **Stagger reveals.** Body lines fade-and-rise 14px in sequence; folio numbers count up via `counter-animate` only on the colophon (the one numeric flourish). - **Parallax, restrained.** Watermark kanji and lattice drift at ~0.85× scroll speed; gaslight halos pulse very slowly (4s) in opacity. Nothing else parallaxes. - **Reduced-motion:** all path-draws appear instantly drawn, the tilt panel stays at 6° but enters with a plain fade, halos hold steady. Keep total DOM light: the richness lives in SVG and CSS rules, not in dozens of components. Treat ruled lines as first-class design objects — they crop, they frame, they punctuate. ## Uniqueness Notes Differentiators, each a deliberate departure from the corpus frequency analysis: 1. **Taishō-roman, not "Japanese minimalism" and not generic Art Deco.** `japanese-minimal` (3%), `zen` (9%), and `art-deco` (5%) all exist in the corpus, but this design fuses the 1912–1926 Japanese hybrid specifically — *haikara* fashion, *kissaten* culture, Mitsukoshi-poster lithography — which is ornate, melancholic and gaslit rather than spare. No tatami-mat negative space here. 2. **Ruled-line cropping as the structural language.** `card-grid` (92%) and `bento-box` (17%) dominate the corpus; this site has neither. Illustrations are amputated by `futae-keisen` double rules, content sits in hanging-scroll panels — a layout I did not find replicated. 3. **No warm-gradient, no glassmorphism, no hand-drawn-cute.** `glassmorphism` (84%), `hand-drawn` (94%), and `gradient` palettes (93%) are near-universal; this design bans background gradients outright, uses zero frosted glass, and its linework is 1920s-lithograph precise (single-weight engraving), not sketchy-doodle. 4. **The single-vermilion rule.** `#C9462E` appears in exactly one panel (the 6° mezzanine tilt) plus the hanko cursor — a chromatic event, not a theme color, against a brown-black-and-tarnished-brass field. 5. **Vertical Japanese typesetting as a working layout element**, not decoration — *Shippori Mincho* set `vertical-rl` in every panel's rail — which is largely absent from the mono/humanist-dominated typography corpus. Chosen seed/style: **art-deco ornate luxury** — *aesthetic: art-deco, layout: editorial-flow, typography: garamond-classic, palette: gold-black-luxury, patterns: path-draw-svg, imagery: line-illustration, motifs: cultural, tone: nostalgic-retro* — reinterpreted through the Taishō-roman lens. Avoided patterns from frequency analysis: `card-grid` (92%), `glassmorphism` (84%), `hand-drawn` aesthetic (94%), `cursor-follow`/`magnetic`/`spring` rubber-physics defaults (78–89%), background `gradient` palettes (93%), `photography` imagery (98%), `dashboard`/`bento-box` layouts.