# Design Language for yesan.xyz ## Aesthetics and Tone yesan.xyz should feel like opening a small envelope on a sunny kitchen table and finding a thoughtful plan inside: quiet, exact, human, and gently optimistic. The name "yesan" can read as budget, estimate, or a modest promise of resources; the site turns that into an immersive miniature world where numbers are not cold columns but soft floating tokens that help visitors imagine what can be made. The aesthetic is **minimalist with ma-negative-space**: abundant silence, low-density composition, and a sense that every mark has been placed after a long pause. The mood is warm-inviting rather than corporate. Think Korean stationery store, blank ledger pages, soap bubbles drifting past a window, and a tiny desk calculator with rounded rubber buttons. The interface should avoid dashboards, sales funnels, and efficiency theater. Instead it should stage a calm narrative about turning uncertainty into a yes: one bubble at a time, one estimate at a time, one carefully held possibility at a time. ## Layout Motifs and Structure Use a full-screen narrative sequence built around negative space, not a conventional stacked landing page. Each viewport is a quiet room with one dominant thought, placed off-center and surrounded by intentional emptiness. The composition should follow a loose **ma field**: asymmetric anchor points, wide margins, sparse mono captions, and small circular elements that float across the whitespace like budget bubbles. Suggested structure: 1. **The Empty Ledger (Hero, 100vh):** A nearly blank cream canvas with `yesan.xyz` set in mono type near the lower-left third. A single translucent bubble follows the cursor, gently revealing small words inside it such as "plan", "pause", "margin", "maybe", and "yes". No navigation bar, no CTA block, no centered hero stack. 2. **The Estimate Garden:** Three or four small text fragments appear in distant positions across the viewport, connected only by subtle dotted rules that curve like pencil arcs. These are not cards; they are floating notes pinned to air. 3. **The Soft Abacus:** A horizontal band of large negative space where bubbles drift into loose rows, then break formation as the user scrolls. The layout should imply accounting without showing a stat-grid. 4. **The Warm Margin:** A final quiet scene where the page settles into one sentence and a cluster of small bubbles resting at the bottom edge, like coins in shallow water. Spatially, prefer lonely objects, off-axis placement, generous vertical pauses, and large untouched areas. Never fill the screen simply because space exists. Let emptiness be the main visual material. ## Typography and Palette Typography should be mono-led but softened through scale, spacing, and restraint. - **Primary Mono:** `IBM Plex Mono` from Google Fonts, weights 300, 400, 500. Use for the domain mark, section fragments, labels, and quiet narrative text. Its technical skeleton supports the budget/estimate reading while remaining warm enough for long pauses. - **Secondary Mono Accent:** `Space Mono` from Google Fonts, weights 400 and 700. Use sparingly for tiny numeric notations, bubble labels, and coordinates such as `margin 04`, `room 02`, or `yes / no / not-yet`. - **Optional Soft Counterpoint:** `Noto Sans KR` from Google Fonts, weight 300 or 400, for very small Korean-inspired marginal annotations if desired. Keep it minimal and never let it become a bilingual content-heavy layout. Palette: complementary, warm, and restrained — cream and ink supported by apricot and blue-green opposites. - **Ledger Cream:** `#F8F1E3` — primary background, warm paper without faux texture. - **Quiet Ink:** `#24211C` — main text, softer than black. - **Apricot Yes:** `#F2A65A` — warm emphasis, small bubble cores, rare highlights. - **Bluegreen Maybe:** `#3FA7A6` — complementary counterpart for bubble rims and cursor glow. - **Pale Mint Air:** `#DDF2EA` — translucent bubble fills and calm hover states. - **Soft Clay Shadow:** `#B88968` — low-opacity shadows, tiny rule marks, and warm depth. Use flat color, transparency, and fine outlines instead of gradients. If a gradient appears, it should be barely perceptible inside bubbles only, never as a full-page background treatment. ## Imagery and Motifs Imagery should be minimal and entirely generated with CSS/SVG: no photography, no stock illustration, no decorative icon sets. The primary motif is **bubble-playful** expressed as small, translucent budget bubbles: circles, capsules, decimal dots, and soft abacus beads. Each bubble should feel like a rounded thought rather than a cartoon asset. Motif vocabulary: - **Cursor-follow bubble:** A single soft circle trails the pointer with delayed easing. It should not feel like a tech demo; it should feel like a thought following the visitor's hand. - **Ledger marks:** Tiny monospace annotations, hairline ticks, short dotted arcs, and small parenthetical notes such as `(held)`, `(unspent)`, `(almost)`. - **Bubble arithmetic:** Minimal circles occasionally align as `1 + 1`, then drift apart into a more poetic arrangement. - **Breathing margins:** Empty areas receive very faint circular ripples when the cursor passes, like touching the surface of water. - **Warm paper geometry:** Use thin rules, rounded rectangles no larger than a postage stamp, and sparse coordinate labels to suggest planning without turning into a dashboard. The visual story should be: a blank page learns how to hold possibilities. Bubbles are the characters; negative space is the setting; mono text is the narration. ## Prompts for Implementation Build as a single immersive HTML/CSS/JS experience with embedded styles and scripts. Load Google Fonts for `IBM Plex Mono`, `Space Mono`, and optionally `Noto Sans KR`. Emphasize storytelling through motion, spacing, and pacing rather than through content volume. Implementation guidance: - Create a full-screen scroll narrative with four quiet scenes, each at least `100vh`, using sparse fixed-position or sticky elements that shift gently as the visitor moves. - Implement a custom cursor-follow bubble: a translucent circle with `mix-blend-mode: multiply` or low-opacity border, eased via `requestAnimationFrame`, containing tiny changing mono words. - Use CSS custom properties for the palette and bubble sizes. Let bubbles scale subtly based on cursor velocity or scroll position. - Animate with slow drift, delayed easing, and tiny opacity changes. Avoid aggressive parallax, staggered card reveals, hover-lift cards, and scroll-triggered spectacle. - Use negative space as choreography: elements should enter by becoming noticeable, not by flying in. A small dot appearing in the right place is better than a large animated section. - Keep the text short and poetic: fragments like "a margin is a promise", "count softly", "leave room for yes", and "not all value arrives as a number". - Avoid CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, testimonial rows, nav bars, and footer link farms. If an action exists, make it a tiny textual invitation such as `float onward` rather than a button. ## Uniqueness Notes - This design treats budgeting/estimation as a warm spatial poem, not a fintech dashboard; it uses bubbles and silence instead of graphs, cards, or conversion funnels. - The planned ma-negative-space layout makes emptiness the primary compositional device, directly avoiding the batch's overused centered layouts, card-grids, and dense corporate structures. - The cursor-follow pattern becomes the main character of the experience, a soft companion bubble carrying changing words, rather than a decorative pointer gimmick. - The complementary palette is intentionally quiet: apricot and blue-green are used as small emotional sparks against ledger cream, avoiding the overused warm gradient look. - Imagery remains minimal but playful through CSS-generated bubble arithmetic, dotted ledger marks, and breathing margins rather than photography or generic icons. - Chosen seed/style: aesthetic: minimalist, layout: ma-negative-space, typography: mono, palette: complementary, patterns: cursor-follow, imagery: minimal, motifs: bubble-playful, tone: warm-inviting. - Frequency analysis patterns avoided: corporate aesthetic, card-grid layout, centered hero stacks, photography, heavy gradients, parallax, staggered reveals, stat-grids, and authoritative tone.