# Design Language for rational.love ## Aesthetics and Tone rational.love is a **bauhaus** editorial on the mathematics of affection — a long-form digital essay that treats love as a quantifiable composition using primary colors, geometric form, and Universal Design Process logic. The aesthetic invokes the Dessau workshop: primary triangles, circles, and squares in red, yellow, and blue, set against sepia-aged paper, with Art Deco display headings that echo Herbert Bayer's pre-typewriter experimental display work. The tone is **energetic** — not loud, but propulsive, the rhythm of a Walter Gropius lecture in full stride. Inspiration draws from Herbert Bayer's *Universal* typeface, Moholy-Nagy's photogram compositions, Wassily Kandinsky's *Point and Line to Plane*, and the editorial layouts of *Eye Magazine* under Steve Heller. Visiting feels like reading a Bauhaus seminar paper that was photocopied a hundred times until the toner started to crack and the colors faded into sepia. ## Layout Motifs and Structure The architecture is **editorial-flow** — a long vertical reading experience structured like an academic journal essay, divided into seven sections (Introduction, Postulates, Axioms, Theorems, Proofs, Counterexamples, Coda). Body text sits in a 640px central column on an 8px baseline grid. Around the text, asymmetric Bauhaus geometric compositions float at full-page width — a giant red circle aligned to the right edge of the page bisects the column with a primary-blue triangle pointing inward; a yellow square anchored to the bottom-left of a section sits 800px wide. These compositions interrupt the reading flow as visual punctuation, not decoration. Section headings are set in Art Deco display type centered with thick blue rules above and below. The page scrolls vertically; **underline-draw** patterns animate as the user crosses each new theorem, drawing a hand-drawn underline beneath the theorem statement using SVG `stroke-dasharray` animation. ## Typography and Palette **Typography** is led by Limelight (the **art-deco-display** brief) used at exactly two scales — Limelight 84pt for section titles and Limelight 24pt tracked +260 uppercase for sub-section labels — to honor the Bauhaus's love of restrained, geometric display lettering. Body and theorem text use Bitter at 18px / 1.65 — a slightly-serif faced face whose pixel-grid origins echo Bauhaus universals. A monospace third face, Space Mono 12px, handles axiom-numbering and theorem-IDs ("T-04 / 002"). Numbers are tabular oldstyle to feel typeset. **Palette** is **sepia-nostalgic** with primary-color Bauhaus accents: - `#F0E4D0` — aged paper ground (page background) - `#D6C5A6` — sepia toner shadow (secondary surface) - `#5C4A2E` — sepia ink (typography ground) - `#3A2D1F` — deep sepia (headings, key text) - `#E63946` — Bauhaus red (primary circle compositions) - `#FFC940` — Bauhaus yellow (square compositions) - `#1E3A8A` — Bauhaus blue (triangle compositions, theorem rules) - `#FFFFFF` — pure white (geometric highlights, paper inset) The three Bauhaus primary colors appear together only in the geometric compositions — body text and rules remain in the sepia spectrum so the eye reads "aged paper, primary accents." ## Imagery and Motifs Imagery is built around **grain-overlay** — every page surface (paper, ink, geometric composition) is covered in a heavy paper-grain noise at 11% opacity that gives the whole composition the look of a 1928 print smudged through decades of archive boxes. The Bauhaus geometric compositions themselves are crisp SVG circles, triangles, and squares in primary colors, but each has its grain-overlay multiplied on top, making them feel printed rather than rendered. **Layered-depth** motifs reinforce the reading: drop-shadows under each geometric piece simulate one or two layers of cut paper stacked on the page; theorem statements are inset on a slightly raised sepia card; quotation marks are double-stacked in faded red ink. Decorative furniture includes a recurring "rational.love" stamp glyph in the page footer, set in Limelight 14pt with a single thin Bauhaus-blue rule beneath. ## Prompts for Implementation Build a Bauhaus editorial essay on the mathematics of love. Use a centered 640px column on a `#F0E4D0` page with an 8px baseline grid. The signature visual element is the **floating Bauhaus composition**: each section begins with a full-width composition (e.g., a 500px red `` aligned to `right: -120px` with a 200px blue `` triangle pointing inward, plus a 280px yellow `` rotated 18deg in the lower-left). Compositions are SVG with a `` applied that multiplies a noise pattern over each shape to simulate print grain. The signature interaction is **underline-draw**: each theorem statement, when scrolled into the viewport, has an SVG path beneath it that animates via `stroke-dasharray: 1200; stroke-dashoffset: 1200 → 0;` over 900ms ease-out — a hand-drawn underline appearing as you read. Limelight 84pt section titles enter with a slow 600ms `letter-spacing` reveal from +400 to +120. The grain-overlay is achieved via a `` SVG filter applied to a `position: fixed; inset: 0; mix-blend-mode: multiply; opacity: 0.11;` overlay on the body. Avoid CTA stacks, pricing menus, signup ladders, stat grids — this is a published essay, not a product. The footer is centered: "rational.love — towards a universal grammar of affection, Dessau ed. III." ## Uniqueness Notes - **Differentiator 1:** True Bauhaus primary-color geometric compositions interrupting a sepia-nostalgic reading column — almost no design pairs Bauhaus aesthetic with sepia palette. - **Differentiator 2:** Heavy grain-overlay applied via SVG `` to every surface — a print-aging effect rarely committed to. - **Differentiator 3:** Editorial-flow layout structured as a seven-section academic essay (postulates → coda) — most editorial-flow designs in the registry are blog-style, this commits to academic structure. - **Differentiator 4:** Underline-draw used semantically on theorem statements — the pattern marks the text the reader should remember. - **Differentiator 5:** Limelight Art Deco display headings used at only two scales — a deliberate type restraint that contradicts the maximalism of art-deco design in the registry. - Planned seed: aesthetic=bauhaus, layout=editorial-flow, typography=art-deco-display, palette=sepia-nostalgic, patterns=underline-draw, imagery=grain-overlay, motifs=layered-depth, tone=energetic. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.