# Design Language for opensource.bid ## Aesthetics and Tone `opensource.bid` is a **slow auction of ideas** — the visual language of a hall where people raise hands not for money but for the right to shape something that will outlive them. The mood is **minimal retro-futurism**: the year is perpetually 1979 seen from 2047. Imagine a Braun SK 4 record player placed on a plinth inside a Zaha Hadid lobby — the severe functional geometry of the object against the organism-like enclosure around it. Every curve on this page is structural, not decorative. Every straight line is borrowed from the past. The dominant feeling is **measured silence with latent momentum** — like a concert hall one minute before the conductor raises the baton. The site never rushes. It reveals. Shapes slide in from the edges as the user scrolls, not with the frenetic energy of a SaaS landing page but with the deliberate unhurry of a tide. **Tone words:** composed, principled, organically futuristic, open, unhurried. The aesthetic is `blobitecture` — but not the bubbly, brand-safe blob-shapes of marketing sites. Here, the blobs are structural. They are the walls and ceilings of the experience. They define negative space rather than fill positive space. They are drawn with `path-draw-svg` animations: each curve's `stroke-dashoffset` transitions from its full length to zero as the section enters the viewport, tracing its own outline into existence like a pencil moved by an invisible architect. ## Layout Motifs and Structure The site is one **continuous vertical narrative** broken into five `parallax-sections`, each with its own gravitational center. The parallax is not the cheap, layered-image parallax of stock photo sites. It is a **field-depth parallax**: foreground SVG path elements move at `1.0x` scroll speed, midground blob fills at `0.7x`, and background topology lines at `0.4x`. This creates the impression of depth in a purely two-dimensional composition. **Section rhythm:** 1. **Opening threshold** — full-viewport. A single large blob form occupies the left two-thirds of the screen, its outline drawn in real time over 1.8 seconds. The right third holds a single H1 (4–5 words, no subtitle). The blob's interior is not filled — it is hollow, containing only the negative space of the page background. The form breathes: a subtle CSS `clip-path` morph loops on a 12-second ease-in-out cycle, shifting between two pre-computed blob vertices. 2. **Manifesto band** — 60vh minimum height. A centered text column 640px wide, set in the display serif, with a paragraph that behaves as a `parallax-text` unit: it scrolls at `0.85x` speed while a secondary decorative arc (a single SVG `` using a cubic Bézier) scrolls at `0.5x` behind it. The arc enters from the left edge of the viewport. 3. **How it works** — three horizontal units arranged as left/right/left, each unit bounded by its own minimal blob silhouette (not a card — the blob IS the boundary). Each unit's path draws on scroll-entry. No grid lines. No borders. Blobs touch but do not overlap. 4. **Signal feed / recent activity** — a vertical scroll-within-scroll: a 320px wide column of monospaced metadata set against a contrasting tonal strip. The strip is itself a long rectangle with only its top-left and bottom-right corners rounded to `64px`, giving it a subtly non-rectangular feel without becoming a blob. 5. **Closing form** — the page ends with a reversed version of the opening threshold: blob on the right, one CTA phrase on the left. The blob here is filled with a radial gradient using two palette colors. The `path-draw-svg` animation runs in reverse — the outline erases itself as the user reaches the bottom, suggesting the form has not yet been decided. **Grid logic:** 12-column, 1440px max-width, 80px horizontal gutters. On mobile, all sections collapse to single column. Blob forms reflow to full-width simplified shapes on viewports below 768px. **No sticky navigation.** A minimal horizontal rule with the domain name and a single text link ("contribute") floats at the top and fades to 30% opacity after 200px of scroll. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display and headings — `Cormorant Garamond`** (variable, weights 300–700, italic available). Used for all H1–H3. The typeface's extreme stroke contrast — hairline serifs against broad stems — echoes the thin-thick tension of the path-drawn SVG outlines. H1: 72px / weight 300 / letter-spacing −0.02em / leading 1.1. H2: 44px / weight 400 / italic. H3: 28px / weight 500. - **Body text — `DM Sans`** (weights 300, 400, 500). Set at 17px / line-height 1.72 / letter-spacing 0.005em. DM Sans's slightly humanist geometry sits comfortably against Cormorant's classical warmth without competing. - **Monospaced accent — `JetBrains Mono`** (weight 400, 500). Used exclusively for metadata lines (timestamps, hashes, identifiers). Set at 13px / line-height 1.6 / color `#8B9BAF`. This is the voice of the machine inside the hall. - **No font exceeds three weights in use at one time.** The constraint forces hierarchy through size and spacing, not weight accumulation. **Palette — retro-futuristic, 6 tokens:** | Token | Hex | Role | |---|---|---| | `--void` | `#0D0E14` | Page background, deepest surface | | `--nebula` | `#1A1B2E` | Section panel backgrounds | | `--arc` | `#C4A882` | Primary warm accent, blob strokes, H1 color | | `--signal` | `#5E9BCC` | Secondary cool accent, active states, path-draw color | | `--dust` | `#E8E2D5` | Body text, primary readable surfaces | | `--quiet` | `#2C2D3E` | Elevated surfaces, feed strip background | Color ratio: 65% dark (`--void`, `--nebula`, `--quiet`) / 25% light text (`--dust`) / 10% accent (`--arc`, `--signal`). The two accents are never used simultaneously at full opacity — when `--arc` is present, `--signal` appears at 40% opacity, and vice versa. ## Imagery and Motifs **No photography.** No illustrations. The entire visual weight of the page is carried by **abstract-shapes** in SVG. **The blob library** — five unique closed `` forms, each generated from hand-tuned cubic Bézier curves (not algorithmic blobs). Each form has: - A `stroke` version: 1.5px, color `--arc`, used for the path-draw animation - A `fill` version: color `--nebula` at 80% opacity or a radial gradient (for section 5) - A `morph` variant: a second `d=""` attribute storing an alternate shape, used for the 12-second CSS animation loop **Flowing-curves motif** — beyond the blob forms, two types of secondary lines thread through the page: 1. **Long arcs**: single `` elements spanning 60–100% of the viewport width, with no fill, stroke 0.8px `--signal` at 25% opacity. These appear behind content in sections 2 and 4. They are never animated — they are the geological strata of the layout. 2. **Node connectors**: in section 3 (How it works), short curved lines of 2px stroke connect the three units visually. These DO animate — they draw left-to-right when the section enters the viewport at `IntersectionObserver` threshold 0.3. **No icons.** The decorative vocabulary is limited to paths and the typographic system. Functional indicators (state, count) are rendered as monospaced text, not icons. **Abstract-shapes approach for section fills**: where a section background needs visual texture beyond a flat color, a cluster of 3–5 overlapping closed paths at 4–8% fill opacity creates a barely-visible topographic map effect. The shapes in each cluster are all from the blob library — same family, different scales (40%–120% of canonical size). ## Prompts for Implementation Build `opensource.bid` as a **single-page vertical narrative** with exactly five sections. No tabs, no modals, no horizontal navigation. The site tells one story, in order. **Implementation priority 1 — path-draw engine:** Every SVG `` element that will animate must have its total `pathLength` measured via `getTotalLength()` at `DOMContentLoaded` and stored as a CSS variable on the element. Set initial `stroke-dasharray` and `stroke-dashoffset` to that length. A single `IntersectionObserver` (threshold: `[0, 0.2, 0.5]`) fires the transition: on `0.2` entry, set `stroke-dashoffset` to `0` over `1800ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. The easing must have a hard start and a soft landing — it should feel like a drawing hand starting with intention and slowing as it finishes. **Implementation priority 2 — parallax field:** Use a `requestAnimationFrame` loop that reads `window.scrollY` and applies `transform: translateY(${scrollY * factor}px)` to three parallax layers: `.layer-fg` (factor `0`), `.layer-mid` (factor `-0.3`), `.layer-bg` (factor `-0.6`). The negative factors move background layers upward more slowly, creating foreground-relative depth without requiring a fixed-position canvas. **Implementation priority 3 — blob morphing:** The opening section blob and the closing section blob each have a CSS animation: `@keyframes blob-breathe` that interpolates between two `clip-path: path("...")` values. The two `d` attributes are pre-computed: they share the same number of nodes and node types. Transition duration: 12 seconds, `animation-timing-function: ease-in-out`, `animation-iteration-count: infinite`, `animation-direction: alternate`. Keep the delta between the two paths small — 20–40px maximum displacement per node — so the motion reads as breathing, not morphing. **Implementation priority 4 — section transitions:** Each section's entry is a composed transition: opacity `0→1` over `600ms` + `translateY(32px→0)` over `800ms`, delayed by `200ms` from the path-draw start. This ensures content becomes readable only after its structural outline has established itself. **Typography rules in code:** - Cormorant Garamond: load weights 300, 400, 500 italic. Use `font-display: swap`. - DM Sans: load weights 300, 400, 500. Subset to Latin. - JetBrains Mono: load weight 400 only. Subset to digits, lowercase Latin, and `#@._-:/` symbols. - Never use `font-weight: bold` — always use explicit numeric weights. **Avoid in implementation:** - Cards with box-shadow (the blob IS the container) - Grid-based icon-plus-text feature rows - Hero sections with background images - Pricing tables or stat grids - Sticky sidebars - Any gradient that crosses more than two stops **The site's emotional arc:** The user opens the page to a calm, architectural void with one slowly-drawing form. As they scroll, the structure of the world they have entered becomes legible — not through labels and icons but through the accumulation of curves and typographic precision. By the closing section, the filled blob feels like an arrival: the void has found a form. The final CTA is not a sale; it is an invitation to extend the drawing. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **blobitecture**, layout = **parallax-sections**, typography = **elegant-serif**, palette = **retro-futuristic**, patterns = **path-draw-svg**, imagery = **abstract-shapes**, motifs = **flowing-curves**, tone = **minimal**. **Differentiators from the existing 356-design corpus:** 1. **Blobs as architecture, not decoration.** The frequency report shows blobitecture at effectively 0% — no existing design uses blob forms as the primary structural container. Every other design that uses organic shapes deploys them as backgrounds or accents. Here, the blob defines the section boundary. This inverts the standard use. 2. **Path-draw as the primary reveal mechanic.** The `path-draw-svg` pattern (drawing SVG paths via `stroke-dashoffset` animation) is listed at near 0% in the corpus. Most animation in the registry is either `cursor-reactive` or `particle-systems`. This site's entire visual logic depends on the drawing-as-structure idea — every structural form traces itself into existence before content appears. 3. **Retro-futuristic palette without neon.** The frequency report shows `vaporwave` (neon + gradient) at 7% and `dark-mode` at 14%. This design uses a dark background but replaces every neon accent with `--arc` (#C4A882, a warm tawny gold) and `--signal` (#5E9BCC, a muted steel blue). The combination reads as 1970s Braun industrial design inside a speculative 2047 building — not a nightclub, not a spaceship. 4. **Parallax that separates SVG layers, not image layers.** The corpus shows parallax effects almost exclusively applied to photographs or background images. Here, all three parallax layers are SVG: foreground paths, midground blob fills, background topology lines. This is technically simpler but visually stranger — it makes the depth feel constructed rather than photographic. 5. **Avoided patterns per frequency analysis:** hand-drawn (58% — too casual), editorial (51% — too publication-like), terminal (31% — wrong register for an auction platform), glassmorphism (21% — overused as a UI pattern). This design avoids all four, using instead the structural blob vocabulary that has no precedent in the current registry.