# Design Language for completengine.com ## Aesthetics and Tone completengine.com is a **Bauhaus atelier of unfinished thoughts** — a quiet workshop where a circle, a square, and a triangle drift across cream leather like figures in a Schlemmer ballet, slowly *completing* themselves into sentences, ideas, drawings. The domain name is read literally: this is an *engine that completes*, but rendered not as a chrome AI dashboard nor as a slick SaaS landing — it is rendered as a **1928 Dessau-school pamphlet that has been left out in afternoon sun**, its primaries faded to peach, butter, and dove, its black ink relaxed to the colour of espresso grounds. Every glyph is set in a retro-display face that remembers Herbert Bayer's universal alphabet but has been drawn slower, wider, more sentimental. The visitor arrives expecting a tool; instead they walk into a room where a draughtsman in a linen apron is hand-finishing the last half of a thought aloud. The mood is **conversational** — softly, almost confidentially conversational, the way one talks to an old colleague in the late afternoon of a Tuesday. No headlines shout. No CTAs flash. The primary copy register is the spoken aside: *"I was thinking about this morning..."*, *"so what if we just..."*, *"there. that's it."* — sentences left mid-air for the engine to finish. The site itself is the engine. Scrolling, hovering, and idling are the "prompts"; what the page *finishes for you* is the response. The whole experience reads as a **gentle collaboration between a human and a soft mechanical hand**, with the floral-botanical pressed between the leather covers as tactile memento. Inspirations: Anni Albers' textile diaries (1934), Saul Steinberg's *The Line* (1954), Paul Rand's IBM logo studies, Ladislav Sutnar's catalogue page-rules, the cream-and-tan reading rooms of the Beinecke Rare Book Library, and Hideyuki Nakayama's animations of half-drawn figures. ## Layout Motifs and Structure The structural soul is **Ma (間) negative-space framed by a Bauhaus tatami of three primaries**. The viewport is 70-80% empty cream-leather field at any given moment; content arrives only in three small, geometrically-pure containers — one **circle** (peach), one **square** (butter), one **triangle** (dove) — that drift and morph across the field as the visitor scrolls. Each shape is a *room*. Inside each shape lives a fragment of unfinished writing that the visitor witnesses being completed. **The Three-Primitive Spine.** Rather than a vertical scroll-stack of sections, completengine.com uses a **diagonal triangle-circle-square trajectory** anchored to the golden-ratio points of the viewport (38.2% / 50% / 61.8% horizontal). The triangle anchors top-left at (38.2%, 22%); the circle floats centre at (50%, 50%); the square rests bottom-right at (61.8%, 78%). These are the **three Tatami Stations**. Scroll progression *morphs* these primitives — a circle pinches into an oval, an oval rolls into a triangle's apex, a triangle unfolds along its hypotenuse into a square — and reflows the writing fragments inside them. **Generous Bauhaus Margins.** Outer margin is `clamp(48px, 9vw, 144px)` on all sides; the central reading column inside a primitive never exceeds **44ch**. Between primitives, **at least 24vh of vertical breathing**. The tatami grid underneath is *invisible but felt*: a 12-column grid with 1.5rem gutters, dropped to 6-column on tablet and to a single-column "stack of three primitives" on mobile (mobile preserves the morph; only the diagonal becomes vertical). **Spatial Logic.** - A faint **horizon line** runs across the page at 61.8% from top — a single 1px dove-grey rule that the primitives rest on, drift below, slip above. It is the only visible line on the entire site and the only nod to a "footer." - **Marginalia rail** lives on the right at 88% horizontal — a narrow 6ch column reserved for a single Bauhaus-script marginalia symbol per primitive (a hand-drawn `△`, `○`, or `□` ligature, retro-display weight 700). - **Vertical position is meaning.** A primitive *higher* on the page is "still thinking"; lower means "almost finished"; resting on the horizon line means "just spoken aloud." - **No header. No footer. No nav.** Navigation is "scroll, hover, idle." A returning visitor can press `1`, `2`, or `3` to teleport to any of the three primitives; this is the only acknowledgement of keyboard at all. ## Typography and Palette **Typography (Google Fonts only — a retro-display headliner with one humanist body and one monospaced whisper):** - **Display headliner — [`Bagel Fat One`](https://fonts.google.com/specimen/Bagel+Fat+One)** at weight 400 (the only weight). This is a soft, swollen retro-display face with rounded terminals and a slightly cushioned feel — Herbert Bayer if Herbert Bayer were a hand-pillow. Set primitive-titles at `clamp(3.4rem, 8.6vw, 7.8rem)`, line-height **0.92**, letter-spacing `-0.018em`. Use as the title *inside* each primitive shape only — never elsewhere on the page. - **Secondary display — [`Fraunces`](https://fonts.google.com/specimen/Fraunces)** in the **SOFT** axis at variable settings `"opsz" 144, "SOFT" 100, "WONK" 1`, weight 300 italic. Fraunces' SOFT axis is the *secret retro-display weapon* — it gives a 1970s editorial swell to italic asides. Use for "spoken aside" body fragments at `1.55rem` / line-height 1.45, letter-tracking `+0.4%`. This is the voice of the visitor's incomplete thoughts. - **Body humanist — [`Inter Tight`](https://fonts.google.com/specimen/Inter+Tight)** at variable wght 380→580. Body prose at `17.5px` / `28px` line-height, weight 400, with `font-feature-settings: "ss01", "cv11", "calt"` for the alternate single-storey g (Bauhaus echo). This is the voice of the *engine completing the thought*. - **Mono whisper — [`DM Mono`](https://fonts.google.com/specimen/DM+Mono)** at weight 300 italic, `13px` / `22px`, letter-tracking `+3%`, opacity 0.55. Used only in the marginalia rail, only for tiny status notes like `// completing`, `// almost`, `// there.` **Type rules for completion-as-form:** - All primitive-titles begin **mid-word** with a leading "...". E.g., *"...orning"*, *"...nished thoughts"*, *"...arden of half-circles"*. The first half of every title is *for the visitor to imagine*. - Body fragments end with a **soft em-dash** (`—`) followed by a 24-frame Fraunces-italic morph that "completes" the sentence on hover. - Italic Fraunces with `"WONK" 1` is reserved exclusively for the "spoken-aside" register; never combined with weight 700 or roman. **Palette — `creamy-pastel` warmed by a Bauhaus triad** (eight tones, `oklch` model, all desaturated by ~22% from canonical Bauhaus primaries to feel sunlit): | Token | Hex | Role | |---|---|---| | `--leather-cream` | `#F4E8D0` | Primary background — sun-faded cream leather | | `--leather-vellum` | `#FBF4E2` | Lifted plane (primitive interiors), creamier still | | `--peach-circle` | `#F2B8A2` | The Circle primitive (Bauhaus red, faded) | | `--butter-square` | `#F4D88A` | The Square primitive (Bauhaus yellow, faded) | | `--dove-triangle` | `#A8B7CE` | The Triangle primitive (Bauhaus blue, faded) | | `--espresso-ink` | `#3A2A1E` | All body type — not black, but tanned leather-ink | | `--sage-leaf` | `#9DAA86` | Floral-botanical accents (pressed-leaf green) | | `--rose-petal` | `#D4838A` | Marginalia accents and the rare petal flourish | **Why these and not pure Bauhaus primaries?** The canonical Bauhaus red/yellow/blue at full saturation would shout. Cream leather absorbs them. Each primitive is therefore a **memory** of a Bauhaus colour — the colour as it survives in a 1928 textile sample after 98 years of attic light. This is the "creamy-pastel" register: nothing is bright, but everything is unmistakably *primary*. **Contrast & ink:** - Body type is `--espresso-ink` on `--leather-cream` — a warm-on-warm pair that reads soft, never harsh. - Inside each primitive, type sits on the slightly creamier `--leather-vellum` plane, lifting it forward by 2-3% lightness. - Black is **never used**. Pure white is **never used**. The page has no #000 and no #FFF anywhere. ## Imagery and Motifs **Imagery rule: leather-texture is the only "photographic" surface, and floral-botanical is the only illustration.** No stock, no icons, no 3D, no AI-generated faces. The page has exactly two visual languages and both are tactile. **1. Leather-Texture Field (the page itself).** The entire `body` is a **continuous tan calfskin leather field**, rendered not as a JPEG but as a layered SVG filter: - A `1920×1280` cream base rectangle in `--leather-cream`. - An SVG `` overlaid at `mix-blend-mode: multiply` with **6% opacity** — this is the *grain*. - A second `` overlay at **3% opacity** — this is the *swell* of leather, the gentle topological hills where the hide breathed. - Three to five **soft creamy-pastel watermarks** of past primitives (faint peach circles, butter squares) embossed at 4% opacity — as if a previous visitor's primitives left a slight depression in the leather. - A subtle vignette: radial-gradient from `oklch(0.94 0.04 80 / 0)` at centre to `oklch(0.86 0.06 65 / 0.18)` at corners — the leather darkens slightly toward the bound edges of the "page." The cursor leaves a **temporary thumb-press depression** on hover-idle: a 64px radial darkening at 8% opacity that fades over 1.4s. The visitor literally *handles* the page. **2. Floral-Botanical Pressed Specimens.** Each of the three primitives carries a **pressed-flower specimen** inside it — a hand-drawn-feel SVG botanical illustration in `--sage-leaf` and `--rose-petal`, rendered with a single-weight 1.2px contour stroke and 22°-hatched shadows at 0.6px / 38% opacity. The specimens are: - **Inside the Circle (peach):** a *single morning glory*, half-open, vine curling along the inner curve of the circle. The flower morphs from bud → bloom over scroll-progress 0→1 of that section. - **Inside the Square (butter):** a *pressed wheat stalk diagonal*, four grains on each side of the stem, drawn flat as if pressed in a botanist's notebook between cardboard and time. Hatching only on the underside of each grain. - **Inside the Triangle (dove):** a *fern frond ascending the hypotenuse*, eleven pinnate leaflets, the smallest at the apex. Each leaflet has its own faint individual rotation `(-3deg, +2deg, -1deg, ...)` so the whole frond *trembles* on cursor proximity within 200px. **Recurring decorative motifs:** - **Bauhaus typeforms-as-ornament** — a tiny set of `△ ○ □` ligatures rendered in Bagel Fat One at 0.7em scattered three or four times across the leather field at very low opacity (12%) — a printer's flourish. - **Hand-stitching seam** — a 1px dashed `--rose-petal` line running 24px in from each viewport edge on desktop, like the top-stitching on a leather portfolio folder. It opens slightly (dashed-array animates from `4 4` to `4 8`) when the visitor's scroll position is between primitives — the leather "breathes" in the white space. - **Pressed-petal corners** — at the page's bottom-left corner only, a single tiny `--rose-petal` SVG petal lies as if it slipped from between the pages; it rotates 1° on hover-idle. - **No grids, no rules, no boxes.** No card components. Nothing has a border. Shape is conveyed by colour and shadow alone. **The morph alphabet (used everywhere shape changes):** Twelve canonical morph-states between the three primitives, choreographed via a single SVG `` and a `getPointAtLength` interpolation: `circle → flat-bottom-circle → semicircle → tall-arch → triangle-with-curved-hypotenuse → triangle → trapezoid → rounded-square → square → rounded-rectangle → oval → circle`. Twelve, like the months of the morphing year. ## Prompts for Implementation Build completengine.com as a **single-page leather portfolio** — a 4500px tall warm cream-leather field across which three Bauhaus primitives drift, morph, and *complete the visitor's thoughts aloud*. There is no menu, no header, no footer, no CTA, no sign-up, no pricing, no stat-grid, no testimonials block, no team page, no blog. There is leather, there are three primitives, and there is the slow soft conversation between them. **Story arc (continuous vertical scroll, three Tatami Stations, no horizontal nav):** 1. **The Arrival (0vh — 50vh).** The leather field fills the viewport. After a 1.4s pause, the espresso-ink Inter Tight whispers from the bottom-left at the marginalia rail: `// completion engine // ready`. The cursor at this moment is a 6px peach dot. Nothing else exists. After another 2.6s of idle (or on first scroll), a single Bagel Fat One word in `--peach-circle` materialises mid-air via a morph-from-circle: the word *"...orning"* appears as if the engine has just finished what the visitor was about to say. Below it, in Fraunces SOFT italic 300, the line *"i was thinking about this m—"* fades in from `--espresso-ink` at 32% opacity, ending in an em-dash. Hovering the em-dash extends it letter-by-letter into *"—orning. when the air is still cold but the kitchen is warm."* in a spring-easing typewriter (DM Mono cursor, blink rate 1.1s). 2. **The Circle (50vh — 130vh).** As the scroll passes 50vh, the peach `--peach-circle` primitive (a 360px diameter circle) inflates from 0 → 360px via a `cubic-bezier(0.34, 1.56, 0.64, 1)` spring — Bauhaus circle, faded peach, soft drop-shadow `0 18px 64px -24px oklch(0.42 0.08 32 / 0.32)`. Inside it, the title appears (Bagel Fat One, `--espresso-ink`): *"...orning"*. Below, an aside in Fraunces italic: *"every conversation starts mid-sentence — this one started with the kettle."* The morning-glory pressed-flower SVG draws itself along the circle's inner edge from 12 o'clock clockwise via `path-draw-svg` (3.8s, ease-out). The visitor lingers; after 6s of idle the primitive *exhales* — its radius animates `360 → 358 → 360` over 2.4s, infinitely. The engine is *thinking*. 3. **The Morph Bridge (130vh — 210vh).** The peach circle does not vanish. It **morphs**. As scroll-progress crosses 130vh, the circle's SVG path interpolates through the twelve canonical morph-states toward the butter square, drifting diagonally from the upper-left third to the centre. The morph-path is anchored to a `getPointAtLength` interpolation between two SVG paths of identical command-count. Mid-morph (around 170vh), the shape is a **rounded peach-butter trapezoid** with a soft hue-mix: `oklch(from var(--peach-circle) calc(l + 0.02) calc(c - 0.02) calc(h + 24))`. The pressed morning-glory inside *folds* at the same rate, its petals contracting and a wheat stalk emerging from the central stem. This is the most magical moment of the page; it should last 2.8s of scroll at default scroll-speed (CSS `scroll-timeline` with a custom `view()` range). 4. **The Square (210vh — 320vh).** The butter square arrives at the 50%/50% golden-centre. Title (Bagel Fat One, `--espresso-ink`): *"...nished thoughts"*. The Fraunces aside: *"some thoughts arrive complete; most of them arrive in halves and need a quiet kitchen to finish."* The wheat-stalk pressed-flower is now fully drawn diagonally across the square. A small Inter Tight body paragraph beneath the title — exactly **41 words** — describes how the engine works *(no jargon, no AI buzzwords; describe it as "a hand that finishes what your hand started")*. Hovering any word in the paragraph causes the next word to **bloom** — the upcoming word's letter-spacing animates from `0` to `0.08em` and back over 600ms, so the paragraph "ripens" word by word like a wheat field in wind. 5. **The Second Morph (320vh — 400vh).** Square morphs to triangle. Mid-morph, the wheat-stalk dissolves and a fern-frond emerges. The morph-bridge is *quieter* than the first one — the colour-mix passes through a dove-butter pale celadon at midpoint. The hand-stitching seam at the viewport edges *opens* its dashed-array as the morph progresses, then closes again as the triangle settles. 6. **The Triangle (400vh — 500vh).** The dove triangle rests at (61.8%, 78%). Title: *"...arden of half-circles"*. Aside in Fraunces italic: *"this is the part where you tell me what you were really thinking. i'll tell you what comes after."* Beneath the triangle, a single text input — but it is *not* a form. It is a single Inter Tight line with a slow blinking DM Mono cursor and the placeholder *"start anywhere — i'll finish the rest..."*. There is no submit button. As the visitor types, the engine *visibly completes their phrase in lighter espresso-ink letters at 38% opacity*, character-by-character, with a 280ms latency to feel like a hand thinking. (Implementation: a tiny on-page completion table of 24 hand-written aphorisms keyed by first-3-letters; this is *demonstration*, not real ML — and that is the point. The page *performs* completion as theatre.) 7. **The Colophon (500vh — 540vh).** The three primitives reassemble into a small still-life at centre — circle 80px, square 80px, triangle 80px, lined up on the horizon line, each at one-quarter their previous scale. Beneath, in DM Mono 13px italic, `--espresso-ink` at 70% opacity: `// completengine // a quiet hand // dessau-ish, 2026`. The pressed-petal in the bottom-left corner is the only non-textual element. No social links. No newsletter form. No legal. The leather closes. **Animation principles (CSS-first, JS-light):** - All scroll-driven animation uses CSS `animation-timeline: scroll()` and `animation-timeline: view()` with `scroll-timeline-axis: block`. JS only for the cursor-thumb-press, the typewriter-completion, and the keyboard `1/2/3` teleport. - Easing is **always spring** for primitive arrival (`cubic-bezier(0.34, 1.56, 0.64, 1)`) and **always ease-in-out cubic** for morphs. Never linear. - Reduced-motion: morphs become 200ms cross-fades; circle-exhale stops; cursor-press stops. Story still readable. - Paint timing: leather field paints first (cream + grain SVG inline in `` as a fixed background); primitives paint on demand with `content-visibility: auto`. - Use `prefers-color-scheme: dark` to swap to a *fox-leather* variant: `--leather-cream → #2A2018`, `--leather-vellum → #34281D`, `--espresso-ink → #F4E8D0`. The pastel primitives become *deeper-saturated* versions of themselves on dark leather (peach → terracotta, butter → ochre, dove → indigo). The leather grain SVG re-paints as charcoal grain. **Tone of body copy:** - Speak in halves. Every paragraph either begins or ends mid-thought. - No corporate vocabulary. Forbidden words: *innovative, leverage, seamless, robust, AI-powered, cutting-edge, solution, platform, ecosystem, scalable*. - Allowed register: kitchens, mornings, kettles, the smell of damp wool, an old colleague at the next desk, the half-finished sentence between two friends who already know. - Address the visitor as *you*, never *user*. Refer to the engine as *I* — but only twice in the entire page, and only in italic. **Technical scaffold:** - Single `index.html`, single `style.css`, single `script.js`. No framework. - Inline-SVG everywhere; the leather field is one `` with `` chains; the primitives are three `` elements with single morphable `` each. - Prefer `clamp()` over media queries for typographic sizing; one media query at 720px to collapse the diagonal into a vertical stack. - Total weight target (visual budget — focus is aesthetics, ignore performance metrics): around 200KB including fonts. Three fonts only (Bagel Fat One, Fraunces variable, Inter Tight variable, DM Mono — load `font-display: optional` so the leather appears even if fonts stall). - The 24-aphorism completion table is in `script.js` as a JS object literal. No fetch, no API, no analytics. **What this site is NOT:** - Not a SaaS landing. No "Get Started" button anywhere. - Not a portfolio. No team, no clients, no logos, no case studies. - Not a blog. No posts, no archive. - Not a tool. The completion is performance, not function. - Not "minimalist Swiss" — it is **soft Bauhaus on warm leather**, which is rarer. ## Uniqueness Notes **Differentiators from the existing 62-design corpus (informed by frequency analysis):** 1. **First "Bauhaus on leather" pairing in the corpus.** Bauhaus aesthetic registers at only **8%** corpus-wide; leather-texture imagery at **6%**; the *combination* of rigid Bauhaus primitives with soft tactile leather is unique here. Most Bauhaus designs in the corpus go primary-on-white (`flat-design`); this one goes faded-primary-on-tan-calfskin — a 1928 pamphlet weathered by 98 years of attic sun. 2. **`ma-negative-space` + `creamy-pastel` + `retro-display` triple-rare convergence.** `ma-negative-space` registers at **3%**, `creamy-pastel` at **6%**, `retro-display` at only **1%** — all three are deep-underused. completengine.com is the first design in the corpus to combine all three. Most retro-display sites in the corpus are bold/loud (`memphis`, `pop-art`); this one whispers in Bagel Fat One on cream leather. 3. **Three-primitive diagonal trajectory replaces vertical scroll-stack.** While 88% of corpus designs use `full-bleed` and 93% use `centered`, this site uses a **diagonal triangle-circle-square trajectory anchored to golden-ratio points**. Scroll-progression *morphs* primitives between Tatami Stations — no sectional dividers, no headers, no card-grids. 4. **Morph-as-narrative — twelve canonical primitive states.** `morph` registers at **16%** corpus-wide but is almost always used for hover-microinteractions (button-shape, icon-state). Here, `morph` is the *primary scroll-progression mechanic*: a single SVG `` interpolates through 12 canonical Bauhaus-primitive states across the entire page. No other site in the corpus uses morph as the spine of the narrative. 5. **The page as an actual completion engine — performed, not real.** The triangle station ends with a live text-input that *appears* to complete the visitor's sentence in real time, using a hand-curated 24-aphorism table keyed by first-three-letters. Almost all corpus designs use forms only for sign-ups/contact; this site uses a "form" as a piece of stagecraft. The visitor leaves having *experienced completion as art*, not as a feature. 6. **Floral-botanical pressed-specimen integration.** `floral-botanical` motif registers at only **8%**, and almost always as background decoration. Here, each of the three primitives carries a *specific pressed flower* (morning-glory, wheat, fern) drawn inline-SVG in two-colour botanical-illustration style, animating its drawing along with primitive arrival. Pressed-flower-as-companion-to-Bauhaus-primitive is a novel pairing. 7. **No black, no pure white, no pure primaries — anywhere.** The page has no `#000` and no `#FFF`. The Bauhaus primaries are desaturated by ~22% to `creamy-pastel` strength. This is a deliberate inversion of every Bauhaus tribute in the corpus and on the wider web. 8. **Conversational tone in halves.** `conversational` tone is **11%** corpus-wide but typically expressed in friendly headlines and microcopy. completengine.com's *conversational tone literally arrives in halves*: every primitive title begins mid-word with "...", every aside ends in an em-dash, and the engine "completes" the visitor's sentences in lighter ink. Half-spoken-ness is the unique structural device. **Avoided patterns from the frequency analysis:** - Avoided `parallax` (93%), `stagger` (70%), `scroll-triggered` reveal-from-below (54%) — the only motion is *morph* (16%) and *spring* (46%, used sparingly). - Avoided `hand-drawn` aesthetic (82%) — although the floral-botanical illustration is hand-drawn-*feel*, the overall aesthetic is geometrically-pure Bauhaus, sitting against the field. - Avoided `editorial` aesthetic (53%), `centered` layout (93%), `full-bleed` layout (88%) — this site is asymmetric-diagonal across three off-axis Tatami Stations. - Avoided `photography` imagery (95%) — the only "photographic" surface is the leather-texture SVG-filter field; everything else is geometric primitive or pressed-flower illustration. - Avoided `vintage` motif (90% corpus) — although the site has a 1928-pamphlet feel, the motif is *floral-botanical pressed specimen*, not generic "vintage" papercraft. - Avoided `mono` typography (96% corpus dominance) — DM Mono appears only in 13px marginalia whispers at 55% opacity. The voice of the page is Bagel Fat One retro-display + Fraunces SOFT italic, an exceedingly rare pairing. **Chosen seed (from assignment):** `aesthetic: bauhaus, layout: ma-negative-space, typography: retro-display, palette: creamy-pastel, patterns: morph, imagery: leather-texture, motifs: floral-botanical, tone: conversational`. **Single-line essence:** *A faded Dessau pamphlet, pressed between leather covers with a morning glory and a fern, whispering in halves and completing your thought just as you draw breath to finish it.*