# Design Language for completengine.com ## Aesthetics and Tone completengine.com is a **swiss-precision tilt-deck cast in cream-and-classical light** — imagine the Helvetica Forever editorial team commissioned a 22nd-century compiler vendor to publish their architectural drawings as a single endless poster, and the print shop only had pastel-tinted paper milled from quarried marble dust. The aesthetic is **swiss-modernist rigor warped through a futuristic-cutting-edge lens**, where the grid never disappears but every element on it is gently tilted off the page-plane — a flat composition that has been pinched, lifted, and re-flattened just slightly out of true. The tone is futuristic-cutting-edge but never neon, never dark-mode, never glitchy: it is the future as imagined by a Zurich type studio with a marble bust on the desk and a rendering rig on the floor. The word **complete** is read as a *terminal frame* — the act of finishing, the snapping-shut of an engine cycle — and the word **engine** is read as a *continuous mechanism*. The site holds those two readings in opposition: each panel is a finished, framed, type-perfectly-set tableau (complete), while the panels themselves slide and re-tilt as the visitor scrolls (engine). The doubled `n` of *engine* is treated as a literal piston-pair in the typography, and the long `e-e` rhythm of *complete-engine* is mapped to the cadence at which tilted cards rest, settle, and re-tilt across the page. Underneath the tech-mono surface there is a quiet **classical undercurrent** — fluted plinths, marble-vein textures, the half-shadow of a Doric capital — placed beside flat, slightly noisy gradient meshes the color of frangipani petals. The meeting of those two registers (the marble-classical and the gradient-mesh-futurist) is the central tension of the design: a creamy, slightly chalky pastel surface on which absolutely precise mono type sits, tilted three to seven degrees in 3D space, casting soft directional light onto the page. Visitors should feel they have opened a press kit for a future-classical product — sober, confident, technically rigorous, but warmed by cream paper and pink dawn light. The tone is **futuristic-cutting-edge** in the sense of a research lab brochure, not a hype reel: no exclamation marks, no "supercharge," no neon. Statements are flat, declarative, and short. The cutting-edge feeling comes from the *behavior* of the layout (tilted, light-aware, marble-textured) rather than from loud language. The personality is that of a senior engineer who happens to also collect Swiss posters and Roman fragments — exact, calm, slightly austere, quietly modern. ## Layout Motifs and Structure The page is governed by a **strict 12-column Swiss grid set on a 1440px reference width**, with a **96px outer margin** on desktop, **24px gutters**, and a baseline rhythm of **8px** that every element snaps to. This is the bedrock — but the bedrock is never shown unmediated. Every block placed on the grid is then **tilted in 3D space** between **−7° and +7° on the Y-axis** and **−4° and +4° on the X-axis**, with the perspective origin set at `perspective: 1800px` from the top-center of the viewport. The result is a layout that *reads* as Swiss-flat at a glance and *behaves* as a tilted deck of marble cards on closer attention. **Navigation** uses the *minimal-navigation* pattern: a single fixed top-left wordmark `completengine` set in tech-mono lowercase, a single right-aligned link cluster of three items (`engine`, `manual`, `index`), and absolutely nothing else — no hamburger, no search, no CTA button, no sticky bar at the bottom. The wordmark and the three links sit on the page-plane untilted, anchoring the eye while the content beneath them tilts. A thin **0.5px hairline rule in #2C2A26** runs the full width directly under the navigation and is the only horizontal divider on the page. The page is composed of **seven full-bleed sections** stacked vertically, each section occupying **100vh** minimum, separated by **160px of vertical air**. Sections are not boxed; they bleed into the cream paper background, and the only thing that signals a section break is the **re-tilt** — each new section enters the viewport with its grid tilted at a different angle from the previous one, creating a sense that the entire deck is being slowly fanned. Section composition follows a **tilt-3d Swiss editorial spread** logic: - **Section 1 (Mast):** A single sentence set in 168px tech-mono, broken across three lines on a 7-column field, tilted −5° Y. To its right, on columns 9–12, a small 240×240 marble-vein swatch tilted +6° Y, captioned with a 14px mono caption set perfectly horizontal. - **Section 2 (Definition):** Four numbered statements `01.` `02.` `03.` `04.`, each on its own row, each row tilted independently between ±3°. Numbers in 14px mono, statements in 56px humanist sans. The eye reads down a *staircase* of micro-tilts. - **Section 3 (Mechanism):** A single 16:9 gradient-mesh tile occupying columns 2–11, tilted +7° Y, with a Doric-fluted plinth motif rising from its lower edge. To the upper-left, a 12px mono technical caption block sits flat on the page-plane. - **Section 4 (Manual):** A two-column running text spread, columns 2–6 and 7–11, each column tilted in opposite directions (−2° and +2° Y), creating a *book-open* effect. Body text in 18px humanist with 32px leading. Drop cap is a single oversized tech-mono glyph in pastel coral. - **Section 5 (Index):** A 4-row × 3-column tilt-card grid of small marble-textured panels, each card tilted on a different axis, each labeled with a tech-mono index code (`CE-01-A`, `CE-01-B`, …). Hover lifts the card out of the deck. - **Section 6 (Apparatus):** A single full-bleed gradient-mesh field with a Doric capital silhouette anchored bottom-center, and a 280px tech-mono numeral set transparently across the top of the field. Tilt: −3° Y on the field, capital sits flat. - **Section 7 (Colophon):** A perfectly flat (zero tilt) Swiss-grid colophon in 12px mono — the only section that does not tilt, signalling the *closed cycle* of the engine. **Negative space rule:** every tilted block must be surrounded by at least **one full column** of empty cream paper on each side; tilted blocks never touch the viewport edge. This preserves the Swiss feeling of *air around the type* even as the type is rotated in space. **Vertical motion:** as the visitor scrolls, the perspective origin smoothly shifts from top-center (Section 1) to bottom-center (Section 7), so the deck appears to be slowly rotating around a horizontal axis — the *engine cycle* literalized. ## Typography and Palette **Type Stack (Google Fonts only).** - **Display + Mono lead:** **JetBrains Mono** (weights 300, 500, 700, 800). Used for the wordmark, section numbers, captions, technical labels, and the 168px masthead. JetBrains Mono is selected over generic mono for its slight humanist warmth — it reads tech-mono without feeling terminal-coded. - **Editorial body:** **Inter** (weights 300, 400, 500, 700). Used for running paragraph text and 56px statement type. Set with `font-feature-settings: 'ss01', 'cv11'` for the more rigorous letterforms. - **Classical accent:** **Cormorant Garamond** (weight 300, italic). Used **sparingly** — only for one single oversized lowercase italic letterform per section, dropped behind the mono type as a watermark in 12% opacity. This is the *marble-classical* whisper underneath the tech-mono surface. - **Fallback chain:** `'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace` and `'Inter', 'Helvetica Neue', system-ui, sans-serif` and `'Cormorant Garamond', 'EB Garamond', Georgia, serif`. **Type Scale — modular, 1.333 ratio, 8px baseline.** The full scale runs `12 / 14 / 18 / 24 / 32 / 56 / 96 / 168 px`. Mono runs at the smaller end (12, 14, 18). Humanist body holds the middle (18, 24, 32). Display reserves 56, 96, 168 for masthead and section titles. Letter-spacing: mono at `-0.01em`, humanist at `-0.02em` for display sizes and `0` for body, classical italic at `0.02em`. **Palette — creamy-pastel.** A cream-paper ground with three pastel accents and two near-blacks for type. All values designed for cream-on-cream layering. | Role | Name | Hex | |------|------|-----| | Paper ground (primary surface) | `cream-vellum` | `#F4EFE3` | | Paper ground (warmer secondary) | `cream-rosewater` | `#F8E9DC` | | Pastel accent 1 (frangipani) | `pastel-frangipani` | `#F2C7B6` | | Pastel accent 2 (eau-de-nil) | `pastel-eau-de-nil` | `#C8DCD2` | | Pastel accent 3 (mauve-marble) | `pastel-mauve-marble` | `#D9CFE0` | | Marble-vein graphite | `marble-vein` | `#7B7268` | | Type primary (near-black) | `ink-basalt` | `#2C2A26` | | Type secondary (warm slate) | `ink-graphite-warm` | `#5A544B` | | Hairline rule | `rule-bone` | `#D4CCBE` | **Gradient-mesh palette:** soft 4-stop meshes built from `#F2C7B6 → #F8E9DC → #C8DCD2 → #D9CFE0`, with a noise overlay at 4% opacity to read as paper-grain rather than digital sheen. **Contrast logic:** all body text uses `ink-basalt` on `cream-vellum` for the strongest reading pair; pastel accents are reserved for tilted cards, gradient-mesh fields, and marble swatches — never for type. The classical italic watermark is rendered in `marble-vein` at 12% opacity. ## Imagery and Motifs The visual world of completengine.com is built from **four motifs in superposition**: tilt-3d planes, gradient-mesh fields, marble-classical fragments, and tech-mono type rendered as object. **Tilt-3D Planes.** Every content card is treated as a **physical sheet of cream paper or thin marble veneer**, tilted in 3D space and lit by a **single soft directional light from the upper-left at 35°**. Each tilted plane casts a subtle, diffuse shadow with a 32px blur radius and 8% opacity, in a warm graphite tone (`#5A544B`) — never gray, never blue. The planes themselves carry a 1px inner stroke in `rule-bone` to suggest the cut edge of paper or stone. The combined effect: a desk-top of tilted samples photographed from directly above, with light raking across. **Gradient-Mesh Fields.** Three or four large gradient-mesh fields punctuate the page. Each is built from the **creamy-pastel mesh palette** with a **subtle paper-grain noise** overlaid at 4% opacity. The meshes are NOT chromatic, NOT iridescent, NOT holographic — they are **soft, flat, hand-painted-feeling washes** that resemble the inside cover of a 1970s Swiss design annual reprinted on dawn-pink stock. Each mesh field has a single tech-mono caption attached at one corner, set perfectly orthogonal to the page-plane (not tilted with the field), creating a tension between the floating wash and the fixed label. **Marble-Classical Fragments.** Three classical fragments recur as quiet undercurrents: 1. **Doric fluted plinth** — a tall, narrow vertical motif rendered as a flat SVG silhouette with subtle marble-vein noise. Used at the lower edge of section 3 and 6, anchoring the gradient-mesh fields to a classical foundation. 2. **Doric capital silhouette** — a flat profile of an abacus-and-echinus capital, used once as the closing motif in section 6. 3. **Marble swatch tiles** — small 240×240 squares of veined marble texture, tilted on the deck, captioned with mono technical codes (`MARBLE-A1`, `MARBLE-A2`). The marble veins are rendered in `marble-vein` graphite over `cream-rosewater` — cream marble, never white, never gray. These fragments are never figurative-classical (no cherubs, no laurels, no medallions). They are **fragments of order** — vertical structure, horizontal cap, planar sample — placed beside futuristic gradient meshes to assert that the *engine* runs on a classical foundation. **Type-as-Object.** The 168px masthead and 280px section numerals are treated as **physical objects on the deck** rather than as text. They are rendered with the same upper-left directional light as the cards, casting a soft 24px blur shadow at 6% opacity. The *complete* in the masthead breaks across three lines and is tilted −5° Y; the eye reads it as a slab of mono type lying on the desk among the marble samples. **Iconography.** No conventional icons. Where a symbol is needed (for index codes, for navigation hover states), use **single tech-mono glyphs in brackets**: `[01]`, `[02]`, `[→]`, `[↗]`. Bracketed glyphs are an icon system in themselves and require no SVG. **Texture and Grain.** A **uniform 4% paper-grain noise** is overlaid on the entire page background — not on individual elements, but on the cream-vellum ground itself. The noise is monochromatic in `marble-vein` and is generated as a static SVG `` filter with `baseFrequency="0.9"` so it reads as fine fiber rather than digital static. ## Prompts for Implementation This is a **full-screen narrative experience**, not a marketing page. The visitor scrolls through a quiet, tilted deck and reads. There is **no hero CTA**, **no pricing block**, **no statistic-grid**, **no testimonial carousel**, **no feature-tile**, **no logo cloud**, **no newsletter form**. There is also **no animated counter**, **no parallax-stack of three benefit cards**, **no comparison table**. The page is a press-kit object, not a funnel. **HTML Structure.** Use `
` containing seven `
` elements, each with a `data-tilt-y` and `data-tilt-x` attribute carrying the section's deck angle. Within each section, semantic `
` for cards, `
` for marble swatches and gradient meshes, `