# Design Language for mana.dev ## Aesthetics and Tone mana.dev merges the concept of "mana" -- the mystical life force from Polynesian mythology and RPG game culture -- with the .dev domain's developer focus. The site presents itself as a spellbook for developers: an arcane grimoire where code is incantation and APIs are rituals. The aesthetic is ethereal and luminous, drawing from the visual vocabulary of magic systems in JRPGs and fantasy literature, but rendered through a clean, modern developer-tool sensibility. The tone is dreamy-ethereal yet intellectually rigorous -- imagine a wizard who also holds a computer science degree. The language of magic (spells, mana pools, enchantments, grimoires) maps naturally onto developer concepts (functions, resource pools, decorators, documentation). The experience feels like consulting an ancient text that happens to be written in TypeScript. ## Layout Motifs and Structure **Primary layout: immersive-scroll** with **layered-depth** creating a descent through magical strata. The page unfolds as a vertical descent through layers of increasing magical depth: the Surface (introduction), the Ether (core concepts), the Deep Well (API reference), and the Source (origin story). Each layer occupies a full viewport height and uses CSS perspective transforms to create a sense of descending into the earth. **Spatial relationships**: Content is presented in a single-column layout (max-width: 720px, centered) with floating "rune" elements positioned in the margins at varying z-index depths. As the user scrolls, deeper layers reveal denser, more complex content while the background transitions from open sky to deep cavern. **Navigation**: A vertical mana bar (styled as a translucent crystal vial) sits fixed on the right edge of the viewport. It fills from empty (top) to full (bottom) as the user scrolls, with glowing liquid that shifts color from pale cyan to deep violet. Each section marker appears as a glowing node on the vial. Clicking a node scrolls to that section. ## Typography and Palette **Typography** - **Display / Section Titles:** "Cinzel" (Google Fonts) -- a classical serif with sharp, engraved letterforms that evoke carved stone inscriptions and magical tomes. Used at 3rem-5rem, weight 700. Uppercase with letter-spacing: 0.08em for an authoritative, ancient quality. - **Body / Documentation Text:** "Source Sans 3" (Google Fonts) -- a clean, humanist sans-serif optimized for reading long technical content. Weight 400 for body, 600 for emphasis. Line-height 1.75. 17px size. Its clarity balances the ornate display type. - **Code / Spells:** "Fira Code" (Google Fonts) -- a monospace font with programming ligatures. Weight 400. Used for code blocks styled as "spell incantations" with custom backgrounds. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Void Background | Near-black with blue undertone | #0b0e17 | | Mana Cyan | Bright ethereal cyan | #00e5ff | | Arcane Violet | Deep magical purple | #7b2ff7 | | Rune Gold | Warm inscription gold | #d4a853 | | Ether Mist | Semi-transparent pale blue | #a8c8e8 | | Parchment Glow | Warm reading surface | #1a1a2e | | Crystal White | Pure highlight | #e8f4fd | The palette is dark-dominant with luminous accents that appear to emit their own light, creating a bioluminescent cavern atmosphere. ## Imagery and Motifs **Core Visual Motifs** 1. **Generative Rune Circles**: SVG-based geometric patterns that rotate slowly (60s per revolution) in the background. Composed of concentric circles, interconnected nodes, and angular sigil lines drawn with stroke-dasharray animations. Colors use Mana Cyan at 0.1 opacity, occasionally pulsing to 0.3. These form the primary ambient decoration and reference both magical summoning circles and circuit diagrams. 2. **Particle Constellation Field**: A canvas-based particle system where small luminous dots (1-3px) drift slowly across the viewport. When the cursor approaches, nearby particles accelerate away (magnetic repulsion effect). Particles connect with thin lines when within 100px of each other, forming temporary constellations. Colors alternate between Mana Cyan and Arcane Violet. 3. **Code-as-Spell Blocks**: Code snippets are presented in containers styled as spell scrolls -- dark Parchment Glow backgrounds with a subtle border-image using a repeating rune pattern (CSS border-image with SVG source). A faint glow effect (box-shadow: 0 0 20px rgba(0, 229, 255, 0.1)) emanates from active code blocks. 4. **Mana Crystal Dividers**: Section breaks use a centered diamond/crystal shape (CSS rotated square with gradient fill from Mana Cyan to Arcane Violet) flanked by thin extending lines, replacing conventional horizontal rules. 5. **Depth Fog Layers**: Between sections, CSS gradient overlays create misty transition zones where content fades into and emerges from fog (linear-gradient with transparent to Void Background to transparent). ## Prompts for Implementation **Storytelling and Narrative Arc** The site tells the story of mana as a journey of discovery. The visitor begins at the Surface -- a dark sky with distant stars (particle field) and a single glowing title "MANA" that pulses with inner light. Scrolling initiates the descent. The Ether layer introduces the concept with poetic prose alongside the first code examples (spells). The atmosphere grows denser -- more particles, more rune circles, warmer gold accents appear alongside the cyan. The Deep Well is the API reference section -- dense, structured, technical. The background shifts to deep Parchment Glow. Code blocks dominate. The generative rune circles are now complex and layered, suggesting mastery. The Source layer tells the origin story -- the Polynesian concept of mana, its journey through gaming culture, and its arrival as a developer metaphor. The background transitions to warm Rune Gold tones, and the final element is a slowly rotating, fully-drawn summoning circle that completes its animation exactly as the user reaches the bottom. **Animation Priorities** - Generative rune circle rotation and pulse (CSS keyframes, 60s rotate, 4s opacity pulse) - Particle constellation system (canvas with requestAnimationFrame, cursor interaction via mousemove listener) - Mana bar fill animation (CSS custom property --scroll-progress updated via scroll listener, controls linear-gradient position and color) - Depth fog opacity transitions (IntersectionObserver controlling opacity of gradient overlays) - Code block glow pulse on hover (CSS transition: box-shadow 0.6s ease) **Full-screen Narrative Experience**: Each section uses min-height: 100vh with scroll-snap-align: start. The descent metaphor should feel continuous and unbroken. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, card-grid product displays, hamburger menus, footer newsletter signups. ## Uniqueness Notes **Differentiators:** 1. **Magic-as-code metaphor system**: The entire design vocabulary maps magical concepts to developer concepts (spells=functions, mana pool=resources, grimoire=docs), creating a coherent thematic language unique in the batch. 2. **Vertical descent spatial model**: Unlike horizontal or standard scroll designs, the site uses perspective transforms and atmospheric density changes to create the sensation of physical descent into a magical cavern. 3. **Interactive particle constellation with cursor repulsion**: The magnetic repulsion particle system creates a unique interaction model where the user's cursor presence visibly affects the ambient environment. 4. **Mana bar as scroll indicator**: Using a crystal vial filling with glowing liquid as the scroll progress indicator is a novel navigation mechanism that reinforces the theme at every moment. **Chosen seed/style:** generative art background **Avoided overused patterns:** corporate aesthetic (89%), centered layout as sole structure (87%), minimal imagery (84%), counter-animate as primary pattern (90%), mysterious-moody as sole tone (96%), mono as sole typography (92%). Instead used immersive-scroll layout, dreamy-ethereal tone, elegant-serif display type paired with humanist body, and aurora-gradient palette family.