# Design Language for completengine.net ## Aesthetics and Tone completengine.net is **a 1998 Game Boy Color RPG cartridge that was never published, recovered from a damp storage unit in a small lumber town, gently revived in a humid greenhouse**. The conceit is precise and total: the entire site is a *fictional save state* of a quest game called `COMPLETE.ENGINE` — a cozy forest-valley adventure where the player is a small pixel character whose only job is to walk up to half-finished things (sentences, songs, sandwiches, sentences again) and watch the world finish them. The "engine" is not a server, not a transformer, not a tokenizer. The engine is a **mossy brass box the size of a vending machine, half-buried in a clearing, two ferns growing through its cooling vents**, and when you stand next to it and press A the world quietly suggests what comes next. The mood is **approachable-casual** in its truest, least-corporate sense: the same register as a friend handing you a controller and saying "no save scumming, you can't lose." Nothing is being sold. Nothing is being demonstrated. The page is a small playable diorama you scroll through the way a kid in 1999 scrolled through a strategy guide their cousin lent them — with affection, no urgency, and the willingness to read every flavor-text dialogue box twice. Tone is gently overheard, not announced: lowercase by default, periods optional, occasional `*small italics for action descriptions*` like a MUD, and the word "you" is used freely because the visitor is a player, not a customer. The aesthetic commitment is **pixel-art at 5% registry frequency**, but specifically the *late-handheld-cozy* sub-dialect — Pokémon Crystal (2000), Harvest Moon GBC (1999), Mother 3 GBA (2006), and the modern Game Boy Studio fan-scene of 2022–2025 — never the harsh NES dialect, never the loud arcade dialect, never the meme-y "8-bit Mario" shorthand that pixel-art usually collapses into on the web. Every pixel is rendered at a deliberate 4× integer scale (1 source pixel = 4 CSS pixels, never fractional, never anti-aliased), and the entire page is gently lit by the soft green-yellow phosphor wash of a Game Boy Color screen viewed under late-afternoon kitchen light. The glow is permanent. The world is paused mid-encounter. The "engine" hums. ## Layout Motifs and Structure The structural commitment is **single-column at 13% registry frequency**, executed as a **vertical hike down a wooded valley path**. The page is one continuous 720px-wide column (mobile fluid down to 320px, never wider than 720 on desktop — the entire site is letterboxed by a tiling moss-bark texture on either side), and reading the page top-to-bottom is *literally* walking the player character down a winding forest path from the trailhead to the engine clearing to the moonlit field beyond. There is no horizontal navigation. There is no sticky header. There is no bento grid. There is one path, twelve "rooms" along the path, and the room you are currently inside is the room your scroll position has placed your tiny pixel-art player character in. **The twelve rooms, in order:** 1. **Trailhead Sign** — hero. A wooden trail-marker sign reading `COMPLETE.ENGINE / 0.4 mi ↓` in routed-out pixel lettering. The player sprite stands beside it, idling, occasionally blinking. 2. **The First Clearing** — a one-paragraph "what is this place" written as the trail map's flavor text. 3. **Mossy Stones** — three quiet stones, each engraved with one tiny paragraph about what completion means here. 4. **The Stream Crossing** — a hand-drawn pixel stream that animates across the column on scroll-trigger; the prose alongside is about how thoughts arrive incomplete and leave finished. 5. **Bridge of Bubbles** — the **bubble-playful motif at 2% registry**, arrayed as soap-bubble stepping-stones the player walks across; each bubble holds one short feature description. 6. **The Engine Clearing** — *the* room. Centered: a chunky pixel illustration of the brass engine itself, ferns sprouting through its grille, steam curling up in low-frame-rate puffs. Around it, in dialogue-box style, three plain sentences explain what the site does. 7. **The Snail's Reading Room** — a side room. A pixel snail on a mushroom reads aloud (typewriter-effect at 10%, used sparingly) one example completion at a time. 8. **The Greenhouse** — translucent panes of "glass" rendered as 4×4 pixel grids; behind them, the longer-form copy lives in a slow scroll-reveal. 9. **The Frog Pond** — three frogs on three lily-pads, each one a tiny FAQ. Tap a frog, get a plop, get an answer. 10. **The Owl's Bookshelf** — a pixel owl in a tree hollow recommends three further-reading items. 11. **The Moonlit Field** — the page's quiet emotional turn. Long copy, dark-green background, fireflies (tiny `` particles at 1px scale). 12. **The Cabin Window** — footer. A lit cabin window glows yellow; through it is the contact info, written as a postcard. There is **no header**. There is **no nav**. There is **no logo lockup**. The trailhead sign IS the logo. The cabin window IS the footer. The path IS the IA. The player sprite is fixed in the viewport at left-center (desktop) or bottom-center (mobile), and **scroll-triggered at 16% registry frequency** moves the world past the player rather than the player past the world — every 80px of scroll advances the sprite's walk cycle by one frame (4-frame cycle), and on still moments the sprite enters its idle animation (occasional blink, occasional small hop). The path beneath the sprite ticks past in a parallax band of 16×16 pixel grass tiles. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`VT323`** — the principal display and dialogue face, serving the **mono mandate at 95% registry frequency** but in its most underused sub-flavor, the *retro-monospace bitmap*. VT323 is a single-weight 400 pixel-grid mono font modeled on the DEC VT320 terminal and reads as authentically *of the era* without falling into the "Press Start 2P" trap that 90% of pixel-art websites stumble into. Used at 24px (body), 32px (room headings), 56px (the trailhead sign), and 96px (only once, on the engine clearing's title). Always at integer pixel sizes. Never anti-aliased — `font-smoothing: none` and `image-rendering: pixelated` enforced everywhere. - **`Silkscreen`** — used exclusively for *signs and labels*: trail markers, engraved stones, the cabin's hand-routed numbers. 400 weight at 8px and 16px only. Silkscreen is a true 5×7 bitmap face, perfect for the routed-wood-sign vibe; using it at any size other than its native 8px or its clean 2× of 16px would betray its grid. - **`Caveat`** — used in *exactly two places*, deliberately, against type. The handwritten chalk on the moonlit field's "you are here" notice, and the postcard scrawl in the cabin window footer. 400 weight, italic. Caveat is the only non-pixel face on the site, and its presence is a small intentional "the player wrote this themselves" gesture — handwriting in a bitmap world. Body line-height is 1.6 (because VT323 at 24px needs the breathing room and the column is narrow). Letter-spacing is `0` everywhere — pixel fonts must never be tracked. All text is left-aligned. The dialogue boxes use **center-aligned headers** with **left-aligned bodies**, and they are bordered in a 4px chunky pixel frame using `border-image` and a tiny SVG. **Palette — `forest-green` at 3% registry frequency, the underused star:** A deliberately limited 8-color palette, chosen to feel like a Game Boy Color screen filmed through a kitchen window in late summer. Every color is committed to a name and a role. - `#0F1A0E` — **Deep Loam**. Background of the moonlit field, dialogue-box outlines, the engine's iron base. The site's "darkest dark." - `#1B3A2E` — **Mossy Pine**. The page's primary surface color, the bark of the path-side trees, the heavier shadows. - `#2F6B4D` — **Fern Mid**. Mid-tone leaf, body-copy color on light surfaces, the engine's brass shadow. - `#7DBE7B` — **Pixel Lichen**. The principal accent — the player sprite's tunic, the trail-marker's painted arrow, the active hover state. - `#C9E8A2` — **Spring Tip**. Light-leaf highlight, bubble inner-glow, dialogue-box inner background on the brighter rooms. - `#F2EFD0` — **Old Paper Cream**. The "screen background" of the dialogue boxes and the trailhead sign — the warm cream of un-yellowed Game Boy Pocket plastic. - `#E8B25C` — **Cabin Lamp**. The single warm accent, used *only* on the cabin window's glow, the engine's brass highlights, and the firefly particles. - `#9A7B5A` — **Wet Bark**. Tertiary; the bridge planks, the snail's shell, the owl's perch. All eight colors are also exposed as 4×4-pixel paletted PNGs for use in pixel-perfect repeating textures. **No gradients** (the `gradient` palette pattern is at 96% — its complete exclusion is the strongest single deviation). The few gradient-seeming effects (the bubble's interior gleam, the cabin's window glow) are achieved by 2-color or 3-color *dither* using a Bayer 4×4 ordered-dither pattern, exactly as a 1998 cart artist would have done in Pro Motion or Deluxe Paint. ## Imagery and Motifs The visual world is built entirely from **hand-authored 16×16 and 32×32 pixel sprites**, exported as crisp PNGs and rendered at 4× via `image-rendering: pixelated`. **Zero photography (98% in the registry — its exclusion is the second-largest deviation after the gradient ban).** Zero 3D. Zero stock. Zero illustration that is not on the pixel grid. Zero AI-generated rasters. **Four motif families:** **1. The Player & The Engine (custom pixel sprites).** A 16×16 player sprite, four-frame walk cycle, two-frame idle, drawn in 4 colors from the palette only (loam outline, mossy tunic, lichen accent, cream skin highlight). The engine itself is a 96×128 pixel illustration — the focal sprite of the entire site — a wood-and-brass cabinet with a softly glowing display showing animated `▮ ▮ ▮` ellipses, two ferns growing through its cooling slats, a small bird occasionally perching on its top. **2. The Forest Path (16×16 tilesets).** The single largest asset class. Three tile sheets: `path.png` (dirt path, grass edges, fallen leaves, occasional mushroom), `trees.png` (4 tree types, all 32×64), and `decor.png` (rocks, ferns, stumps, a discarded Pokégear-shaped object). All tiles drawn on a 16-color sub-palette of the 8 site colors plus 8 derived shades. The path tiles **tile vertically without seams** as the user scrolls — this is what makes the "hike" feel continuous. **3. Bubble-Playful Motifs (2% registry — actively claimed).** The bridge of bubbles is the site's distinctive set-piece. Each bubble is a 64×64 pixel asset built from three concentric rings of dither (deep-loam outline, fern-mid inner, spring-tip core glow), with a single-pixel cream highlight in the upper-left to suggest specularity. Bubbles **bob** on a 4-second sine via CSS keyframes (translateY, never scale — preserving the pixel grid). On hover, they emit one to three smaller "child bubbles" (32×32 and 16×16) that drift up and pop with a four-frame burst sprite. This is the only place on the site with playful incidental motion when no scrolling is happening. **4. Minimal Imagery (14% registry — claimed and committed).** The page never uses imagery decoratively. Every sprite earns its place by representing one specific thing in the diorama. There is no hero photograph, no abstract gradient mesh, no decorative blob, no SVG flourish. The "minimal" here means *purposeful pixel density*: a small number of carefully drawn sprites doing a lot of narrative work, the way a Zelda Link's Awakening overworld held entire dungeons in 32 tiles. The decorative pattern of the side-letterbox columns (outside the 720px main column on desktop) is a **seamless 32×32 mossy-bark tile**, drawn in deep loam, mossy pine, and fern mid only, repeated infinitely. It frames the page like a cabinet bezel. ## Prompts for Implementation Build completengine.net as **one HTML document, one CSS file, one ES module, and a sprite folder of ~14 PNG assets totaling under 90kb**. No framework. No bundler. No Tailwind. No Lottie. No WebGL. No canvas (every animation is CSS keyframes or sprite-sheet `background-position` shifts). No video. No web font self-hosting (Google Fonts CDN, three families: VT323, Silkscreen, Caveat). The whole experience is static sprites + CSS keyframes + one IntersectionObserver-driven scroll director. Bias every implementation decision toward **storytelling first, interaction second, persuasion never**. **Storytelling architecture.** Treat the page as a 12-room linear quest, not as a marketing landing page. Each room is its own `
` with a `data-room` attribute and a `data-music` attribute (no actual audio plays — `data-music` is a small label like "trailhead.theme" rendered as flavor text in the bottom-left HUD as a wink to anyone who notices). The player sprite, fixed-positioned, receives a `data-current-room` attribute updated by IntersectionObserver — this drives any room-specific sprite-sheet shifts (e.g., the player carrying an umbrella in the stream-crossing room). **Scroll-triggered direction (16% registry — claimed).** The single most important interaction system. One IntersectionObserver with `threshold: [0, 0.25, 0.5, 0.75, 1.0]` watches every room. On entering a room at 25%: the room's sprite assets begin their entry animation (frogs hop into pond, bubbles drift up, owl's eyes open). On reaching 75%: the room "settles" and any persistent ambient loop begins. On scrolling out: the room politely ceases motion to save battery on whatever 2007 laptop is reading the page. Walk-cycle frame stepping is driven by a separate scroll listener (passive, requestAnimationFrame-throttled): every 80px of scroll-delta increments the player's walk frame; when 200ms pass with no scroll, the player switches to idle. The scroll position itself is *the* timeline — there is no autoplay, no carousel, no slideshow, no video element ever pretending to be a hero. **The Bridge of Bubbles set-piece.** This is the site's one moment of light interactive playfulness. As the user enters the bubble-bridge room, six soap bubbles fade in (4-frame appearance sprite each), and arrange themselves vertically along the column. Each bubble carries one feature label as text inside its center, in 16px Silkscreen on Spring Tip. On hover (or tap, with a 250ms touch-hold delay), the bubble *gently* expands by 1 pixel-grid step (so 4 CSS pixels), emits child bubbles, and reveals a 2–3 sentence description below it via a blur-focus reveal — which is *the* one place I am willing to use a small amount of CSS `filter: blur()` because bubbles are blur-justifying. Tap again or scroll past, the bubble settles and seals. **No bubble pops, ever.** A popped bubble would imply failure, and this site has no failure states. **Animation budget.** Every animation must be one of: (a) sprite-sheet `background-position` step at integer pixel grid, (b) `transform: translate()` on integer pixel multiples (never fractional, never `translateZ`-3D, never `scale()`), (c) `opacity` fade at 4-frame stepped curve via `animation-timing-function: steps(4, end)`. **No `ease` curves. No springs. No magnetic cursor. No tilt-3D.** The 95% mono / 75% spring / 65% magnetic / 75% cursor-follow registry frequencies are *all rejected*. Motion in this site is stepped, integer, deliberate, and hand-keyed — exactly the way a 1999 cart artist with 12kB of ROM left over would animate. **Copy direction.** Write all body copy as **trail flavor-text and overheard NPC dialogue**, never as marketing pitch. Forbidden words: "leverage," "powerful," "AI-driven," "next-generation," "world-class," "seamless," "robust," "innovative," "platform," "solution," "ecosystem." Permitted words: "the path," "you," "we," "press A," "*small italic action descriptions*," "the engine," "complete," "the next thing," "softly," "we don't know yet," "try it." All headings are short and lowercase. All paragraphs are under 60 words. The longest single block on the entire site is the moonlit-field room and it is exactly 180 words. **Forbidden patterns (explicit AVOID list).** No CTA-heavy layouts. No pricing blocks. No stat grids. No testimonial carousels. No "trusted by" logo bars. No "as featured in" press strip. No newsletter modal. No cookie banner that takes more than 60px of vertical space. No "see more" expander. No tabbed interface. No accordion. No carousel of any kind. No dark-mode toggle (the site IS its mood). No language picker (the site is one language and that's part of its character). No login. No signup. No "free trial." No "book a demo." No floating chat widget. No social-proof widget. No sticky CTA. The cabin-window footer's contact line is a plain `mailto:` link, written as `if you want to say hi, the cabin door's open.` and that is the entire conversion architecture. **Performance-as-aesthetic, not as goal.** The site loads in under 90kb total because Game Boy carts were ~2MB and this is a *web page*, and a single PNG sprite sheet hand-drawn at 4-color depth weighs less than one stock photo. This isn't a performance flex. It's a fidelity choice: the site loads instantly because the world it inhabits would never tolerate a loading spinner. **Browser support floor.** Chromium-based and Firefox current; Safari current with one known sad-face acknowledgment in source comments about `image-rendering: pixelated` on iOS Safari sometimes betraying the grid at fractional zoom — c'est la vie, the sprite police are forgiving. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Pixel-art at the late-handheld-cozy register, not arcade or NES shorthand.** Pixel-art is at 5% registry frequency and almost every prior use of "pixel" or "8-bit" on the web defaults to the loud, jagged, primary-color NES dialect. This site refuses that entirely and commits to the soft, handheld, late-90s GBC dialect — the one that *feels* like a kid lying on carpet at 4pm rather than the one that *announces* "I am retro." This is a substantively different visual language from anything in the registry. 2. **The page-as-quest, not the page-as-pitch.** The 12-room linear hike replaces the conventional landing-page IA (hero → features → social proof → CTA → footer) with a narrative spatial structure (trailhead → path → clearing → moonlit field → cabin). There is no CTA, no pricing, no stat grid, no testimonial — all three of which appear on the explicit AVOID list and all three of which are absent here. This is enforced by the explicit forbidden-patterns list above, not just by omission. 3. **Forest-green at 3%, executed as an 8-color paletted commitment.** The forest-green palette is genuinely rare in the registry, and almost every use of green on the modern web is via gradients on top of white. This site's color system is a fixed 8-color palette PNG, every gradient banned in favor of Bayer dither, every color named and role-assigned. The complete exclusion of `gradient` (96% registry) is the largest single deviation in the palette dimension. 4. **Single-column at 720px with letterbox-bezel side tiles.** Single-column is at 13% but is almost always used as "centered narrow text article." This site uses single-column as a *literal hiking trail* with tiling moss-bark bezels framing the column on either side, turning the page itself into the diorama and the side-letterbox into part of the diegesis. The single column is not a typography choice; it is the world. 5. **Bubble-playful at 2%, executed as the only interactive set-piece.** The bubble bridge is the site's one spot of incidental motion-when-idle, and it is used to deliver feature copy — the most marketing-ish content on the site is wrapped in the most playful possible container. This deliberately inverts the usual hierarchy where playful elements are decorative chaff around serious feature lists. 6. **Approachable-casual at 2%, in its truest "friend lending you a controller" register.** The tone is at 2% registry and is most often diluted into "friendly but professional." This site commits fully: lowercase, no exclamation marks, periods optional, contraction-heavy, second-person, no marketing verbs allowed, the contact CTA literally reads "the cabin door's open." 7. **Mono typography (95%) executed via VT323 + Silkscreen, not via the ubiquitous JetBrains/IBM Plex axis.** Mono is the most-overused typography category in the entire registry, but the *bitmap-mono* sub-flavor (VT323, Silkscreen) is genuinely scarce. The site's mono usage is integer-pixel-grid bitmap mono with `font-smoothing: none` enforced — visually unrelated to the smooth dev-tooling mono that 95% of the mono sites in the registry use. 8. **Scroll-triggered (16%) as the ONLY animation system, replacing parallax/spring/magnetic/cursor-follow.** The four most-overused interaction patterns in the registry — parallax (94%), stagger (77%), cursor-follow (75%), spring (75%), magnetic (65%) — are all *explicitly banned* in the implementation prompts. Scroll-triggered is the single permitted animation driver, and it drives everything from the player's walk cycle to the room transitions to the bubble emissions. **Documented chosen seed (from assignment):** `aesthetic: pixel-art, layout: single-column, typography: mono, palette: forest-green, patterns: scroll-triggered, imagery: minimal, motifs: bubble-playful, tone: approachable-casual` **Patterns explicitly avoided per frequency analysis:** - AVOID `hand-drawn` (95%), `glassmorphism` (68%), `editorial` (35%) — all replaced by pixel-art at 5%. - AVOID `photography` (98%), `gradient-mesh` (17%) — replaced by hand-drawn paletted sprites. - AVOID `full-bleed` (90%), `centered` (82%), `card-grid` (75%), `asymmetric` (55%) — replaced by single-column 720px hike. - AVOID `parallax` (94%), `stagger` (77%), `cursor-follow` (75%), `spring` (75%), `magnetic` (65%) — all banned in implementation prompts; replaced by stepped scroll-triggered direction. - AVOID `gradient` (96%), `warm` (95%) — replaced by 8-color paletted forest-green with Bayer dither. - AVOID `humanist` (45%), `handwritten` (33% — used only twice, deliberately, in Caveat) — replaced by VT323 + Silkscreen bitmap mono. - AVOID `vintage` motif (26%), `nature` motif (20% — and this site IS nature, but executed via bubble-playful at 2%, not via "nature" as a generic tag), `tech` motif (16%) — replaced by bubble-playful at 2%. - AVOID `pastoral-romantic` (25%), `warm-inviting` (22%), `energetic` (15%), `friendly` (10%) — replaced by approachable-casual at 2%.