# Design Language for reiwa.day

## Aesthetics and Tone

**reiwa.day** lives at the intersection of Frutiger Aero's luminous optimism and the quiet rhythm of the Japanese Reiwa era — the era of "beautiful harmony." The aesthetic draws from early 2010s OS X screen savers meeting a Tokyo weather dashboard: translucent glass surfaces lit from within by warm amber light, soft water droplets beading on frosted glass panels, and a calm data-visualization layer beneath that shows the day unfolding like a slow tide chart.

The mood is **warm morning light through condensation on a train window** — not the cold blue of most data-viz dashboards, but earthy ambers, toasted wheat, and the deep terracotta of a clay roof tile at sunset. Frutiger Aero's signature characteristics are present: glossy surfaces with interior illumination, soft specular highlights on every rounded corner, lush organic textures (water, wood grain, moss) coexisting with crisp digital readouts, and a pervasive sense of depth through layered translucency.

Tone is **friendly and contemplative**: this is a gentle daily companion page — like a morning newspaper on linen paper held by someone in no particular hurry. There is data here, but it does not alarm. It informs and then lets you breathe.

Key aesthetic references:
- macOS 10.7 Lion's translucent menu bars at dawn
- A Japanese eki-mae kissaten's (station-front coffee shop) steam-lit window in early autumn
- The warm amber of a Braun radio dial, paired with the soft glossy plastic of an early iPhone weather widget
- JR station departure boards with their gentle tick-tock flip of numerals
- Water on glass: the specular bloom of a single droplet on a frosted panel

## Layout Motifs and Structure

The page uses a **Z-pattern reading flow** — the canonical web attention path — but given a **landscape orientation treatment** inspired by Japanese timetable boards: the eye traces diagonally from the top-left wordmark across a wide data-ribbon, down through a focal visualization well, and across to a quiet right-side temporal anchor.

**Macro structure (top-to-bottom):**

1. **Top rail (Z-leg 1):** Full-width frosted glass header bar. Left: wordmark `reiwa.day` in tech-mono caps. Right: current date in Japanese era format (令和X年X月X日) alongside a live 24-hour wheel. The rail sits 72px tall, 2px bottom border in warm amber at 30% opacity, with a glossy top-edge highlight (1px `rgba(255,255,255,0.4)` line).

2. **Diagonal accent (Z-stroke):** A single diagonal ribbon — 4px wide, a warm amber gradient at 60% opacity — cuts from the end of the top rail to the start of the main visualization well. This is the Z-stroke made visible. It carries a subtle bubble-train animation: small translucent spheres rise along the diagonal, lensing what's behind them (Frutiger Aero's signature glossy bubble motif).

3. **Main visualization well (center focus):** A 16:9 frosted glass panel, full viewport width at max-width 1200px, centered. This is the day's primary data layer. It shows a 24-hour arc chart — the current hour glowing with a warm amber bloom, past hours dimming to earthy taupe, future hours rendering as pale cream outlines. The arc is drawn over a radial gradient background: deep terracotta `#7C3B1E` at the center burning out to warm cream `#F5EDD6` at the edges.

4. **Bottom rail (Z-leg 2):** A quieter horizontal strip. Left: a small rolling set of data panels (weather conditions, day of week in English and Japanese, solar time data). Right: a single glowing "today" capsule button — rounded, glossy, with a faint aqua-green bead highlight on the top edge (Frutiger Aero's signature plastic sheen).

**Spatial rules:**
- 40px horizontal padding on all edges
- Sections separated by 32px gaps, never by hard lines
- Rounded corners universally at 16px radius
- Everything lives on a base of warm cream `#F5EDD6` — no white, no pure black
- Drop shadows are always warm amber-tinted, never cool gray: `box-shadow: 0 8px 32px rgba(120, 60, 20, 0.12)`

## Typography and Palette

**Typography (Google Fonts only):**

Primary typeface — **[Space Mono](https://fonts.google.com/specimen/Space+Mono)**: The tech-mono workhorse of the design. Used for all numerals, time displays, data labels, and the main wordmark. Its slightly quirky fixed-width forms (the distinctive curved `a` and `g`) give the digital data a warm personality rather than cold precision. Set wordmark at `clamp(28px, 4vw, 52px)`, regular weight, tracking `0.08em`. Date/time displays at `clamp(14px, 1.8vw, 20px)`, tracking `0.04em`.

Secondary typeface — **[Noto Sans JP](https://fonts.google.com/specimen/Noto+Sans+JP)**: Used exclusively for Japanese era-date annotations, haiku-fragment captions beneath data panels, and the occasional kanji decorative accent. Weight 300 for captions, weight 500 for the era label. The Noto family's clean humanist strokes pair naturally with Space Mono's techy character.

Tertiary typeface — **[DM Sans](https://fonts.google.com/specimen/DM+Sans)**: Used for all prose text, UI labels, and the brief descriptive sentence that appears below each data panel. Variable weight from 300 to 600. At 15px/1.65 line-height for body. This keeps the interface feeling approachable rather than purely technical.

**Palette:**

| Role | Name | Hex |
|------|------|-----|
| Background base | Warm Cream | `#F5EDD6` |
| Surface panel | Frosted Linen | `#EDE4CC` |
| Warm amber primary | Amber Glow | `#D4820A` |
| Data accent — current | Terracotta Bloom | `#B85C28` |
| Data accent — past | Dusty Umber | `#8B6347` |
| Data accent — future | Pale Wheat | `#E8D9B5` |
| Deep ground | Dark Clay | `#3D2414` |
| Text primary | Ink Walnut | `#2A1A0E` |
| Text secondary | Warm Slate | `#6B5040` |
| Bubble highlight | Aqua Lens | `#A8D8CF` |
| Glass edge | Cream White | `#FAF6EE` |

All surfaces use warm-tinted translucency. Glass panels are rendered with `backdrop-filter: blur(16px) saturate(1.4)` against the warm cream background, creating a gentle depth stack without coolness.

## Imagery and Motifs

**No photography.** All visual elements are generated SVG or CSS-rendered.

**1. Bubble-playful lensing spheres (Frutiger Aero signature)**
The Z-diagonal carries a stream of translucent spheres: each bubble is an SVG `<circle>` with a radial gradient from `rgba(255,255,240,0.7)` at center to `rgba(200,170,120,0.2)` at edge, a small specular highlight dot at 25%/25% in `rgba(255,255,255,0.9)`, and a subtle teal crescent at the bottom edge for the aqua lens effect (`#A8D8CF` at 40% opacity). Bubbles range from 12px to 36px diameter. They drift upward along the Z-diagonal at 8–18 second intervals, with gentle wobble via CSS keyframe animation (`translateX(±4px)` sinusoidal oscillation). 7 bubbles active at any time, staggered with random delays.

**2. 24-hour arc data visualization**
The central panel renders a radial arc clock — not a standard clock face but a **weather-arc style chart** familiar from iOS weather widgets of the early 2010s. The arc runs from 6 AM at the left to 6 AM the next day at the right, spanning 330° of a circle. The current time is marked by a warm amber glow-point that radiates outward in a soft bloom (CSS `filter: drop-shadow(0 0 12px #D4820A)`). Each hour tick is a small rounded rect: past ticks are terracotta at 80% opacity, future ticks are pale wheat at 40%, and the current hour tick pulses gently in amber at full opacity.

**3. Water-droplet condensation texture**
The frosted glass panels carry a subtle CSS noise overlay — a `background-image: url('data:image/svg+xml,...')` with a handful of tiny hand-crafted SVG water droplet shapes (2–8px, teardrop silhouettes) scattered pseudo-randomly at 6% opacity in `#D4820A`. This references the "dewy glass" aesthetic central to Frutiger Aero without heavy image loading.

**4. Era kanji decorative accent**
In the far upper-right corner, the kanji `令和` is rendered at 120px, Space Mono fallback to Noto Sans JP, in `#3D2414` at 8% opacity — a large ghosted watermark that bleeds past the top rail. This anchors the page's cultural identity quietly, the way a washi paper maker might press a barely-visible mon into the page.

**5. Bottom data panels: mini bento tiles**
Four 160×100px rounded-rect tiles in the bottom rail, each with a glass surface, containing: (a) weather symbol (SVG sun/cloud/rain drawn in single amber stroke), (b) one numeric value in Space Mono large, (c) a two-line label in DM Sans 13px. Tiles are spaced 16px apart, hover state lifts 4px with an enhanced drop shadow and increases the inner glass opacity slightly.

## Prompts for Implementation

**The story to tell:** A visitor opens reiwa.day in the quiet of the morning. The page is a single luminous window — like the soft glow of an old CRT through linen, or a train departure board lit warm in a misted station. The site does not demand anything. It simply presents the shape of today: the arc of hours, the era we inhabit, the weather outside the window. It is a contemplative daily start page dressed in the visual language of a better-optimistic internet.

**Implementation narrative:**

Build the page as a **single full-viewport experience** with no scrolling on desktop. Everything fits within 100vh. On mobile, a gentle single-column reflow stacks the Z-legs vertically.

**Opening sequence (JavaScript-driven, fires once on load):**
1. Background fades in from pure `#2A1A0E` to `#F5EDD6` over 1.2 seconds (`ease-out`)
2. Top rail slides down from above (`translateY(-72px)` to `0`) over 0.6s, delay 0.8s
3. Main visualization well fades in from opacity 0 and `scale(0.97)` to full, over 0.8s, delay 1.2s — this is the `fade-reveal` pattern made tactile: the panel surfaces as though a curtain of mist is clearing
4. Bubble stream begins: each bubble initializes with `opacity: 0`, then a staggered `fade-reveal` keyframe starts it at its random position along the diagonal
5. Bottom rail slides up from below (`translateY(60px)` to `0`) over 0.5s, delay 1.6s
6. The era kanji watermark blooms from `opacity: 0` to `0.08` over 2.0s, delay 1.0s — the slowest element, a background presence settling into place

**Z-diagonal bubble animation (CSS keyframes):**
```css
@keyframes bubble-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.1; }
  20%  { opacity: 0.7; }
  50%  { transform: translate(-4px, -40%) scale(1.05); }
  80%  { opacity: 0.5; }
  100% { transform: translate(3px, -100%) scale(0.9); opacity: 0; }
}
```
Each bubble is positioned `absolute` on a `position: relative` diagonal container, with `animation-duration` randomly chosen between 8s and 18s, `animation-iteration-count: infinite`, and `animation-delay` staggered 0–7s.

**24-hour arc chart (vanilla JS + SVG):**
- Use `SVGPathElement` with computed `stroke-dashoffset` to draw the arc progressively as the page loads (not during the opening sequence — let the arc "paint" itself over 1.5s after the panel appears)
- Current-hour indicator: a `<circle r="6">` at the computed angle, with a CSS animation `glow-pulse` (`filter: drop-shadow` alternating between `0 0 6px #D4820A` and `0 0 20px #D4820A`) on a 2.5s `ease-in-out` infinite cycle
- Update the current position every 60 seconds with a smooth arc-tick transition

**Glass panel rendering:**
```css
.glass-panel {
  background: rgba(245, 237, 214, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(120, 60, 20, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
```

**Avoid:** CTA buttons, pricing sections, feature grids, stat counters, testimonial carousels, newsletter signup, hero-above-fold-then-sections structure, dark backgrounds (this design is warm-light only).

**Data-viz bias:** The 24-hour arc is the hero. All other data (weather, solar position) is secondary context, rendered smaller and quieter. Let the arc breathe at the center.

**Frutiger Aero authenticity checklist for implementation:**
- Every interactive element has a glossy highlight: `background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%)` overlay on hover
- Rounded corners everywhere, minimum 12px, prefer 16–24px
- Drop shadows are warm amber, never neutral gray
- The aqua `#A8D8CF` accent appears only as a subtle bubble/lens element — never as a dominant color
- All text is slightly warm: never pure `#000000`, always `#2A1A0E` or `#6B5040`

## Uniqueness Notes

1. **First Frutiger Aero design in the corpus applied to a data-visualization context.** The corpus has Frutiger Aero at only 2%. No prior design in the registry uses Frutiger Aero's glass-and-gloss aesthetic to frame temporal data. Here the glossy bubbles and frosted panels are the literal UI of a 24-hour arc chart — aesthetic and function fused. This is not a landing page dressed in Frutiger Aero; it is a data dashboard that is genuinely of that era.

2. **Z-pattern layout made structurally visible.** Z-pattern is at 2% in the corpus, and no existing design has literalized the Z-path as a design element. Here the diagonal stroke of the Z is a physical animated element — a ribbon of rising bubbles connecting the top-left wordmark to the bottom-right temporal anchor. The Z is not just a reading guide; it is the site's decorative spine.

3. **Warm-earthy palette applied to a tech-mono typeface.** The corpus's data-viz and tech-mono designs (6% each) consistently use cool palettes (midnight blue, electric cyan, terminal green). reiwa.day inverts this: Space Mono renders in warm walnut ink `#2A1A0E` against warm cream `#F5EDD6`, making the monospace type feel handwritten on aged paper rather than displayed on a terminal. This warm-tech-mono combination is not present elsewhere in the registry.

4. **Era-specific cultural grounding.** The Reiwa era (令和, "beautiful harmony," began May 1, 2019) is treated as the conceptual anchor: the page's entire purpose is to make the current day feel situated in this specific historical moment. The era kanji watermark, the Japanese date display, and the data-arc styled after JR timetable aesthetics all converge on a single idea — that today is not generic, it is a day in the era of beautiful harmony. No other registry design grounds its design language in a specific Japanese calendar era.

5. **Avoided overused patterns:** `centered` layout (84%), `full-bleed` imagery (64%), `hand-drawn` aesthetic (58%), `editorial` tone (53%), `spring` animations (33%), `humanist` typography (31%). All five of these dominant corpus patterns are absent from this design.

**Chosen seed:** aesthetic: frutiger-aero, layout: z-pattern, typography: tech-mono, palette: warm-earthy, patterns: fade-reveal, imagery: data-viz, motifs: bubble-playful, tone: friendly
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:48:34
  domain: reiwa.day
  seed: seed:
  aesthetic: reiwa.day** lives at the intersection of Frutiger Aero's luminous optimism and t...
  content_hash: 56b28ddd545c
-->