# Design Language for prototype.moe ## Aesthetics and Tone prototype.moe is a **living sketchbook that never got cleaned up** — the digital equivalent of a studio wall covered in pinned reference tearsheets, swatches of Pantone chips, and half-finished studies that turned out to be the finished thing. The domain word "prototype" is taken literally: nothing here is final, everything is in-process, and the in-process *is* the product. The `.moe` TLD carries its Japanese internet-culture roots — affection, earnestness, a kind of sincere enthusiasm that American design culture has trouble expressing without irony. The aesthetic is **mcbling reinterpreted through forest silence**. Classic mcbling vocabulary — chrome, plasticky reflections, oversaturated highlights, the Y2K-era belief that digital surfaces should feel like they are made of extruded candy — is here cooled down and pulled into an entirely different emotional register. The chrome is replaced with dark wet-bark greens. The candy gloss is replaced with the waxy sheen of a broadleaf in morning rain. The oversaturation is replaced by a single controlled brightness burst on the leaf-vein highlight. The result is mcbling's *structure* — bold layering, tactile surface depth, that feeling that you could reach through the screen and pick something up — but executed in forest-floor pigments rather than early-2000s Hot Topic neon. The tone is **raw-authentic**: no gloss over the process, no pretense that work emerges fully formed. Brush traces are left visible in the SVG paths. Opacity values are odd numbers (73%, 81%) rather than clean 50%/100%. The site does not explain what it is. It exists. You either understand it or you scroll past. The mood is a still forest morning: dense, humid, every surface coated in a film of dew that catches light at one precise angle. The visitor is standing at the edge of a clearing, not inside the studio — they can see shapes moving through the treeline, work happening, but they are at a respectful distance. ## Layout Motifs and Structure The layout is **hero-dominant** — the first viewport is the entire argument. Nothing is saved for a second screen. The page does not reward scrolling with revelation; the revelation is the arrival. **Hero structure (100svh, precise):** The hero is a single full-bleed composition occupying the entire first viewport. It is not a centered-column headline-plus-subhead arrangement (that is the corpus's interpretation of "centered" and "hero" at 85% frequency — we avoid it). Instead, the hero is an **asymmetric layered stage**: a large organic leaf-form occupies the lower-right quadrant as a structural anchor, its edge bleeding off the bottom and right side. The domain name `prototype.moe` is set in the upper-left quadrant, large but not screaming — roughly 9vw, uppercase, tight tracking, anchored to the left margin like a studio label rather than a brand headline. Between these two poles — the word in the upper left, the leaf in the lower right — the remaining space is left deliberately empty, functioning as a compositional void that holds tension. **Layer system (3 planes, z-indexed):** - Plane 0 (background): near-black forest tone (`#0d1a0f`), no texture, no grain - Plane 1 (mid): the leaf SVG form, rendered in a slightly lighter dark-green with a waxy highlight stripe along its central vein — a single-pixel-wide line at 40% opacity white that catches the implied light source from upper left - Plane 2 (foreground): typographic elements — wordmark, a single line of metadata text (3–4 words maximum, e.g., a date or a version string), no navigation bar **Spatial math:** Left margin: `max(48px, 5vw)`. Top margin for wordmark: `max(40px, 6vh)`. The leaf form's anchor point is at approximately 60% from left, 55% from top — it is slightly right-of-center and slightly below-center, creating a visual weight that pulls the eye down-right, against which the wordmark pulls up-left. **Below-the-fold (minimal):** If any content exists below the hero, it is a single section of sparse work-in-progress artifacts: SVG sketches, color studies, or short text fragments — each occupying its own breathing space, never in a grid, laid out like objects placed on a long table rather than items sorted into columns. The section has no header, no label, no navigation entry. It is simply there. **Mobile adaptation:** The leaf form scales to 85% and shifts to center-bottom, bleeding off only the bottom edge. The wordmark shifts to upper-center. The asymmetry is reduced but not eliminated — the leaf still anchors at 50% from left rather than 50%, so it remains slightly offset. ## Typography and Palette **Typography — geometric-sans, all from Google Fonts:** The palette's forest authority demands letterforms that are rational and undecorated — no humanist warmth, no serif history. Geometric-sans is the correct idiom: the circle is a circle, the O is a circle, the economy is absolute. - **Primary display / wordmark:** `Space Grotesk` — weight 700, uppercase, letter-spacing 0.15em. Space Grotesk's slightly quirky geometric terminals (the slightly flattened 'G', the single-storey 'a') give it personality without breaking the rational structure. Used for `PROTOTYPE.MOE` in the hero, set at `clamp(2.4rem, 9vw, 8rem)`. - **Secondary / metadata:** `Space Grotesk` — weight 400, lowercase, letter-spacing 0.05em, for the single line of metadata beneath or beside the wordmark. Size `clamp(0.75rem, 1.5vw, 1rem)`. The decision to use one typeface in two weights rather than two typefaces reinforces the "single system, multiple states" idea that a prototype embodies. - **Tertiary / artifact labels (if any):** `DM Mono` — weight 400, size 11px, letter-spacing 0.03em, in `#3a5c40` (a middle-forest green). Used exclusively for technical annotations on any below-fold sketch artifacts. The mono face signals that this is notation, not prose. **Palette — forest-green, dark to bright:** | Name | Hex | Role | |------|-----|------| | `Humus` | `#0d1a0f` | Background plane 0 — near-black forest floor | | `Bark` | `#1c3320` | Surface tint for any card or panel element | | `Canopy` | `#2d5a38` | Mid-tone — leaf body, secondary text in light contexts | | `Fern` | `#3a7a47` | Primary accent — used sparingly on interactive states | | `Dew` | `#a8d5b0` | Bright accent — the highlight stripe on the leaf vein, the wordmark itself on dark background | | `Fog` | `#e6f0e8` | Near-white — used only for the metadata line text; never as a background | | `Vein` | `#ffffff` | Single-use: the 1px highlight line on the leaf SVG, at 40% opacity only | All text on dark backgrounds is `Dew` (`#a8d5b0`) or `Fog` (`#e6f0e8`). There is no pure white text. The warmth of `Dew` (it reads as a very pale mint) keeps the palette from feeling cold. ## Imagery and Motifs **All imagery is SVG, drawn inline, no photography, no stock, no icon fonts.** The visual program is built on a single organic motif: the **broadleaf form**. Not a generic decorative leaf — a specific leaf. The design system documents it as if it is a specimen: a single pinnate leaf, roughly elliptical, approximately 3:2 height-to-width ratio, with a prominent central vein and 8–10 pairs of lateral veins branching at roughly 45 degrees. The outline is drawn with deliberate imprecision — the path has 3–5 anchor points more than a smooth ellipse would require, giving the edge a faint non-mechanical quality without becoming hand-drawn or organic in the decorative sense. The stroke is off (filled, not stroked) to maintain the mcbling-influenced solid surface quality. The highlight vein is a separate SVG path layered above. **Leaf-organic motif system:** - **Hero leaf:** Full-bleed large form, `Canopy` fill (`#2d5a38`), waxy surface implied by a subtle radial gradient from `Canopy` to `Bark` (`#1c3320`) applied at 30% opacity as a blended layer. The gradient radiates from the upper-left of the leaf (implied light source). The central vein highlight is a single `` element with a 1px white stroke at 40% opacity and `stroke-linecap: round` — it begins at the leaf base and tapers toward the apex. - **Secondary leaf (reduced):** A smaller leaf form (approximately 30% of hero leaf size) placed off-canvas to the left, bleeding only its right edge into the composition. `Bark` fill, no highlight. Creates depth without competing with the hero leaf. - **Micro-leaf marks:** 3–5 very small leaf silhouettes (6–12px rendered size) scattered in the upper-right void at irregular angles — these are the same base path, scaled down and rotated at prime-number angles (7°, 23°, 41°, 67°, 113°). `Fern` fill at 25% opacity. They read as debris or pollen, reinforcing the forest-floor quality. **No photography.** The corpus uses photography at 85% — we abstain entirely. The waxy leaf surface with its light-gradient already reads as dimensional and material; photography would break the spell. **No decorative borders, no line rules.** Separation is achieved through spatial rhythm and opacity, not visual dividers. ## Prompts for Implementation **The story to tell.** A designer opens their sketchbook to a page they pinned a real leaf to. The leaf has been there long enough that it has dried to a dark, translucent green. The sketchbook is a prototype for something — it is unclear what. The page does not explain itself. The visitor has been handed the sketchbook and is trusted to understand that the work is the point. **Fade-reveal animation — the primary motion pattern:** The entire page begins invisible (opacity: 0, background already `Humus`). A single coordinated fade resolves everything into view over 1400ms with a cubic-bezier(0.25, 0.1, 0.25, 1.0) ease. The sequence: 1. `0ms–400ms`: Background `Humus` is already visible (no fade — it is the base) 2. `200ms–800ms`: Hero leaf fades in from opacity 0 to 1, simultaneously sliding 12px upward (transform: translateY(12px) → translateY(0)). The slide distance is 12px — not dramatic, just enough to feel like the leaf settling. 3. `500ms–1100ms`: Secondary small leaf and micro-leaf marks fade in, each staggered by 60ms. 4. `700ms–1400ms`: Wordmark `PROTOTYPE.MOE` fades in. No slide on the wordmark — it is already in place, it simply becomes visible. 5. `1000ms–1400ms`: Metadata line fades in last. **There is no scroll-triggered animation below the fold.** The frequency analysis shows scroll-reveal and parallax are heavily used across the corpus. Below-the-fold artifacts simply exist — they do not animate in on scroll. The only motion in the entire page is the arrival fade. **The vein highlight flicker (mcbling signature gesture):** After the full reveal is complete (at approximately 1600ms), the vein highlight on the hero leaf performs a single subtle brightness pulse: opacity goes from 40% → 65% → 40% over 800ms with ease-in-out. This happens once, on load, and never again unless the user hovers the leaf. On hover, the vein highlight pulses again (same 800ms pattern, once per hover entry). This is the only interactive response the page makes. It is a small, earned reward — not a system-wide hover effect, just this one leaf, just this one vein. **CSS custom properties (implement as-is):** ```css :root { --c-humus: #0d1a0f; --c-bark: #1c3320; --c-canopy: #2d5a38; --c-fern: #3a7a47; --c-dew: #a8d5b0; --c-fog: #e6f0e8; --font-primary: 'Space Grotesk', sans-serif; --font-mono: 'DM Mono', monospace; --reveal-duration: 1400ms; --reveal-ease: cubic-bezier(0.25, 0.1, 0.25, 1.0); } ``` **Font loading:** ```html ``` **Structural HTML skeleton:** ```html

PROTOTYPE.MOE

v0 — 2026

``` The `is-loading` class is removed by JS after the DOMContentLoaded event fires, triggering all CSS transition animations. No JavaScript animation library — pure CSS transitions only. **AVOID in implementation:** - CTA buttons of any kind - Navigation bars or menus - Pricing sections or feature grids - Testimonial blocks - Stat counters or achievement displays - Any text longer than one short sentence in the hero - Any background texture or grain overlay (the corpus uses grain at 3% — we avoid it; the forest mood comes from color, not noise) ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **mcbling aesthetic applied to a nature/forest palette — the first in the registry to do this.** mcbling in the corpus (where it appears at all) defaults to Y2K chrome, bubble-gum pink, and metallic gradients. prototype.moe takes mcbling's defining structural quality — tactile surface depth, the candy-like legibility of a surface that feels pickable — and transplants it entirely into forest pigments. The `Canopy` leaf with its waxy radial gradient is a broadleaf rendered with mcbling-grade surface conviction, not a botanical illustration. 2. **Fade-reveal as the sole motion event — resisting the corpus's scroll-animation default.** The frequency analysis shows scroll-reveal, parallax, and entrance-on-scroll patterns are saturated across the registry. prototype.moe commits entirely to a single coordinated arrival fade: everything appears in the first 1400ms, nothing animates afterward except one vein-highlight pulse. The restraint is the differentiator. 3. **Hero-dominant layout that resists the centered-column interpretation.** The corpus treats "hero-dominant" as a large centered text block above a CTA. prototype.moe reads "hero-dominant" as a compositional statement: the leaf occupies the lower-right quadrant as a structural anchor, the wordmark anchors the upper-left, and the void between them is the design's most important element. 4. **Single typeface system (Space Grotesk) across two weights, with DM Mono as the sole supporting face.** The corpus almost universally uses 2–3 display typefaces. prototype.moe uses one — the prototype's own identity is expressed through weight and scale variation within a single family, reinforcing the "single system, multiple states" reading. 5. **Raw-authentic tone enforced at the SVG-path level.** The imprecision in the leaf outline (3–5 extra anchor points introducing micro-irregularities) is a structural choice, not decoration. The corpus's hand-drawn aesthetic (58%) achieves rawness through visible brushwork. prototype.moe achieves it through intentional path noise on what is otherwise a geometric form — the imprecision is invisible at a glance but felt as material authenticity. **Chosen seed:** `aesthetic: mcbling, layout: hero-dominant, typography: geometric-sans, palette: forest-green, patterns: fade-reveal, imagery: minimal, motifs: leaf-organic, tone: raw-authentic` **Patterns deliberately avoided based on frequency analysis:** - `hand-drawn` (58% corpus) — the leaf uses fill + path-noise, not stroke-based drawing - `editorial` (53% corpus) — no multi-column text layout, no article structure - `terminal` (32% corpus) — DM Mono is used only for 11px annotations, not as an aesthetic statement - `botanical` (28% corpus) — the leaf is a structural motif, not illustration; no botanical-illustration rendering style - `glassmorphism` (21% corpus) — no frosted panels, no backdrop-filter blur, no translucent cards - `scroll-reveal` / `parallax` — fully avoided; only arrival-fade motion - `grain-overlay` (3% corpus) — entirely absent; depth comes from color, not noise