# Design Language for reiwa.bar ## Aesthetics and Tone **Concept: Gilded Tide — an opulent watercolor world where tropical baroque meets the stillness of Japanese negative space.** reiwa.bar inhabits the tension between lavish excess and reverent pause. "Reiwa" (令和) — Japan's current imperial era — translates roughly as "beautiful harmony," and the site wears that name as both anchor and license: harmony achieved not through reduction but through the deliberate placement of golden abundance against long stretches of breathing room. Imagine a Japanese lacquer box inlaid with tropical fish motifs, opened in a sunlit drawing room, each specimen painted in watercolor so luminous it seems backlit from within. The tone is **opulent-grand**: not the cold luxury of minimalist design brands, but the warm, almost theatrical grandeur of a private collector's cabinet — silk brocade, amber varnish, the scent of cedar and salt. Every element feels chosen, weighted, precious. The emptiness between elements is not absence but air — the ma (間) that makes the objects sing. Watercolor governs the visual language: irregular wash edges, blooming pigment halos, the faint texture of cold-press paper beneath every surface. Colors bleed at their borders rather than holding hard edges. Nothing is perfectly contained. The imperfection is the point — it signals hand, time, care. ## Layout Motifs and Structure **Ma-negative-space architecture: objects suspended in breath.** The page is structured as a sequence of vast negative-space fields interrupted by concentrated moments of visual density. Think of the layout as a Japanese scroll painting — long horizontal or vertical passages of paper-white (or deep burnt-amber), punctuated by intensely detailed scenes. **Structural principles:** - **Primary canvas:** Off-white washi texture (#FEFAF4), occupying 65–75% of any given viewport. This is not blank — it has a subtle noise grain that reads as fine paper fiber. - **No conventional grid:** Elements sit in asymmetric positions arrived at through optical balance, not columns. A fish motif at 20% from left at 35% from top. A heading that begins at 60% width. These are compositional, not systematic. - **Zoom-focus reveal pattern:** As the visitor scrolls, individual elements — a single tropical fish, a calligraphic heading, a dripped watercolor stain — zoom into focus from slightly blurred and undersized, as if the eye is settling on a detail in a painting. The zoom is gentle (0.92 → 1.0 scale, blur 4px → 0px), over 600ms with `ease-out` easing. - **Island sections:** Content blocks appear as self-contained islands with generous padding (min 120px vertical), never touching each other. Between islands: pure negative space. - **Vertical rhythm built on 8px but expressed loosely:** The grid exists as scaffolding the eye never sees. Headings land at multiples of 56px from each other; body text maintains 1.8 line height; all alignment is felt, not ruled. - **One full-viewport hero:** The opening section is 100svh — the domain name in Commissioner at 15vw, a single large tropical fish watercolor drifting in the lower-right quadrant, and nothing else. ## Typography and Palette **Typeface system — Commissioner + Cormorant Garamond, from Google Fonts.** - **Display / Wordmark:** [Commissioner](https://fonts.google.com/specimen/Commissioner), weight 300 (Light) and 700 (Bold) used in extreme contrast. The variable nature of Commissioner allows subtle weight transitions on hover — thin strokes thickening as if ink is being pressed deeper into paper. Used at 10vw–15vw for hero text, 2.4rem–3.6rem for section headings. - **Editorial body:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), Italic weight, 18–20px. For all narrative text — the italic register evokes old correspondence, collector's notes, the caption beneath a natural history plate. - **Accent / Detail:** [Commissioner](https://fonts.google.com/specimen/Commissioner) weight 200 (Extra Light), tracked at 0.18em, in small-caps for labels, dates, and taxonomic-style callouts (e.g., "Zanclus cornutus — Moorish Idol"). **Palette — burnt-orange with deep amber, washi white, and tropical accent:** - `#C85A1E` — Primary burnt orange: used for the wordmark on hover, watercolor wash accent areas, and fish fin highlights - `#FEFAF4` — Washi white: the primary background, reads as warm paper - `#2C1A0E` — Deep espresso: primary text color, as dark as aged ink - `#E8A44A` — Golden amber: secondary accent, used in gradient washes and the gilded-edge motif on section boundaries - `#8B3A12` — Burnt sienna: the darkest orange used in shadow areas of watercolor fish illustrations - `#F5E6C8` — Pale champagne: alternate background for island sections, slightly warmer than washi white - `#4A8FA8` — Tropical teal: the counterpoint — used sparingly in fish scale highlights and the rare interactive hover state, creating the shock of a tropical fish's iridescent stripe against warm amber ground - `#1C3D4A` — Deep ocean: text color for callouts set against the amber background sections **Type scale:** - Hero: Commissioner 300 at 13vw, letter-spacing -0.02em - Section head: Commissioner 700 at 3.2rem - Body: Cormorant Garamond Italic at 19px / 1.85 line height - Label: Commissioner 200 small-caps at 11px / 0.18em tracking ## Imagery and Motifs **All illustration is inline SVG with CSS watercolor simulation. No stock photos.** **The tropical fish roster (each rendered as a primary visual element):** - **Threadfin Butterflyfish** (*Auriga butterflyfish, C. auriga*) — the hero specimen. Rendered in golden-white with a black eyespot and burnt-orange posterior. Used at 380–440px wide in the hero section, slightly rotated (-8deg), watercolor blooms radiating from its body as if paint is still wet. - **Moorish Idol** (*Zanclus cornutus*) — black, white, and amber stripes. Used as a transitional motif between sections, appearing at 160px, at 40% opacity, as if seen through gauze. - **Flame Angelfish** (*Centropyge loricula*) — vivid red-orange bars on an orange ground. Used in the most opulent section as a focal anchor, painted large (300px) with intense pigment concentration at center fading to washed edges. - **Blue Tang** (*Paracanthurus hepatus*) — the single teal presence. Used once, small (80px), in a far corner of a negative-space section. Its teal body is the lone cool accent in an otherwise warm painting — a deliberate compositional shock. **Watercolor texture techniques (CSS + SVG filter):** - `feDisplacementMap` on SVG fish outlines to create irregular, paint-bloomed edges - `feTurbulence` + `feColorMatrix` overlaid at 8% opacity across sections to simulate cold-press paper grain - CSS `mix-blend-mode: multiply` on watercolor wash shapes over the washi background — so the wash layers read as transparent pigment - Drip marks: thin SVG paths with stroke-width 1–2px in `#C85A1E` at 30% opacity, trailing below fish illustrations like wet paint drips **Decorative motifs:** - **Gilded frame fragments:** Partial corner ornaments in `#E8A44A` at 1px stroke — not full frames, just suggestions of Victorian natural history plate borders - **Kanji watermarks:** The characters 令和 (Reiwa) appear at 200px height, 4% opacity, as background watermarks in sections - **Noise texture overlay:** A CSS `backdrop-filter` noise layer (SVG feTurbulence, baseFrequency 0.65) over the entire page at 3% opacity creates unified paper texture across all sections ## Prompts for Implementation **The story to tell.** A collector acquired a set of hand-painted natural history plates of tropical fish — they were made during the Reiwa era, by an artist who studied both Edo-period ukiyo-e fish prints and Victorian natural history illustration. The site is the collector's private archive, opened to a few. There are no calls to action. There is no pricing. There is the presentation of beautiful, specific things. **Hero section (100svh):** Full washi-white ground (`#FEFAF4`) with paper-grain noise overlay. The wordmark `reiwa.bar` in Commissioner 300, 13vw, `#2C1A0E`. Below it, in Commissioner 200 small-caps tracked at 0.2em: `a cabinet of tropical fish, reiwa era`. The Threadfin Butterflyfish SVG illustration occupies the lower-right 40% of the viewport — not contained, allowed to overflow the edge slightly, as if the painting extends beyond the frame. As the page loads, the fish zoom-focuses into sharpness from scale 0.93 + blur 3px over 800ms. **Section: "On the species" (scroll-triggered):** Long negative-space passage (200px of washi white) followed by a dense content island: the Moorish Idol at left, a 280-word collector's note in Cormorant Garamond Italic at right, describing the specimen with taxonomic precision and personal warmth. The Moorish Idol enters via zoom-focus (scale 0.90 → 1.0, blur 5px → 0px) as the section enters the viewport. **Section: "The flame" (full-bleed amber wash):** A full-viewport section with background `#F5E6C8` transitioning to a large watercolor wash in `#E8A44A` at 40% opacity (CSS radial gradient + mix-blend-mode multiply). The Flame Angelfish anchors center-left. Heading: Commissioner 700 `THE FLAME ANGELFISH` at 2.8rem, `#8B3A12`. A 160-word specimen note in Commissioner 200 small-caps at right. **Section: "The blue" (the teal interruption):** Returns to washi white. Long empty passage. Then, in the far lower-left: a single small Blue Tang at 80px, labeled in Commissioner 200 small-caps `BLUE TANG / 5cm / PACIFIC`. No other content in the section. The vast emptiness around it is the point — the ma that makes the blue feel precious. **Scrolling and interaction behavior:** - Zoom-focus pattern triggers for every fish illustration and major heading as they enter the viewport (IntersectionObserver, threshold 0.2) - Fish illustrations respond to mouse proximity: within 100px, the fish tilts toward the cursor by 3–5deg (CSS transform rotate), as if acknowledging the observer — a slow, 400ms ease-out response - Commissioner wordmark weight animates on hover: font-variation-settings `'wght' 300` → `'wght' 600` over 300ms - No page transitions. No loading screens. The experience is simply: scrolling a painting. **Avoid entirely:** navigation bars with multiple links, card grids, stat counters, testimonial carousels, pricing tables, hero buttons, footer link columns, any element that reads as "website" rather than "archive." ## Uniqueness Notes 1. **Ma-negative-space with watercolor tropical fish — unrepeated combination.** Negative-space layout (3% frequency) is rare; tropical fish motifs (3%) are rare; watercolor aesthetic (9%) is uncommon; their intersection with the opulent-grand tone (4%) and burnt-orange palette (3%) creates a design space that does not exist elsewhere in the registry. The nearest neighbors (botanical illustration, nature-elements) share the hand-painted register but never combine Japanese spatial philosophy with Victorian natural history taxonomy and a warm amber palette. 2. **Commissioner as the primary display face for an opulent aesthetic.** Commissioner (2% typography frequency) is underused across the registry, and it has never been paired with an opulent-grand tone — it has appeared in utilitarian and editorial contexts. Using its variable weight axis as an interaction mechanism (thin strokes thickening like ink pressed into paper) is novel. 3. **Zoom-focus as the sole interaction pattern, not scroll-parallax.** Parallax is the dominant scroll pattern at 75% frequency. This design deliberately uses zoom-focus (3% — underused) as its single scroll animation language. The choice is philosophically motivated: parallax implies layers and depth; zoom-focus implies attention, the collector's eye settling on a specimen. 4. **Diegetic noise texture:** The paper grain is not decorative — it is the medium the illustrations exist within. All content lives on paper, not on a screen. This is achieved through a single unified feTurbulence filter layer rather than multiple image overlays, ensuring the grain is consistent and computationally light. 5. **The single teal interruption as structural device.** The Blue Tang section uses color theory deliberately: after four sections of warm amber and orange, the single appearance of `#4A8FA8` (tropical teal) in a vast empty field creates the most memorable moment in the scroll — the collector saving the rarest specimen for last. **Seed used:** aesthetic: watercolor, layout: ma-negative-space, typography: commissioner-versatile, palette: burnt-orange, patterns: zoom-focus, imagery: noise-texture, motifs: tropical-fish, tone: opulent-grand **Avoided patterns (overused):** parallax (75%), centered layout (84%), full-bleed (65%), warm palette (89%), gradient (77%), vintage motifs (35%), mono typography (74%)