# Design Language for BBATTL.com ## Aesthetics and Tone BBATTL.com is a "fairycore combat terminal" — what happens when a sugar-pink woodland sprite logs into a tournament console at 3am. The site reads like a tropical-fish aquarium running on a CRT: bioluminescent corals, candy-bright koi, and a steady terminal cursor that refuses to blink. The tone is **bold-confident** but never aggressive — it has the swagger of a six-inch fairy who has just declared a duel and absolutely intends to win it. Every element should feel like it was hand-stamped onto a holographic sticker, then scanned through a green-phosphor display. The mood is **luminous, pugnacious, slightly absurd**. Inspirations to layer (in this order of dominance): 1. The under-glass shimmer of saltwater reef tanks lit by actinic blue LEDs 2. Late-90s pet-tournament arcade cabinets (Pokémon Stadium, Monster Rancher) re-skinned by a mushroom-foraging fairy 3. Korean dance-arcade UI typography: bracketed counters, aggressive monospaced verbs, ALL-CAPS dares 4. A tide-pool seen through a thrift-store kaleidoscope Refuse seriousness, refuse cuteness as politeness. This is **cuteness as a weapon**. ## Layout Motifs and Structure A **strict diagonal Z-pattern** governs every screen — the eye is dragged from upper-left to upper-right (banner glyph + tournament tag), then slashes down-left across a wide central duel-arena, and finishes lower-right with a single combat verb. The Z is not implied: it is **drawn, animated, and labeled** with kilometer markers as if the gaze itself were a fish swimming a slalom course. Spatial system: - **12-column underwater grid** with a 1.618 vertical rhythm — every section height is the previous one multiplied by phi, producing a layered-reef cascade. - **Three Z-anchor zones per page**, each occupying ~33vh, separated by hand-drawn current-lines (animated SVG sine waves drifting at 0.4 Hz). - **No traditional hero**: the first viewport is a **glass aquarium pane** with the navigation as a row of plastic plant-tags pinned along the substrate. - **No CTA stacks, no pricing tables, no stat grids**. Where a CTA would normally live, place a single underlined verb (FIGHT, BLOOM, FORFEIT, RECONSIDER) that draws its own underline character-by-character on hover. - **Full-bleed sections** broken by ragged seaweed dividers — torn-paper edges rendered with feTurbulence SVG filters tinted candy pink. - **Asymmetric sidebar** on long-form pages: left column is a fixed terminal log (typewriter ticking through duel commentary), right column is the actual content scrolling at a slightly different speed (subtle 0.92x parallax). The structure is a **narrative aquarium**: scrolling is "diving deeper." Each Z-traversal drops the viewer one reef-shelf lower, the palette deepens by ~8% lightness, and the tropical fish in the background become rarer and more chromatic. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / verbs / battle-cries:** `JetBrains Mono` at 900 weight, letter-spacing 0.06em, ALL CAPS. Used for every shouted word and every Z-anchor. - **Body / commentary:** `IBM Plex Mono` 400/500. Long-form duel notes and lore. - **Accent / fairy whisper:** `Press Start 2P` reserved for tiny 10px footnotes — the pixel-art subtitle to a tropical scene. Use sparingly (3-5 times per page max). - **Numerals:** `Space Mono` for any HP bars, round counters, fish-population tallies — its tabular figures keep the arena scoreboard rigid. All four are monospaced. The site is typographically **tech-mono throughout** — even the dreamy parts. The contrast comes from color and decoration, never from a serif-vs-sans break. **Palette — "Candy-Bright Reef" (every value is exact):** - `#FF4FB8` — Bubblegum Anemone (primary action, underline-draw default) - `#7CF8E2` — Spearmint Foam (secondary, terminal cursor, current-line strokes) - `#FFE45C` — Sunbleached Coral-Yellow (highlights, hover glow) - `#A06CFF` — Sea-Urchin Violet (background gradient stop, headline shadows) - `#0D1B2A` — Trench Indigo (deep background — the ocean-floor at midnight) - `#FFFAF0` — Sandbar Ivory (text on dark, foam particles) - `#FF7A45` — Clownfish Tangerine (alert, "FIGHT" verb, low-HP states) - `#3DDC8C` — Phosphor Algae (success, growing-underline, terminal stdout) Gradient signature: **`#A06CFF → #FF4FB8 → #FFE45C`** at 135deg, applied only to large display words and the diagonal Z-axis itself. Treat it as a finishing-move — never apply to body copy or backgrounds. Body backgrounds are `#0D1B2A` washed with a 6% noise-grain SVG overlay; section panels are `#0D1B2A` lightened by 4–8% per shelf. Text on dark is `#FFFAF0`; text on candy panels is `#0D1B2A`. ## Imagery and Motifs **Generative-art tropical fish** swim through every page: - A WebGL canvas (or a CSS-only fallback of staggered SVGs) renders 12–24 procedurally-generated fish at any moment. Bodies are Bezier-curve teardrops; fins are noise-displaced strips; patterns are domain-warped Perlin noise sampled into the candy palette. No two fish are identical. They flock with a lightweight boids algorithm constrained to the Z-axis lanes — they literally swim along the reading path. - Fairy-coded **bioluminescent particles**: 80–120 tiny dots drifting upward at varying speeds, each a 1–2px circle with a 6px blur in `#7CF8E2` or `#FFE45C`. They react to cursor position with a soft magnetic repulsion (radius 120px, falloff quadratic). - **Hand-drawn coral silhouettes** in SVG, asymmetrically scattered at section transitions. Five master coral shapes, each rotated/mirrored/scaled — never duplicated at the same orientation on one page. - **Underline-draw** is the headline interaction: every link, every verb, every Z-anchor label has an underline that **draws itself** stroke-by-stroke on hover (SVG path with `stroke-dasharray` animation, 320ms `cubic-bezier(0.65, 0, 0.35, 1)`). Underlines are **wavy** — three sine periods across the word — not straight. Color matches `#FF4FB8` by default, shifts to `#3DDC8C` on click. - **Tropical-fish motifs as bullets, dividers, and glyphs**: list bullets are 16px micro-fish; horizontal rules are a school of five fish in a swim-line; the favicon is a single `#FF4FB8` koi outline on `#0D1B2A`. - **No stock photography. No 3D renders of products. No icon-set glyphs.** Everything bespoke and procedural. ## Prompts for Implementation Build BBATTL.com as **a single immersive narrative reef**, not a product page. The site tells the story of a duel from the first cursor-blink to the final verdict. Every scroll is a dive; every hover is a current; every click is a strike. Storytelling sequence (mandatory order, full-screen sections): 1. **Surface** — black ocean, terminal cursor blinks once, the word `BBATTL` types itself in `JetBrains Mono` 900 across the upper-left of the Z. Three fish drift past from off-canvas right. 2. **Descent** — Z slashes down. Sub-headline (the site's purpose, written as a battle-cry, max 14 words) appears letter-by-letter with the underline-draw effect. Particles intensify. 3. **Arena** — central viewport: the duel scene. Two procedural fish face each other across a coral pillar. One bears the visitor's session-hash as a name-tag; the other is generated from the current minute. They circle slowly. A mono-typed commentary log scrolls in the left rail. 4. **Lore shelf** — long-form section, parallax-divergent columns, with current-line dividers between paragraphs. Use `IBM Plex Mono` here. 5. **Verdict** — final Z-anchor, lower-right, single verb in the gradient, surrounded by phosphor-algae glow. Below it, in 10px `Press Start 2P`, a haiku-length epilogue. Animation rules: - Default ease for everything: `cubic-bezier(0.65, 0, 0.35, 1)`. No linear, no bounces unless declaring a battle event. - All entrances are `fade-reveal + 12px upward slide`, staggered along the Z-axis. - Particles and fish run on `requestAnimationFrame` capped at 30fps to keep a deliberate, slightly-arcade feel — **do not chase 60fps smoothness; the slight chunkiness is part of the aesthetic**. - Every interactive element MUST animate its underline. No exceptions, no plain links. - Cursor follows: a 12px `#7CF8E2` ring with a 1-frame trail, replacing the system cursor on `pointer:fine` devices. - Z-axis itself is an animated SVG line drawn on first paint over 1.4s — viewers should *see* the diagonal being struck across the page. What this site is NOT and MUST AVOID: - No CTA-heavy "Get Started / Pricing / Features" trio. - No three-column feature grid. - No stat counter ("10,000+ users"). - No testimonial carousel. - No accordion FAQ. - No corporate hero with right-aligned product screenshot. - No serif type, no rounded sans, no soft pastel washes — the candy is **electric**, not powdery. Mobile: collapse Z to a vertical lightning-bolt (top-left → middle-right → bottom-left → footer-right). Particles thin to 30; fish to 6. Underline-draw and cursor-follow remain. Section heights keep the phi rhythm. ## Uniqueness Notes Differentiators from anything else in this monorepo: 1. **Tech-mono typography paired with fairycore aesthetic** — almost every fairycore site uses scripts or rounded sans; BBATTL uses four monospaced fonts only. The whimsy comes from color, motion, and motif, not letterform. 2. **Procedural tropical-fish flocking constrained to the Z-pattern reading path** — the imagery literally implements the layout. The fish are the eye-track diagram, made visible. 3. **Wavy underline-draw as the *only* interaction language** — every link, button, and verb shares one signature gesture, performed in candy pink with a sine-wave shape. There are no rectangles. 4. **Phi-cascading vertical rhythm with palette-darkening per shelf** — scrolling is depth, not just length. The page literally gets deeper. 5. **Bold-confident tone delivered through fairy-coded vocabulary** — verbs are FIGHT/BLOOM/FORFEIT/RECONSIDER, not Sign Up / Learn More. The dare is the design. 6. **Cursor-as-fairy-cursor and 30fps deliberate chunk** — anti-pattern to the smooth-saas industry default; reads as arcade-cabinet honesty. Chosen seed: **aesthetic: fairycore, layout: z-pattern, typography: tech-mono, palette: candy-bright, patterns: underline-draw, imagery: generative-art, motifs: tropical-fish, tone: bold-confident**. Frequency analysis at time of writing returned `no_designs_found` (BBATTL.com is among the first batch of designs). Patterns proactively avoided to keep the seed unique once siblings exist: card-grid layouts, glassmorphism panels, gradient-mesh hero backgrounds, neon-glow imagery as a primary motif, dopamine-neon palettes (we use candy-bright, which is brighter and warmer), cursor-follow as the only interaction (we layer it under underline-draw), corporate-saas tone, and any use of serif or rounded-sans typography.