# Design Language for completengine.net ## Aesthetics and Tone completengine.net is the public-facing storefront of an imaginary 1958 Midwestern small-engine works that has somehow continued operating, uninterrupted, into the present — the kind of place where a single building houses a draftsman's room with parallel rules still clamped to the boards, a workshop floor that smells of cut grass and 30-weight oil, and a front office whose desk lamps still throw warm tungsten light onto promotional brochures laid out in the unmistakable visual idiom of **mid-century American industrial advertising**. The "engine" in the name is a literal lawn-and-garden, two-stroke, single-cylinder thing, the kind that sat on the back of a Toro reel mower in 1962 — and the brand promises, as the name says, *to complete it*: to ship the missing rocker arm, the absent governor spring, the gasket nobody else stocks, to complete the engine and let the customer finish the job. The aesthetic is **mid-century**, specifically the optimistic, slightly square, atomic-age advertising vernacular of Charles & Ray Eames-era trade catalogs, Westvaco *Inspirations for Printers*, the Container Corporation of America's *Great Ideas* campaign, and most of all the technical-but-jaunty illustration style of mid-century **service-station and small-engine print ads** — sketched line-and-flat-color vector renderings of pistons, carburetor bowls, and grass-stained Briggs & Stratton workhorses. The tone is **energetic** in the specific way that mid-century optimism is energetic: brisk, can-do, mechanical, with a trace of rocketry and home-handyman exuberance. There is no irony. The design *believes in the engine*. The mood sits at the intersection of three precise references: (1) the **Push Pin Studios** illustration sensibility of Seymour Chwast and Milton Glaser circa 1959 — flat planes of color, hand-drawn-but-disciplined contours, stylized mechanical objects rendered as friendly characters; (2) the **broken-grid editorial layouts** of Alexey Brodovitch's late *Harper's Bazaar* and the technical-catalog spreads of Will Burtin for *Scope* magazine, where columns deliberately collide and a piston cutaway interrupts the gutter; and (3) the **micro-interactions** of a real well-loved mechanical control panel — a toggle that *clunks*, a rotary dial that detents at twelve discrete positions, a pull-cord that spools back with spring tension when released. Every interaction on the site has been engineered to feel like operating a 1958 piece of *equipment*, not clicking a button on a webpage. ## Layout Motifs and Structure The structural conceit is the **broken-grid trade catalog spread** — specifically the inside double-truck of a 1962 Briggs & Stratton small-engine parts annual, where a five-column underlying grid is *deliberately violated* by a piston-rod illustration that bleeds across columns three and four, by a callout caption that hangs in the gutter, and by a half-tone spec table that sits at a four-degree counterclockwise rotation because the typesetter wanted to show off. **The underlying grid is rigid.** Twelve columns at 80px each on desktop, with 24px gutters, totaling a 1248px live area. Vertical baseline is locked to a 8px rhythm. This grid is *the rule the design breaks against*. Without rigorous underlying order, the violations would read as carelessness; with it, every transgression reads as deliberate composition. **The violations are the design.** Section headers slide three columns left of where the eye expects, into the marginal whitespace, set in 144px Bebas Neue capitals running right-to-left along the section's left edge as a kind of vertical chapter marker. Body copy sets in two-column or three-column blocks but each block is *offset vertically from its neighbor by 32–96px* so that adjacent columns never share a baseline — the page reads as a stack of rectangles that almost-but-not-quite line up, the way an actual paste-up board looks before the production manager squares it. Vector illustrations of engine components are placed at deliberate **non-grid coordinates** — a carburetor float bowl in the lower-right of a section, rotated -7°, overlapping both the column gutter and the body copy by 18px. **Five named layout zones, each with a different grid logic:** 1. **The Masthead (top 720px).** Twelve-column grid is suspended entirely. The brand wordmark *complete /// engine* sets in Bebas Neue at 220px, broken across two lines, with a hand-drawn vector illustration of a stylized 1958 single-cylinder upright engine occupying the right half of the masthead, oversized so its cooling fins extend past the right edge of the page, bleeding into the browser chrome. A horizontal hairline rule (1px, terracotta) cuts across the masthead at the 480px y-coordinate, with a small enameled-badge medallion ("SINCE 1958, IN OPERATION") sitting on top of the rule, a third of the way from the right, anchored at column 9. 2. **Catalog Section (the body).** Three-column trade-catalog grid with deliberate column-rule violations. Section numbers set as 320px Bebas figures hanging in the left margin like illuminated capitals from a missal. Body copy columns shift up and down relative to neighbors. Vector spot illustrations of engine parts puncture column boundaries. 3. **The Specification Plate (specs).** A single off-grid rectangle, rotated 1.5° clockwise, with a heavy 4px terracotta border, set against a half-tone-stippled background. Inside: a two-column tabular layout of technical-looking specifications (RPM ranges, displacement, bore-and-stroke), set in monospace counterpoint to the surrounding sans. The plate has small rivet-shaped circular bolts at each corner. 4. **The Cutaway Section.** Full-bleed horizontal band, 640px tall, in which a single oversized vector cutaway illustration of a four-stroke cycle plays out across the width, with annotation labels connected by hand-drawn leader lines to specific mechanical features. The viewer scrolls, the cutaway phases (intake → compression → power → exhaust) advance via scroll-triggered micro-interactions. 5. **The Colophon (footer).** Returns to a strict five-column grid as a release of tension after the broken grids above — the design "settling back into order." Sets in the smallest type on the page, 13px, with a single oak-leaf vector ornament centered above a 1px hairline rule. **Spatial relationships.** Negative space is generous but irregular — a full column might be left empty just to give a single vector illustration room to breathe. The page never feels crowded but never feels evenly distributed either; the eye is led by deliberate density variations from one section to the next, the way it is led through a Saul Bass title sequence. ## Typography and Palette The typographic system is **bebas-bold** at the display register, paired with a humanist sans for body and a monospace for specifications — three families, each doing one job, no eclectic hybridization. **Display — Bebas Neue** ([Google Fonts](https://fonts.google.com/specimen/Bebas+Neue)). Bebas is the contemporary inheritor of the condensed-grotesque industrial-signage tradition that runs from late-19th-century wood type through 1950s automotive trade-show banners. Used here in capitals exclusively, at 144px, 220px, and 320px, with -2% tracking on the largest sizes. Bebas only comes in regular weight, which is a virtue — there is one voice, loud, and the design respects that constraint. Display set in `--terracotta` and `--ink-black` only, never in the pale supporting colors. **Body — Work Sans** ([Google Fonts](https://fonts.google.com/specimen/Work+Sans)) variable, weights 300–700. Work Sans has the slightly squared, mid-century-modernist proportions of Frutiger-adjacent humanists but with subtly warmer terminals — appropriate to the era. Body sets at 17px / 28px line height for prose, with a maximum 540px measure (~62 characters). Pull quotes set in Work Sans 700 italic at 36px. **Spec / Caption — JetBrains Mono** ([Google Fonts](https://fonts.google.com/specimen/JetBrains+Mono)). Used exclusively inside specification plates and for technical callouts on cutaway illustrations. Set at 13px in `--ink-black`, with extra letter-spacing (+4%) to evoke the look of a typewriter spec sheet that has been photostat'd onto a parts-catalog page. Numerals are tabular. **Palette is a strict complementary scheme** built around the orange-blue axis, with a single warm neutral and an ink dark, plus two supporting cools. Six values, no more — anything beyond six and the mid-century discipline collapses. - `--terracotta` `#D9582C` — the primary. The exact saturation of the brick-red lacquer used on Eames LCW chairs and Toro Wheel Horse decks. Used for the wordmark, primary headlines, and the rivets on the spec plate. - `--cobalt` `#1F4D7A` — the complementary partner. The blue of a 1959 Westinghouse appliance brochure. Used for secondary headers, hand-drawn leader-line callouts, and the cutaway-illustration accent strokes. - `--cream` `#F2E8D5` — the page ground. Not white. The off-white of uncoated newsprint from a Cleveland printer in 1962, slightly yellowed. - `--ink-black` `#1A1A1A` — body copy and rules. Not pure black; warm-leaning, the color of letterpress ink that has been cut slightly with bone-black extender. - `--moss` `#7A8F4E` — the supporting cool, used only in vector illustrations for grass, leaves, and oxidized-bronze fittings. A specific 1958 Earl Scheib house-paint catalog green. - `--copper-tarnish` `#A8C0BD` — the auxiliary cool, used for spec-plate backgrounds, half-tone stippling, and the patina on illustrated metal surfaces. The pale verdigris-blue of an aged copper kettle bottom. The complementary tension is the entire visual engine of the site: terracotta and cobalt vibrate against the cream ground, the moss and copper-tarnish cool the composition without breaking the warmth, and the ink-black anchors. **No gradients, no transparency effects, no glassmorphism, no depth shadows beyond a single 2px hard offset shadow used on display headlines.** Mid-century discipline. ## Imagery and Motifs **Imagery is exclusively hand-drawn vector-art illustration**, in the visual idiom of mid-century technical-and-trade illustration — Saul Steinberg meets Andy Warhol's pre-Pop commercial-illustration period meets Ralph Hulett's Disney background paintings meets the actual technical-illustration plates of a 1962 *Chilton's Auto Repair Manual*. The site contains zero photography. Every visual is a vector composition assembled from flat color planes, hand-drawn outlines, and selective half-tone stippling. **The illustration corpus (twelve total plates across the entire page):** 1. **The Masthead Engine.** A three-quarter-view stylized rendering of an upright single-cylinder air-cooled small engine, circa 1958. Cooling fins, recoil starter housing, fuel cap, governor linkage all visible. Rendered in `--terracotta` (engine block), `--ink-black` (linework), `--cream` (highlights), with a single `--moss` accent on the fuel-line gasket. The engine is anthropomorphized — it has a small enameled badge on its blower housing that reads "completengine // since '58" in tiny Bebas. It does not have a face, but the grouping of fuel cap, recoil starter knob, and governor lever resolves into a face if you look at it long enough, the way a 1959 Texaco mascot does. 2. **The Oak-Leaf Rosette** (recurring motif). A simple six-leaf vector rosette of stylized **leaf-organic** oak leaves arranged radially, in `--moss` on `--cream`, used as a section-break ornament four times throughout the page. The leaves are not botanically accurate — they are the simplified, emblematic oak leaf of a mid-century chamber-of-commerce seal or a YMCA badge. There is an organicism in the asymmetry: each leaf is slightly different from its neighbors, hand-drawn rather than mirrored. 3. **The Carburetor Float-Bowl Cutaway.** A full-color vector cutaway, with cobalt-blue cross-hatching for the cut metal, terracotta for the float, ink-black for linework. Annotated with hand-drawn cobalt leader lines pointing to the float, the needle valve, the main jet, the idle jet. 4. **The Four-Stroke-Cycle Animation Sequence.** Four discrete vector illustrations of a piston in intake / compression / power / exhaust positions, each a self-contained plate, set up to advance via scroll-triggered micro-interactions. The valves animate open and closed, the spark plug fires at the top of the compression stroke (a tiny `--terracotta` lightning bolt), the connecting rod articulates. 5. **A Stylized Rural Workshop Building.** Done in the manner of a 1955 chamber-of-commerce promotional folder illustration. Two-story clapboard structure with a corrugated-metal lean-to, a hand-painted "completengine" sign on the gable end, a single Norway maple in the side yard, a 1958 Studebaker pickup truck parked at an angle in the gravel lot. Flat color planes. No perspective tricks beyond a gentle two-point. 6. **Six Spot Illustrations of Specific Parts** — a spark plug, a piston ring, a flywheel, a magneto coil, a starter rope handle, a fuel-line clamp — each rendered as a small isolated vector object in three colors (terracotta + ink-black + cream), each suitable for placement as a marginal ornament next to a body-copy column. These are the iconographic vocabulary of the site, repeated at small scale throughout. **Decorative patterns and motifs:** - **Half-tone stippling** in `--copper-tarnish` and `--ink-black`, applied as a textured background fill behind specification plates and behind the masthead engine illustration. The stipple pattern is irregular — not a CSS dot-grid but a hand-drawn placement, scanned and turned into an SVG pattern. - **Single-rule horizontal hairlines** in `--terracotta` at 1px, used as section dividers and as the underline beneath section numbers. - **Hand-drawn leader lines** with small filled circles at the terminal end, connecting illustration callouts to caption text. The leader lines are not perfectly straight — they have a slight tremor, hand-drawn in vector with two or three control points. - **The enameled badge medallion**, a small (44px) circular vector ornament with a serrated edge, an inner ring, and tiny Bebas Neue text running around the inner circumference. Used four times: in the masthead, on the engine illustration, in the specification plate, in the colophon. ## Prompts for Implementation Treat completengine.net as **a single long vertical scroll equivalent to one folded-out trade-catalog spread** — there are no other pages, no clickable pricing tables, no tiled "feature" grids of three-or-four product cards, no testimonials, no FAQ accordions, no contact form. The entire site is one **immersive narrative document** about a small-engine works that completes engines, told in the visual language of a 1962 Briggs & Stratton parts annual, scrolled vertically. **Scroll narrative (top to bottom, eight named beats):** 1. **The Masthead Arrival** — The page opens with the broken wordmark and the oversized engine illustration. As the user begins to scroll, the engine illustration's flywheel rotates *one quarter turn* via a **micro-interaction** tied to scroll position, with a subtle elastic damping at the end. The recoil starter rope retracts. A tiny puff of `--copper-tarnish` exhaust smoke emits from the muffler as the user crosses the 200px scroll threshold, then dissipates. This is the engine starting. 2. **The Hand-Lettered Manifesto** — A single Bebas-Neue paragraph, set at 96px across two columns, spanning the broken-grid: *"Since 1958 we have completed engines. Send us the engine that does not run. We will send back the engine that does."* No CTA button. Just the statement. The capitals draw in via path-draw-svg as the section enters viewport, one letter at a time, paced like someone hand-lettering a sign. 3. **The Workshop Plate** — The rural-workshop illustration loads at full bleed. As the user scrolls past it, the small Studebaker pickup *parallax-shifts 12px to the left* relative to the building, suggesting it is closer to the camera. The Norway maple's leaves trembled subtly via a CSS transform on the leaf-cluster SVG paths. 4. **The Catalog Body** — Three columns of broken-grid trade-catalog body copy describing the four engine families the works completes (upright single-cylinder, horizontal flathead, two-stroke vertical-shaft, four-stroke L-head). Each family is illustrated by one of the spot illustrations from the corpus, placed at deliberate non-grid coordinates with a -7° rotation. The body sets in 17px Work Sans with extreme typographic care — drop capitals on each family's first paragraph, set in 88px Bebas in `--terracotta`. 5. **The Cutaway Animation** — The four-stroke-cycle sequence plays out across a full-bleed horizontal band as the user scrolls through it. Each stroke is a discrete scroll position, held for 480px of scroll before advancing. The piston moves up and down, the valves open and close, the spark plug fires at the top of compression. Annotation leader lines draw themselves in as each stroke becomes active. 6. **The Specification Plate** — The off-grid 1.5° rotated plate appears with its rivets, its half-tone stippled background, its tabular spec data set in JetBrains Mono. The plate "tilts into place" from a 4° starting rotation, settling at 1.5° via a spring micro-interaction with overshoot. Hovering on any spec row fires a *micro-interaction*: the row's leader line draws out 60px to the right, terminating in a tiny `--terracotta` filled circle and a Work Sans caption explaining the spec in plain English. 7. **The Carburetor Cutaway** — The float-bowl illustration, in detail. Hovering the float makes it bob 4px on a damped sine wave (a micro-interaction). Hovering the needle valve makes a small `--terracotta` droplet appear at its tip and slowly fall into the float bowl over 1.2 seconds, then fade. These interactions are *playful within the discipline of the era* — the way a mid-century children's-museum push-button exhibit would have rewarded curiosity. 8. **The Colophon Settlement** — The five-column footer grid restores order. The oak-leaf rosette appears centered above a hairline rule. Below the rule, a single line in JetBrains Mono: `est. 1958 // ohio // we complete the engine`. No social-media icons, no links, no email signup field. Just the line, the rosette, and the rule. **Animation philosophy.** Every animation is **micro-interactions** in the strict sense — small (<8px translation, <8° rotation), short (<400ms), purposeful, mechanical-feeling rather than fluid. Easing curves are biased toward `cubic-bezier(0.4, 0.0, 0.2, 1)` (Material standard) and `cubic-bezier(0.5, 1.5, 0.5, 1)` (overshoot spring) — never elastic-back, never bouncing more than once. The animation language should feel like operating a well-engineered 1958 mechanical control, not like a 2023 web app. Page transitions are not used; the entire site is a single document. **Sound is optional but encouraged.** A muted tongue-and-groove "clunk" sound on the rotary-dial interactions, a soft "ratchet" on the recoil-starter scroll trigger. If implemented, all sounds default to muted and require user interaction to activate, with a small `--terracotta` toggle in the lower-right. **AVOID, explicitly:** - No CTA buttons of any kind. Not "get a quote", not "contact us", not "subscribe". - No pricing blocks, tier comparisons, or service-package cards. - No three-up or four-up stat grids ("500+ engines completed!" "98% satisfaction!" — never). - No testimonial blocks with stock photography. - No carousel sliders. - No accordions. - No glassmorphism, no neumorphism, no gradient meshes, no parallax-mesh backgrounds. - No emoji, no Lottie cartoons, no soft-3D blob illustrations. ## Uniqueness Notes Three or more deliberate differentiators from the existing 62-design corpus, with frequency-analysis context. 1. **Vector-art is the only imagery, and it is mid-century technical illustration specifically.** The frequency report shows that 95% of the 62 designs use **photography** as their primary imagery mode, and only 1% use **vector-art**. completengine.net inverts that — there is *no photography on the site at all*, and every visual element is a hand-drawn vector composition in the visual vocabulary of 1955–1962 American trade-catalog illustration. This is not generic vector clip-art; it is the specific Push Pin / Saul Steinberg / Westvaco *Inspirations* sensibility, applied to small-engine subject matter. The corpus has no other site doing this. 2. **Bebas-bold display typography paired with a strict complementary palette.** The frequency report shows **bebas-bold** at 3% adoption and **complementary** palette at 3% adoption — both rare. Combining them is, by frequency analysis, vanishingly uncommon. The pairing is also typographically appropriate to the era: Bebas's condensed-industrial heritage matches mid-century commercial-art display lettering, and a strict complementary scheme (terracotta + cobalt) was the dominant color move of the period's print advertising. The combination is historically grounded, not arbitrary. 3. **Broken-grid layout as the literal structural metaphor for a paste-up board, not as decoration.** The frequency report shows **broken-grid** at 9%. The handful of designs that use it tend to deploy it as a stylish gesture. completengine.net uses broken-grid *as its operating principle*: the underlying twelve-column rigid grid exists specifically to be violated, and every violation is a deliberate compositional decision that mirrors how a 1962 trade-catalog production manager actually laid out a spread. The grid breakages are not random; they are *typographically reasoned*. 4. **Micro-interactions tied to mechanical metaphors, not UI metaphors.** Frequency report shows **micro-interactions** at 1% — the rarest interaction pattern in the corpus. completengine.net builds its entire interaction language around mid-century mechanical controls: the rotary-dial detent, the recoil-starter ratchet, the float-bowl bob, the spec-plate tilt-into-place. None of these are generic web UI patterns. The interactions evoke the *feel of operating a piece of 1958 equipment*, which is a metaphor no other site in the corpus pursues. 5. **Energetic tone executed through restraint, not exuberance.** Frequency report shows **energetic** tone at 3%. The few sites that pursue energetic tone tend toward maximalism, neon, or candy-bright palettes. completengine.net achieves energy through *the optimism and forward-leaning posture of mid-century industrial advertising* — the energy is in the brisk Bebas capitals, the can-do declarative manifesto sentences, the firing-piston micro-interaction, the slight forward tilt of the spec plate. The site is energetic the way a 1959 tool catalog is energetic: it believes in the work and gets on with it. No other site in the corpus interprets energetic this way. 6. **Leaf-organic motif used as mid-century civic-emblem oak-leaf rosette, not as nature/botanical decoration.** Frequency report shows **leaf-organic** at 3%. The leaf-organic instances in the corpus tend to be lush, watercolor, or botanical-illustration treatments. completengine.net uses leaves as the stylized, simplified, six-fold-radial **oak-leaf rosette** of a mid-century chamber-of-commerce or YMCA emblem — the leaves are decorative civic-iconography, not nature reference. This is a specific historical visual idiom (think Container Corp. of America bookplates, or the 1956 *Boy Scouts of America Handbook* cover ornaments) that no other site in the corpus invokes. **Documented chosen seed:** aesthetic: mid-century, layout: broken-grid, typography: bebas-bold, palette: complementary, patterns: micro-interactions, imagery: vector-art, motifs: leaf-organic, tone: energetic. **Avoided patterns from frequency analysis:** photography (95%, dominant — completengine.net uses zero photography); warm palette (98%, ubiquitous — completengine.net's complementary scheme is warm-leaning but disciplined to two named hues); gradient (93%, ubiquitous — completengine.net uses no gradients of any kind); parallax (93%, ubiquitous — completengine.net uses parallax only in one specific plate, the workshop building, and only for a 12px subject-relative shift); centered (93%) and full-bleed (88%) layout defaults are deliberately abandoned in favor of broken-grid; vintage motifs (90%, dominant — completengine.net is mid-century-modernist specifically, which is *post-vintage* in the sense that mid-century rejected Victorian decoration in favor of geometric clarity, so the motifs here are mid-century-civic, not vintage-ornate); mono typography (96%, ubiquitous — completengine.net uses JetBrains Mono only in a single restricted role, the specification plate, never as primary or display).