# Design Language for valuator.dev ## Aesthetics and Tone valuator.dev should feel like a calm midnight pond that happens to be running a friendly valuation engine under the surface. The mood is zen, dark-neon, and approachable-casual: less “enterprise calculator,” more “late-night developer tea ceremony where numbers float up as luminous bubbles and settle into meaning.” The experience should make valuation feel contemplative rather than extractive — a gentle act of observing, comparing, and letting a fair number reveal itself. The visual inspiration is a koi pond seen through a terminal window: black-green depth, cyan reflections, soft lime leaf silhouettes, little neon bubbles carrying snippets of mono-spaced logic. Avoid finance clichés like stock tickers, bar charts, handshakes, dashboards, and urgent conversion copy. Instead, create a meditative narrative about value as something ecological: an estimate grows from context, signal, uncertainty, and care. Tone is casual and warm, with short phrases that sound like a helpful developer friend: “drop an idea in,” “watch the signals rise,” “let the number breathe.” ## Layout Motifs and Structure Use a single-column scroll as a vertical water column. The page is one uninterrupted descent from surface shimmer to deep-pool clarity and back to a final floating result. Keep the content centered but not static: a narrow text stream, approximately `min(720px, calc(100vw - 40px))`, should meander subtly left and right using section-specific transforms, like a reed bending in current. The overall composition should be spacious, immersive, and full-screen in feel, with each section occupying at least `90vh` and acting as a scene in a quiet valuation ritual. Structure the story in five stacked scenes: 1. **Surface / Name:** a full-height opening with `valuator.dev` typeset as a glowing mono inscription partially submerged behind animated bubble masks. A small leaf-shaped cursor or marker drifts beside the title. 2. **Drop / Input:** an imagined valuation input is represented as a single pebble-like code token falling into the water, creating concentric neon ripples behind a short explanatory line. 3. **Listen / Signals:** floating bubbles rise through a column, each containing one signal word such as `market`, `usage`, `risk`, `timing`, `craft`, `maintenance`. Do not arrange them as a stat grid; they should feel found, not ranked. 4. **Settle / Estimate:** morphing organic panels slowly merge into one calm value pool. This is the emotional center: uncertainty condenses into a soft number-like glow without becoming a pricing block. 5. **Release / Closing:** the final screen shows a leaf raft carrying the domain name downstream, with tiny terminal comments fading in the wake. The layout must avoid card grids, bento blocks, dashboards, pricing tables, heavy hero CTA clusters, and conventional nav. If navigation exists at all, make it a tiny vertical depth marker on the side, like pond measurement ticks, not a menu. ## Typography and Palette Typography should be mono-forward but gentle, pairing code precision with rounded breathing room. - **Primary display and body:** "IBM Plex Mono" from Google Fonts, weights 300, 400, 500, and 700. Use it for the domain name, body copy, labels, and bubble text. Its technical rhythm reinforces valuation logic without feeling aggressive. - **Secondary annotation mono:** "Space Mono" from Google Fonts, weights 400 and 700. Use sparingly for tiny terminal comments, depth marks, and micro-labels. - **Optional soft contrast:** "IBM Plex Sans" from Google Fonts, weights 300 and 400, only for very small supportive prose if the implementation needs relief from all-mono density. Palette should be dark-neon with organic greens and aquatic highlights: - Pond black: `#020706` for the deepest background. - Ink moss: `#071914` for subtle section gradients and organic panels. - Neon cyan: `#28F7FF` for bubble rims, ripples, and active glow. - Leaf lime: `#A6FF6A` for leaf shapes, positive highlights, and tiny cursor details. - Soft mint: `#C7FFE1` for primary text on dark surfaces. - Violet shadow: `#6E5BFF` for underwater depth, secondary halos, and morph transitions. - Warm reflection: `#FFE7A3` for rare friendly sparks and the final “settled” glow. Use glow carefully: thin cyan rings, transparent mint text, and faint violet gradients should feel submerged. Text should not be pure white; keep it tinted and humid. ## Imagery and Motifs All imagery should be generated with HTML, CSS, and SVG. No stock photos, no literal money icons, no calculator clip art. The primary motif is **water-bubble valuation**: translucent circles of different sizes rising at uneven speeds, each distorted with `filter: url(#goo)` or CSS `border-radius` morphing so bubbles wobble, merge, and split. Some bubbles should briefly reveal mono-spaced fragments like `0.72 confidence`, `context++`, `signal: recurring`, or `risk? soften`, then dissolve before they read like metrics. The secondary motif is **leaf-organic interface chrome**: small elliptical leaves, reeds, and seed shapes built from CSS pseudo-elements. Leaves can act as bullets, cursor followers, separators, and masks for the hero title. They should never become a botanical illustration panel; they are quiet pond life growing around a developer tool. Additional visual language: - Morphing SVG blobs as underwater “value clouds,” with edges that breathe between leaf and bubble silhouettes. - Concentric ripple rings that expand from invisible drops when sections enter view. - A faint vertical depth line behind the single column, with tiny tick labels like `surface`, `signal`, `settle`, `release`. - Terminal comments drifting like silt: `// not a guess`, `// context has gravity`, `// let uncertainty show`. - Cursor hover states that create tiny bubbles instead of button lifts. ## Prompts for Implementation Build a single-file `index.html` with embedded CSS and JavaScript. Load Google Fonts for "IBM Plex Mono", "Space Mono", and optionally "IBM Plex Sans". The site should be a full-screen narrative experience, not a product landing page. Treat each section as a quiet scene in an underwater valuation ritual. Implement the background as layered radial gradients plus animated CSS/SVG bubbles. Use JavaScript only to enhance scroll storytelling: bubble drift speed based on scroll depth, ripple bursts when scenes enter the viewport, and subtle morphing of the central value cloud. Avoid heavy UI logic, forms, dashboards, charts, pricing blocks, stat grids, testimonial rows, CTA-heavy layouts, and generic SaaS components. If a button is included, make it a single understated text object such as `begin observing` or `float a value`, integrated as part of the narrative rather than a sales CTA. Animation direction: slow, liquid, and responsive to attention. Bubbles should rise continuously but lazily; leaves should rotate a few degrees as if in current; mono comments should appear, blur, and sink. Section transitions should feel like moving through water pressure rather than snapping between panels. Use `mix-blend-mode: screen`, transparent borders, SVG turbulence filters, and CSS custom properties for glow intensity. Favor one memorable morphing centerpiece over many separate widgets. Copywriting should be sparse and poetic. Suggested fragments: “value is a pond, not a scoreboard,” “drop in a context,” “signals rise when they are ready,” “the estimate settles where uncertainty becomes useful.” The final impression should be that valuator.dev is a thoughtful developer tool for making value visible without pretending that valuation is mechanical certainty. ## Uniqueness Notes 1. **Valuation as pond ecology:** This design replaces finance dashboards with an underwater zen ritual, making value feel observed, grown, and settled rather than calculated in a corporate grid. 2. **Mono typography softened by water:** The planned mono typography is kept, but it is submerged in bubbles, ripples, and leaf masks so the developer tone becomes approachable instead of terminal-hard. 3. **Single-column as water column:** The layout is not just vertically stacked; it behaves like a depth gauge, with each full-screen scene representing a deeper layer of interpretation. 4. **Morphing bubbles over conventional metrics:** Signals appear inside merging water forms rather than cards, counters, or charts, differentiating the site from analytics and SaaS patterns. 5. **Chosen seed/style:** aesthetic: zen, layout: single-column, typography: mono, palette: dark-neon, patterns: morph, imagery: water-bubbles, motifs: leaf-organic, tone: approachable-casual. 6. **Avoided frequency-heavy patterns:** Intentionally avoids the overused corporate aesthetic, photography/minimal imagery defaults, centered card grids, warm gradients, parallax-as-default, staggered stat sections, authoritative tone, and CTA-heavy pricing/dashboard conventions noted in the frequency analysis.