# Design Language for riron.org ## Aesthetics and Tone **riron.org** inhabits the territory of a 1958 oceanarium gift shop run by a very serious ichthyologist who secretly believes all fish have opinions. The aesthetic is **mid-century modern colliding with a tropical aquarium**: teak-panel warmth, clean Eames-era geometry, and then — swimming through every surface — a school of wildly opinionated tropical fish rendered as flat vector icons. The mood is *whimsical-creative*: not silly, not precious, but genuinely delighted by the strangeness of existence underwater. The domain name *riron* (理論, Japanese: "theory") anchors the site in a posture of intellectual curiosity: every fish is a theory, every theory is a fish. The text voice is that of a museum placard written by someone who has been alone with fish for too long and has begun to appreciate their silence. Visual inspiration: Alexander Calder mobiles, the Eames House living room circa 1955, old Pacific Science Center exhibition signage, vintage Cousteau expedition posters, and the color charts of a 1960s scuba equipment catalog. The page feels like a wall of warm teak and glass with tropical fish pressed between the layers. **Not**: children's aquarium kitsch, corporate blue ocean strategy, tropical holiday resort branding. The fish here are *theorists*, not mascots. ## Layout Motifs and Structure The layout is **hero-dominant**: a single enormous viewport-filling hero panel takes all the oxygen in the room, and everything after it is addendum — footnotes, marginalia, a reading nook at the bottom of the tank. **Hero Panel (100svh)** The full-viewport hero is divided by a **single thick horizontal band** at 38% from the top — the golden ratio's cousin, slightly off-center. The upper zone holds a 14-word site statement in large display type. The lower zone is a deep-ocean gradient field where tropical fish icons drift in slow, non-looping paths. The dividing band is a 4px rule in `#C8A96E` (teak gold), animated via path-draw-svg over 1.2 seconds on load. **Fish Drift Layer**: Behind and below the hero text, 8–12 distinct tropical fish SVG icons float across the viewport on independent CSS `animation` paths. Each fish travels once — left to right, or diagonally — then stops. No loops. Each fish uses a different `animation-delay` (0.3s increments). On page load, they drift in staggered as if entering through a porthole. **Navigation**: A single horizontal nav bar at top, height 56px, background `#0A2A3A` with teak-gold underline-draw on hover. Items are spaced with `letter-spacing: 0.14em` in small caps. The nav does NOT stay sticky past the hero. **Below-hero structure**: Two further sections, each max-width 860px, centered, with generous `padding: 6rem 2rem`. Section 1: a text panel — the "theory" panel — with a large drop cap and a single decorative fish icon in the right margin. Section 2: a grid of exactly 6 fish icons (60px each) arranged in a 3×2 grid, each icon labeled with a mock Latin species name and a one-line "theoretical position" in italics. The grid is the entire footer region. **No sidebar. No dashboard. No modular-blocks.** The structure is vertical, unhurried, and reads like a single exhibit panel in a museum of natural philosophy. ## Typography and Palette **Typography — baskerville-refined, from Google Fonts only.** The typographic system uses Baskerville-lineage typefaces paired with a single geometric sans for navigation labels. Three faces: - **Display / Headlines:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), weight 700 italic, set at `clamp(3.2rem, 7vw, 6.4rem)` for the hero statement. Tracking at `-0.01em`. Renders as warm ink on deep water. - **Body / Theory Text:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville), weight 400 regular, set at `1.15rem / 1.85` line-height. Paragraph indents (`text-indent: 1.5em`) replace the gap between paragraphs — a typeset-book convention that suits the scholarly-whimsical tone. - **Navigation / Labels / Species Names:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 500, uppercase, `font-size: 0.72rem`, `letter-spacing: 0.14em`. Clean 1950s sans-serif rationality against the Baskerville warmth. - **Drop Cap:** The first letter of the theory section is set at `5rem`, Libre Baskerville 700 italic, color `#C8A96E`, floating left with `margin: 0.1em 0.6em 0 0`. **Palette — ocean-deep.** Five colors, all named after mid-century aquarium exhibit paint codes: | Role | Name | Hex | |------|------|-----| | Deep background | Abyssal Navy | `#062030` | | Surface panel | Tidal Teal | `#0D4B5C` | | Warm accent | Teak Gold | `#C8A96E` | | Fish highlight | Tangerine Clown | `#E8703A` | | Text / ivory | Bleached Coral | `#F2EDE4` | | Subdued blue | Kelp Shadow | `#1A6070` | Hero gradient: `linear-gradient(170deg, #062030 0%, #0D4B5C 55%, #1A6070 100%)`. Teak-wood panels (above hero band): `#1C1007` with a subtle `repeating-linear-gradient` faux wood grain at 2% opacity in `#2A1A08`. ## Imagery and Motifs **imagery: icon-heavy.** There are no photographs. No 3D renders. No stock imagery of any kind. The page's entire visual vocabulary is a set of **14 tropical fish SVG icons**, each drawn in a flat, mid-century illustration style: bold outlines (2.5px stroke), two-tone fills using palette colors, rounded fins, slightly oversized eyes with a single white dot specular. The fish are not cute — they are *composed*. They have posture. **The Fish Library (14 species):** 1. Moorish Idol — vertical black-and-white stripes, teak-gold dorsal spike 2. Clownfish — tangerine-orange with white bar, fine black outline 3. Parrotfish — deep teal body, bleached-coral beak 4. Blue Tang — abyssal navy with teak-gold tail slash 5. Lionfish — teal body, fanned tangerine spines radiating outward 6. Seahorse — bleached coral silhouette, teak-gold crown 7. Pufferfish — round tidal teal body, spines as small triangles 8. Mandarinfish — swirling teal-and-tangerine whorls (the showpiece) 9. Surgeonfish — navy body, single tangerine scalpel mark 10. Butterflyfish — disc-shaped, white with teak-gold vertical banding 11. Trumpetfish — long horizontal needle, kelp-shadow gradient 12. Grouper — mottled teal-on-navy, authoritative rectangular silhouette 13. Angelfish — triangular, bleached coral with teak-gold lateral lines 14. Triggerfish — wedge body, tangerine spot, eyes positioned too high (opinionated) **Motifs:** - **tropical-fish** are the primary visual motif and the structural metaphor — every concept on the page is a fish species - **Teak grain texture**: the hero band divider and nav bar carry a subtle CSS faux-woodgrain pattern - **Circular portholes**: section headings sit inside a thin `border-radius: 50%` circle drawn in `#C8A96E` at 1px, 80px diameter — the section number lives here - **Museum label cards**: each fish in the footer grid sits above a 3-line museum-style label (species name in DM Sans small-caps, "Theoretical Position" subtitle in Libre Baskerville italic, one-line position statement in regular) ## Prompts for Implementation Build riron.org as a **single slow drift** — the experience of watching fish in a tank at a museum of natural philosophy that closed in 1962 and hasn't been renovated since but is still somehow perfect. **Hero implementation:** - Full-viewport hero with CSS `height: 100svh`, `overflow: hidden` - Deep-ocean gradient background (see palette) - Horizontal teak-gold rule at 38% height, drawn via `clip-path` animation or SVG `stroke-dashoffset` from 0 to full width over 1.2s on page load - Above the rule: site title "riron.org" in DM Sans small-caps at `0.9rem`, and the 14-word statement in Libre Baskerville 700 italic at `clamp(3.2rem, 7vw, 6.4rem)`. Text color `#F2EDE4`. Statement should evoke a single natural philosophy thesis, e.g.: *"Every theory is a fish that has not yet reached the surface."* - Below the rule: 8–12 fish SVG icons, each on an independent `@keyframes` path using `transform: translateX` or `translate`. Each fish: 48–80px wide, `opacity: 0` initially, fading in with `animation-fill-mode: forwards` after its assigned delay. No looping. Fish drift once and hold position. Each fish slightly rotated (−8deg to +12deg) as if gliding at a natural angle. **shake-error pattern:** - The single interactive element: if the user clicks on any fish icon (in the footer grid OR the drifting hero layer), the fish responds with a `shake-error` animation — a rapid horizontal wiggle (`translateX` oscillating ±4px, 6 cycles, 0.4s total). The shake is accompanied by a label appearing above the fish: a one-line "rebuttal" to its theoretical position, in DM Sans 0.7rem, color `#E8703A`. This is the page's only micro-interaction. It is funny and philosophical. - CSS keyframe: `@keyframes shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-4px)} 30%{transform:translateX(4px)} 45%{transform:translateX(-3px)} 60%{transform:translateX(3px)} 75%{transform:translateX(-2px)} 90%{transform:translateX(2px)} }` **Theory section:** - Max-width 860px, centered, `padding: 6rem 2rem` - Drop cap on the opening paragraph (CSS `::first-letter`) - A single fish icon (Seahorse, 40px) floats in the right margin at `position: sticky; top: 2rem` — it follows the reader down through the text panel, then stops at the section boundary - Section heading inside a `#C8A96E` 1px circle (80px diameter), absolutely positioned, number only: "I" **Footer fish grid:** - 3×2 CSS grid, `gap: 3rem`, max-width 720px, centered - Each cell: fish SVG (60px) centered above museum label - On hover: fish does a slow `scale(1.12)` rise (not the shake — the shake is only on click) - On click: shake-error + rebuttal tooltip **AVOID:** hero CTA buttons, pricing tables, stat counters, testimonial blocks, newsletter modals, sticky headers, mega-menus, loading spinners, infinite scroll, auto-playing video, skeleton loading states, confetti, fireworks, toast notifications. **The page has no call to action.** It is a place to think about fish and theories. That is enough. ## Uniqueness Notes 1. **hero-dominant layout used at only 4% frequency** — and no other design in the registry pairs it with a mid-century aesthetic and an ichthyological philosophical conceit. The hero is not a marketing vehicle; it is a specimen tank. This framing is unoccupied in the registry. 2. **shake-error at 4% frequency, repurposed as philosophical rebuke.** The `shake-error` pattern is typically used for form validation feedback. Here it is the primary narrative interaction: clicking a fish icon triggers a shake that means "I disagree with your assessment." The pattern is technically identical but contextually inverted — error-as-debate-response. No other design in the registry uses shake-error as a content interaction. 3. **tropical-fish motifs at 4% frequency, used as taxonomic organizing principle.** Other designs using tropical-fish use them decoratively. riron.org uses each of the 14 fish species as a named, labeled theoretical position with a rebuttal — fish-as-intellectual-categories. The motif carries semantic weight, not just visual interest. 4. **baskerville-refined at 4% frequency, combined with DM Sans in small-caps for labels.** The combination of a warm 18th-century serif with a clinical mid-century geometric sans (used only for labels and navigation) recreates the typographic register of a natural history museum exhibit: authority and clarity in the same case. 5. **ocean-deep palette at 2% frequency**, combined with teak-wood faux-grain textures, creates a specific material world (1950s oceanarium with teak interior) that no other design in the registry occupies. The palette is not "tropical holiday" and not "corporate navy" — it is *exhibit-hall navy*, which is its own distinct emotional register. **Chosen seed:** `aesthetic: mid-century, layout: hero-dominant, typography: baskerville-refined, palette: ocean-deep, patterns: shake-error, imagery: icon-heavy, motifs: tropical-fish, tone: whimsical-creative` **Avoided patterns from frequency analysis:** parallax (75% — not used), scroll-triggered (35% — not used), spring (33% — not used), centered layout as primary structure (84% — hero-dominant chosen instead), photography (87% — icon-heavy only), gradient palette as sole identity (77% — used only for hero background, not as design identity), mono typography (74% — Baskerville serif chosen), warm palette (89% — ocean-deep chosen instead), hand-drawn aesthetic (58% — mid-century vector precision chosen instead).