# Design Language for namu.club ## Aesthetics and Tone namu.club exists at the shimmering intersection of a bioluminescent coral reef and a retro-futuristic arcade submerged beneath fifty fathoms of Pacific water. The aesthetic is **seapunk aquarium dashboard** -- the saturated, turquoise-and-magenta digital ocean world of seapunk rendered not as a flat poster or single-page shrine, but as a living instrument panel for monitoring an imaginary underwater ecosystem. Imagine a marine biologist's workstation if it were designed by a team of vaporwave artists working inside an aquarium after midnight: readouts glow in electric cyan, status indicators pulse like jellyfish heartbeats, and every data panel is framed by soft bokeh circles that drift like plankton caught in a submarine's floodlights. The mood is **playful-scientific** -- the giddy curiosity of a child pressing their face against aquarium glass fused with the satisfying precision of a well-organized control room. Nothing is threatening. Nothing is corporate. Every element invites touch and exploration. The tone carries the irreverent joy of naming fish ("this one is Gerald"), the hypnotic calm of watching bubbles rise, and the quiet pride of a collector cataloguing treasures from the deep. Typography floats and settles like objects finding their buoyancy in water. Colors bleed and refract as though filtered through shifting ocean currents. The entire experience feels like logging into a private underwater research station that only club members can access -- hence "namu.club," where "namu" (the Korean word for tree) becomes a subversive joke: the one thing that does not belong underwater, yet here it thrives, reimagined as a coral formation. Every surface carries a faint iridescent sheen. Backgrounds are never flat -- they breathe with slow, undulating gradient shifts that suggest deep water movement. The overall feeling is of peering into a high-tech aquarium where the fish have built their own internet. ## Layout Motifs and Structure The layout follows a **dashboard** paradigm -- a control-panel composition where discrete instrument panels, readout cards, and status modules tile together in a structured grid, but softened by oceanic curves and generous spacing that prevents the clinical feel of a typical analytics dashboard. **Dashboard Architecture:** - **Header Bar (Sonar Strip):** A narrow horizontal bar (height: 56px) spanning the full viewport width at the top. It contains the "namu.club" logotype on the left, three to four circular status indicators (styled as glowing fish-eye bubbles) in the center, and a minimal profile avatar (a tiny tropical fish silhouette) on the right. Background: semi-transparent dark (#0B1628 at 85% opacity) with a `backdrop-filter: blur(16px)`. A 1px bottom border in electric cyan (#00E5FF) at 40% opacity provides a subtle luminous baseline. The bar is `position: sticky` so it remains visible as the user scrolls, functioning as a persistent sonar readout. - **Hero Panel (Observation Deck):** Below the sonar strip, a full-width panel (height: 70vh) serves as the primary viewport into the underwater world. This is not a traditional hero banner -- it is a live observation window. The background is a deep-ocean gradient (from #0B1628 at top to #0D2137 at bottom) overlaid with animated bokeh circles (CSS-only, using multiple layered radial gradients on pseudo-elements with slow translate and scale animations at different speeds). In the center, the site's tagline appears letter-by-letter using a slide-reveal animation: each character slides up from below a clipping boundary, staggered by 40ms, as though individual letters are rising like bubbles. A large, softly glowing tropical fish SVG illustration drifts slowly across the panel on a 30-second CSS animation loop, entering from the left and exiting right, its path following a gentle sine-wave curve achieved with multiple `@keyframes` combining `translateX` and `translateY`. - **Instrument Grid (Reef Modules):** The main content area uses a CSS Grid with `grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))` and `gap: 24px`, producing a responsive dashboard of reef modules. Each module is a rounded card (border-radius: 20px) with a glassy background (`background: rgba(11, 22, 40, 0.65)`, `backdrop-filter: blur(12px) saturate(1.3)`) and a 1px border in semi-transparent cyan (`border: 1px solid rgba(0, 229, 255, 0.15)`). Modules come in three sizes: **Standard** (1 column, ~320px min), **Wide** (spanning 2 columns with `grid-column: span 2`), and **Tall** (spanning 2 rows with `grid-row: span 2`). Each module has an interior layout: a small header row with an icon (fish-themed SVG) and label, a main content area, and occasionally a footer with miniature sparkline-style decorative elements. - **Module Types:** - **Fish Profile Card:** A tall module featuring a large tropical fish illustration (CSS clip-path silhouette filled with gradient), its "name" in display type, and three to four stat-like readouts (speed, depth, mood) styled as horizontal bar gauges with neon fills. - **Depth Chart Panel:** A wide module containing a decorative area chart (pure CSS using polygon clip-paths and layered gradients) representing imaginary depth readings, with the area beneath the line filled in translucent magenta. - **Bubble Feed:** A standard module with a vertical list of short text entries, each preceded by a small circular indicator that pulses softly, resembling a live activity feed from the reef. - **Coral Map:** A wide module displaying a stylized grid of colored circles and shapes representing a coral ecosystem map, using CSS grid and border-radius to form organic-looking clusters. - **Sonar Sweep:** A standard module containing a circular element with a rotating sweep line (CSS conic-gradient with animation), simulating a sonar display. - **Footer (Ocean Floor):** A full-width section at the bottom (padding: 80px 0) with a gradient shifting from the main background to near-black (#060E1A). Contains a centered cluster of small text links styled in muted cyan, a wave-shaped SVG divider at the top edge, and a final decorative element: a row of tiny fish silhouettes swimming in a continuous CSS marquee-style animation. **Responsive Behavior:** On screens below 768px, the instrument grid collapses to a single column. Wide and tall modules lose their spanning and become standard single-column cards. The hero panel reduces to 50vh. The sonar strip compresses its center indicators into a hamburger-style toggle. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a techy, geometric character and distinctive square-ish terminals that feel like characters on a submarine's readout screen. Used at 2.4rem-5rem for module titles, hero text, and section headers. Set with `font-weight: 700`, `letter-spacing: -0.01em`, and `line-height: 1.05`. The tight tracking and heavy weight give headlines the dense, authoritative feel of instrument labels, while the rounded geometry prevents coldness. All headlines are rendered in electric cyan (#00E5FF) or hot magenta (#FF2D78) against dark backgrounds for maximum vibrancy. - **Body / Readouts:** "Inter" (Google Fonts) -- the supremely legible neo-grotesque that serves as the dashboard's workhorse text. Used at 0.9rem-1.1rem for module content, descriptions, and data readouts. Set with `font-weight: 400` for body text and `font-weight: 600` for emphasized readout values. `letter-spacing: 0.01em`, `line-height: 1.6`. The clean, open counters of Inter ensure readability even against the complex bokeh backgrounds, and its tabular figures option (`font-feature-settings: 'tnum'`) is activated for all numerical displays so digits align perfectly in stat columns. - **Mono / Data:** "JetBrains Mono" (Google Fonts) -- used exclusively for numerical readouts, code-like status strings, and the sonar module's coordinate displays. Set at 0.85rem, `font-weight: 400`, `letter-spacing: 0.05em`. Rendered in a pale turquoise (#7DF9FF) at 80% opacity, giving data elements the look of phosphorescent screen text on old marine instruments. **Palette:** The palette is **dark-neon** -- an abyss-dark foundation illuminated by vivid, bioluminescent accent colors that feel like they emit their own light. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Abyss Primary | Deep Ocean Black | #0B1628 | Main background, card fills | | Abyss Secondary | Midnight Navy | #0D2137 | Gradient endpoints, hover states | | Surface | Ink Trench | #111D33 | Elevated surfaces, module backgrounds | | Neon Cyan | Electric Jellyfish | #00E5FF | Primary accent, headlines, borders, interactive elements | | Neon Magenta | Coral Pulse | #FF2D78 | Secondary accent, highlights, alerts, chart fills | | Neon Green | Phosphor Kelp | #39FF85 | Success states, positive indicators, sparklines | | Pale Turquoise | Biolume Glow | #7DF9FF | Monospace text, tertiary accents, subtle borders | | Warm White | Foam Crest | #E8F4F8 | Body text, readable content | | Muted Lavender | Deep Current | #6B7FA3 | Deemphasized text, captions, timestamps | | Magenta Dim | Anemone Shadow | #8B1A4A | Dark magenta for background accents, depth chart fills at low opacity | **Gradient Definitions:** - **Ocean Depth:** `linear-gradient(180deg, #0B1628 0%, #0D2137 50%, #111D33 100%)` -- the primary page background - **Neon Reef:** `linear-gradient(135deg, #00E5FF 0%, #FF2D78 100%)` -- used on accent elements, buttons, decorative bars - **Bioluminescent Wash:** `radial-gradient(ellipse at 30% 70%, rgba(0, 229, 255, 0.08) 0%, transparent 60%)` -- subtle glow overlays on modules ## Imagery and Motifs **Tropical Fish as Interface Characters:** The site's central motif is the **tropical fish** -- not as realistic photographic imagery, but as stylized, geometric SVG illustrations that serve as interface mascots and navigational markers. Each fish is constructed from simple geometric shapes (ellipses, triangles, circles) filled with neon gradients, giving them the feel of video game sprites rendered in a seapunk color palette. Fish species are varied and distinctive: 1. **The Angelfish (Navigation Icon):** A tall, diamond-shaped silhouette with elongated dorsal and ventral fins, rendered as a CSS clip-path polygon filled with a cyan-to-magenta gradient. Used as the primary navigation indicator and appears in the sonar strip. 2. **The Pufferfish (Status Indicator):** A simple circle with small triangular fins and two dot eyes, used as a pulsing status dot in module headers. When "active," it inflates slightly (scale: 1.15) with a spring animation. When idle, it slowly rotates. 3. **The Swordfish (Progress Bar):** An elongated, sleek silhouette used as a progress indicator -- its nose points rightward and its position along a horizontal track represents completion percentage. The body is filled with phosphor green (#39FF85). 4. **The Clownfish (Brand Mark):** Two orange-and-white striped ellipses nested together, forming the "namu.club" favicon and brand stamp. It appears in the footer and as a watermark in the coral map module. **Bokeh Background System:** The entire site is suffused with a bokeh background effect -- soft, out-of-focus circles of light that drift almost imperceptibly across dark backgrounds, simulating the look of light scattered through water. This is achieved entirely in CSS: - **Layer 1 (Large Bokeh):** 5-7 radial gradients (`radial-gradient(circle at [x]% [y]%, rgba(0, 229, 255, 0.06) 0%, transparent 50%)`) positioned on a pseudo-element (`::before`) of the body, animated with a slow (60s) `@keyframes` that shifts `background-position` by 200px in X and 100px in Y, creating a gentle drift effect. - **Layer 2 (Small Bokeh):** 8-12 smaller radial gradients in magenta tones (`rgba(255, 45, 120, 0.04)`), on a second pseudo-element (`::after`), animated at a different speed (45s) and direction, creating parallax-like depth between the two layers. - **Layer 3 (Module-Local Bokeh):** Individual dashboard modules have their own subtle bokeh on `::before` pseudo-elements, using 2-3 radial gradients in pale turquoise, creating the impression that each card has its own localized underwater lighting. **Decorative Elements:** - **Bubble Particles:** Small circles (4-8px diameter) in pale turquoise at 20-40% opacity, positioned absolutely and animated with `@keyframes` that combine `translateY(-100vh)` with slight horizontal oscillation and opacity fade, simulating bubbles rising. 15-20 bubbles are scattered across the page, each with randomized animation-delay and animation-duration (8-15 seconds). - **Wave Dividers:** Section boundaries are marked by SVG wave shapes -- smooth, organic sinusoidal curves (created with SVG `` using cubic bezier curves) filled with semi-transparent cyan. Each wave has a slightly different frequency and amplitude to avoid repetition. - **Coral Cluster Decorations:** Small decorative clusters of CSS-only shapes (circles and rounded rectangles in varying sizes and neon colors) positioned in module corners or section margins, suggesting miniature coral formations. - **Caustic Light Patterns:** On the hero panel, a subtle caustic water-light effect is achieved by overlaying an SVG filter (`feTurbulence` + `feDisplacementMap`) on a gradient layer, creating the rippling, refracted light patterns seen on pool floors. This runs at low intensity (displacement scale: 5-8) so it reads as atmospheric texture rather than a distraction. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must feel like booting up a personal underwater monitoring station. The opening sequence is critical: the viewport begins entirely in Abyss Primary (#0B1628). After 500ms, the bokeh background layers fade in over 2 seconds (opacity 0 to 1), creating the impression of eyes adjusting to deep-water darkness. At 1.5 seconds, the sonar strip slides down from above the viewport (`translateY(-100%)` to `translateY(0)`) with an ease-out timing function over 600ms. At 2 seconds, the hero panel's tagline begins its slide-reveal animation: each letter rises from below a `overflow: hidden` container, staggered 40ms apart, so "Welcome to the reef" appears to bubble up from the depths. At 3 seconds, the drifting fish SVG fades in (opacity 0 to 1 over 1s) and begins its cross-screen journey. The entire opening sequence takes approximately 4 seconds and establishes the underwater dashboard metaphor before any scrolling occurs. **Slide-Reveal Animation System:** The primary animation pattern is **slide-reveal** -- elements enter the viewport by sliding from a hidden position (below, left, or right of a clipping container) into their final position. This is the dominant transition for all content: - **Module Entrance:** As the user scrolls, each dashboard module uses `IntersectionObserver` (threshold: 0.15) to trigger its entrance. Modules slide upward from 30px below their final position while simultaneously fading from opacity 0 to 1, over 500ms with an `ease-out` curve. Modules in the same grid row are staggered by 80ms using `transitionDelay` calculated from their column index. - **Interior Content Reveal:** Within each module, content elements (icons, text, charts) perform their own secondary slide-reveals after the module has landed. The module header slides in from the left (30px offset) over 300ms, the body content fades up (15px offset) over 400ms with a 150ms delay, and footer elements slide in from the right (20px offset) over 350ms with a 300ms delay. This cascading interior reveal gives each module the feel of an instrument panel powering on. - **Text Line Stagger:** Multi-line text blocks within modules reveal line-by-line, each line sliding up from behind a clipping boundary. Lines are wrapped in `` elements with `display: block; overflow: hidden;`, and inner `` elements perform the `translateY(100%)` to `translateY(0)` transition with 60ms stagger between lines. **Interactive Dashboard Behaviors:** - **Module Hover Glow:** On hover, each dashboard module gains a subtle outer glow -- a `box-shadow: 0 0 30px rgba(0, 229, 255, 0.12)` transitioning in over 300ms. The 1px border brightens from 15% to 40% opacity. The interior fish icon performs a small bounce (translateY -3px and back) using a spring-like cubic-bezier timing. - **Sonar Sweep Animation:** The sonar module's sweep line is a `conic-gradient(from 0deg, transparent 0deg, rgba(0, 229, 255, 0.3) 30deg, transparent 60deg)` on a circular element, rotating continuously with `animation: sweep 4s linear infinite`. A trail of 3 fading "blips" (small cyan circles) are positioned at the sweep's leading edge using `::before` and `::after` pseudo-elements. - **Fish Profile Interaction:** Hovering on a fish profile card causes the fish illustration to perform a gentle "swim" animation -- a slight body undulation achieved by animating the `d` attribute of an SVG path (or using CSS transforms on grouped SVG elements: body rotates +/-3 degrees, tail fin rotates +/-8 degrees, staggered with different timing). - **Sparkline Animations:** Decorative sparklines in module footers draw themselves on scroll-trigger using `stroke-dasharray` and `stroke-dashoffset` SVG animation, taking 800ms to complete their path, as though the instrument is live-plotting data. **Performance Approach:** All animations use `transform` and `opacity` exclusively (GPU-composited properties). Bokeh animations use `will-change: transform` on their pseudo-elements. IntersectionObserver is used for all scroll-triggered effects to avoid scroll-listener overhead. The fish SVG drift uses a single CSS animation rather than JavaScript. Bubble particles are limited to 20 maximum and use `contain: strict` on their container. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids with real metrics, newsletter signup forms, testimonial carousels, standard SaaS hero patterns, stock photography, generic "Learn More" buttons. Every interactive element should feel like operating an underwater instrument, not browsing a product page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Seapunk Dashboard Fusion:** No other design in the portfolio combines the seapunk aesthetic (at only 1% frequency) with a dashboard layout paradigm. Seapunk's saturated aquatic color world is typically rendered as flat, poster-like compositions. Rendering it as a functional-looking instrument panel creates an entirely novel hybrid: the playful irreverence of seapunk contained within the structured, information-dense architecture of a control dashboard. The result looks like a marine biology lab designed by the Tumblr seapunk movement circa 2012, upgraded with modern glassmorphism techniques. 2. **CSS-Only Bokeh Ecosystem:** While bokeh-background appears at 2% frequency in the portfolio, no other design builds a three-layer parallax bokeh system using only CSS radial gradients and keyframe animations. The combination of body-level large bokeh, body-level small bokeh in a contrasting hue, and module-local bokeh creates genuine perceived depth without any JavaScript, canvas, or WebGL. The bokeh is not decorative wallpaper -- it is the site's environmental atmosphere, making the entire interface feel submerged. 3. **Tropical Fish as UI Components:** At 1% motif frequency, tropical-fish is nearly unused in the portfolio. More importantly, no other design transforms its motif into functional UI elements -- the angelfish as navigation icon, the pufferfish as status indicator, the swordfish as progress bar. The fish are not decorative illustrations sitting beside content; they ARE the interface components, making the aquatic theme structural rather than ornamental. 4. **Slide-Reveal as Environmental Metaphor:** While slide-reveal appears at 3% pattern frequency, this design uniquely maps the animation to the underwater metaphor. Elements don't just slide in generically -- they rise like bubbles, surface like creatures emerging from the deep, or drift like objects carried by currents. The slide direction, speed, and easing are calibrated to feel like underwater movement (slower, more ease-out, slight horizontal drift during vertical motion), turning a common animation pattern into environmental storytelling. 5. **Sans-Grotesk Typography in a Playful Context:** The sans-grotesk typography approach (Space Grotesk at 3% frequency) is typically associated with tech dashboards and developer tools. Deploying it in a seapunk context creates productive friction: the precise, geometric letterforms of Space Grotesk read as "instrument panel labels" rather than startup marketing copy, reinforcing the dashboard conceit. The font's square-ish terminals specifically evoke CRT monitors and submarine readout screens, a visual connection that no other design exploits. **Chosen Seed:** aesthetic: seapunk, layout: dashboard, typography: sans-grotesk, palette: dark-neon, patterns: slide-reveal, imagery: bokeh-background, motifs: tropical-fish, tone: playful **Avoided Overused Patterns:** - centered layout (99%) -- this design uses dashboard grid, not centered single-column flow - scroll-triggered (96%) -- while IntersectionObserver is used, the primary animation pattern is slide-reveal, not generic scroll-triggered fades - parallax (76%) -- no parallax scrolling; depth is achieved through layered bokeh opacity rather than scroll-rate differentials - warm palette (100%) -- the dark-neon palette is cool-dominant (cyan, turquoise, deep navy) with magenta as the only warm accent - mono typography (98%) -- JetBrains Mono is used only for data readouts, not as a primary type family; the lead typeface is sans-grotesk (Space Grotesk) - vintage motifs (85%) -- tropical-fish motif is contemporary and stylized, with zero vintage treatment - friendly tone (98%) -- while playful, the tone is specifically "playful-scientific" rather than generically friendly; it has the specificity of a themed experience rather than approachable marketing copy