# Design Language for okurairi.net ## Aesthetics and Tone okurairi.net is a tech-tutorial space wrapped in the warm amber haze of a summer afternoon aquarium visit — where sunlight filters through salt water, where tropical fish dart between coral, and where someone is quietly explaining something important on a frosted glass tablet. The aesthetic is **glassmorphism with sepia warmth**: not the cold corporate blur of SaaS dashboards, but something closer to old photographs pressed behind foggy glass, the kind of blur that makes the past feel present. The mood is **nostalgic curiosity** — the feeling of rediscovering an old handwritten notebook filled with sketches and code, then realising the knowledge still works. Warm sand and bleached coral tones dominate the background, while the frosted glass panels that contain content carry a soft amber-gold tint (rgba(210, 180, 140, 0.18)) rather than pure white. Every surface breathes: translucency is the primary design material. The tone is **playful-tutorial**: patient and encouraging, never condescending. Text addresses the reader directly. Sections feel like chapters in an illustrated field guide — "Here is what you need to know. Here is why it matters. Now try it." Inspiration: Hiroshi Sugimoto's seascape photographs, 1970s nature documentary title cards, the physical warmth of a well-thumbed paperback, and the iridescent shimmer of a fighting fish's fin catching afternoon light. ## Layout Motifs and Structure The layout is **minimal-navigation**: a single persistent frosted-glass tab bar floats at the top with no more than four items, rendered at 60% opacity with a warm blur (backdrop-filter: blur(18px) saturate(1.3)). Navigation labels use small playful rounded type, each item accompanied by a tiny tropical-fish glyph that pulses subtly when the section is active. Content lives in a **single wide-column narrative flow** (max-width: 780px, centered) broken into glass cards. Each card is a frosted pane — border: 1px solid rgba(210, 180, 140, 0.35), background: rgba(245, 235, 210, 0.22), border-radius: 20px, box-shadow: 0 8px 40px rgba(160, 120, 60, 0.12). Cards do not stack in grids; they cascade vertically like pages turned in sequence. Code blocks are styled as a **warm amber terminal** — background: rgba(90, 60, 30, 0.85), text in #f5e6c8 (warm cream), with a thin 1px amber border. They sit slightly recessed (inset box-shadow) inside their parent glass cards, giving the illusion of depth: glass in front, wood beneath. Collage-style illustration zones appear between tutorial sections: layered PNG cutouts of tropical fish, coral fragments, and handwritten annotation marks float freely at reduced opacity (0.3–0.6), always behind the glass card layer. These are decorative breathing spaces, not informational. Spatial rhythm: generous vertical padding (80–120px between sections), tight internal card padding (28px). The page never feels crowded; it feels like a well-curated museum exhibit. ## Typography and Palette **Fonts (Google Fonts only):** - Headlines: **Nunito** (weight 800, letter-spacing -0.02em) — rounded, warm, playful without being childish. Used for section titles and the site wordmark. - Body / tutorial prose: **Nunito** (weight 400, line-height 1.75) — consistent rounded warmth throughout prose. - Code: **JetBrains Mono** (weight 400) — technical clarity inside the warm amber terminal blocks. - Accent / pull quotes: **Pacifico** (weight 400) — a single-weight cursive for memorable callout phrases, used sparingly (1–2 per page). **Palette — Sepia Nostalgic:** - `#f5e6c8` — warm cream (primary text on dark surfaces, code text) - `#d4a96a` — golden amber (accent color, borders, active states, fish glyph fills) - `#8b5e3c` — burnished sienna (headings on light surfaces, hover states) - `#3d2b1f` — deep espresso (primary body text, code comments) - `#c8b89a` — bleached sand (glass card background tint base) - `#1a120b` — dark roast (page background, used only as deep gradient terminus) - `#e8d5b0` — parchment (section dividers, subtle rule lines) - `#5c8a6e` — muted seafoam (secondary accent — coral/seaweed echo, used for links and success states only) **Background gradient:** linear-gradient(160deg, #2e1f0f 0%, #4a3020 40%, #5c3d1e 70%, #2e1f0f 100%) — a warm dark scene, like a sunlit tank viewed from a dim room. ## Imagery and Motifs **Tropical fish collage system:** The primary decorative language is layered PNG-style illustration of tropical fish rendered in a **vintage natural history illustration style** — the kind found in 19th-century zoological atlases, with fine hatching detail but saturated in warm sepia tones. Species featured: Betta splendens (fighting fish, primary mascot — iridescent fins in amber and teal), Pterois volitans (lionfish, decorative border element), and Amphiprioninae (clownfish, used as progress/completion indicator). The fighting fish (Betta) serves as the **site mascot and pulse-attention trigger**: a small animated Betta SVG lives in the lower-right corner of the viewport, idle-swimming with a gentle figure-8 path. When a new tutorial section enters the viewport, it performs a **quick fin-flare** (scale 1.0 → 1.25 → 1.0, duration 400ms, easing cubic-bezier(0.34, 1.56, 0.64, 1)) to draw attention to the arrived content. **Handwritten annotation motifs:** Overlaid on collage zones, light cream SVG paths mimic pencil underlines, circles, and margin arrows — as if a previous reader annotated the field guide. These are CSS-animated path draws (stroke-dashoffset) that trigger as the collage zone enters the viewport. **Pulse-attention pattern:** Applied specifically to interactive elements (Copy Code button, nav items on active section, the mascot Betta). The pulse uses a warm amber glow: box-shadow animation cycling 0 → 0 0 0 8px rgba(212, 169, 106, 0.4) → 0, period 2.4s, infinite. It never fires on hover — only on state change or scroll arrival, to avoid fatigue. **Coral/pearl texture:** A subtle SVG noise texture (feTurbulence, baseFrequency 0.65, opacity 0.04) overlays the entire page background, adding organic grain that prevents the dark gradient from reading as pure digital black. ## Prompts for Implementation Build this as **a single long-scroll illustrated field guide** — not a homepage, not a product page, but a chapter of a living natural history notebook about a technical topic. Each tutorial section is a glass-card "entry" in the guide. **Opening scene:** Full-viewport dark gradient background, no card visible yet. The Betta SVG mascot swims in from the left edge over 1.8s, settles into the lower-right corner. The site title ("okurairi.net") fades in via Nunito 800 at large size (clamp(2.4rem, 6vw, 5rem)), letter-spaced warmly. A single Pacifico subtitle line appears beneath: something like *"swimming through the deep end of the web"*. No hero image. No CTA button. Just the fish, the title, the dark warm water. **Scroll trigger system:** Use IntersectionObserver (threshold: 0.2). When a glass card enters the viewport: card fades in (opacity 0→1, translateY 24px→0, duration 500ms). Simultaneously: Betta mascot performs fin-flare. Handwritten annotation SVG paths draw in (stroke-dashoffset transition). **Navigation:** Sticky top bar, frosted glass (backdrop-filter: blur(18px)), height 52px, four items maximum. Each nav label is Nunito 600 14px. The active item shows a small animated Betta glyph (SVG, 16px) to its left that tail-wags at 1Hz while the section is active. No hamburger menus on mobile — the four items reflow to a 2×2 grid inside the same bar. **Code blocks:** Warm amber terminal aesthetic. "Copy" button in lower-right of each code block pulses amber when code is newly loaded. On copy-success: button briefly shows a clownfish emoji + "Copied!" in Nunito 600, reverting after 1.8s. No syntax-highlight library needed — hand-style the warm cream (#f5e6c8) text with amber (#d4a96a) for keywords, sienna (#8b5e3c) for strings, muted (#c8b89a) for comments — all via CSS custom properties and simple span wrappers. **Collage zones between sections:** A 200–280px tall zone with position: relative, overflow: hidden. Inside: 3–5 fish/coral PNG layers positioned absolutely, each with a different parallax scroll speed (CSS custom property --parallax-speed multiplied by scrollY in requestAnimationFrame). Fish layers move at 0.15× scroll speed, coral at 0.08×, background grain at 0.03×. No JS library — raw rAF loop updating CSS variables. **Avoid:** No hero image carousels, no pricing tables, no testimonial grids, no floating action buttons other than the mascot Betta, no dark-mode toggle (the page is permanently dark-warm), no cookie banners in the design language. **Mobile (≤640px):** Glass cards expand to full viewport width with 12px horizontal margin. Collage zones reduce to 140px tall. The Betta mascot scales to 48px and moves to the bottom-center. Navigation becomes a 2×2 pill grid, still frosted glass. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: glassmorphism, layout: minimal-navigation, typography: playful-rounded, palette: sepia-nostalgic, patterns: pulse-attention, imagery: collage, motifs: tropical-fish, tone: tech-tutorial **Differentiators from every other design in the registry:** 1. **Warm-tinted glassmorphism, not cold-corporate blur.** Most glassmorphism implementations use near-white panels on blue/purple gradients. This design uses amber-sepia glass on a dark espresso background — the warmth makes blur feel cozy rather than slick, directly countering the overused cool-glassmorphism pattern. 2. **Tropical fish as functional UI actors, not decoration.** The Betta mascot performs scroll-triggered fin-flares as the primary attention-routing mechanism (pulse-attention pattern), the clownfish appears as the copy-success microinteraction, and lionfish elements mark section boundaries. Fish are load-bearing UI, not wallpaper. 3. **Vintage natural history illustration meets web tutorial.** The visual vocabulary is 19th-century zoological atlas (hatched detail, Latin-species labels, annotation marks) applied to a modern tech-tutorial format — a combination not present in any other design in this registry. 4. **Handwritten annotation SVG paths as scroll-triggered reveals.** As glass cards enter the viewport, pencil-stroke SVG paths draw themselves in over the collage zones, mimicking a reader's own marginalia. This creates the feeling of a shared, already-annotated notebook rather than a pristine web page. 5. **Avoided overused patterns:** dark-glassmorphism (overused at 6%), neon-glow (overused), shake-error animation (4% — used nowhere in this design). Deliberately underuses grid-based layouts and CTA-heavy structures that dominate the registry.