# Design Language for opensource.day ## Aesthetics and Tone opensource.day is a **municipal holiday for software** — a civic broadside printed for an imaginary public festival where every contributor is a citizen and every commit is a brick laid into a town square. The visual register is **Bauhaus workshop poster meets public-works almanac**: the optimistic, primary-color rationalism of Dessau 1925, dipped briefly in the soot of a 1970s civic-affairs print shop. Imagine if Herbert Bayer designed the parade float for Linux's birthday and the program booklet was risograph-printed on the cardstock used for library card catalogs. The tone is **civic, communal, and quietly euphoric** — never corporate-cheerful, never startup-hyped. This is not a product launch; it is a **municipal proclamation**. The page reads like a letterpress broadside hand-set by a typographer who learned at HfG Ulm and now runs the volunteer fire-department newsletter. There is reverence for collective labor, gentle irony about bureaucracy, and a deep belief that geometry — the circle, the square, the triangle — is the most democratic vocabulary humans have. Mood references: a 1928 Bauhaus *Volksbühne* program; the cover of *Whole Earth Catalog* if Josef Albers had art-directed it; the procession banners of a small European town's labor-day parade in 1953; the inside back cover of a public-library bound volume of *Scientific American* circa 1971. Warm, deliberate, optimistic without being naive. The ethos: open source is a **public utility**, and like all public utilities — water, post, telegraph — it deserves civic celebration with brass bands, painted banners, and flagpoles. ## Layout Motifs and Structure The page is organized as a **single vertical broadsheet** — a folded almanac unrolled — with a strict **three-column tartan grid** (3 vertical columns × 9 horizontal bands) but with deliberate **broken-grid violations** at every chapter break. Each chapter is a "spread" that breaks the column rules in exactly one ordained way: a primary-red square that bleeds across two columns, a yellow circle that punches a hole through a horizontal band, a blue triangle whose hypotenuse cuts diagonally across the gutter. **The Civic Proclamation Header** occupies the top 100vh: a single oversized ordinal date glyph — the literal day-numeral **"III"** in chunky slab-serif, cherry-red, set on a cream field, paired with the sentence *"A Public Holiday for Open Source Software, Observed Every Day"* set in tight Bauhaus geometric sans across the lower third. No navigation bar. No CTA buttons. Just the proclamation and a tiny letterpress-style register mark in the corner. **Chapter §I — The Charter:** A two-column lockup. Left column is a thick block of body text describing the holiday's "founding charter" (a fictive, slightly tongue-in-cheek civic document). Right column is a single Bauhaus geometric composition — three primary shapes in red/yellow/blue — that animates as the user scrolls into view, the shapes sliding into their final composition like a poster being assembled in real time. **Chapter §II — The Procession:** A **horizontal-scroll parade ribbon**. The user pivots from vertical to horizontal scroll for one viewport-locked sequence: a band of marching geometric figures (circles, squares, triangles, semicircles) drifts left-to-right at three parallax depths, each "float" carrying the name of an open-source project rendered in a different Bauhaus-inflected display weight. This is the only horizontal section; the rest of the page is vertical. **Chapter §III — The Almanac of Contributions:** A timeline-vertical broadside. A central red rule runs floor-to-ceiling. Left of the rule: dates (always typeset in oversized monospace numerals). Right of the rule: short paragraphs describing milestones (first GNU manifesto, first Linux post, first Apache release) in a quiet humanist serif. The rule is interrupted four times by primary-color geometric "stations." **Chapter §IV — The Workshop Floor:** A deliberate **broken-grid sprawl** — a single page where the three-column rule is shattered. Twelve-to-sixteen rectangular "panels," each rotated 0.5° to 1.2° off-axis, stacked at varying scales, each panel containing a single "tool of the trade" (compiler, repository, license, patch) drawn as a flat geometric icon with a one-line description. The rotations make the page feel hand-pasted, like a workshop wall covered in production notices. **Chapter §V — The Closing Hymn:** Returns to centered-symmetric Bauhaus stillness. A single circle, a single square, a single triangle — primary-colored — stacked vertically down the page's centerline, separated by short lines of body text that read like a closing benediction for the holiday. The page **never** uses dashboards, card-grid product galleries, pricing blocks, hero CTAs, or stat-counter rows. There are no buttons that say "Get Started" — instead, in the footer, a single sentence reads *"To observe the holiday, contribute one line to a public repository today."* The **margins** are generous and deliberate: 12vw on desktop sides, with the columns wrapping ribbon-style across the page. The page has more cream than ink, evoking a poster left to breathe on a workshop wall. ## Typography and Palette **Display typeface:** **"Archivo Black"** (Google Fonts), used at oversized scales for the ordinal date glyph and chapter ordinal numerals (§I, §II, §III). Archivo Black has the geometric bluntness of Bauhaus poster lettering — squared terminals, near-uniform stroke weight, condensed but not narrow. Set at `clamp(6rem, 22vw, 22rem)` for the proclamation date, `clamp(2.6rem, 5vw, 4.4rem)` for chapter ordinals. Letter-spacing `-0.02em`. Always set **mixed-case** (never all-caps) to preserve the human, civic register — except for one or two ordained moments where a single all-caps word punctuates a paragraph like a proclamation. **Secondary display / headlines:** **"Archivo"** (regular family, Google Fonts), variable weights 400–700, used for chapter section headlines at `clamp(1.5rem, 2.6vw, 2.1rem)`, line-height 1.18, letter-spacing -0.005em. Serves as the geometric-sans bridge between the heavy display and the body humanist serif. **Body humanist serif:** **"Spectral"** (Google Fonts), regular 400 with italic 400 for charter-document quotes. Spectral is a Cyreal humanist serif with slight calligraphic warmth — the right register for "civic almanac" body copy. Set at 17px / 1.65 line-height on desktop, 16px / 1.6 on mobile. Used for *all* body paragraphs, charter text, and the closing hymn. The choice of a serif body (rather than sans) is deliberate: this is a **printed broadside**, not a UI. **Monospace numerals:** **"DM Mono"** (Google Fonts), weight 500, used exclusively for almanac dates, version numbers, and the corner register marks. The monospace is the only place "tech" leaks into the typography — and it is restricted to numerals and timestamps, never used for prose. **Color palette (six colors, primary-Bauhaus + civic-paper):** - **Cherry Red** `#D72638` — the primary-red, used for the ordinal date glyph, the central timeline rule, and one geometric shape per chapter. Bold, declarative, ceremonial. - **Bauhaus Yellow** `#F4C430` — primary-yellow, used for the second geometric shape and for the underline of the page's only quoted sentence. A municipal-banner warmth. - **Workshop Blue** `#1F4E8C` — primary-blue, deeper than Klein blue, with civic gravitas. Used for the third geometric shape, all body links, and chapter-ordinal accents. - **Cream Cardstock** `#F1E9D2` — the dominant background. Not white. Cream like the cover of a 1971 *Architectural Record* annual. This color carries the page; ink sits on it like letterpress impression. - **Soot Ink** `#1A1714` — the body-text ink. A warm near-black with red undertones, never pure black. Reads on cream the way letterpress reads on cardstock. - **Faded Ribbon** `#7A8C99` — a dusty grey-blue, used only for register marks, small captions, footnote rules, and the secondary parallax depth in the procession ribbon. The palette is six colors — three saturated primaries plus three neutrals — and **no gradients are used anywhere on the page**. Color is applied as **flat fields** in the Bauhaus tradition. The closest the page comes to a gradient is the half-tone risograph noise overlaid on the cream background at 4% opacity. ## Imagery and Motifs **No photography. No 3D renders. No gradient meshes. No illustrations of people.** The visual vocabulary is **pure flat geometry**, hand-typeset through code: - **The Three Primaries.** The circle, the square, and the triangle in red, yellow, and blue respectively (with occasional rotations of which shape gets which color, à la Kandinsky's actual Bauhaus questionnaire). These three shapes appear in every chapter. They are the *protagonists* of the page. - **Geometric tool-icons.** For Chapter §IV (Workshop Floor), each "tool of the trade" is rendered as a single composite of 2–4 primary shapes — e.g., a "compiler" is a yellow square sitting on a blue triangle; a "repository" is a red circle inside a black square outline; a "license" is a triangle stacked on a rectangle. There are 12–16 such icons, each unique, each reducible to primary geometry. - **The Procession Floats.** For Chapter §II (horizontal scroll), each "float" is a stacked composition of 4–6 primary shapes on an invisible cart-line, with the project name set in one of three rotating display weights. There are 9 floats. - **Risograph noise.** The cream background carries a 4%-opacity **risograph stipple** — generated as an SVG `` filter or a tiny tiled PNG — to simulate the texture of cheap municipal cardstock. This is the *only* texture on the page. - **Letterpress register marks.** Tiny crosshair register marks (the ones print shops use to align color plates) appear in the four corners and at every chapter transition, in faded ribbon grey at 8px size. They are a quiet, recurring civic stamp. - **Hand-drawn rule-lines.** Section dividers are not pure-pixel `
` elements — they are SVG `` elements with subtle 0.4px wobble (one or two waypoints per inch) so the rules feel hand-drawn-with-a-T-square, not vector-perfect. This is a tiny imperfection that ties the page to its 1925 workshop heritage. - **The civic seal.** A single mark — three primary shapes interlocked into a roundel — appears once in the page, at the very top of the proclamation header, at 64px diameter, in faded ribbon grey. It is the page's only "logo," and it is unlabeled. **Decorative pattern:** A repeating **dingbat ribbon** of primary geometric shapes appears once between Chapter §III and §IV — a Bauhaus border in the manner of Albers' *Interaction of Color* plates, used as a chapter break. ## Prompts for Implementation **Build philosophy: this is a single static HTML broadside, not an app.** No React, no SPA, no client-side routing. One long vanilla HTML document, one stylesheet, one tiny JS file (8–12 kB) for scroll-triggered geometric assembly, the horizontal procession lock, and the SVG path-draw of the timeline rule. **§Header (proclamation).** Full-bleed cream cardstock. The ordinal date glyph "III" is set in Archivo Black, cherry-red, at viewport-scaled size (`clamp(8rem, 28vw, 28rem)`), rendered as actual text (not SVG) so it remains selectable. Beneath it, the proclamation sentence in Archivo regular, soot ink, set centered in a 540px column. A single faded-ribbon civic seal (SVG) sits 80px above the date glyph. **No nav bar. No buttons.** A small monospace timestamp in the lower-right corner reads "Observed: every day" in DM Mono. **§I Charter.** Two-column lockup at desktop widths. Left column: 60–80 word "founding charter" paragraph in Spectral 17/1.65, beginning with a drop-cap (the first letter is set in Archivo Black, cherry-red, 4× the body height, with `float: left` and a trailing margin of 0.4em). Right column: an SVG with three primary shapes that **assemble on scroll** — when 50% of the section enters the viewport, the shapes slide from offscreen positions (red square from left, yellow circle from top, blue triangle from below) into their final Bauhaus composition over 1200ms with `cubic-bezier(0.22, 1, 0.36, 1)` easing. This is a **path-draw + scroll-triggered** pattern, deliberately avoiding the registry's overused parallax (77%) and stagger (69%). **§II Procession.** A `position: sticky; top: 0; height: 100vh;` section. As the user scrolls, the inner ribbon translates horizontally via `translateX` driven by scroll progress (no GSAP needed — pure scroll math with `IntersectionObserver` + `requestAnimationFrame`). 9 floats drift past at three parallax depths (background floats at 0.4× speed, mid-ground at 0.8×, foreground at 1.2×). Each float is an SVG composition. **Important:** the procession plays once forward and once back as the user reverses scroll — no looping, no autoplay. The reader is the parade marshal. **§III Almanac timeline.** The central red rule is a single SVG `` with `stroke-dasharray` set to the path length, animated to 0 on load via `pathLength` over 2400ms (path-draw-svg pattern, 23% in registry — moderately used but earns its place here as the spine of the chapter). Date numerals (DM Mono, 600 weight, 28px) sit on the left; body paragraphs (Spectral 17/1.65) on the right. The rule is broken at four "stations" by small primary-color geometric markers (12px circles/squares/triangles in red/yellow/blue/red). **§IV Workshop Floor.** A `display: grid` container with `grid-template-columns: repeat(12, 1fr)`, but each child panel uses `grid-column: span ` and has a CSS variable `--rotation` set to a value between -1.2deg and 1.2deg, applied as `transform: rotate(var(--rotation))`. Panels carry a 1px soot-ink border and 12px of internal padding. On hover, a panel un-rotates (`transform: rotate(0deg)`) over 240ms with spring easing. The icons inside each panel are inline SVG, 80px square. **No hover-lift, no scale.** Just the un-rotation — a quiet, civic interaction. **§V Closing Hymn.** Centered-symmetric. Three SVG shapes (circle, square, triangle) stacked vertically down the page's centerline with 80px gutters, each shape 120px in size, in cherry red / Bauhaus yellow / workshop blue respectively. Between each shape, two lines of Spectral italic 17/1.7 read like a benediction. The very last line reads: *"To observe the holiday, contribute one line to a public repository today."* **Footer.** A single horizontal hairline (the wobble SVG path), beneath which sits a tiny block of monospace text in faded ribbon grey: the page's "colophon" listing the typefaces used, the seal designer (fictive), and the year. No links. No navigation. No social icons. No newsletter signup. **Animation principles:** - **No bounce, no elastic, no overshoot.** Bauhaus geometry is rational; the motion is rational. - **All easings are `cubic-bezier(0.22, 1, 0.36, 1)`** — a quiet, decisive curve. - **All timings between 600ms and 1400ms** — never under, never over. - **`prefers-reduced-motion: reduce` disables all scroll-triggered choreography** and renders all geometric compositions in their final state. **Performance & weight:** the page should weigh under 80kB total — one HTML, one CSS, one JS, three Google Fonts (subset to Latin), zero raster images (the risograph noise is SVG turbulence). It should load instantly even on a 1995 dial-up — fitting for a public utility. **The page is a celebration, not a sales funnel.** There is no signup form, no email capture, no contribution-tracker dashboard, no leaderboard, no contributor-grid wall, no GitHub-style stat callouts. The page exists purely to **declare a holiday** — and to invite the reader to observe it however they wish. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **First true Bauhaus civic-broadside in the portfolio.** The frequency analysis shows bauhaus aesthetic at only 5% — and most of those entries lean either modernist-corporate or art-school-decorative. **None** position Bauhaus as a *municipal* register: a public-utility holiday poster with charter text and procession ribbons. This site occupies the unfilled cell where Bauhaus rationalism meets civic-broadside warmth. 2. **Pure flat-color primaries with zero gradients.** The registry shows gradient palette at 81% (overwhelmingly used). This design is a deliberate counter-statement: **six flat colors, no gradients anywhere**. Color is applied as Bauhaus poster fields — red, yellow, blue, cream, soot, ribbon-grey — never as a smooth transition. A radical refusal of the registry's most overused palette pattern. 3. **Spectral humanist serif for body, Archivo Black for display.** The registry shows 81% mono typography and 39% humanist (mostly sans). A mono-heavy hand-drawn registry has very few sites that pair a heavy geometric display (Archivo Black) with a humanist *serif* (Spectral) for body. This pairing — slab-blunt display + warm serif body + monospace numerals only — is genuinely uncommon. 4. **Horizontal procession ribbon as one-shot kinetic chapter.** Horizontal-scroll appears in 10% of designs, but typically as a gallery or portfolio. Here it is a **one-pass parade** — scroll forward, the parade advances; scroll back, the parade reverses; no loop, no autoplay. A diegetic kinetic device, not a gallery widget. 5. **Broken-grid Workshop Floor with rotation-based interactions.** Broken-grid is at 10%, but combining it with **rotation-based hover (un-rotate on hover)** instead of the registry's overwhelming hover-lift (4%) and scale-hover (2%) patterns is a fresh micro-interaction grammar. 6. **Civic-utility framing instead of product framing.** The registry is dominated by dashboard (74%) and card-grid (52%) layouts driven by CTA-heavy product narratives. opensource.day **explicitly refuses** the product frame — no signup, no buttons, no metrics. It is a *declaration*, not a *funnel*. This positioning alone differentiates it from ~90% of the corpus. 7. **Risograph noise + SVG wobble rules as the only textures.** The registry shows noise-texture at 7% and grain-overlay at 4%. Combining a risograph stipple (cardstock simulacrum) with SVG `` wobble for hand-drawn rule-lines is a coherent tactile-print signature absent from the corpus. **Chosen seed/style:** **bauhaus** — selected because frequency shows only 5% of designs use it, and **none** use it in a *civic-municipal-holiday* register (most Bauhaus references in the corpus lean toward design-school showcases). The pairing of Bauhaus's primary-shape grammar with a public-utility tone is genuinely unfilled territory. **Avoided patterns flagged by frequency analysis:** - **Gradient palette** (81% — refused; flat color only) - **Mono typography** (81% — refused for body; mono restricted to numerals) - **Photography imagery** (80% — refused; pure SVG geometry only) - **Parallax** (77% — used only as a single one-shot in §II, not as a global behavior) - **Stagger** (69% — refused; replaced with scroll-triggered geometric assembly) - **Friendly tone** (66% — softened to *civic* tone, which is warm but more ceremonial) - **Centered layout** (59% — used only in the proclamation header and closing hymn; refused elsewhere) - **Card-grid layout** (52% — fully refused) - **Asymmetric layout** (58% — refused as a global mode, used only as per-chapter broken-grid) - **Hand-drawn aesthetic** (75% — refused; this is *engineered geometric*, not hand-drawn) - **Dashboard layout** (74% — fully refused)