# Design Language for okurairi.com

## Aesthetics and Tone

**Okurairi** — literally "お蔵入り" in Japanese, meaning "shelved" or "put in storage" — conjures the image of something brilliant that never saw the light of day: a film kept in the vault, a song that never released, a reef creature glowing in pitch-black water. The site weaponizes this paradox: the shelved thing is MORE electric than what went public.

The visual language is **flat-design maximalism** — the geometry of Tokyo's expressway signage colliding with the bioluminescent palette of deep-sea coral. Every shape is razor-flat: no drop shadows, no gradients, no bevels. But the flatness is aggressive, not restrained. Forms are oversized, colors are high-voltage, and negative space is deliberately violated.

Mood: a neon-lit aquarium tank at 3 AM in a shuttered arcade. Tropical fish dart through geometric cutouts. The water is black. The fish are impossibly vivid. The whole thing pulses.

Tone is **energetic without desperation** — the confidence of the best thing no one has heard yet. Not hype. Not hustle. Pure electric latency.

Reference inspirations: Neville Brody's 1980s Face magazine layouts; Tokyo subway map color logic; bioluminescent deep-sea photography by David Shale; flat-design arcade game UI from the Famicom era.

## Layout Motifs and Structure

The layout is **aggressively asymmetric** — no grid columns share the same width. The underlying structure is a 13-column grid where primary content occupies columns 1–8 and secondary elements invade columns 6–13, creating deliberate overlap zones.

**Macro composition:**
- Hero: full-viewport black rectangle. A single tropical fish SVG (silhouette, filled flat coral-orange) positioned at 67% from left, 38% from top, scaled to 40vw. The domain name "okurairi" runs vertically up the left edge in 7vw display-bold type, rotated -90deg, tight against the viewport edge.
- Below hero: a hard horizontal cut — no scroll fade, no gradient transition — into a white zone. The cut is a 100vw wide flat rectangle in electric lime (#BFFF00), height 8px, acting as a visual slash.
- Content sections use **offset block stacking**: each section's heading block is offset 3–5 columns from the body text, so headings appear to "float past" their content as you scroll. Never center-aligned. Never flush-right symmetry.
- A recurring asymmetric accent: a flat black rectangle (width: 45vw, height: 100vh) anchored to the right side of every even section, serving as a dark panel that makes neon-colored elements on it glow harder.

**Micro motifs:**
- Fish silhouette "schools" — clusters of 3–7 flat fish icons scattered at irregular angles in the dark panels, each a slightly different neon color.
- Hard-edge crop circles: sections of content are clipped to irregular circles (clip-path polygon, not actual circles) to break the grid's rigidity.
- Pulse rings: invisible by default, visible on hover/scroll-trigger — concentric flat rings that expand outward from interactive elements like sonar pings.
- Bottom of page: a "release depth" counter — a vertical depth gauge on the far right edge (position: fixed), thin 2px line with a floating circle marker, labeled in 11px mono type.

## Typography and Palette

**Typography (all Google Fonts):**

- **Primary Display / Hero**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all-caps, weight 400, used at massive sizes (clamp(8rem, 18vw, 20rem)) for the domain wordmark and section identifiers. Bebas Neue is flat, bold, architectural — no optical tricks, no calligraphic stress. It fits the flat-design aesthetic perfectly.
- **Secondary Display / Section Titles**: [`Barlow Condensed`](https://fonts.google.com/specimen/Barlow+Condensed), weight 800 italic, used at clamp(3rem, 7vw, 8rem). Condensed weight creates the vertical-tension feeling of a fish darting upward.
- **Body / Captions**: [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk), weight 400 for body, weight 600 for labels. Used at 1rem–1.2rem. Space Grotesk's slightly geometric quirks echo the arcade/tech undercurrent without going full mono.
- **Depth Gauge / Technical Labels**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400, 0.7rem, tracking +0.15em. Used only for the depth gauge numbers and technical data overlays.

**Palette — 7 colors, high-contrast, flat:**

| Role | Name | Hex |
|---|---|---|
| Void (background) | Deep Black | `#050505` |
| Base Light | Stark White | `#F5F5F0` |
| Primary Accent | Neon Coral | `#FF4136` |
| Secondary Accent | Electric Lime | `#BFFF00` |
| Tertiary Accent | Aqua Flash | `#00FFCC` |
| Warm Neon | Tropical Orange | `#FF8C00` |
| Cold Neon | Ultraviolet Blue | `#4400FF` |

**Contrast logic:** Neon Coral and Electric Lime NEVER appear together (visual clash). Electric Lime is paired exclusively with Deep Black. Neon Coral pairs with Stark White. Aqua Flash pairs with Deep Black only. Tropical Orange is the "fish color" — used only on the tropical-fish SVGs and no other UI element.

## Imagery and Motifs

**All imagery is flat SVG — zero photographs, zero stock illustrations, zero gradients.**

**The tropical fish roster (flat silhouettes, each a different neon):**
1. **Mandarinfish** (`#00FFCC` Aqua Flash) — angular simplified silhouette, 5 geometric fins as separate flat polygons. Used in hero.
2. **Clownfish** (`#FF8C00` Tropical Orange) — rounded body, two flat white stripes as separate cut-out rectangles. Used in dark panels.
3. **Blue Tang** (`#4400FF` Ultraviolet Blue) — teardrop shape, single flat yellow tail as separate element. Used scattered in light sections.
4. **Pufferfish** (`#BFFF00` Electric Lime) — near-circle with 8 protruding triangular spines. Used as section-break punctuation.
5. **Lionfish** (`#FF4136` Neon Coral) — long fanned fins as individual flat triangles. Used at page colophon.

**Pulse attention pattern:**
- On scroll-enter: fish silhouettes "pulse" — a single concentric ring expands from their center (CSS animation, flat stroke, same color as fish, opacity 1→0 over 600ms). No easing curves — linear. The brutality of linear timing is intentional.
- Interactive fish: on hover, fish flip horizontally via `transform: scaleX(-1)` with 80ms transition. No other interaction effects.
- Background pulse: in the hero's deep black zone, 5 overlapping circle outlines (stroke only, `#BFFF00` at 3% opacity) pulse at staggered 2s intervals — like sonar returns from very far away.

**Neon-glow treatment:**
Glow is achieved PURELY through color contrast on black backgrounds — no CSS `box-shadow` glow effects, no `filter: blur()`. This keeps true to the flat-design aesthetic while maintaining the neon-glow *feel*. The only exception: a 1px CSS outline of the same hue at 30% opacity around each fish polygon, creating a flat "halo" that reads as glow without being rendered as one.

**Geometric decorative patterns:**
- Repeating diagonal slash marks (`////`) as thin 1px lines in `#BFFF00` at 8% opacity — used as texture in the dark panels.
- Hard right-angle "corner marks" (like registration marks) placed at the corners of each section, 20px × 20px, 2px stroke in `#FF4136`.

## Prompts for Implementation

**The story:** A visitor descends into a dark archive. The archive is actually an ocean trench. The things shelved here are not forgotten — they are preserved in perfect darkness, glowing. Each section is a deeper depth level. The fish don't care about the visitor — they have their own rhythms. The page is the archive. The fish are the contents. The visitor is not a customer — they are a witness.

**Hero (depth 0m):**
- Full-screen `#050505` rectangle. No other background.
- The word "OKURAIRI" in Bebas Neue, 18vw, `#F5F5F0`, rotated -90deg, positioned `left: 2vw; top: 50vh; transform-origin: left center; transform: rotate(-90deg) translateX(-50%)`. This makes the wordmark run vertically up the left edge.
- A flat Mandarinfish SVG at `position: absolute; right: 15vw; top: 30vh; width: 40vw;` — drawn as overlapping geometric polygons, each fish "layer" a separate element so CSS can animate them independently.
- Pulse rings: 5 `<div>` elements with `border-radius: 50%; border: 1px solid #BFFF00; opacity: 0.03; position: absolute; animation: pulse 4s linear infinite;` centered on the fish. Stagger with `animation-delay: 0s, 0.8s, 1.6s, 2.4s, 3.2s`.
- Below the fish: one line of text in Space Grotesk 600, 1.1rem, `#BFFF00`, letter-spacing 0.3em: "UNRELEASED. UNARCHIVED. ELECTRIC."

**Depth gauge (fixed, right edge):**
```
position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%);
height: 60vh; width: 2px; background: #F5F5F0 at 20% opacity;
```
A floating circle (`8px × 8px`, filled `#FF4136`) moves along this line based on `scrollY` progress. Label above it: current depth in "m" — e.g., "47m". Updates via `scroll` event listener.

**Section 1 (depth ~20m) — white zone:**
- Background `#F5F5F0`. Full width.
- Offset heading: Barlow Condensed 800 italic, 7vw, `#050505`, positioned with `margin-left: -2vw` (negative margin, bleeding slightly left). Text: "SHELVED / NOT DEAD".
- Body text Space Grotesk 400, 1.1rem, `#050505`, max-width 55ch, starting at column 4 of a 13-column CSS grid.
- A Clownfish SVG (`#FF8C00`) floating in the dark panel (right 45vw) at 15vw width. Rotated 12deg.

**Section 2 (depth ~45m) — dark zone:**
- Background `#050505`. Right panel `#0A0A0A` (barely lighter, creates depth with flat techniques only).
- Heading: Bebas Neue 400, 9vw, `#BFFF00`. Text: "THE VAULT IS ALIVE".
- 3 Blue Tang fish silhouettes scattered in the panel, each rotated differently (-15deg, 0deg, +23deg), sizes: 8vw, 5vw, 11vw.
- Pulse rings on each fish on scroll-enter (Intersection Observer API).

**Section 3 (depth ~80m) — cut-circle zone:**
- Background `#050505`. A white circle (clip-path on a `#F5F5F0` div, `clip-path: circle(45% at 40% 50%)`) contains body text — text literally exists inside the circle shape.
- Heading outside the circle in Barlow Condensed italic, `#FF4136`, 6vw.

**Animation notes:**
- NO scroll-jacking (no `overflow: hidden` on body, no fake scroll).
- Intersection Observer for scroll-triggered animations only.
- Fish flip on hover: `transition: transform 80ms linear`. Nothing else.
- Pulse rings: pure CSS keyframe animation (`@keyframes pulse { from { transform: scale(1); opacity: 0.03; } to { transform: scale(3); opacity: 0; } }`).
- Depth gauge number: updates via vanilla JS `scroll` event, no libraries.
- AVOID: parallax effects, sticky scroll sections, GSAP or heavy animation libraries.

## Uniqueness Notes

1. **Vertical wordmark as left-edge architecture.** The domain name "OKURAIRI" rotated -90deg and pinned to the left viewport edge is not a decorative flourish — it IS the left border of the layout. No other design in the registry uses this structural approach. Most sites use horizontal wordmarks in the hero center; this one makes the wordmark a functional spatial element.

2. **Flat-design neon-glow without any glow effects.** The entire "neon aquarium" atmosphere is achieved through color contrast alone — `#00FFCC` on `#050505` creates the optical illusion of glowing without any `filter: blur`, `box-shadow`, or CSS glow. This is a principled constraint (flat-design rule enforced at all costs) that produces a paradox: maximum neon energy, zero rendering tricks.

3. **Five distinct fish species as information layer.** Each fish species carries specific semantic meaning (not just decoration) — species identity = content category, fish color = content type, fish size = content weight. The tropical-fish motif is a flat-icon taxonomy, not wallpaper.

4. **Linear animation timing as aesthetic statement.** All animations use `linear` easing exclusively — no ease-in-out, no cubic-bezier curves. Most sites use easing to create "natural" movement; this site's fish pulse in perfectly even increments, like an oscilloscope or a depth-sounder ping, reinforcing the archive/machine aesthetic.

5. **Depth gauge as page navigation metaphor.** The fixed right-edge depth marker reframes scrolling as descending — you are going deeper, not forward. This transforms a standard vertical scroll page into a spatial descent narrative without any scroll-jacking.

**Chosen seed from assignment:** aesthetic: flat-design, layout: asymmetric, typography: display-bold, palette: high-contrast, patterns: pulse-attention, imagery: neon-glow, motifs: tropical-fish, tone: energetic

**Avoided patterns from frequency analysis (overused):** centered layouts (85%), photography (85%), gradient backgrounds, drop shadows, parallax scroll. All explicitly excluded.

**Underused patterns favored:** neubrutalism structural logic (flat hard edges), pixel-precision geometry, asymmetric grid offset — borrowed from the underused end of the frequency spectrum.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:48:12
  domain: okurairi.com
  seed: from assignment:
  aesthetic: Okurairi** — literally "お蔵入り" in Japanese, meaning "shelved" or "put in storage"...
  content_hash: 21b0a096974b
-->