# Design Language for heisei.day ## Aesthetics and Tone heisei.day is a **pixel-art almanac of an era that ended gently** — the Heisei period of Japan (January 8, 1989 to April 30, 2019) rendered as a hand-crafted sprite museum. The visual register is the specific texture of early-90s Japanese game UI: chunky 16×16 pixel tiles, dithered gradients on burnt-orange parchment backgrounds, and the careful warmth of a daily diary drawn on graph paper. Every module on the page feels like a cartridge art panel or a status screen from an old RPG — a feeling of deliberate craft that predates smooth vector UI. The tone is **friendly without being cheerful**: this is nostalgia with both eyes open, celebrating thirty years of ordinary days — school lunch boxes, umbrella racks, vending machine coffee, morning radio taiso — through the affectionate pixel grids of the games made during those very years. The page does not mourn the era's close; it lifts an ordinary day out of the stream of time and holds it up to the light. Mood anchors: the warmth of autumn late afternoon, the ticking of an analog clock in a quiet room, the specific orange of persimmons sold from roadside stalls, the gentle hum of a CRT television on a low table. ## Layout Motifs and Structure The page is composed of **modular-blocks**: a fixed-width grid of self-contained rectangular panels arranged on a 12-column CSS grid at 1440px, collapsing to 4 columns on mobile. Each block is a discrete unit with a 4px pixel-art border (solid 2-tone — a lighter outer edge and darker inner edge, like sprite panel outlines), a marble-patterned interior, and its own internal logic. No block bleeds into another; negative space between blocks is exactly 16px (one tile unit). The grid is **non-uniform in height but disciplined in column-spans**: tall narrow blocks sit beside wide short blocks, like the layout of a Game Boy Advance cartridge label grid. The visual rhythm is syncopated but orderly — you never feel lost, but you never stop scanning. **Block taxonomy:** - **Wordmark Block** (full-width, 96px tall): site title `heisei.day` in a pixel-art bitmap font, centered, with a dithered burnt-orange scanline wash across the background. Acts as a site title card, not a hero with CTA. - **Calendar Tile** (3-col wide, 4-col tall on mobile): a pixel-rendered perpetual calendar for the current day, showing the Heisei year equivalent alongside the Gregorian date, with small 8×8 sprite icons for weather, season, and day-of-week. - **Diary Entry Block** (6-col wide): long-form typographic block using the expressive-variable font system, with decorative pixel-border dividers between paragraphs. Looks like a lined notebook page photographed flat. - **Specimen Block** (3-col wide): a tall marble-textured slab displaying a single kanji or hiragana character associated with the day, in oversized variable-weight display type. - **Nature Strip** (9-col wide, short): a horizontal pixel-art scroll panel showing a cherry blossom branch, autumn maple, or bamboo sprig — one per season, cycling based on the current month. 32px tall sprite sheet strip, 4-frame CSS animation. - **Error Demo Block** (3-col wide): an interactive module that demonstrates the shake-error pattern — tap a pixelated button labeled `送信 / send`, and it triggers the shake animation with a red pixel-flash border and a small 8-bit buzzer symbol. - **Footer Strip** (full-width): 48px tall, dark burnt-orange with pixel-art cherry blossom confetti falling down, and the era dates `平成 1989.01.08 – 2019.04.30` rendered in bitmap caps. No sticky headers, no floating navigation, no modal overlays. The entire page is a single scrolling grid, read top-to-bottom like turning the pages of a day planner. ## Typography and Palette **Typography (Google Fonts only — expressive-variable system):** The type system contrasts pixel precision with fluid expressive weight. Two typefaces, one serving two modes: - **Display / Headings:** [`Dela Gothic One`](https://fonts.google.com/specimen/Dela+Gothic+One) — thick, rounded, ink-heavy Japanese-Latin display face. Used for block headings, kanji specimen labels, and the wordmark. Set at `clamp(32px, 6vw, 80px)`, no variable axes but its optical weight mimics a pixel-art letterform at large sizes. Tracking: `-0.02em`. Color: `#2D1A0E` on light surfaces. - **Body / Long-form:** [`Noto Serif JP`](https://fonts.google.com/specimen/Noto+Serif+JP) — variable-weight serif with full CJK support, `wght 200–900`. Body text at `wght 400`, `18px/1.8`. Decorative pull-quotes at `wght 700`, italic-like axis shift via CSS `font-variation-settings`. The weight range lets text feel handwritten at light values and inked at heavy values, creating texture across a diary entry. - **Monospace / Date labels / UI captions:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) variable, `wght 100–800`. Used only for date stamps, Heisei year labels (`平成 31年`), and the error-state button text. Small caps, `11px`, `letter-spacing: 0.08em`. **Palette:** - `#C84B11` — Persimmon Burnt Orange. Primary accent. Block borders, active states, the wordmark scanline wash, button fill. - `#F5E6D3` — Washi Paper. Primary surface. Block interior backgrounds, marble texture base tone. - `#2D1A0E` — Dark Lacquer. Primary text, thick pixel-border outer edge, footer background. - `#E8C49A` — Soft Amber. Secondary surface. Calendar tile background, block dividers, pixel-art sky tone. - `#8B3A1A` — Deep Ember. Darker accent. Pixel-border inner edge, hover states, shake-error border flash color. - `#F0F0EE` — Marble White. Marble texture highlight. Interior of specimen blocks and diary entry blocks. - `#4A3728` — Warm Umber. Muted body contrast color. Used for `JetBrains Mono` caption text and sprite shadow pixels. ## Imagery and Motifs **No photographs.** No stock imagery. The entire visual lexicon is constructed from two coexisting material registers: pixel-art sprites and marble texture panels. **Pixel-Art Sprites (nature motifs):** All sprites are drawn on a strict 16px or 32px grid, using only the seven palette colors above plus `#FFFFFF` for highlights and `#000000` for sprite outlines at 1px: - *Cherry Blossom (sakura):* 5-petal flower at 16×16px, rendered with 3-level dithering on the petals in `#F5E6D3`/`#E8C49A`/`#C84B11`. Used as confetti in the footer strip and scattered as bullet-point markers throughout the diary block. - *Autumn Maple Leaf:* 16×16px, 7-color silhouette using the orange spectrum from `#E8C49A` through `#C84B11` to `#8B3A1A`. Applied to the Nature Strip sprite sheet for autumn months. - *Bamboo Sprig:* 8×32px tile, tiling horizontally. Rendered in greens adjacent to the palette (`#4A3728` for shadow segments). - *Persimmon Fruit:* 12×14px sprite, used as the favicon and as a decorative element beside the Calendar Tile heading. - *Rain Drop:* 4×8px single-pixel teardrop, used in 3-frame animation when the weather sprite shows rain. **Marble Texture:** Applied as a CSS `background-image` using a `repeating-conic-gradient` layered with a `noise` SVG filter to create a veined stone appearance in `#F0F0EE`/`#F5E6D3` tones. The marble is subtle — it reads as premium parchment from afar, and as stone grain close up. Applied only to the Diary Entry Block and Specimen Block interiors. Never to pixel-art panels (they remain solid flat color). **Shake-Error Pattern:** The shake-error CSS animation: `@keyframes shake-error { 0% { transform: translateX(0); } 15% { transform: translateX(-5px) rotate(-1deg); } 30% { transform: translateX(5px) rotate(1deg); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 75% { transform: translateX(-2px); } 90% { transform: translateX(2px); } 100% { transform: translateX(0); } }`. Duration: `0.5s ease-in-out`. On trigger: border color snaps to `#8B3A1A` for the animation duration, then fades back. ## Prompts for Implementation Build heisei.day as a **modular-grid almanac of daily Japanese life circa 1989–2019**, assembled entirely from pixel-art sprites and marble-textured typographic panels. There is no navigation bar, no hero CTA, no statistics section, no testimonials. The page is a curated arrangement of informational and decorative blocks that rewards close reading. **Structural sequence (top to bottom, 12-column CSS Grid):** 1. **Wordmark Block** (cols 1–12, `height: 96px`). Site title `heisei.day` in Dela Gothic One, `64px`, centered. Background: `#C84B11` with a CSS `repeating-linear-gradient` scanline effect in `rgba(45,26,14,0.12)` at 4px intervals to suggest a CRT screen. The kanji `平成の日` appears below in `#F5E6D3` at `18px` Noto Serif JP `wght 300`. 2. **Calendar Tile** (cols 1–4, desktop; full-width mobile). Pixel-art framed box showing: today's Gregorian date in JetBrains Mono `wght 700`, the equivalent Heisei year in Dela Gothic One below it, a row of 8×8 sprites for day-of-week, season, and weather. Interior: `#E8C49A` flat color. Pixel border: 2px outer `#8B3A1A`, 2px inner `#C84B11`. 3. **Nature Strip** (cols 5–12, desktop; full-width mobile; `height: 32px`). A 4-frame looping CSS sprite-sheet animation of a seasonal nature scene. Cherry blossoms for months 3–5, maple leaves for months 9–11, bamboo for months 6–8 and 12–2. The strip is a single `` element or pure CSS sprite-sheet. 4. **Diary Entry Block** (cols 1–8, desktop). Long-form narrative text in Noto Serif JP `wght 400`, describing a single ordinary day from the Heisei era. Marble texture background. Pixel-border frame. Pull-quote in `wght 700` at `1.4×` base size with `#C84B11` left border. Cherry blossom sprite bullets on list items. 5. **Specimen Block** (cols 9–12, desktop; full-width mobile). Single large kanji character in Dela Gothic One at `clamp(80px, 12vw, 160px)`, centered on a marble-white background. The character changes each day (hardcoded or date-calculated from a list of 365 kanji). Below it: the reading in hiragana in Noto Serif JP `wght 200` and an English gloss in JetBrains Mono caption style. 6. **Error Demo Block** (cols 1–4, desktop). Pixel-art framed interactive panel. Contains a button labeled `送信 / send` in Dela Gothic One `20px` on `#C84B11` background. On click: the entire block receives the `shake-error` animation, border flashes `#8B3A1A`, and a small 8-bit buzzer SVG icon appears for 0.5s. Label below the button explains the shake-error pattern in JetBrains Mono caption. 7. **Everyday Objects Strip** (cols 5–12, desktop). A horizontal row of six 32×32px pixel-art sprites of Heisei-era everyday objects: a cassette walkman, a pager, a keitai flip phone, a konbini onigiri, a transit IC card, a tamagotchi. Each sprite has a hover state that shows a tooltip in JetBrains Mono with the Japanese name and approximate year of peak ubiquity. 8. **Footer Strip** (cols 1–12, `height: 64px`). Background `#2D1A0E`. Pixel-art cherry blossom confetti falling from top edge in CSS animation (16-sprite array, staggered `animation-delay`). Text: `平成 1989.01.08 – 2019.04.30` in JetBrains Mono `wght 700`, `#F5E6D3`, centered. Below: `heisei.day` in Dela Gothic One `14px` in `#E8C49A`. **Animation budget:** Only three animations — Nature Strip sprite-sheet loop (4 frames, `600ms steps(4) infinite`), footer confetti fall (`3s linear infinite` per petal, 16 staggered), and shake-error on user trigger. No scroll-based animation. No parallax. **CSS Grid approach:** Define grid as `grid-template-columns: repeat(12, 1fr); gap: 16px; max-width: 1440px; margin: 0 auto; padding: 16px;`. Each block uses `grid-column: span N` shorthand. On mobile (under 640px), all blocks stack to `grid-column: span 4` (full width on 4-col grid). **AVOID:** Centered full-screen hero sections, floating navigation, CTA buttons unrelated to the error demo, gradient overlays on photos, testimonial cards, stat counters, or any layout that looks like a SaaS product page. ## Uniqueness Notes 1. **First pixel-art + marble-texture material contrast in the registry.** The frequency report shows pixel-art at 2% and marble-texture at 4%, but no design has combined them as opposing poles of a single aesthetic — sprite grids living directly inside stone-veined panels, hard pixel edges against smooth organic grain. heisei.day makes this contrast its structural thesis: everything is either a 16px grid or a marble surface, nothing in between. 2. **Heisei era as almanac subject, not branding backdrop.** No other design in the registry uses a specific historical calendar period as its thematic and typographic spine. The Heisei year counter, the kanji specimen, the everyday-objects sprite row, and the diary-entry format are all content-driven by a real 30-year period of Japanese daily life — not aesthetic mood-boarding. 3. **Modular-blocks layout used as a strict tile system rather than a card layout.** The frequency report shows modular-blocks at 3%. This design uses it in its most literal interpretation: discrete rectangular blocks with pixel-art borders and fixed gap units of exactly 16px (one tile unit), creating a layout that reads as a game UI screen rather than a marketing grid. 4. **Seed:** `aesthetic: pixel-art, layout: modular-blocks, typography: expressive-variable, palette: burnt-orange, patterns: shake-error, imagery: marble-texture, motifs: nature, tone: friendly`. 5. **Avoided overused patterns:** No `centered` (90% frequency) hero or single-column layout. No `full-bleed` (76%) image sections. No `asymmetric` (43%) split-panel. The `friendly` tone (24%) is expressed through sprite warmth and nostalgia rather than through copy voice or CTA language.