# Design Language for reiwa.boo ## Aesthetics and Tone **reiwa.boo** is a **crystalline terrarium suspended in amber light** — the meeting point of Japan's current imperial era name (*reiwa*, "beautiful harmony") with the gentlest possible digital exhale (*.boo*). The site is not a product page. It is a slow, meditative unfolding: the way a morning frost forms fractals on a window, the way light bends through a faceted river stone, the way a single cedar branch holds snow without breaking. The aesthetic is **inflated-3d softened by earth** — volumetric shapes that feel like they were pressed from warm clay and left to cure in indirect sunlight, not rendered in a GPU shader farm. Every element has gentle convex curves, as though filled with breath. Shadows are warm amber, not cool gray. Specular highlights are diffused, like dull polished wood rather than chrome. The overall effect is organic inflat — pillowy ceramic, a slightly puffed pebble, a lens made of beeswax. Tone is **calm-serene at maximum depth**. No urgency, no bounce-in animations that demand attention. The page breathes at 0.8 breaths per minute. Visitors are invited to slow their scroll. The visual language is drawn from: Yoshida Hiroshi's woodblock atmospheric gradients, Shoji Hamada's stoneware glazes, traditional Japanese *kumiko* geometric lattice woodwork, and the cross-sections of minerals — obsidian, chrysoprase, tiger's eye. ## Layout Motifs and Structure The composition is a **bento-box grid**, but not the SaaS marketing kind. This bento is a *jubako* (stacked lacquerware box for special occasions) — each cell is a contained world with its own micro-atmosphere, proportioned with the precision of a kaiseki course arrangement. No cell is arbitrary in size. **Macro grid (desktop):** - The viewport is divided into a 12-column × 8-row CSS grid with 16px gutters. - The primary hero cell spans columns 1–8, rows 1–4 — a wide rectangular panel in the top-left, like the largest compartment in a bento. - A tall narrow cell spans columns 9–12, rows 1–6 — a side column with vertical text and a rotating crystalline motif. - Three equal square cells fill columns 1–4, 5–8, 1–4 across rows 5–8, 5–8, 5–8 — like three smaller compartments below the main dish. - One full-width cell spans all 12 columns, rows 7–8 — a footer horizon line with the domain wordmark. **Zoom-focus pattern:** - On scroll, individual bento cells breathe: the active/hovered cell expands to `scale(1.04)` via `transform`, drawing focus with a depth-of-field metaphor — the surrounding cells dim to `opacity: 0.6` and `filter: blur(0.5px)`. - This creates a natural focal lens that moves through the grid as the visitor scrolls, as if a loupe is tracking across a mineralogy display case. **Spatial language:** - Cells have `border-radius: 24px` on desktop, `16px` on mobile — rounded but not bubbly. - Each cell casts a warm inset shadow `inset 0 2px 12px rgba(160, 110, 60, 0.12)` and an outer shadow `0 8px 32px rgba(80, 50, 20, 0.18)` suggesting depth without theatrical drama. - The grid itself has no background — it is the page that breathes, not a container sitting on a page. **Mobile:** - Bento cells stack in a single column with 12px gaps, each filling the full viewport width. The zoom-focus pattern transforms into a swipe-left/swipe-right gesture: swiping to the next cell smoothly scales the incoming cell up and the outgoing cell down. ## Typography and Palette **Palette — earth-tones with crystalline mineral accents:** - `#f5ede0` — warm cream parchment (base background, like unglazed porcelain) - `#2c1e12` — deep umber (primary text, like sumi ink diluted 80%) - `#8b5e3c` — burnt sienna clay (primary accent, cell borders, active states) - `#c9a87c` — warm sand (secondary text, metadata, captions) - `#4a6741` — muted sage green (crystalline accent, active bento cell pulse glow) - `#7c6d5e` — weathered driftwood (dividers, subtle strokes, icon fills) - `#e8d5bc` — bleached linen (card surfaces, cell interiors) - `#1e3028` — deep forest shadow (footer band, darkest surfaces) **Typography — variable-fluid, all Google Fonts:** - **Display / Wordmark:** `Noto Serif JP` — weight 300 for the main wordmark `reiwa.boo`, set at `clamp(4rem, 10vw, 9rem)`. The Noto Serif JP at this weight has a calligraphic tension between hairline and stem that evokes a brush character without cosplay. The `.boo` suffix shifts to weight 100, creating a whisper after the name. - **Section titles:** `Cormorant Garamond` — variable font, weight `wght` axis from 300 to 700, used at `clamp(1.8rem, 4vw, 3.2rem)`. Titles animate from weight 300 to 600 on viewport entry, as though a brushstroke is thickening. - **Body / prose:** `Source Serif 4` — optical-size axis at `opsz 16`, weight 400, set at `clamp(0.95rem, 1.4vw, 1.1rem)`, line-height 1.75. The optical-size variation gives it warmth at small sizes without heaviness at large. - **Labels / metadata / UI:** `DM Sans` — weight 300, tracking `0.08em`, uppercase for category labels only. Used sparingly — only captions, timestamps, and the one-line nav. **Variable fluid usage:** - `font-size: clamp()` on all headings, ensuring the grid cells breathe typographically as they scale. - Cormorant Garamond's `wght` axis is animated via CSS `@keyframes` on scroll-triggered class: `font-variation-settings: 'wght' 300` → `'wght' 620` over 0.6s ease-out. ## Imagery and Motifs **Imagery — line-illustration:** All visual content is hand-drawn-style SVG line illustration, never photographs. The illustration style is **mineralogy specimen diagrams crossed with Japanese botanical woodblock**: thin lines (0.8–1.2px stroke), minimal fill (only inside crystalline facets, using semi-transparent earth-tone fills at `opacity: 0.12`), and precise geometric construction that reveals the inner structure of objects. Illustrations per bento cell: - **Hero cell:** A large cross-section of a geode — the outer rough skin fading to a crystalline interior of quartz points. Drawn as concentric layers of line hatching, with the innermost crystal points rendered as clean geometric outlines. Animated: on page load, the crystal points grow from the center outward using SVG `stroke-dashoffset` animation over 2.4s. - **Side column:** A vertical series of three botanical cross-sections — a persimmon, a lotus seed pod, and a pine cone — stacked with their structural axes aligned. Each shows the interior geometry as if in a scientific illustration, but rendered with the restraint of a *sumi-e* sketch. - **Small cells:** Each holds one mineral cross-section in miniature: obsidian with its conchoidal fracture pattern, tiger's eye with its silky fibrous lines, and chrysoprase with its waxy smooth form. These are pure outline drawings, no fill. - **Footer cell:** A single continuous horizon line — a mountain silhouette rendered as a thin ink stroke, with the reiwa kanji (令和) appearing as a watermark at `opacity: 0.06`. **Crystalline motifs:** The crystalline motif appears at three scales: 1. **Macro:** The geode hero illustration. 2. **Meso:** Faceted polygon overlays on bento cell borders — each cell's corner has a tiny chamfer cut rendered as a 1px line, as if the corners were beveled like a cut stone. 3. **Micro:** The hover/focus glow on interactive elements pulses with a faceted halo — not a smooth circle, but a 12-sided polygon glow using `clip-path: polygon()` animated to rotate at 1rpm via CSS `@keyframes`. ## Prompts for Implementation Build reiwa.boo as a **single-page meditative mineral cabinet** — a place where each bento cell is a specimen drawer being gently pulled open. There is no conversion goal. There is no call-to-action. The experience is the content. **Macro structure (CSS Grid, desktop):** ``` [ Hero: Geode cross-section + wordmark ] [ Crystal column ] [ Hero: Geode cross-section + wordmark ] [ Crystal column ] [ Obsidian cell ] [ Tiger's Eye ] [ Chrys. ] [ Crystal column ] [ Full-width horizon footer ] ``` **Implementation notes:** 1. **Grid:** Use CSS Grid with `grid-template-columns: repeat(12, 1fr)` and `grid-template-rows: repeat(8, minmax(80px, auto))`. No flex-anywhere fallbacks in the grid — pure CSS Grid only. 2. **Zoom-focus (zoom-focus pattern):** Use `IntersectionObserver` to track which cell is nearest the viewport center. Apply `--active` class to that cell. CSS: ```css .bento-cell { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease, filter 0.4s ease; } .bento-cell.--active { transform: scale(1.04); opacity: 1; filter: blur(0); } .bento-cell:not(.--active) { transform: scale(1); opacity: 0.62; filter: blur(0.4px); } ``` 3. **SVG geode animation:** The hero geode SVG has crystal points as `` elements with `stroke-dasharray` equal to their own `getTotalLength()`. On `DOMContentLoaded`, remove a class that sets `stroke-dashoffset` to the full length, triggering a CSS transition. Each crystal point staggers by `0.15s * index`. 4. **Variable font animation:** On viewport entry (IntersectionObserver threshold 0.3), section headings in Cormorant Garamond transition: ```css @keyframes weight-grow { from { font-variation-settings: 'wght' 300; } to { font-variation-settings: 'wght' 620; } } .heading-enter { animation: weight-grow 0.7s ease-out forwards; } ``` 5. **Earth-tone layering:** Each bento cell has a subtly different background: the hero cell uses `#f5ede0`, the side column uses `#e8d5bc`, the three small cells use `#ede3d4`, `#e6ddd0`, `#ead9c8` respectively (all within the parchment-linen range), and the footer uses `#1e3028`. This creates the impression of different wood types in a lacquerware box — unified family, individual grain. 6. **Crystalline chamfer borders:** Each cell's border is not a simple rectangle. Use `clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px)` to create the cut-corner gem effect. Layer a 1px pseudo-element border using the same clip-path. 7. **Scrolling behavior:** Set `scroll-behavior: smooth` and `scroll-snap-type: y proximity` on the page container, with `scroll-snap-align: start` on each row of bento cells. This creates gentle magnetic stops at each row without hard snapping. 8. **No CTAs, no pricing, no statistics:** The page contains only: the wordmark, a brief (2–3 sentence) Japanese-inflected prose poem about the domain name, the specimen illustrations, and a footer with the domain rendered as a monogram. 9. **Color mode:** Single palette only — the warm earth parchment. No dark mode toggle. The forest-dark footer (`#1e3028`) is the single dark accent and serves as the close of the composition, like a lacquer lid. 10. **Performance note (aesthetic):** All SVG illustrations are inline — no external image requests. The only external assets are the three Google Fonts loaded via `display=swap`. ## Uniqueness Notes **Differentiators from existing designs:** 1. **Crystalline as structural logic, not decoration.** Most designs using crystalline motifs apply them as texture overlays or background patterns. reiwa.boo uses the crystalline facet as the *governing geometry* of the layout system — cell corners, hover halos, polygon clip-paths, and geode interior structure all derive from the same 12-sided faceted language. The crystal is the grid. 2. **Variable font weight as narrative pacing.** The `wght` axis on Cormorant Garamond animates on scroll entry to thicken from hairline to semi-bold, creating a typographic equivalent of a brushstroke being applied — making the text's own rendering the micro-animation. No other design in the frequency analysis uses `font-variation-settings` animation as a primary storytelling device. 3. **Bento-box as mineralogy display case, not marketing grid.** The bento-box pattern in the frequency analysis (5%) is consistently used for SaaS feature grids and product showcases. reiwa.boo inverts this: each cell is a specimen drawer, the zoom-focus lens mimics a loupe on a gemstone table, and the cell contents are illustrations rather than feature descriptions. The grid is a *cabinet of curiosities*, not a features matrix. 4. **Noto Serif JP weight 300 as the wordmark font.** The `.boo` TLD treated as a whisper — the weight drops from 300 to 100 mid-wordmark — creates a typographic pause that no other design in the corpus uses. The Japanese script system embedded in the font family gives the wordmark inherent calligraphic authority without custom lettering. 5. **Earth-tones palette at full geological depth.** The frequency report shows `earth-tones` at 3% but typically implemented as warm-brown-on-cream. reiwa.boo extends the palette downward to mineral shadow (`#1e3028` forest deep) and upward to sage-crystalline (`#4a6741`), creating a full geological cross-section — surface soil, sub-soil, mineral vein, and bedrock — all within the earth-tone family. **Planned seed:** `aesthetic: inflated-3d, layout: bento-box, typography: variable-fluid, palette: earth-tones, patterns: zoom-focus, imagery: line-illustration, motifs: crystalline, tone: calm-serene` **Avoided patterns (from frequency analysis):** - `photography` (87% — most overused imagery type, avoided entirely) - `minimal` (44% — second most overused imagery, avoided) - `centered` layout (dominant in corpus, avoided in favor of asymmetric bento grid) - CTA-heavy structures (corpus trend, explicitly excluded) - Cool/gray shadows (replaced with warm amber shadows throughout)