# Design Language for masugomi.com ## Aesthetics and Tone masugomi.com channels the lost visual language of **Frutiger Aero** -- the glossy, nature-infused techno-optimism that dominated interface design from roughly 2004 to 2013, where software interfaces glowed with translucent gradients, water droplets clung to glass surfaces, and every icon looked like it had been licked by a tropical rainstorm. But this is not a nostalgic recreation. This is Frutiger Aero filtered through the lens of an underwater biology textbook -- imagine a marine research station's tutorial interface rendered in the visual grammar of Windows Vista's Aero Glass, where every panel gleams with aquatic luminescence, fish anatomy diagrams pulse with neon highlights, and botanical cross-sections float behind frosted glass overlays. The tone is **tech-tutorial** -- precise, instructional, confident in its didactic purpose. This is a site that teaches you something. The voice is that of an enthusiastic marine biologist who happens to be fluent in CSS -- someone who annotates tropical fish with the same precision they'd annotate a code block. Every section reads like a lesson, every visual like a diagram. There are no vague inspirational taglines here, no "we believe in innovation" platitudes. Instead: labeled specimens, numbered steps, annotated illustrations, and the quiet authority of someone who has dissected both a lionfish and a webpack config. The mood sits at the intersection of scientific illustration and Y2K-era software aesthetics: clinical but luminous, educational but drenched in dopamine color. Think of a David Attenborough documentary redesigned by the Aqua theme design team at Apple circa 2003 -- every frame dripping with translucent blues and greens, every organism labeled in a crisp sans-serif, every transition smooth as liquid glass. ## Layout Motifs and Structure The layout is built entirely on a **split-screen** paradigm -- the viewport is perpetually divided into two panels that function as complementary halves of a teaching interface. This is not a decorative split; it is structural, like the two-page spread of an open textbook or the dual-pane layout of an IDE. The left panel and right panel have distinct roles that shift as the user scrolls. **Split-Screen Architecture:** The primary split divides the viewport at approximately 45%/55%, with the left panel serving as the "specimen panel" and the right as the "annotation panel." The dividing line between them is not a hard border but a 3px luminous gradient seam -- a vertical stripe that glows with a soft dopamine-neon gradient (#00F5D4 to #FF6B9D), animated with a slow vertical shimmer that makes it look like light refracting through an aquarium's edge. This border-animate effect is the site's signature visual heartbeat. **Panel Behaviors:** - **Specimen Panel (Left, 45%):** Displays botanical illustrations, tropical fish SVG diagrams, or CSS-rendered aquatic environments. This panel has a slightly darker background (#0B1426) and functions as the "visual evidence" -- the thing being studied. Content here is primarily imagery, rendered at large scale with generous padding. Illustrations are positioned with their centers of visual mass slightly above the vertical midpoint, following the compositional logic of scientific plates. - **Annotation Panel (Right, 55%):** Contains text, code snippets, labeled diagrams, and tutorial steps. Background is a frosted glass effect -- a semi-transparent panel (#1A2744 at 85% opacity) with a 12px backdrop-blur, creating the Frutiger Aero hallmark glassy surface. Text content here is structured in tutorial-style blocks: numbered steps, definition lists, inline code references, and margin annotations. **Scroll Progression:** As the user scrolls, the split-screen panels do not scroll in lockstep. The specimen panel scrolls at 70% the speed of the annotation panel, creating a subtle parallax-free desynchronization that mimics the way your eyes move between a textbook's illustrations and its body text. At certain threshold points, the panels swap roles -- the illustration jumps to the right, the text to the left -- achieved via a smooth 600ms cross-fade with a 100ms stagger, creating a "page turn" sensation without literal page-flip animation. **Section Transitions:** Between major sections, the split briefly collapses into a full-width interstitial -- a single panoramic botanical illustration stretching edge to edge at full viewport height, with a single large-set label (in Bebas Neue at 8rem) identifying the next chapter. These interstitials last exactly one viewport-height of scroll before the split re-emerges, potentially with inverted panel positions. **No Navigation Bar:** There is no persistent top navigation. Instead, a small translucent pill-shaped indicator floats at the top-right corner (8px border-radius, frosted glass background, 40px height) showing the current section number as "02 / 07" in Fira Code at 0.75rem. Tapping it expands a minimal radial menu -- section titles arranged in a semicircle, each with a tiny fish-silhouette icon. ## Typography and Palette **Typography:** - **Display / Section Headers:** "Bebas Neue" (Google Fonts) -- the definitive condensed, all-caps display face. Used at 5rem-10rem for section titles and interstitial labels. Weight: 400 (Bebas Neue's single weight, which is already bold by nature). Letter-spacing: 0.08em to give the compressed letterforms room to breathe. The condensed verticality of Bebas Neue echoes the upright posture of tropical fish fins and the vertical stems of botanical illustrations. When used over imagery, text is rendered with a subtle double-stroke effect: a 1px outer stroke in the background color and a luminous inner glow in #00F5D4 at 30% opacity. - **Body / Tutorial Text:** "Inter" (Google Fonts) -- the canonical screen-optimized sans-serif, chosen specifically for its exceptional legibility at small sizes and its subtly humanist curves that prevent the clinical feeling from becoming sterile. Used at 1rem (16px base) for body text, 0.875rem for annotations and margin notes. Weights: 400 for body, 600 for emphasis and labels, 300 for secondary captions. Line-height: 1.72 for body text (generous, tutorial-friendly spacing that lets the eye rest between lines of instructional content). - **Code / Specimen Labels:** "Fira Code" (Google Fonts) -- a monospace font with programming ligatures, used exclusively for code snippets, specimen classifications, and technical annotations. Used at 0.85rem inside code blocks and 0.7rem for inline specimen labels. The ligatures (=> becomes a proper arrow, != becomes the not-equal symbol) reinforce the tech-tutorial tone. Code blocks have a background of #0D1B2A with 1px left border in #00F5D4. **Color Palette (Dopamine Neon):** The palette collides the glassy blues of Frutiger Aero with the saturated punch of dopamine-neon accents -- a controlled explosion of color that stays coherent through strict usage rules. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ocean (Primary BG) | Midnight navy-black | #0B1426 | Specimen panel background, primary dark surface | | Glass Surface (Secondary BG) | Translucent steel-blue | #1A2744 | Annotation panel (at 85% opacity with backdrop-blur) | | Aero Frost (Tertiary BG) | Cool slate | #243B5E | Card backgrounds, hover states, elevated surfaces | | Reef Cyan (Primary Accent) | Electric cyan-green | #00F5D4 | Primary links, active states, border-animate glow, code accents | | Coral Shock (Secondary Accent) | Hot coral-pink | #FF6B9D | Secondary highlights, hover transitions, warning states | | Bioluminescent Yellow | Neon chartreuse | #C6F135 | Tertiary accent, annotation markers, label backgrounds | | Specimen White | Cool off-white | #E8F0F2 | Body text, primary readable content | | Depth Mist | Muted blue-gray | #8BA4B8 | Secondary text, captions, de-emphasized content | | Aquarium Glass | Translucent teal | #14FFEC | Decorative gradients, border-animate secondary color | | Warning Anemone | Deep magenta | #D63384 | Error states, critical annotations | **Gradient Definitions:** - **Aero Gradient (signature):** linear-gradient(135deg, #00F5D4 0%, #14FFEC 40%, #FF6B9D 100%) -- used for the split-screen seam, button fills, and decorative borders. - **Depth Gradient:** linear-gradient(180deg, #0B1426 0%, #1A2744 50%, #243B5E 100%) -- used for panel backgrounds that need vertical depth variation. - **Bioluminescent Wash:** radial-gradient(ellipse at 30% 70%, #00F5D4 0%, transparent 60%) -- a subtle ambient glow placed behind specimen illustrations. ## Imagery and Motifs **Botanical Illustration (Primary Imagery Mode):** The dominant visual language is **botanical illustration** -- the precise, labeled, plate-style renderings of plant specimens that defined 18th and 19th century scientific publishing. But here, the subjects are aquatic: sea grasses, coral formations, mangrove root systems, kelp forests, and flowering water plants. These are rendered in CSS and SVG, not as raster images. Each illustration uses: - Precise SVG paths with stroke-width: 1.5px in #8BA4B8 for structural outlines - Fill colors drawn from the palette (cyan-green washes for living tissue, coral-pink for reproductive structures, chartreuse for annotation callouts) - Dashed leader lines connecting labeled parts to annotation text, animated with stroke-dashoffset to draw themselves on scroll entry - A subtle grain overlay (CSS noise filter at 3% opacity) to evoke the texture of printed paper beneath the glass-surface aesthetic **Tropical Fish Motifs:** Scattered throughout the design are **tropical fish** rendered as minimalist SVG silhouettes -- not cute cartoon fish, but anatomically simplified side-view profiles reminiscent of field-guide illustrations. Each fish species serves a specific UI purpose: - **Angelfish** (tall, diamond-shaped profile): Used as section dividers. A single angelfish SVG, 120px tall, rendered in #00F5D4 at 15% opacity, positioned at the boundary between content blocks. - **Lionfish** (spiny, complex silhouette): Used as decorative corner elements in the annotation panel. Placed at the top-right of major text blocks, rendered with individual spine-paths that animate with a slow 4s wave keyframe. - **Clownfish** (compact, recognizable): Used as the favicon, the radial-menu section icons, and the loading indicator. Two clownfish silhouettes orbit each other in a CSS-animated 3s loop during page transitions. - **Seahorse** (vertical, intricate): Used as the scrollbar thumb custom graphic on webkit browsers. A 24px-wide seahorse silhouette replaces the default scrollbar, rendered in #FF6B9D. - **Pufferfish** (round, inflatable): Used for the current-section indicator pill. The pill subtly "inflates" (border-radius shifts from 8px to 12px, width expands 4px) when a new section is entered, then deflates back. **Frutiger Aero Glass Effects:** The Frutiger Aero influence manifests primarily through surface treatments: - **Frosted glass panels:** backdrop-filter: blur(12px) with a semi-transparent background, creating the signature Aero-era translucent surface. Applied to the annotation panel, floating UI elements, and code blocks. - **Water droplet accents:** Small CSS-generated circles (12-20px diameter) with radial gradients that mimic light refracting through water droplets, scattered sparingly along the split-screen seam. Each droplet has a tiny specular highlight (2px white circle offset to upper-left) and a soft shadow. - **Glossy button surfaces:** Interactive elements use a double-layer gradient -- a base color gradient overlaid with a half-height white-to-transparent gradient that creates the classic Aero "gel button" shine. **Border-Animate Pattern:** The signature interaction pattern is **border-animate** -- borders that are not static lines but flowing, luminous paths: - The split-screen seam's gradient shifts its angle continuously via a 12s infinite CSS animation (rotating from 0deg to 360deg), creating a barberpole-like flow of color along the vertical divide. - Content cards in the annotation panel have a 1px border that is normally transparent. On hover, the border "draws" itself clockwise using a conic-gradient mask that rotates from 0 to 360 degrees over 400ms, revealing the Aero Gradient beneath. - Code blocks have a left border that pulses slowly (opacity oscillating between 60% and 100% over 3s) in Reef Cyan, like a heartbeat monitor. - The section indicator pill has a border that continuously cycles through the Aero Gradient, creating a slow-spinning ring of color around the current section number. ## Prompts for Implementation **Full-Screen Narrative Structure:** The site opens to a full-viewport splash that is NOT a marketing hero -- it is the cover plate of a scientific publication. The background is #0B1426. Centered (horizontally) but positioned at 35% from the top is a large SVG botanical illustration of a coral reef cross-section (400px tall), rendered in thin strokes with the palette's cyan and pink accents. Below it, "masugomi.com" in Bebas Neue at 6rem, letter-spacing 0.15em. Below that, a single line in Inter 300 at 1.1rem: a subtitle that reads like a scientific paper title. No buttons, no CTAs, no "learn more." Just the plate, the title, and the deep ocean background. After 1.5 seconds, the border-animate seam fades in vertically from center, and the viewport splits into the dual-panel layout. **Tutorial-Style Content Flow:** Each section is structured as a tutorial chapter: 1. **Chapter Interstitial:** Full-width, single Bebas Neue title at 8rem, with a watermark-scale tropical fish SVG behind it at 8% opacity. 2. **Split-Panel Teaching Spread:** Left panel shows a botanical or fish illustration; right panel walks through content in numbered steps with code snippets and labeled diagrams. 3. **Annotation Callouts:** Dotted leader lines extend from illustration features in the specimen panel across the split-seam into the annotation panel, connecting visual elements to their textual explanations. These lines are SVG paths animated with stroke-dasharray/dashoffset on scroll entry. 4. **Inline Code Styling:** Code spans use Fira Code on a #0D1B2A background pill with 2px 6px padding, 3px border-radius, and a left-edge 2px solid #00F5D4 border. **Animation Philosophy:** Animations are purposeful and biological. Nothing bounces, nothing elastic-springs, nothing overshoots. Movements follow cubic-bezier(0.4, 0, 0.2, 1) -- Material Design's standard easing -- because it mimics the way fish move: smooth acceleration, gentle deceleration. Specific animations: - **Border-animate seam:** Continuous 12s gradient rotation. Never stops. - **Fish silhouette sway:** 4s ease-in-out infinite alternate, transform: rotate(-2deg) to rotate(2deg). Mimics gentle current. - **Leader line draw:** stroke-dashoffset transition over 800ms on intersection-observer trigger. - **Panel swap:** 600ms cross-fade with 100ms stagger between panels. Uses opacity and translate(20px) in the swapping direction. - **Section indicator inflate:** 200ms ease-out border-radius and width transition. - **Hover border draw:** 400ms conic-gradient mask rotation. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels - Centered single-column layouts (the split is the identity) - Parallax scrolling (the desynchronized panel scroll is not parallax -- it is differential scroll speed, a different technique) - Scroll-triggered animation libraries (use native CSS animations and IntersectionObserver only) - Warm earth tones, muted palettes, monochrome schemes - Friendly/casual tone -- this is instructional, precise, authoritative-but-accessible - Cartoon or kawaii fish illustrations -- these are scientific silhouettes **CSS Technical Notes:** - Use CSS `scroll-timeline` or `animation-timeline: scroll()` for the differential panel scroll speeds where supported, with a JS IntersectionObserver fallback. - The frosted glass effect requires `backdrop-filter: blur(12px) saturate(180%)` -- the saturate boost is critical for the Aero look, preventing the blur from looking washed out. - Border-animate uses `@property` registered custom properties to animate `conic-gradient` angles, which is not possible with standard CSS transitions. - The split-screen seam gradient rotation uses `background-size: 100% 300%` with `background-position` animation, creating the illusion of flowing color without needing to animate the gradient angle directly. - All fish SVGs should use `currentColor` for their fill/stroke, inheriting from parent color properties for easy theming. ## Uniqueness Notes **Differentiators from other designs:** 1. **Frutiger Aero Revival in Marine Biology Context:** Frutiger Aero appears at only 1% frequency in the portfolio. No other design combines this glossy, translucent Y2K-era aesthetic with scientific illustration. The typical Frutiger Aero revival gravitates toward generic tech product showcases; here it is recontextualized as the interface language of an aquatic research database, making the glass effects feel like literal aquarium walls rather than decorative flourishes. 2. **True Split-Screen Layout (0% frequency):** Split-screen layouts have never been used in the portfolio. This is not a decorative half-and-half hero -- it is a persistent, structural dual-pane interface that governs the entire scroll experience. The left-right teaching paradigm (specimen + annotation) is borrowed from scientific publishing and IDE interfaces, not from marketing landing pages. The panel-swap mechanic at section transitions adds dynamism without abandoning the split structure. 3. **Tech-Tutorial Tone (0% frequency):** No other design in the portfolio adopts a tech-tutorial voice. While other sites aim for friendly, authoritative, or mysterious tones, this one is explicitly didactic -- it teaches, annotates, labels, and explains. The numbered-step content structure, inline code styling, and leader-line annotations all reinforce this instructional identity. The tone is closer to MDN Web Docs or a Jupyter notebook than to a brand website. 4. **Border-Animate as Identity System (1% frequency):** Border animation is nearly unused in the portfolio. Here it is elevated from a subtle hover effect to the site's core visual signature -- the split-screen seam is a permanently animated gradient border, card borders draw themselves on hover, code blocks pulse with living borders, and the section indicator wears a spinning border ring. The border IS the design. 5. **Tropical Fish as Functional UI Elements:** Fish motifs at 1% frequency are decorative in other contexts. Here, each fish species is assigned a specific UI role (angelfish = divider, lionfish = corner ornament, clownfish = loading indicator, seahorse = scrollbar, pufferfish = section indicator), transforming them from illustration into interface components. This systematic assignment of zoological forms to interaction patterns is entirely unique. 6. **Dopamine Neon Restrained by Scientific Precision:** The dopamine-neon palette (6% frequency) typically produces chaotic, maximalist energy. Here, the neon colors are disciplined by the botanical-illustration tradition of precise, limited color application -- neon cyan marks living tissue, neon pink marks reproductive structures, chartreuse marks annotation points. The palette is loud but orderly, like a highlighter set used by a meticulous student. **Avoided overused patterns:** - No centered layout (99% frequency -- avoided entirely via split-screen) - No scroll-triggered animation library (97% -- using only CSS animations and IntersectionObserver) - No warm palette (100% -- replaced with cool deep-ocean blues and neon accents) - No mono typography dominance (99% -- Fira Code is tertiary, not primary) - No minimal imagery (93% -- dense botanical illustration and fish SVGs throughout) - No vintage motifs (81% -- tropical fish are contemporary scientific, not retro) - No friendly tone (98% -- replaced with tech-tutorial precision) - No parallax (80% -- differential scroll speed is a distinct technique) **Documented seed:** aesthetic: frutiger-aero, layout: split-screen, typography: bebas-bold, palette: dopamine-neon, patterns: border-animate, imagery: botanical-illustration, motifs: tropical-fish, tone: tech-tutorial