# Design Language for showa.day ## Aesthetics and Tone showa.day is **a single weekday in the Shōwa era of Japan, reconstructed as a working-day kissaten ledger** — the kind of laminated chronograph a 1965 Tokyo coffee shop kept by the cash register, where the morning opening, the noon rush, the three-o'clock siphon-brew, and the closing of the shutters were all annotated in the margins of a printed paper form. The Japanese era name *Shōwa* (昭和, "enlightened harmony", 1926–1989) is being read here at its mid-century apex: the years of *kissaten* culture, enamel *hōrō* signboards, *danchi* apartment blocks, the National-brand transistor radio, and the soft pastel-on-cream of advertising prints by designers like Hideya Kawakita and the early Tadanori Yokoo. The TLD *.day* fixes the whole site to **one rotation of that era's sun** — open to close, a printed working timesheet for a vanished afternoon. The mood is **mid-century, but specifically the Japanese mid-century — not Eames-walnut California, not Scandinavian birch**, but the warmer, slightly faded register of Shōwa graphic design: spot colours laid down by hand on uncoated stock, hairline keylines, a faint misregister where two ink plates didn't quite line up, the gentle yellowing of paper kept in a glass case for sixty years. It is **nostalgic-retro** in tone but never kitschy: no anime, no neon, no Y2K. The reference is *print*, the analog kind — the riso-flat colour fields, the letterpress bite, the rubber-stamp date. Where most retro sites lean loud, showa.day is quiet, ledgered, and warm, like opening a drawer of old café receipts. ## Layout Motifs and Structure The page is **a single laminated working-day form**, rendered full-bleed but ruled like a printed timesheet. The governing structure is a **two-column ledger grid**: a narrow left rail (the "time column", ~14% width) carrying the hours of the working day stamped in Shōwa-era Japanese numerals and Arabic figures side by side (午前七時 / 7:00), and a wide right field (the "entry column") carrying the content as if hand-written into ruled lines. Horizontal hairline rules — true 1px lines in a faded ink colour — divide the entry column into time-bands: *opening* (dawn pastels), *morning trade*, *the noon rush* (the warmest, busiest band), *the three-o'clock pause* (the most spacious, most ma-negative-space band, where a single siphon-coffee illustration sits alone), *evening*, and *shutters down* (the colour drains toward dusk grey at the bottom of the page). This is a deliberate refusal of the corpus defaults: **no card-grid** (92% — the single most overused layout; showa.day uses zero cards), **no centered hero stack** (80% — avoided; content is left-aligned into the ledger rail like real handwriting), **no dashboard, no bento-box**. Instead the rare **timeline-vertical** layout (6%) is taken at its most literal — the page *is* a vertical timetable — combined with a strict ruled **single-column** entry field (17%). The header is not a nav bar but a **printed form masthead**: the domain name set as a stamped title block ("昭和日 ＿ SHŌWA DAY ＿ 営業日報") with a fake form number, a fake revision date (昭和40年改訂), and three checkbox glyphs (☐) that are never checked. The footer is a **rubber-stamp impression**: a slightly rotated, slightly ink-starved circular *hanko*-style seal reading the date, bleeding off the bottom-left corner. ## Typography and Palette **Fonts (Google Fonts only — verified available).** - **Zen Kaku Gothic New** (weights 400, 500, 700) — the primary Japanese-and-Latin face, by Yoshimichi Ohira / Zen Fonts. A humanist gothic with the slightly soft, slightly humid letterforms of Shōwa-era signage type; it carries the Japanese era-name headings, the time-column labels, and the body copy. Set body at 1.0625rem / line-height 1.85 in the deep cocoa ink colour; set the masthead title at clamp(2rem, 5.5vw, 4rem), weight 700, letter-spacing 0.04em, slightly condensed by `transform: scaleX(0.96)` to mimic photo-typesetting compression. - **DM Mono** (weights 400, 500, italic 400) — the *form-machine* face. Every printed-form artefact — the fake form number, the timesheet times in Arabic figures, the revision date, the seal text, the column headers ("時刻" / "TIME", "記事" / "ENTRY") — is set in DM Mono, lightly tracked (`letter-spacing: 0.06em`), as though typed onto the blank by a 1960s office typewriter. Used at 0.7rem–0.8rem, uppercase for Latin. - **Shippori Mincho** (weights 400, 500) — the *editorial voice*, by FONTDASU. A Mincho (Japanese serif) with a warm, calligraphic, slightly old-fashioned brush-derived feel; reserved for the longer reflective passages in the *three-o'clock pause* band and any pull-quote, set at 1.5rem, weight 400, generous tracking, in the faded-vermilion accent so it reads like red editorial ink annotated over the black typescript. **Palette — Shōwa print stock (warm, muted, low-key — 8 colours).** - `#F2E8D5` — *kasai-gami*, the laminated cream paper ground (the whole page). - `#E7D8BC` — *aged ledger band*, a deeper biscuit for alternating time-band rows. - `#2E2A24` — *cocoa typescript*, the near-black warm ink for all body text and hairlines (never pure #000). - `#7A6A4F` — *faded keyline brown*, for the ruled hairlines, form borders, and the time-column dividers. - `#C0392B` — *Shōwa vermilion*, the rubber-stamp / hanko / editorial-red accent (siphon flame, seal, pull-quotes, the unchecked-checkbox outline on hover). - `#3E6B5C` — *hōrō enamel green*, the deep enamel-signboard green for one or two key headings and link underlines, evoking a kissaten's painted sign. - `#D98C5F` — *terracotta coffee*, a soft burnt-clay tone for the dawn/dusk gradient washes and the siphon-coffee illustration body. - `#8A94A0` — *shutters-down grey*, the cool dusk grey the bottom band fades toward at end-of-day. No gradient meshes, no neon, no high-saturation. The only "gradient" anywhere is a single very gentle vertical wash from `#F2E8D5` (top, dawn) through a faint `#D98C5F` haze (noon) to `#8A94A0` (bottom, dusk) — under 8% opacity at its strongest, so the page reads as a slowly-souring sheet of paper rather than a designed gradient. ## Imagery and Motifs **No photography. No 3D. No raster stock.** All imagery is inline SVG drawn in a flat, two-plate riso/letterpress style — solid colour fields plus a single hairline keyline, with a deliberate 1–2px misregister offset on one channel. - **The siphon coffee maker** (motif: a single hero object) — a vacuum/siphon brewer, that icon of Shōwa kissaten craft, drawn in flat `#D98C5F` glass with a `#C0392B` flickering alcohol flame beneath it, sitting alone and large in the three-o'clock band. Its bubbling is the page's one piece of "ambient life". - **The hōrō signboard fragments** — small enamel-style sign rectangles in `#3E6B5C` with rounded corners and a chipped white edge, used as section markers between time-bands (a tiny painted "営業中 / OPEN" tag at the top, "準備中 / CLOSED" at the bottom). - **Printed-form furniture** — checkbox glyphs (☐), a fake form serial number, a perforation line (a dashed/dotted SVG stroke) running down the left margin as if the sheet were torn from a pad, two "punch holes" (open circles) in the left rail, and corner registration crop-marks (the printer's `+` marks) in faded brown at all four corners. - **The rubber stamp** — a rotated (~-7deg), ink-starved (irregular opacity, slightly broken stroke) circular seal in `#C0392B` at the footer, reading the era date in DM Mono around its rim and a stylised kanji in the centre. It looks pressed by hand. - **Hour ticks** — in the time column, each hour is a short hairline tick plus its label; the *current band* (if you want to nod to "today") gets a thicker tick and a small `#C0392B` triangular "you are here" pointer, like a paper bookmark slipped into the timetable. Texture is suggested, not bitmapped: a near-invisible CSS `radial-gradient` paper-fleck pattern and a faint 1px inner box-shadow that reads as the lamination edge catching light. Everything else is geometry. ## Prompts for Implementation Build showa.day as **one HTML file, one CSS file, one small JS module, one inline SVG sprite** — no framework, no build step, no router, no service worker. Target under 70KB uncompressed. The site is a *document*, so the HTML should be semantically a long article ruled into `
` time-bands; the JS only adds quiet motion. **Document skeleton:** ```