# Design Language for reiwa.boo
## Aesthetics and Tone
reiwa.boo inhabits the visual world of a Japanese municipal administrative terminal from an alternate near-future -- the kind of interface that might greet a citizen at a ward office kiosk in Suginami, Tokyo, circa 2031, where government systems have been rebuilt with quiet precision and unexpected warmth. The aesthetic is **terminal** not in the grim hacker-movie sense but in the civic infrastructure sense: monospaced readouts displaying ward population counts, seasonal event calendars rendered as data streams, neighborhood notices scrolling in columns that echo the vertical rhythm of Japanese newspaper typography. The domain "reiwa" (令和) names the current Japanese imperial era, and the design treats this as a temporal coordinate -- the entire site is a dispatch from the Reiwa period, an era defined by the kanji for "beautiful harmony." That tension between bureaucratic structure and aspirational beauty drives every decision. The color palette avoids the expected green-on-black terminal cliche entirely, instead drawing from the muted indigo, persimmon, and stone tones of ukiyo-e prints as if those pigments had been digitized and assigned to system status codes. The tone is **professional** -- not cold, but composed, the way a well-designed train station sign communicates authority through clarity rather than decoration. There is something deeply reassuring about encountering a system that simply works, that presents information without persuasion, that trusts you to navigate without hand-holding.
## Layout Motifs and Structure
The layout follows a **card-grid** system inspired by the modular information panels found in Japanese train stations and municipal buildings -- those tiled displays where each panel is a self-contained unit of information (departure time, platform number, delay status) arranged in a precise grid that can be scanned rapidly. The grid is built on a 12-column CSS Grid with cards occupying 2, 3, 4, or 6 columns depending on their content density. On mobile, the grid collapses to a single-column vertical stack, but on desktop, the card arrangement is deliberately asymmetric within the grid -- some cards are 2x1, some 1x2 (tall), some 2x2 -- creating a rhythm that avoids the monotony of uniform card sizes while maintaining strict alignment to grid lines.
**Grid Specifications:**
- Column gap: 2px (the thinness of the gap is critical -- it creates the impression of a tiled display panel where cards are flush-mounted components rather than floating elements)
- Row gap: 2px
- Cards have no border-radius (0px) -- sharp corners reinforce the terminal/infrastructure aesthetic
- Cards have a 1px border in Slate Wire (#4a5568) that brightens to Persimmon Signal (#d4644a) on hover
- No box-shadow on any element -- shadows are antithetical to the flat-panel display metaphor
**Viewport Sections:**
1. **Header Bar** (48px fixed height): Domain name "reiwa.boo" in monospace, left-aligned, with a blinking cursor (CSS animation, 1s interval). Right side shows a simulated system clock displaying current JST time via JavaScript `Intl.DateTimeFormat`.
2. **Status Strip** (32px): A thin horizontal bar showing a scrolling marquee of simulated system messages ("REIWA.7 | SYSTEM NOMINAL | 令和七年三月十日 | UPTIME: 2,557d"). CSS `@keyframes` horizontal translate animation, 30s duration, linear.
3. **Main Grid** (remaining viewport): The card-grid occupying the full remaining height with `overflow-y: auto` and a custom scrollbar styled to match the terminal aesthetic (thin, 4px wide, Indigo Ink colored).
4. **Footer Terminal** (64px fixed): A simulated command prompt showing `reiwa.boo > _` with the cursor blinking. Purely decorative -- no actual input functionality.
**Navigation:** There is no traditional navigation menu. Instead, card categories are indicated by colored left-border accents (4px wide) on each card: Persimmon Signal (#d4644a) for primary content, Matcha Status (#7b9e6b) for system/meta information, Indigo Ink (#3d4f7c) for archival/reference content.
## Typography and Palette
**Typography:**
- **System Text / Body:** "Fira Code" (Google Fonts) -- a monospaced font with programming ligatures that reinforces the terminal aesthetic. Used at 14px/1.7 for all body text within cards. The ligature feature (`font-feature-settings: "liga" 1, "calt" 1`) is enabled, so sequences like `=>` and `!=` render as their combined glyphs -- a subtle detail that rewards close reading.
- **Headlines / Card Titles:** "Nunito Sans" (Google Fonts) -- a clean, geometric humanist sans-serif in the Frutiger tradition. Used at 18px/1.3, weight 700, for card titles. The contrast between the monospaced body and the clean sans-serif headlines creates a hierarchy that mirrors the way terminal interfaces distinguish command output (mono) from UI chrome (sans-serif). Letter-spacing: -0.01em to keep headlines tight.
- **Accent / Labels:** "Nunito Sans" at 11px/1.2, weight 600, all-uppercase, letter-spacing: 0.08em. Used for category labels, timestamps, and metadata within cards. Color: always Slate Wire (#4a5568) to maintain the subdued, informational register.
- **Japanese Text:** When displaying era name or cultural references, the same Fira Code is used -- its Unicode coverage handles basic CJK characters, and the monospaced rendering of Japanese characters creates a distinctive aesthetic tension between the character width and the Latin letterforms.
**Palette (Analogous scheme anchored in blue-indigo shifting toward warm persimmon accent):**
| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Background | Reiwa Dark | #121820 | Primary background, card interiors |
| Surface | Panel Slate | #1c2433 | Card backgrounds, elevated surfaces |
| Border | Slate Wire | #4a5568 | Card borders, dividers, muted UI elements |
| Primary | Indigo Ink | #3d4f7c | Active states, primary links, left-border accents |
| Accent | Persimmon Signal | #d4644a | Warnings, highlights, hover states, key accents |
| Success | Matcha Status | #7b9e6b | Confirmation states, system-ok indicators |
| Text Primary | Paper White | #e8eaed | Primary text on dark backgrounds |
| Text Secondary | Fog Gray | #9ca3af | Secondary text, timestamps, metadata |
| Era Accent | Wisteria Haze | #8b7bb5 | Decorative accents evoking fuji (wisteria), the flower of the Reiwa era announcement |
The analogous range runs from Indigo Ink (#3d4f7c) through Wisteria Haze (#8b7bb5), with Persimmon Signal (#d4644a) serving as the complementary break point -- a warm disruption in an otherwise cool system, like a hanko stamp pressed onto an official document.
## Imagery and Motifs
**Noise Texture as Digital Patina:**
The primary imagery mode is **noise-texture** -- a fine-grained static overlay applied to the entire background at 3-4% opacity, generated via CSS SVG filters (`` composited with ``). This noise serves multiple purposes: it breaks up the flat dark background to prevent the "dead screen" look that plagues dark-mode designs, it evokes the subtle scan-line texture of CRT monitors, and it provides a material quality -- the surface feels like something physical, a screen with actual glass, rather than a pure digital void. The noise is static (not animated) to avoid visual fatigue.
**Cultural Motifs (令和 / Reiwa):**
Cultural references are embedded as decorative data rather than illustrative imagery:
1. **Era Counter:** A persistent small readout in the header showing the current year in both Gregorian and Japanese era format (e.g., "2026 / 令和8年"), calculated dynamically via JavaScript. This is not decoration -- it is functional cultural context.
2. **Seasonal Color Shifts:** The Persimmon Signal accent color subtly shifts based on the current month, referencing the traditional Japanese color calendar (kasane no irome): spring months pull toward cherry (#d4847a), summer toward indigo (#3d4f7c), autumn toward persimmon (#d4644a), winter toward snow-gray (#9ca3af). Implemented via a JavaScript `Date()` check that sets a CSS custom property.
3. **Mon-Inspired Grid Markers:** At the intersection points of the card grid (where four card corners meet), a tiny 8x8px decorative mark appears -- a simplified geometric form inspired by Japanese family crests (mon/kamon). These are pure CSS (using `::before` pseudo-elements on grid cells) in Slate Wire (#4a5568) at 30% opacity. They are barely visible but create a subtle texture of cultural identity across the grid.
4. **Hanko Stamp Element:** One card in the grid features a circular element (48px diameter) styled as a traditional hanko personal seal, rendered in Persimmon Signal with the character "令" inside, using a slight CSS `rotate(3deg)` and a grain texture overlay to simulate the imperfect impression of a rubber stamp.
**No Photography:** The site uses zero photographic imagery. All visual information is typographic, geometric, or data-derived. This absence is a deliberate design choice -- the terminal aesthetic demands that the screen surface itself be the primary visual material.
## Prompts for Implementation
**Full-Screen Narrative Terminal Boot Sequence:**
The site opens with a full-viewport screen of Reiwa Dark (#121820) overlaid with the noise texture. For 0.8 seconds, only the noise is visible -- the screen appears to be powered on but blank. Then, a single line of Fira Code text appears at the top-left corner: `> INITIALIZING REIWA.BOO...` typed out character-by-character using a CSS `steps()` animation over 1.2 seconds. After a 0.3-second pause, a second line appears: `> SYSTEM: REIWA PERIOD / YEAR 8 / MONTH 3` (dynamically generated). After another 0.3s pause: `> STATUS: NOMINAL`. Then, after a final 0.5s pause, the boot text fades out (opacity 0 over 0.4s) and the actual card grid fades in from 0 to 1 opacity over 0.6 seconds. Total boot sequence: approximately 3.5 seconds. The boot sequence should be skippable by clicking anywhere (sets a CSS class that triggers immediate transition to the grid state).
**Skeleton Loading Pattern:**
Each card in the grid implements a **skeleton-loading** pattern during the boot sequence and during any simulated data transitions. Before a card's content appears, it displays animated placeholder shapes: a rectangle for the title (60% width, 18px height), two rectangles for body text (100% and 80% width, 14px height), and a small square for the category label. These skeletons are rendered in Panel Slate (#1c2433) with a shimmer animation -- a diagonal gradient of slightly lighter (#242d3d) sweeping left-to-right over 1.5 seconds on infinite loop. The skeletons for each card resolve (crossfade to actual content) with a staggered delay: the first card resolves after the boot sequence completes, each subsequent card resolves 80ms later, creating a cascade effect across the grid that visually echoes the way data populates a real dashboard. This is a purely aesthetic animation -- all content is static HTML, not actually loaded asynchronously.
**Card Interaction Micro-Behaviors:**
- **Hover:** Card border transitions from Slate Wire to Persimmon Signal over 200ms. The card's left-border accent color increases in width from 4px to 6px (CSS transition). No scale change, no shadow -- the interaction is restrained and informational, not playful.
- **Active/Click:** Card background briefly flashes to a slightly lighter Panel Slate (#232d3f) for 100ms, simulating a button press on a hardware panel.
- **Category Filtering (Optional Enhancement):** If implemented, clicking a card's category label highlights all cards sharing that category by dimming non-matching cards to 40% opacity. No page reload, pure CSS class toggling via minimal JavaScript.
**Scrollbar and Overflow:**
The main grid container uses `overflow-y: auto` with custom scrollbar styling: 4px width, Indigo Ink (#3d4f7c) thumb on Reiwa Dark (#121820) track. On WebKit browsers, styled via `::-webkit-scrollbar`. The thin scrollbar reinforces the terminal aesthetic -- it is infrastructure, not decoration.
**Animation Approach:**
All animations use CSS only (no JavaScript animation libraries). Timing functions are predominantly `cubic-bezier(0.4, 0, 0.2, 1)` (Material Design standard easing) for UI transitions and `steps(N)` for typewriter effects. No spring physics, no elastic easing -- the motion language is mechanical and precise, befitting a system interface. Total JavaScript on the page should be under 40 lines: clock update, era date calculation, seasonal color shift, boot sequence skip handler, and optional category filtering.
**AVOID:** CTA buttons, pricing blocks, testimonial carousels, hero images, stat-counter grids, gradient backgrounds, rounded corners, box shadows, parallax scrolling, playful micro-interactions. This site is an information terminal, not a marketing page.
## Uniqueness Notes
**Differentiators from other designs:**
1. **Zero-Photography Terminal Information Grid:** While 72% of existing designs use photography and 95% use minimal imagery in the conventional sense, reiwa.boo uses absolutely no photographic or illustrative imagery. Every visual element is typographic, geometric, or generated via CSS filters (noise texture, grid markers). The card-grid layout (10% frequency) serves as both structure and visual identity -- the grid IS the imagery.
2. **Frutiger-Clean Meets Monospace Tension:** The typography system pairs a Frutiger-tradition humanist sans-serif (Nunito Sans, 1% frequency for frutiger-clean category) with a programming monospace (Fira Code). This pairing -- clean humanist for UI chrome, technical mono for content -- inverts the typical terminal aesthetic where everything is monospaced. The result is a hybrid that feels more like a well-designed civic infrastructure system than a developer tool.
3. **Seasonal Color Mutation via Japanese Calendar:** No other design in the portfolio implements time-based color shifting tied to a cultural calendar system. The accent color's seasonal drift (cherry in spring, indigo in summer, persimmon in autumn, gray in winter) means the site literally looks different depending on when you visit, and the variation is rooted in a specific cultural tradition (kasane no irome) rather than arbitrary randomization.
4. **Skeleton-Loading as Aesthetic Choice:** While skeleton-loading appears in only 4% of existing designs and is typically used for functional loading states, here it is repurposed as a purely visual narrative device -- the skeletons are the boot sequence, creating the fiction that data is populating the terminal. The staggered 80ms cascade across the card grid produces a visual wave effect that is unique in the portfolio.
5. **Hanko Seal as Cultural Signature:** The integration of a traditional Japanese personal seal (hanko) as a design element -- rendered in CSS with intentional imperfection (rotation, grain overlay) -- creates a moment of handmade humanity within the otherwise mechanical terminal interface. This cultural-motifs approach (7% frequency) is grounded in a specific artifact rather than generic "cultural" decoration.
**Seed:** aesthetic: terminal, layout: card-grid, typography: frutiger-clean, palette: analogous, patterns: skeleton-loading, imagery: noise-texture, motifs: cultural, tone: professional
**Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), mono-only typography (99%), warm palette (100%), scroll-triggered animation (96%), minimal imagery (95%), vintage motifs (88%), friendly tone (98%). Every seed dimension was chosen from the lower-frequency range of its category.