# Design Language for opensource.day ## Aesthetics and Tone `opensource.day` is a **living field atlas of open-source time** — imagine a botanist from the year 2180 who has catalogued every plant species on Earth using only geometric light projections and spectral ink. Their field notebook looks nothing like a Victorian herbarium: the leaves are rendered as Voronoi-tessellated polygons, the root systems as radial force-directed graphs, and the pressed specimens are heat-maps of commit frequency rather than dried flowers under glass. The aesthetic contradiction at the heart of this site is **botanical futurism**: organic growth logic (branching, layering, seasonal rhythm) rendered through the hard geometry of open-source culture (diffs, timestamps, contributor graphs). The palette refuses both the Instagram-green of "nature" brands and the neon-blue of "tech" brands. Instead it reaches for the colors of actual soil, bark, lichen, and dried seed husks — earth tones that feel ancient and data-dense simultaneously. Tone is **approachable-casual without being cute**. This is not a product landing page. It is a day — a specific, recurring unit of celebration, like a solstice. The writing voice is the voice of someone who has contributed to open source for fifteen years and finds it quietly extraordinary, not someone selling you on the idea. No exclamation points. No "Join the movement." Instead: an invitation to look closely at something that has been growing all along. The mood is **slow, attentive, botanical-scientific** — the way a field biologist reads a hillside rather than the way a marketer reads a dashboard. ## Layout Motifs and Structure The layout is an uninterrupted **single-column narrative scroll** — 680px max-width, centered, with generous vertical breathing room (min 80px between major sections). This is counter-programming against the corpus's dominant full-bleed, card-grid, masonry patterns. **Structural metaphor: the field journal page.** Each section is a journal entry — dated, measured, spare. The column holds text and diagrams; the margins (outside the 680px column, extending to viewport edges) are reserved for **marginal annotations**: small geometric-abstract botanical specimens that live at `position: sticky` offsets, drifting slowly into view as the user scrolls. These margin ornaments are SVG-only, never photographs. **Section rhythm:** 1. **Header** — full-viewport-height opening panel. The domain name ("opensource.day") in large geometric-sans display type, set against a slow-breathing tessellation background. No hero image. The tessellation IS the image. 2. **The Day** — a single-column prose section explaining what the day is, why it exists. Drop cap on the opening paragraph. 3. **The Garden** — a live or static diagram of open-source contributions rendered as a branching botanical form: a force-directed tree where nodes are repositories and edges are dependency relationships. Rendered in SVG, colored with the earth-tone palette. 4. **The Specimens** — a vertical list of featured projects, each rendered as a "field specimen card": a geometric polygon silhouette of the project's contribution graph, project name in display type, one-sentence description, and a single hex-color accent pulled from the project's dominant language color. 5. **The Calendar** — a minimalist date display. No countdown. Just the date, rendered large, typographically centered, with a slow pulse animation (scale 1.000 → 1.004 → 1.000, 4s ease-in-out). 6. **Footer** — colophon-style. Two lines. No links grid. **No horizontal navigation bar.** No sticky header. Navigation, if needed, is a single small back-to-top glyph at the bottom right, a botanical leaf form rotated 180°. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display headings — `Jost`** (variable, weights 100–900). Used at weight 200–300 for large display text, creating an architectural lightness. H1 at 72px / weight 200 / letter-spacing +0.08em. H2 at 36px / weight 300. The geometric purity of Jost echoes the futura-geometric seed without leaning on the overused Futura/Jost cliché — at light weights it reads as drawn by compass rather than by hand. - **Body text — `Literata`** (variable, optical sizes, weights 300–700). A literary serif designed for long reading, with slightly bracketed serifs that recall botanical illustration caption typefaces. Body at 18px / weight 400 / line-height 1.72. This is the one serif in the system, and it is used only for prose. - **Captions, labels, metadata — `Space Grotesk`** (weights 300–500). Used at 12–13px for specimen labels, axis ticks, marginal annotations. The slight mechanical quirkiness of Space Grotesk reads as scientific notation without feeling cold. - **Monospace accents — `JetBrains Mono`** (weights 300–400). Used only for commit hashes, dates in ISO format, and file paths. At 12px, color `--lichen`. **Palette — earth-tones, non-cliché:** ``` --soil: #2C1F14 /* deep dark brown — primary background */ --bark: #4A3728 /* mid brown — card backgrounds, code blocks */ --loam: #7A5C3E /* warm mid-tone — borders, dividers */ --seed: #C4A882 /* warm tan — primary text on dark bg */ --pollen: #E8D5A3 /* pale gold — display headings, highlights */ --lichen: #8FA67A /* muted sage green — accents, links, live data */ --moss: #4D6B45 /* deep forest green — hover states, active */ --clay: #B5714A /* terracotta — CTAs (minimal), specimen accents */ --ash: #D8CEBF /* near-white with warmth — body text */ --fieldnote: #F5F0E8 /* parchment — light mode background (if toggled) */ ``` Default mode is **dark** (`--soil` background). The darkness is not cyberpunk black — it is the darkness of rich earth, with warm undertones. ## Imagery and Motifs **No photography.** The corpus shows photography at 85%+ usage — opensource.day opts out entirely. All visual elements are **geometric-abstract SVG constructions** with a botanical logic: 1. **Tessellation substrate**: The header background is a Voronoi diagram generated from ~120 seed points placed according to a Fibonacci spiral, rendered at 0.8px stroke in `--loam` on `--soil`. Each cell is filled with a slight gradient from `--soil` to `--bark`. On load, cells "grow" into existence over 1.2s using a clip-path radial expansion from the center — like time-lapse germination. 2. **Botanical force graph ("The Garden")**: Open-source repositories rendered as a branching tree using D3-style force simulation (or a pre-computed static SVG). Leaf nodes are circles sized by star count; branch thickness scales by dependency depth. The whole structure looks like a root system cross-section or a mycorrhizal network. Colored in a gradient from `--moss` (deep roots) through `--lichen` (mid branches) to `--pollen` (leaf tips). 3. **Specimen silhouettes**: Each featured project in "The Specimens" section has a unique geometric polygon as its visual identity — a convex hull of 6–10 vertices, computed from the project's commit frequency data (if available) or a seeded random. Filled with a semi-transparent `--clay` or `--lichen`, stroked in `--loam`. These are not logos. They are data-derived glyphs. 4. **Margin ornaments**: 8–10 small SVG botanical specimens drawn in the geometric style — a leaf as a sequence of triangles, a seed pod as an elongated hexagon, a root as a recursive branching line. These live in the 20% margin space outside the reading column, entering view with a slow upward drift (translateY 20px → 0px over 800ms, triggered by intersection observer). 5. **Elastic scroll behavior**: The page uses elastic scroll physics — when the user reaches the top or bottom boundary, the content gently over-travels and springs back (CSS `overscroll-behavior: contain` plus a subtle JS spring on the body transform). Scroll-linked opacity fades (not parallax) animate section transitions. 6. **The pulse**: The large date display in "The Calendar" section breathes — a slow CSS animation on `scale` (1.000 to 1.004) and on `letter-spacing` (0 to +0.5px) in a 4-second ease-in-out loop. It is barely perceptible — the kind of thing you notice after staring at it for a moment. ## Prompts for Implementation Build this as **a single unscrolled field journal that the reader unrolls downward** — one continuous HTML document, no routing, no page transitions, no modals. The entire experience lives on one vertical axis. **Implementation vows:** **Vow 1 — The geometry is the content.** The Voronoi tessellation, the force graph, and the specimen silhouettes are not decoration. They ARE the data. Before writing any prose sections, build the SVG systems. The Voronoi is generated at page load using a ~50-line vanilla JS algorithm (no library required for static Voronoi). The force graph can be a pre-computed static SVG exported from Observable/D3 and inlined — it does not need to be live. **Vow 2 — Earth tones, no exceptions.** Every element — including scrollbars (styled via `::-webkit-scrollbar`), selection highlight (`::selection`), and focus rings — uses only the 10-color palette. No white (#ffffff). No black (#000000). Closest approximations are `--pollen` and `--soil`. If a third-party component injects its own colors, override it. **Vow 3 — Typography is the atmosphere.** The Jost display headings at weight 200 create an architectural delicacy that counters the heaviness of the dark soil background. Never bold a display heading. The tension between the ultra-light geometry of the type and the deep earth palette is the site's primary visual identity. **Elastic patterns implementation:** - Use `spring()` physics for hover states on specimen cards: `transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1)` — this cubic-bezier is the elastic overshoot curve. - Margin ornaments enter with `cubic-bezier(0.34, 1.56, 0.64, 1)` on translateY, creating a gentle botanical "bounce" as they arrive. - The tessellation cells grow in using `clip-path: circle(0% at 50% 50%)` → `clip-path: circle(150% at 50% 50%)` with staggered delays across cells (0ms to 1200ms, 10ms increments). **Section-specific guidance:** - **Header**: `min-height: 100svh`. Domain name split into two words: "opensource" in `--lichen` at weight 200, ".day" in `--pollen` at weight 200. No tagline. No subtitle. The tessellation breathes behind them. - **The Day**: Drop cap using `::first-letter { font-size: 4.5em; float: left; line-height: 0.85; color: --clay; font-family: Jost; font-weight: 200; margin: 0.05em 0.12em 0 0; }`. Prose in Literata. - **The Garden**: Full column width (680px). A tall SVG (680×400px). Label nodes with Space Grotesk 11px. Animate nodes into position on scroll-enter with a 600ms stagger. - **The Specimens**: Each specimen is a `
` with a left-aligned polygon SVG (120×120px), then title and description. No cards with rounded corners — use `border-left: 2px solid --loam` as the only structural separator. - **The Calendar**: The date in Jost weight 200, 96px on desktop. Below it, a single line of Space Grotesk 13px in `--lichen`: "an annual celebration of open source". The pulse animation is CSS-only. - **Scroll behavior**: `scroll-behavior: smooth` on html. `overscroll-behavior-y: contain` on body. **AVOID:** - Hero images or background photographs - Card grids with rounded corners and drop shadows - Gradient buttons or CTA blocks - Stat counters (X contributors, Y projects) - Any sans-serif body text — body is exclusively Literata - Particle effects, cursor trails, or WebGL - Navigation bars, hamburger menus, or sticky headers ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: botanical, layout: single-column, typography: futura-geometric, palette: earth-tones, patterns: elastic, imagery: geometric-abstract, motifs: futuristic, tone: approachable-casual **Three or more differentiators from the existing corpus:** 1. **Botanical as data structure, not decoration.** The 27% of designs using "botanical" treat it as illustrative texture — watercolor leaves, vine SVGs, floral borders. opensource.day treats botanical structure as *computational logic*: the force-directed dependency graph IS a root system; the Voronoi tessellation IS a cross-section of a seed. The botany is not applied to the surface; it is the underlying architecture. 2. **Earth-tones on a dark background, reversed.** The corpus's earth-tone and warm palettes appear almost exclusively on light or neutral backgrounds. Using a deep soil-brown (`#2C1F14`) as the primary background — darker than most "dark mode" designs which default to near-black blues or grays — creates a warmth and density unique in the corpus. The darkness here reads as organic, not technological. 3. **Ultra-light geometric display type as primary atmosphere.** The corpus shows futura-geometric at 5% usage, but those designs tend toward heavy weights for impact. Using Jost at weight 200 inverts the convention: the display type is delicate, almost fragile, against the dark earth background. The visual weight of the page lives in the tessellation geometry, not the typography. 4. **Avoided patterns from frequency analysis**: no hand-drawn aesthetic (58%), no editorial layout (51%), no scroll-reveal card animations (overused), no photography (85%), no gradient overlays. The elastic pattern (underused in corpus) is implemented as physics-accurate spring curves on interaction states rather than page-transition bounces. 5. **Margin-space specimen ornaments.** Most single-column designs waste the negative space outside the reading column. opensource.day colonizes those margins with slowly-drifting geometric botanical specimens — creating peripheral motion that rewards wide-viewport users without breaking the narrow-column reading rhythm.