# Design Language for prototype.moe ## Aesthetics and Tone prototype.moe is **a half-built thing on a workbench at midnight — foam-core walls held up with blue painter's tape, a glue gun still warm, three crossed-out names on a sticky note, and a tiny mascot figurine standing in the middle of it all pointing at what's missing.** The site treats "prototype" literally: it is a website that is *visibly under construction in front of you* and proud of it. Nothing pretends to be finished. Boards have visible seams. Buttons sit on cardboard tabs. Headlines are written in the thick wedge of a chisel-tip marker and then half re-written when the maker changed their mind. This is **neubrutalism** — hard 3px ink-black borders, flat blocked color, drop shadows that are *offset solid rectangles* not soft blurs, zero gradients on surfaces — fused with the spirit of a maker's prototyping bench: tape, foam, swatch chips, ruler ticks, exposed fasteners, and a single recurring cute mascot ("Proto", a soft round blob-creature with two dot eyes and a hard-hat) who is the only "rendered" thing on the page and who narrates the build. The `.moe` in the domain is honored not with sparkles and pastel gradients but with **one** deliberately adorable character living inside an otherwise blunt, raw, industrious layout — the contrast *is* the charm. Tone: **whimsical-creative** but also **raw-authentic** — like a friend showing you their messy garage project and being genuinely thrilled about it. Never slick. Never a SaaS pitch. The mood is: *"it's not done, that's the whole point, come watch it not be done with me."* ## Layout Motifs and Structure The page is a **vertical stack of "boards"** — each section is a literal rectangular panel that looks pinned to a giant pegboard wall, sitting at a slight, deliberate rotation (`-1.4deg`, `+0.8deg`, `-0.6deg` — alternating, never zero, never the same twice). This is the **stacked-sections** layout pushed into a physical metaphor: you are scrolling *down a wall of prototype boards*, not down a webpage. **Spatial system:** - **The pegboard backdrop** is the body background: `#EDE6D6` warm manila with a precise grid of `4px` perforation dots (`radial-gradient` repeated every `36px`), so every board appears tacked onto a real surface. - **Each board** is a flat `#FFFDF6` rectangle with a `3px solid #14110D` border and a **hard offset shadow** (`box-shadow: 9px 9px 0 #14110D`) — the signature neubrutalist non-blur shadow. Max content width `1080px`, generous `64px` internal padding, and a torn-tape strip (`::before`, a small rotated `#3A6FE0` rectangle with jagged `clip-path`) "holding" the top-left corner of every board. - **The left rail** (sticky, `220px`, hidden under `900px`) is a **swatch column**: a vertical run of color-chip squares, each one a section anchor, each labeled in tiny marker text — like the paint chips a maker tapes to the wall to pick from. The active chip pops `12px` to the right with a hard shadow. - **Ruler ticks** run down the extreme left edge of the viewport (`fixed`, `28px` wide, ink ticks every `8px`, numbered every `40px`) — the page is being *measured*. The current scroll position is marked by a fat `#E84A2F` tick that slides. - **No hero in the marketing sense.** The first board is a **"BUILD SHEET"** — a parts list with checkboxes (some checked, some not, two scribbled out), Proto the mascot standing on top of the board's border like it's a ledge. - Composition rule: alternate **wide-board / narrow-board-with-margin-note**. Narrow boards leave a right gutter where a handwritten margin annotation and a small arrow point back into the content. Asymmetry is mandatory; a perfectly centered block is forbidden. ## Typography and Palette **Type system (three Google Fonts):** - **Display & headlines: Archivo Black** — the blunt, ultra-heavy grotesque used for every board title, set ALL CAPS, tight tracking (`-0.01em`), often with a `2px` ink underline that is actually a separate `` so it can wobble on hover (the marker "redraws" it). This is the chisel-marker voice. - **Body & UI labels: Space Grotesk** — variable, weights 400/500/700. Used for paragraphs, the build-sheet items, swatch labels, button text. Its slightly mechanical, draughtsman quality fits a parts catalogue. Body set `17px / 1.6`. - **Annotations & mascot speech: Gloria Hallelujah** — a genuine ballpoint-handwriting face, used *only* for margin notes, crossed-out words, Proto's speech bubbles, and the "still-to-do" scrawls. Always slightly rotated (`-2deg`), always in `#3A6FE0` ink-pen blue or `#E84A2F` correction-red. **Palette (flat blocks, no gradients on surfaces):** - `#14110D` — Ink Black: every border, every hard shadow, all primary text. - `#EDE6D6` — Manila Pegboard: the page backdrop. - `#FFFDF6` — Foam White: board faces. - `#3A6FE0` — Painter's-Tape Blue: tape strips, ink-pen annotations, primary accent (a real "blue painter's tape" hue). - `#E84A2F` — Correction Red: the scroll tick, cross-outs, "WIP" stamps, error states. - `#F2C53D` — Caution Yellow: highlighter swipes behind key phrases, the mascot's hard-hat, the "in progress" chip. - `#7BC47F` — Done Green: checked checkboxes, the "shipped" stamp. - `#C9BFA8` — Cardboard: button tabs, the foam-core edge texture (a 2px striped band on board bottoms simulating corrugation). ## Imagery and Motifs **Everything is flat vector and CSS-drawn — no photography, ever.** The imagery vocabulary is **icon-heavy + vector-art**, specifically a "maker's bench" lexicon: - **Proto the mascot** — a single SVG character: a rounded blob body (`#FFFDF6` fill, `3px #14110D` outline), two dot eyes, a tiny `#F2C53D` hard-hat, and stubby arms. It appears ~6 times total: standing on a board edge, peeking from behind a swatch, holding a tiny ruler, taking a nap on the footer. It is the *only* soft/cute element and it is precious — never animate it more than a gentle 2-frame bob. Its speech bubbles are hard-edged rectangles with a triangular tail and Gloria Hallelujah text. - **Tape strips** — small rotated rectangles with torn `clip-path` edges, semi-opaque `#3A6FE0`, "holding" corners of boards, images, and pulled quotes. Slightly different rotation each instance. - **Swatch chips** — solid color squares with ink borders and a marker label underneath; used as the nav rail and as decorative scatter. - **Ruler ticks & dimension lines** — thin ink lines with arrowheads and a measurement label (`120mm`, `→`, `↕`), placed across whitespace to make the page feel *spec'd*. - **Checkbox lists** — the BUILD SHEET motif recurs: square boxes, hand-drawn check marks in `#7BC47F`, some items struck through with a wobbly `#E84A2F` line. - **Stamps** — circular/rectangular rubber-stamp graphics ("WIP", "DRAFT v0.3", "PROTOTYPE — DO NOT SHIP") at jaunty angles, slightly ink-bled (a tiny `feTurbulence` displacement on the edge), placed sparingly. - **Foam-core edges** — board bottoms get a `4px` striped band (`repeating-linear-gradient` of `#C9BFA8` / `#FFFDF6`) reading as corrugated cardboard cross-section. - **Exposed fasteners** — small circular "screw head" SVGs (a circle with a slot line) tacking down corners of certain panels. ## Prompts for Implementation Build prototype.moe as **one HTML file, one CSS file, one ES module** — no framework, no build step. The page is a slow scroll down a wall of prototype boards, narrated by Proto. There is **no signup, no pricing table, no testimonials, no logo wall, no stat-grid, no feature-grid, no contact form, no CTA banner, no cookie modal, no chatbot**. It is a narrative artifact, not a funnel. **Document order (top to bottom):** 1. **Sticky ruler edge + scroll tick** mount immediately on load. The fat `#E84A2F` tick tracks `scrollY` mapped to viewport height; numbers along the ruler count up in "mm". 2. **BUILD SHEET board** — board title "PROTOTYPE.MOE — BUILD SHEET" in Archivo Black, a parts/checklist of what this very page is "made of" (HTML scaffold done, type chosen done, mascot drawn done, "polish" pending — struck-through item "make it pretty" replaced with handwritten "make it honest"). Proto stands on the top border holding a tiny ruler. A `DRAFT v0.3` stamp bottom-right. 3. **THE IDEA board** (narrow + margin note) — what a prototype *is*: the first rough cut, the thing you make to learn what you actually meant. Margin annotation in Gloria Hallelujah with an arrow pointing at the key sentence; a highlighter swipe (`#F2C53D`) behind it. 4. **MATERIALS board** — the swatch palette laid out as a grid of chips, each labeled, each one literally one of the page's CSS variables. Hover a chip → it lifts `12px` with a hard offset shadow and Proto's voice (a small fixed speech bubble) names the color in handwriting. 5. **THE WORKBENCH board** (wide) — a flat-vector "exploded view" of a workbench: ruler, glue gun, tape roll, foam sheet, the mascot, all as labeled SVG parts with dimension lines between them. Dimension lines draw on as the board enters view (`stroke-dashoffset` animation, `path-draw-svg`). 6. **VERSIONS board** — a vertical list of "v0.1 → v0.2 → v0.3 (you are here)" as a timeline of taped index cards, each card a flat block with a hard shadow, each rotated slightly differently, the current one marked with the red tick and a "WIP" stamp. 7. **WHAT'S MISSING board** (narrow + margin note) — an honest, slightly funny list of things this prototype doesn't have yet, written as an open checklist. Proto naps on this one. 8. **FOOTER board** — "still building." A small Proto figure, a tape strip holding the corner, the screw-head fasteners, a quiet line in Space Grotesk: `prototype.moe — a thing in progress, on purpose.` and the current date stamped like a build number. **Interaction & animation language (favor: `magnetic`, `spring`, `stagger`, `path-draw-svg`, `tilt-3d`; avoid the overused `parallax` and `cursor-follow` as primary effects):** - **Board entrance**: each board slides up `28px` and "drops" onto the wall with a tiny `spring` overshoot, then settles into its fixed rotation. Stagger child elements (build-sheet rows, swatch chips) by `45ms`. - **Hard-shadow on hover**: interactive elements (chips, version cards, the few real links) translate `-4px,-4px` while their offset shadow grows `+4px,+4px` — the neubrutalist "press up off the wall" move. On `:active` they snap flat (`translate(0); box-shadow: 2px 2px`) like being pressed down. - **Marker redraw**: headline underlines are `` rects with a hand-jitter `clip-path`; on hover they re-clip through 3 keyframes so the line looks freshly re-drawn. - **Tilt on tape-held images**: panels with a tape strip get a subtle `tilt-3d` toward the cursor, max `4deg`, spring-eased — like the tape flexing. - **Proto bob**: 2-keyframe `translateY` bob, `1.4s`, `ease-in-out`, nothing fancier. When a new board with Proto enters view, Proto does one extra "wave" frame. - **Scroll tick & ruler**: pure scroll-driven, `requestAnimationFrame`, no jank. - **Reduced motion**: rotations stay (they're structural, not motion), but all springs/bobs/draws resolve to instant final state. - **No loading spinner** — instead a `<` BUILDING... `>` line in mono that fills a small ASCII progress bar `[#####.....]` and then the BUILD SHEET wipes in. **CSS specifics**: CSS custom properties for every palette color; `clip-path` polygons for torn-tape edges; `box-shadow` with zero blur for all depth; `transform: rotate()` baked per-board via `:nth-child` mapping; `repeating-linear-gradient` for cardboard corrugation; one inline SVG `` with `feTurbulence`+`feDisplacementMap` (very low frequency) reused for the "ink-bled stamp edge" class only. Keep total JS under ~6KB. ## Uniqueness Notes Differentiators from the corpus: 1. **A literal "this website is a prototype" conceit** — the homepage's first section is a build-sheet checklist of the page's own construction, with crossed-out items. No other design in the corpus makes the page narrate its own unfinished state as the core metaphor. 2. **Neubrutalism as the foundation** — neubrutalism appears in only ~1% of the 484-design corpus, and brutalist/anti-design in ~7%. Here it's the whole structural language: 3px ink borders, zero-blur offset shadows, flat blocked color, no surface gradients — deliberately against the corpus's 95% gradient / 95% hand-drawn / 81% glassmorphism grain. 3. **Exactly one cute thing** — "Proto" the hard-hatted blob mascot is the sole rendered/adorable element in an otherwise blunt workshop layout; the `.moe` charm comes from *scarcity and contrast*, not from sparkles, pastels, or photography (98% of corpus uses photography — this uses none). 4. **The page is "measured"** — a fixed ruler edge with mm ticks, dimension lines drawn across whitespace, and swatch-chip navigation rail; the UI furniture is a maker's bench, not a web template. 5. **Boards-on-a-pegboard stacked layout with mandatory non-zero rotations** — avoids the corpus's dominant card-grid (91%), full-bleed (88%), and centered (83%) layouts; nothing on the page is axis-aligned. Chosen seed/style: **neubrutalism raw edges blog** (from seeds.json). Avoided overused corpus patterns: `parallax` (90%), `cursor-follow` (89%), `glassmorphism` (81%), `hand-drawn` aesthetic (95%), `photography` imagery (98%), `gradient`/`warm` palettes (95%/98%), `card-grid` layout (91%).