# Design Language for reiwa.day ## Aesthetics and Tone reiwa.day inhabits the visual world of a late-generation handheld console displaying a ceremonial calendar -- imagine a Game Boy Advance rendering the proceedings of a formal Japanese era announcement through chunky sprites and limited color depth. The aesthetic is **pixel-art** treated with the reverence of calligraphy: each pixel is deliberate, each grid-aligned element carries the weight of imperial proclamation. This is not the pixel art of retro gaming nostalgia; it is pixel art as precision instrument, as measured ceremony, as the digital equivalent of a master engraver cutting characters into a wooden block with mathematical exactitude. The tone is **elegant-sophisticated** -- the quiet confidence of a system that knows its purpose. Think of the controlled grace of a tea ceremony performed inside a server room. There is no casualness here, no winking retro irony. The pixels are formal. The grid is law. The palette whispers rather than shouts. Every element communicates institutional permanence filtered through the warm amber glow of aged parchment viewed on a low-resolution display. The mood draws from three specific sources: the pixel-art interfaces of mid-1990s Japanese administrative software (municipal record systems, library catalogs), the honeyed warmth of traditional Japanese paper (washi) under incandescent light, and the rhythmic certainty of a typewriter striking vellum. The result is a site that feels simultaneously ancient and digital -- a scroll rendered at 8 bits per channel, a proclamation delivered one character at a time. ## Layout Motifs and Structure The layout follows a strict **single-column** architecture that functions as a vertical pixel-art scroll. The column occupies exactly 640px on desktop viewports (a deliberate reference to classic VGA resolution width), centered with generous margins that serve as the "unrendered" void surrounding the active display area. On viewports narrower than 720px, the column expands to 100% width minus 16px padding on each side, maintaining the contained-screen metaphor. **Structural Architecture:** - **The Pixel Frame:** The entire content column is enclosed within a 2px solid border rendered in Toasted Sesame (#A0896C), with small 4px square notches cut from each corner (achieved via clip-path or pseudo-elements) to evoke the rounded-rectangle screen bezels of portable gaming hardware. This frame is the boundary of the "display" -- all content lives inside it. - **Section Dividers:** Between major content sections, a horizontal line constructed from a repeating 8px-wide pixel pattern (alternating filled and empty squares in Warm Ash #D4C4B0 and Honeycomb Light #F2E8D5) spans the column width. These dividers are exactly 8px tall and use `image-rendering: pixelated` to maintain crisp edges at all zoom levels. - **Content Blocks:** Each section is a self-contained "screen" within the scroll, beginning with a section header rendered in pixel font style and followed by body content with 24px internal padding. Sections have 48px of vertical breathing space between them, creating a measured cadence like screens advancing on a handheld device. - **The Header Screen:** The topmost "screen" displays the domain name "reiwa.day" in large pixel typography (rendered at an effective grid of approximately 5px per pixel-unit, creating chunky, visible pixel structure). Below it, the era designation and date information unfold via typewriter animation. No navigation menu exists -- the site is a single continuous vertical document. - **The Footer Stamp:** At the bottom of the scroll, a pixel-art seal (hanko-style) rendered in Burnt Honey (#C4973B) sits centered, functioning as the closing mark of the document. Below it, minimal metadata in small text. ## Typography and Palette **Typography:** - **Display / Pixel Headers:** "Silkscreen" (Google Fonts) -- a true bitmap-style pixel font designed for screen rendering at small sizes but equally striking at large display sizes. Used at 2rem-4rem for primary headings where the individual pixel structure becomes an intentional design element. Weight: 400 (the only available weight). Letter-spacing: +0.08em for readability at large sizes. Text-transform: uppercase for section headers. Line-height: 1.3. Applied with `font-smooth: never; -webkit-font-smoothing: none;` to preserve hard pixel edges. - **Secondary Headers:** "Varela Round" (Google Fonts) -- a rounded geometric sans-serif with friendly, soft curves that contrast beautifully against the hard edges of Silkscreen. Used at 1.25rem-1.75rem for sub-headings and emphasized labels. Weight: 400. Letter-spacing: +0.02em. Line-height: 1.4. The roundedness echoes the pixel-art aesthetic (pixels are fundamentally square, but Varela Round provides organic relief) while maintaining the sophisticated tone through its measured proportions. - **Body Text:** "Nunito" (Google Fonts) -- a well-balanced rounded sans-serif with excellent readability. Used at 1rem (16px base) for all body copy. Weight: 300 for body, 600 for inline emphasis. Letter-spacing: normal. Line-height: 1.75 (generous, reflecting the unhurried pace of a ceremonial document). Color: Deep Walnut (#5C4A3A) for primary body text, providing warm contrast against the light background without the harshness of pure black. **Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Background | Parchment Glow | #F7F0E3 | Primary background, the "screen" surface | | Surface | Honeycomb Light | #F2E8D5 | Card backgrounds, section fills, secondary surfaces | | Border / Frame | Toasted Sesame | #A0896C | Pixel frame borders, divider patterns, structural lines | | Text Primary | Deep Walnut | #5C4A3A | Body text, secondary headings | | Text Heading | Charred Oak | #3B2D22 | Primary headings, strong emphasis | | Accent Gold | Burnt Honey | #C4973B | Pixel-art seal, accent elements, interactive highlights | | Accent Warm | Autumn Ember | #D4864A | Typewriter cursor, progress indicators, warm accents | | Muted | Warm Ash | #D4C4B0 | Divider patterns, disabled states, subtle backgrounds | | Pixel Shadow | Umber Depth | #2A1F16 | Drop-shadow color for pixel elements, deepest contrast | The palette operates on a honeyed-neutral spectrum -- no pure whites, no pure blacks. Every value carries warmth, as if the entire interface has been dipped in amber resin. The darkest value (Umber Depth #2A1F16) is a deep brown-black that reads as shadow rather than void. The lightest value (Parchment Glow #F7F0E3) is warm cream, not clinical white. This tonal range creates an atmosphere of aged luxury -- a digital artifact preserved in honey. ## Imagery and Motifs **Noise Texture Overlay:** The primary visual texture is a **noise-texture** layer applied across the entire viewport as a fixed-position overlay. This is generated via an inline SVG `` element using `` composited at 4-6% opacity over the Parchment Glow background using `mix-blend-mode: multiply`. The noise creates a subtle paper-grain effect that transforms flat digital color into something tactile -- the visual equivalent of running a fingertip across handmade paper. The `image-rendering: pixelated` property is applied to the noise layer so the grain itself is blocky rather than smooth, reinforcing the pixel-art aesthetic at a textural level. **Pixel-Art Tech Motifs:** Decorative pixel-art elements are rendered as inline SVGs or CSS-constructed grids that echo technology and precision: 1. **Circuit Traces:** Thin 1px lines in Toasted Sesame (#A0896C) at 30% opacity run along the margins of the content column, branching at right angles with small 4x4px square nodes at junction points. These traces suggest the PCB traces of the "device" displaying the content. They are purely decorative, drawn with SVG `` and `` elements, and remain static (no animation -- their stillness is the point). 2. **Pixel Hanko Seal:** A 64x64 pixel grid rendered as an SVG viewBox containing a simplified circular seal design in Burnt Honey (#C4973B). The seal contains a stylized character or symbol constructed from filled squares within the grid. It appears at the document footer and optionally as a small 16x16 watermark in section headers. 3. **Bit-Pattern Borders:** Certain emphasized content blocks use a border constructed from repeating 1-bit patterns (like `1010101010` rendered as alternating filled/empty 2px squares). These patterns reference the binary underpinning of digital systems while functioning as decorative borders that feel simultaneously technical and ornamental. 4. **Grid Dots:** At 120px intervals across the background (behind the main content column), faint 2x2px dots in Warm Ash (#D4C4B0) at 15% opacity form a regular grid, evoking graph paper or the dot-matrix pattern of early LCD displays. This background grid is visible only on desktop viewports wider than 960px. 5. **Era Markers:** Small pixel-art calendar icons (8x8 pixel grids) mark date references throughout the content, rendered in Autumn Ember (#D4864A). Each icon is a tiny representation of a calendar page, constructed entirely from colored squares. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport Parchment Glow (#F7F0E3) surface with the noise texture overlay already active. The pixel frame border draws itself in from the four corners simultaneously using a stroke-dashoffset animation over 1.2 seconds -- four lines extending from corner notches until they meet and complete the frame rectangle. During this drawing phase, the interior is empty. Once the frame completes, the domain name "reiwa.day" appears in Silkscreen at 3.5rem, rendered with a **typewriter-effect**: each character materializes left-to-right with a 90ms delay between characters. The typewriter cursor is a solid 2px-wide, 1.2em-tall rectangle in Autumn Ember (#D4864A) that blinks at 530ms intervals (pure CSS animation, `steps(1)` timing function for hard on/off). After the domain name completes, a 400ms pause, then a subtitle line types out at 60ms per character in Nunito at 1rem. **Scroll Progression as Screen Advance:** As the user scrolls, each content section enters the viewport with a subtle **fade-reveal** (opacity 0 to 1 over 300ms, triggered when the section top crosses 80% of the viewport height). There is no parallax, no elastic bounce, no spring physics. Movement is binary and measured -- things are either visible or not, transitioning with the crisp certainty of a screen refresh. This deliberate simplicity is itself a design statement: in a landscape of overanimated sites, this one advances like pages in a bound document. **Typewriter Echoes Throughout:** The typewriter-effect is not limited to the opening sequence. Key phrases, pull quotes, and section introductions throughout the document use the same character-by-character reveal, triggered on scroll into view. Each instance uses slightly different timing (70-120ms per character) to avoid mechanical monotony while maintaining the rhythmic motif. The blinking cursor appears at the end of each typewriter sequence, blinks three times, then fades out over 200ms. **The Pixel Seal Ceremony:** When the user scrolls to the footer, the pixel hanko seal animates in via a grid-reveal: starting from the center pixel and expanding outward in concentric square rings, each ring appearing with a 40ms delay. The full 64x64 seal takes approximately 1.3 seconds to fully materialize. This animation runs once and does not repeat. It is the document's closing signature -- a formal stamp of completion. **Sound of Keys (Optional Enhancement):** If the browser supports the Web Audio API, each typewriter character trigger can produce a subtle, short click sound synthesized via oscillator (a 2ms burst of white noise shaped with a sharp attack and instant decay, mixed at very low volume). This is gated behind a user interaction (first click/tap enables audio context) and respects `prefers-reduced-motion` by disabling entirely. The effect is ghostly -- barely audible -- like hearing a typewriter three rooms away. **AVOID:** CTA buttons, pricing tables, testimonial carousels, stat-counter grids, gradient hero sections, hamburger menus, sticky navigation bars, modal popups, newsletter signup forms. This is a document, not an application. It presents, it does not sell. **CSS Technical Notes:** - All pixel-art elements use `image-rendering: pixelated` (with `-ms-interpolation-mode: nearest-neighbor` fallback) to prevent subpixel smoothing - The noise texture SVG filter is defined once in the HTML `` and referenced via CSS `filter: url(#grain)` on a fixed-position full-viewport pseudo-element - Font rendering for Silkscreen uses `-webkit-font-smoothing: none; -moz-osx-font-smoothing: unset` to preserve bitmap character edges - All pixel dimensions that are part of the aesthetic system (border widths, dot sizes, pattern units) use integer pixel values, never rem/em, to maintain grid alignment - Color transitions between sections use `transition: background-color 0ms` -- instant, no interpolation, honoring the pixel-art principle that color changes are discrete, not continuous ## Uniqueness Notes **Differentiators from other designs:** 1. **Pixel-Art as Formal Language:** pixel-art aesthetic sits at 0% frequency in the existing portfolio -- no other design uses it. More importantly, this design treats pixel art not as retro-gaming nostalgia but as a formal, ceremonial visual system. The pixels are not playful or cute; they are precise, architectural, and sophisticated. This collision of low-resolution aesthetics with high-culture tone is entirely unprecedented in the portfolio. 2. **Rounded-Sans + Pixel-Font Typography Pairing:** rounded-sans typography appears at only 1% frequency. This design pairs Silkscreen (a pixel bitmap font) with Varela Round and Nunito (rounded sans-serifs), creating a typographic tension between hard-edged grid-locked characters and soft organic curves. No other design in the portfolio uses this specific contrast strategy. 3. **Noise-Texture as Pixelated Grain:** noise-texture imagery appears at only 1% frequency, and no existing design applies `image-rendering: pixelated` to the noise layer itself. This creates a unique "digital paper" effect where the grain is blocky and grid-aligned rather than smooth -- reinforcing the pixel-art aesthetic at a textural level while providing the warmth and tactility of handmade paper. 4. **Typewriter-Effect as Ceremonial Reveal:** typewriter-effect patterns appear at only 3% frequency. Here, the typewriter is not used for developer-terminal aesthetics but as a formal document-inscription mechanism -- each character appears with the deliberate pace of an official proclamation being typed. The optional Web Audio synthesized key sounds add a dimension no other design attempts. 5. **Honeyed-Neutral Palette Without Warm/Gradient Defaults:** While warm palette dominates at 100% frequency, honeyed-neutral sits at only 4%. This design achieves warmth through a specific amber/honey/walnut color system rather than generic warm tones, and uses zero gradients -- all color is flat, honoring the pixel-art principle of discrete color values. **Documented Seed/Style:** aesthetic: pixel-art, layout: single-column, typography: rounded-sans, palette: honeyed-neutral, patterns: typewriter-effect, imagery: noise-texture, motifs: tech, tone: elegant-sophisticated **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with pixel-art (0%) - centered layout (99%) -- using single-column with fixed 640px width - mono typography (99%) -- using rounded-sans (1%) and pixel bitmap font - friendly tone (98%) -- using elegant-sophisticated (5%) - minimal imagery (95%) -- using noise-texture (1%) - scroll-triggered patterns (96%) -- using typewriter-effect (3%) as primary, with minimal fade-reveal as secondary - vintage motifs (88%) -- using tech motifs (25%) - parallax patterns (75%) -- explicitly excluded; movement is binary and discrete