# Design Language for monopole.quest ## Aesthetics and Tone monopole.quest is a **Bauhaus school broadsheet printed on warm cream stock and then digitally possessed** — the ghost of Gropius haunts every pixel. The aesthetic is a deliberate collision between 1923 Dessau geometry and the warm, soft nostalgia of a 1970s German print shop: strict red-on-cream grid mathematics undercut by playful rounded corners, like Herbert Bayer's Universal typeface if it had been re-drawn by a kindergarten teacher who loved it deeply. The tone is **nostalgic-retro without irony**. This is not pastiche or kitsch; it is an earnest love letter to the Bauhaus moment — the belief that form and function could be the same thing, that a teapot and a poster and a building could share a grammar. The site breathes that belief while being undeniably contemporary in its motion behavior. The mood sits at the intersection of **museum catalog** and **record sleeve** — as if the Bauhaus Archiv Berlin had asked a 1975 Swiss record label to design their centennial exhibition catalog. Every decision is considered; nothing is accidental; the geometry serves the meaning. Primary color feeling: burgundy ink on aged cream, with primary-red geometric punctuation. The site should feel like it was printed, then mounted, then lit from slightly above. ## Layout Motifs and Structure **Layered-depth composition** is the structural grammar — every section is a stack of planes at different Z-positions, simulated through carefully orchestrated box-shadow cascades, translate3d lifts, and semi-transparent overlays. The visitor feels they are peeling back layers of a mounted print, each layer revealing a deeper plane of meaning. **Spatial logic:** - The page is divided into a strict **12-column Bauhaus grid** (inspired by Joost Schmidt's exhibition typography), but columns are only ever used in multiples of 3 or 4. No odd-column spans. - A dominant **horizontal datum line** runs at 38% from the top of the viewport — this is the "horizon of the broadsheet." Above it: large display type and geometric motifs. Below: content and detail. - **Asymmetric column blocks**: a left column occupies 35% of the viewport (the "narrow column" — for navigation, labels, dates) and a right block at 65% (the "wide field" — for headlines, body, imagery). This is a direct translation of the asymmetric Bauhaus print layout. - Section transitions use **layered depth reveals**: sections do not fade in from below — they appear to rise from behind the previous section, as if a new mounted plate is sliding forward from the wall behind. - The maximum content width is 1200px, centered, with 48px minimum horizontal padding. - Mobile collapses to a single column, but the horizontal datum line persists and the 38/62 split becomes a 100% single stream with the datum as a decorative horizontal rule. **Key layout moments:** - Hero: full viewport, large Bauhaus-grid letterform in background (a single letter at 40vw size, #4A0E1A at 6% opacity), wordmark at the datum line, sub-headline below. - Section 2: left column has a vertical timeline of cultural dates; right field has stacked geometric abstraction cards, each one a different Z-depth. - Section 3: a 3-column photo-essay grid, each cell has a thick burgundy border that animates on scroll-entry. - Section 4: full-width horizontal strip — a single quote in display type, centered, on a solid #4A0E1A background with cream text. - Section 5 (closing): geometric mandala motif centered, fading out, site title echoed in small caps below. ## Typography and Palette **Typography (Google Fonts only):** - **Primary display (headlines, wordmark):** `Nunito` (Google Fonts, variable wght 400→900, italic available). Nunito's generous rounded terminals give Bauhaus geometry a warmth that cuts against the austerity — this IS the playful-rounded choice, but used at large scales where the roundness reads as confidence, not cuteness. Headlines at clamp(3.2rem, 6.8vw, 7rem), weight 800, uppercase for section titles, mixed-case for sub-heads. - **Secondary display (section labels, captions):** `Josefin Sans` (Google Fonts, wght 100–700). Josefin Sans is a deliberate 1920s geometric revival — it has the same stroke geometry as early Bauhaus lettering. Used at 12–14px, weight 300, all-caps, tracking +0.22em, for all labels, dates, and category tags. - **Body text:** `Nunito` at 17px / 30px line-height, weight 400. The consistency of using a single rounded-sans family throughout creates a unified typographic voice. - **Accent / pull-quotes:** `Libre Baskerville` (Google Fonts), italic, weight 400. Used ONLY for pull-quotes and the closing manifesto section — the contrast of a classical serif against the rounded-sans primary creates a deliberate historical tension (old-school letterpress vs. Bauhaus machine-type). **Palette (burgundy-cream, 7-color system):** - `#F5EDD6` — aged cream (primary background, like 100-year-old paper) - `#4A0E1A` — deep burgundy (primary text, primary borders, main structural color) - `#FAF6EC` — lighter cream (card backgrounds, elevated surfaces in layered depth) - `#C8102E` — Bauhaus primary red (accent, geometric motif fill, active state indicators) - `#E8D9B5` — warm tan (secondary surface, slight depth shift from primary bg) - `#1A0408` — near-black burgundy (darkest text, critical contrast) - `#9B3A4B` — mid-burgundy (secondary text, captions, hover states for links) **Color usage rules:** - The page is predominantly #F5EDD6 — the cream never disappears entirely. - #C8102E appears ONLY as a geometric accent, never as background for large areas. - Text body is always #4A0E1A on cream; never black-on-white. - Borders are always #4A0E1A at 100% or 30% opacity. ## Imagery and Motifs **Geometric-abstract imagery** is the exclusive visual language. No photography. No illustration in the conventional sense. Every image is a **geometric composition built in SVG or pure CSS**, drawing from the vocabulary of Bauhaus Vorkurs (preliminary course) exercises: **Recurring geometric motifs:** - **The Itten Color Circle** — abstracted as a series of concentric arcs in burgundy and cream, used as a decorative element at section transitions. Not a literal color wheel — an abstracted memory of one, with 6–8 arc segments at varying stroke weights. - **Klee Grid Fragments** — small rectangular grid fragments (Paul Klee's teaching diagrams), drawn as SVG with thin #4A0E1A lines, placed in the left column as section markers. - **Moholy-Nagy Light Discs** — semi-transparent circles (CSS, border-radius: 50%) at 20–30% #C8102E opacity, stacked at slight offsets to create depth. Used in the hero section as background atmosphere. - **Oskar Schlemmer Figure** — a single abstract human-figure geometry (geometric arcs and circles representing a figure in motion), used as the central motif of Section 5. This references Schlemmer's Triadic Ballet costume geometry. - **Cultural mosaic fragments** — small tile-like geometric cells arranged in grid clusters, referencing both Bauhaus weaving workshop patterns and broader global geometric textile traditions (Islamic geometric, Japanese mon crests). These appear at approximately 40px × 40px per cell, arranged in clusters of 6–12. **Border-animate pattern — the signature motion:** All card borders and section-separator lines use `border-animate`: a CSS animation that draws the border around the element perimeter using `clip-path` or SVG stroke-dashoffset, completing the rectangle in 600ms at a deliberate pace. This happens on scroll-entry (Intersection Observer). The drawing direction is always clockwise, starting from the top-left corner. Border color is #4A0E1A, stroke weight 2px on cards, 1px on labels. **Motif placement logic:** - Geometric motifs never overlap body text. - Large background letterforms (single Bauhaus-grid glyphs at 6% opacity) are placed behind content sections, not over them. - All SVG motifs use only the 7-color palette — no colors outside the system. ## Prompts for Implementation Build monopole.quest as a **mounted print retrospective** — a single-page experience structured as 5 sections that feel like 5 panels in a Bauhaus exhibition. The visitor does not scroll past content; they move through a curated space. **Section 1 — Vorkurs (Foundation):** Full viewport hero. Background: #F5EDD6. The letter "M" (for Monopole) at 40vw, set in Nunito 800, #4A0E1A at 6% opacity, positioned off-center-left. The wordmark "monopole.quest" is set at the 38% datum line: Nunito 800, uppercase, clamp(3rem, 5.5vw, 5.5rem), #4A0E1A. Below the datum: a single-line sub-title in Josefin Sans 300, all-caps, tracked at +0.22em: "A BAUHAUS FOR THE DIGITAL AGE." Three Moholy-Nagy discs float in the upper-right quadrant — 200px, 130px, 80px circles in #C8102E at 18%, 12%, 8% opacity respectively. On page load, each disc performs a slow drift: translateX(+20px) over 8 seconds, alternating direction, eased with cubic-bezier(0.4, 0, 0.6, 1). The border-animate pattern activates on a thin 2px #4A0E1A frame that draws itself around the wordmark within 1.2 seconds of page load. **Section 2 — Werkstatt (Workshop):** Background: #FAF6EC. Two-column layout: left 35% is a Josefin Sans timeline (vertical list of cultural/historical dates and terms, 12px, all-caps, tracked), right 65% is a stacked set of 4 geometric-abstract "cards." Each card is a fixed-height (240px) rectangle with a background of either #F5EDD6 or #E8D9B5, containing a geometric motif (Klee fragment, Itten arc cluster, or mosaic tile grid) plus a two-line label. Cards are offset vertically at different depths using box-shadow: the topmost card has `box-shadow: 0 8px 32px rgba(74,14,26,0.10)`, successively deeper cards get progressively stronger shadows (0.15, 0.22, 0.30 opacity). On scroll-entry, each card performs `border-animate` in sequence with 120ms stagger between cards. Cards also have a subtle `transform: translateZ(0) translateY(-4px)` on hover, with transition 300ms ease. **Section 3 — Ausstellung (Exhibition):** Background: #F5EDD6. A 3-column grid (equal columns, 24px gap) of 6 exhibition-panel cells. Each cell: 1:1 aspect ratio, containing a full-cell geometric abstract SVG composition (Bauhaus color studies — flat color fields of 3–5 geometric shapes in the 7-color palette). On scroll-entry, each cell's border draws using `border-animate` (thick, 3px, #4A0E1A). A Josefin Sans label below each cell in 11px, all-caps, tracked. Hover state: the SVG composition gently rotates by 3 degrees and the border thickens to 5px using CSS transition 400ms. **Section 4 — Manifest (Manifesto):** Full-width strip. Background: #4A0E1A. Text: #F5EDD6. A single pull-quote in Libre Baskerville italic, weight 400, clamp(2rem, 3.5vw, 3.2rem), centered. Two thin #C8102E horizontal rules (1px) above and below the quote at 40px distance. The quote is a compressed version of the Bauhaus founding manifesto's closing line. Below the quote: attribution in Josefin Sans 300, 13px, all-caps, #9B3A4B, tracked +0.18em. This section has a subtle parallax: the text block moves at 0.7× scroll speed (CSS transform based on scroll position), making the text appear to drift upward at a different rate than the section boundaries. **Section 5 — Schluss (Closing):** Background: #FAF6EC. The Oskar Schlemmer abstract figure geometry (built in SVG, ~240px tall) is centered in the viewport, drawn using SVG `stroke-dashoffset` path animation triggered on scroll-entry — the figure assembles itself over 1.8 seconds, stroke drawing from center outward. Below the figure: "monopole.quest" in Josefin Sans 100, 16px, all-caps, tracked +0.4em, #9B3A4B. Above the figure: a small Itten arc cluster in #C8102E at 25% opacity. The Schlemmer figure fades to 8% opacity as the user scrolls past the section midpoint, leaving only the wordmark visible — a slow, dignified exit. **Global motion rules:** - All `border-animate` effects trigger once on first Intersection Observer entry; they do not re-trigger on scroll back. - No bounce, spring, or elastic easing anywhere. All transitions use `ease-in-out` or explicit cubic-bezier curves. - Scroll behavior: `scroll-behavior: smooth` on the document; section-snap optional but not required. - Dark mode: respect `prefers-color-scheme: dark` by swapping only the two cream values (#F5EDD6 → #1A0408, #FAF6EC → #200610), keeping all other colors intact. The result is a deep-dark burgundy night mode that preserves the palette identity. ## Uniqueness Notes **Chosen seed:** aesthetic: bauhaus, layout: layered-depth, typography: playful-rounded, palette: burgundy-cream, patterns: border-animate, imagery: geometric-abstract, motifs: cultural, tone: nostalgic-retro **Differentiators from the existing corpus:** 1. **Border-animate as primary narrative choreography.** While `border-animate` appears in the frequency data, no other design uses it as the *primary* motion system — the mechanism by which the visitor perceives the site "assembling" before them like a print being laid down. Every section, every card, every motif is introduced through border drawing, making the borders themselves the animation protagonist rather than a decorative detail. 2. **Bauhaus historical specificity.** Designs in the corpus that use "nostalgic-retro" tone typically reference 80s/90s aesthetics (vaporwave, Y2K) or generically "vintage." monopole.quest is specifically anchored to the 1919–1933 Bauhaus school moment — named instructors (Itten, Klee, Moholy-Nagy, Schlemmer), specific workshop vocabulary (Vorkurs, Werkstatt), and the school's actual founding manifesto. This level of cultural-historical precision is absent from the corpus. 3. **Layered-depth through Z-plane mounted prints.** The layered-depth layout motif in the corpus typically means parallax scrolling or card-elevation hierarchies. monopole.quest uses layered depth to simulate the physical experience of viewing mounted exhibition prints — cards that appear to be at different distances from a physical wall, with depth created through calibrated shadow cascades rather than parallax movement. The depth is static (like a real mounted display) but spatially convincing. 4. **Playful-rounded typography used at an unexpected scale.** Nunito at playful-rounded is a common pairing with soft, friendly UIs. Here it is used at display scale (7rem) in heavyweight uppercase, where the rounded terminals read as architectural confidence rather than approachable softness — subverting the expected register of the font choice. 5. **Single-palette constraint strictly enforced.** The 7-color system is closed: no color outside the palette appears anywhere, including in SVG motifs, borders, shadows, and dark-mode variants. This matches the Bauhaus primary-colors-plus-neutrals philosophy and creates a visual unity rare in corpus designs that typically introduce accent colors freely. **Avoided patterns (from frequency analysis):** - `playful-rounded` typography: PRESENT but deliberately subverted (used at heroic scale, not soft-UI scale) - `cultural` motifs: PRESENT but historically specific (Bauhaus school) rather than generically "cultural" - No parallax scrolling (overused in corpus) - No photography or organic blobs (overused in corpus) - No dark backgrounds for primary sections (overused in corpus dark-mode designs)