# Design Language for mores.dev ## Aesthetics and Tone mores.dev occupies the visual territory of a Victorian naturalist's personal herbarium -- the kind of leather-bound field journal that has been left open on a sun-drenched library table for decades, its pages yellowed by light, its pressed botanical specimens curling at the edges, its ink annotations fading into a warm sepia haze. The domain name "mores" (Latin: customs, moral traditions, the unwritten rules of a society) demands a visual language that feels like accumulated wisdom -- not delivered through cold authority but through the quiet confidence of something old enough to have proven itself. Think of the visual tone as a tenured professor who wears rumpled tweed but whose every word carries the weight of forty years of careful thought. The aesthetic is **playful** but channeled through a deeply specific lens: the playfulness of marginalia. Medieval monks doodled grotesques in the margins of psalters; Victorian scientists sketched whimsical leaf arrangements around their taxonomic notes; Enlightenment cartographers adorned map edges with sea monsters and wind-gods. This is the playfulness of mores.dev -- scholarly content ringed by organic, leafy, slightly mischievous decorative elements that soften the authoritative core without undermining it. There is no irony here, no winking self-awareness. The playfulness is earnest, the way a child's first pressed flower collection is earnest. The tone is **authoritative** -- but this is the authority of a well-kept garden, not a courtroom. It speaks in declarative sentences. It does not ask permission. But it wraps its declarations in warm amber light and surrounds them with the gentle rustle of leaf motifs, so the authority feels like an invitation rather than a command. ## Layout Motifs and Structure The layout follows a **minimal-navigation** philosophy: there is no persistent navigation bar, no hamburger menu, no breadcrumb trail. The site is experienced as a single continuous scroll -- a long parchment unfurling downward. Navigation, to the extent it exists, is embedded within the content itself: leaf-shaped anchor icons that magnetically pull the viewport to the next section when hovered near (the magnetic interaction pattern). The absence of conventional navigation forces the visitor into a reading posture rather than a browsing posture -- you do not click around mores.dev, you read through it, the way you read through a botanical monograph. **Spatial Architecture:** The viewport is divided into a **golden-ratio column** (61.8% width) that sits slightly left of center, with the remaining 38.2% serving as a living margin -- not empty white space but a soft, out-of-focus bokeh field where floating leaf motifs drift lazily on slow CSS animations. This margin is the herbarium's edge, the pressed-flower gutter of the open book. On viewports below 768px, the margin collapses and the bokeh field becomes a subtle background layer behind the main column. **Section Transitions:** Each major content section is separated by a **botanical divider**: a horizontal SVG line that begins as a simple rule and, as it enters the viewport (scroll-triggered), sprouts leaf forms along its length -- tiny stippled fronds that uncurl via path-draw animation over 1.2 seconds. These dividers replace conventional spacing and create a rhythm that feels grown rather than designed. **Magnetic Pull Zones:** At the bottom of each section, a circular leaf icon (32px diameter, sepia-toned) serves as a magnetic attractor. When the cursor enters a 120px radius around the icon, the icon smoothly translates toward the cursor position (magnetic pattern, spring-eased with damping 0.7, stiffness 180). Clicking the icon smooth-scrolls to the next section. On touch devices, the magnetic behavior is replaced by a gentle pulse animation that invites a tap. **Grid Substructure:** Within the main column, content is organized on an invisible 6-column subgrid with 24px gutters. Body text spans columns 1-5. Pull quotes and leaf-motif illustrations occupy column 6 (the near-margin column), occasionally bleeding into the bokeh margin zone. This creates an asymmetry that keeps the eye moving and prevents the single-column from feeling like a wall of text. ## Typography and Palette **Typography:** - **Display / Headlines:** "Fraunces" (Google Fonts) -- a variable font with optical size, weight, and "WONK" axes. Fraunces is a display old-style soft-serif with a playful wobble in its letterforms: the terminals curl unexpectedly, the ball terminals are slightly oversized, the stress angle shifts from letter to letter. It is a typeface that looks like it was designed by a botanist who loved calligraphy -- authoritative in its proportions but whimsical in its details. Used at weight 700, optical size 48, WONK axis set to 1 (maximum wonkiness) for primary headings at 3.2rem-5.5rem. Color: Deep Walnut (#3B2414). Letter-spacing: -0.02em. Line-height: 1.08. Always sentence case. - **Body / Running Text:** "Crimson Pro" (Google Fonts) -- a refined, readable old-style serif with generous x-height and open counters. Weight 400 for body, 600 for emphasis. The slightly condensed proportions of Crimson Pro create elegant text blocks that feel dense with meaning without feeling crowded. Used at 1.05rem/1.72 line-height. Color: Aged Ink (#4A3728). Maximum line length: 38em. - **Accent / Annotations:** "Caveat" (Google Fonts) -- a handwritten font that looks like quick pencil notes in the margin of a field journal. Used sparingly for annotations, asides, and the leaf-icon labels. Weight 400, size 0.9rem, color: Faded Annotation (#8B7355). This typeface is the "marginalia voice" -- it speaks in parentheticals and gentle corrections, as if someone has been reading the text and couldn't resist adding their own thoughts. - **Variable Font Behavior (Expressive-Variable):** Fraunces is deployed as a true variable font. On hover over headlines, the WONK axis animates from 1 to 0 over 400ms (ease-out), straightening the playful wobble into a more formal posture -- a micro-interaction that rewards curiosity. On scroll, the optical size axis subtly shifts based on the element's distance from viewport center, creating a breathing quality where headlines feel slightly different each time they pass through the reading zone. **Palette:** The palette is **sepia-nostalgic** -- every color is drawn from the world of aged paper, dried botanical specimens, walnut ink, and afternoon sunlight filtering through yellowed window glass. | Name | Hex | Usage | |------|-----|-------| | Parchment Cream | #F5EBD7 | Primary background, the "page" | | Deep Walnut | #3B2414 | Headlines, primary text anchors | | Aged Ink | #4A3728 | Body text, secondary elements | | Pressed Fern | #6B7F4A | Leaf motifs, botanical dividers, accent | | Amber Glow | #C4943A | Hover states, magnetic icon highlights | | Faded Annotation | #8B7355 | Annotations, marginalia, metadata | | Bokeh Warm | #D4B896 | Bokeh circle fills, soft background elements | | Sun-Bleached Rose | #C9A08A | Tertiary accent, occasional decorative use | | Shadow Sepia | #2A1A0E | Deep shadow, rare emphasis | All backgrounds use Parchment Cream with a subtle CSS noise texture (a 200x200px tiling SVG of randomized 1px dots at 3% opacity in Bokeh Warm) to simulate the grain of aged paper. No surface is perfectly flat or perfectly smooth. ## Imagery and Motifs **Bokeh Background as Living Margin:** The primary imagery mode is **bokeh-background** -- specifically, a CSS/SVG-generated field of soft, overlapping circles in varying sizes (40px-180px diameter) and opacities (0.04-0.15), colored in Bokeh Warm (#D4B896) and Sun-Bleached Rose (#C9A08A). These circles are positioned in the 38.2% margin zone and drift on infinite CSS keyframe animations with randomized durations (25s-60s) and translation distances (10px-40px). The effect simulates the out-of-focus light circles seen through a macro lens pointed at sun-dappled foliage -- the visual world just beyond the herbarium page, the garden visible through the library window. The bokeh circles are rendered as inline SVGs with Gaussian blur filters (stdDeviation 8-20) rather than raster images, ensuring they scale cleanly at any resolution. On reduced-motion preference, the drift animations pause and the circles become static decorative elements. **Leaf-Organic Motifs:** The recurring decorative motif is the **leaf** -- specifically, stylized broadleaf forms inspired by Ginkgo biloba (fan-shaped, radially veined) and Monstera deliciosa (split-leaf, with characteristic fenestrations). These are not photographic leaves but hand-drawn SVG illustrations with a stippled, engraved quality -- each leaf is composed of hundreds of tiny dots and short lines that evoke 19th-century botanical illustration techniques. Leaf motif placements: 1. **Section Dividers:** Leaves grow along horizontal rules via path-draw SVG animation, unfurling from the center outward. 2. **Pull-Quote Brackets:** Instead of quotation marks, pull quotes are framed by a pair of mirrored Ginkgo leaves rendered at 60% opacity in Pressed Fern (#6B7F4A). 3. **Magnetic Nav Icons:** Each section anchor is a small leaf icon (Monstera silhouette) that rotates 15deg toward the cursor during magnetic attraction. 4. **Corner Ornaments:** The top-left and bottom-right corners of the viewport carry fixed-position leaf clusters (3-5 leaves each) at 8% opacity, creating a subtle framing effect that reinforces the herbarium metaphor. 5. **Loading State:** On initial page load, a single Ginkgo leaf traces its own outline (path-draw animation, 2.5 seconds) in Pressed Fern, then fills with a soft fade, serving as both loading indicator and brand mark. **Texture Layer:** A full-viewport fixed-position div carries the paper-grain noise texture described in the palette section. This sits behind all content but above the solid background color, creating a tactile base layer. The texture is subtle enough to be felt rather than seen -- it registers as warmth and age rather than as a visible pattern. ## Prompts for Implementation **Full-Screen Narrative Herbarium Experience:** The site opens to a full-viewport parchment field (#F5EBD7 with noise texture). The domain "mores.dev" appears at 38% from top, 12% from left, set in Fraunces at 4.8rem, weight 700, WONK 1, color Deep Walnut. Below it, a subtitle in Crimson Pro at 1.1rem reads a single descriptive line. To the right, in the living margin, three bokeh circles drift lazily. At the bottom of the viewport, a single Monstera leaf icon pulses gently in Pressed Fern, inviting the scroll. There is no navigation. No menu. No call to action. The page announces itself and waits. **Scroll-Triggered Botanical Growth:** As the user scrolls past the hero zone (>80vh), the first botanical divider enters from below. Its SVG path begins drawing: a horizontal line that sprouts leaf forms at intervals of 60px-100px (randomized), each leaf unfurling over 400ms with a stagger delay of 150ms between leaves. The animation uses magnetic easing -- the leaves accelerate toward their final position as if attracted to it, then settle with a slight overshoot and spring-back (spring pattern, tension 200, friction 22). **Variable Font Storytelling:** As the user scrolls through sections, Fraunces headlines subtly shift their WONK axis based on section theme: sections about established customs (mores) use WONK 0 (formal, upright), while sections about evolving or contested norms use WONK 1 (playful, eccentric). This creates a typographic narrative where the letterforms themselves communicate the degree of social consensus around a topic. The transition between WONK values is animated via CSS font-variation-settings transitions (600ms, ease-in-out). **Magnetic Leaf Navigation System:** The magnetic interaction pattern is the primary navigation mechanism. Each section-end leaf icon has a detection radius of 120px. Within this radius, the icon translates toward the cursor at a rate proportional to proximity (closer = faster), using spring physics (mass 1, stiffness 180, damping 0.7). The icon also scales from 1.0 to 1.15 and shifts color from Faded Annotation to Amber Glow. On click, the viewport smooth-scrolls to the next section over 800ms with an ease-out-quint curve. On mobile, the magnetic behavior is replaced by: - A gentle Y-axis bounce animation (2px amplitude, 2s period) on the leaf icon - Tap triggers the same smooth-scroll behavior - The leaf icon is sized at 44px minimum for touch targets **Bokeh Depth Layering:** The bokeh background operates on three z-layers to create depth: 1. **Far Layer (z-index 0):** Large circles (120-180px), very low opacity (0.04-0.06), slow drift (45-60s cycles), heavy blur (stdDeviation 18-22). These feel like sunlight through distant trees. 2. **Mid Layer (z-index 1):** Medium circles (60-100px), moderate opacity (0.07-0.10), medium drift (30-45s cycles), moderate blur (stdDeviation 10-14). These are the middle-ground foliage. 3. **Near Layer (z-index 2):** Small circles (40-70px), higher opacity (0.10-0.15), faster drift (25-35s cycles), light blur (stdDeviation 6-9). These feel close, almost within reach. The three layers create a parallax-like depth effect without actual scroll-linked parallax, keeping the experience performant and reduced-motion-friendly. **Annotation Marginalia System:** Scattered through the living margin, small annotations in Caveat typeface appear as the user scrolls past them (fade-in over 500ms, translate-Y 12px to 0). These annotations comment on the adjacent content in a personal, handwritten voice -- as if a previous reader left notes. They are positioned using absolute positioning within the margin column, always in Faded Annotation color, always at 0.85rem. Each annotation has a tiny hand-drawn asterisk (SVG, 8px) connecting it visually to a point in the main text. **Avoid:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, cookie banners styled as overlays, sticky headers, parallax scroll-jacking, hero video backgrounds, gradient mesh backgrounds, neon anything. **Bias Toward:** Long-form narrative reading experience, botanical illustration as interface element, tactile paper texture, warm ambient lighting through color, earned navigation through scrolling, quiet confidence over loud persuasion. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Botanical Marginalia as Navigation:** No other design uses organic leaf motifs as the primary navigation system. The magnetic leaf icons replace conventional menus entirely, creating a navigation paradigm that is discovered through exploration rather than presented through convention. The 3% frequency of leaf-organic motifs in the portfolio means this approach is rare; combining it with the 1% frequency of minimal-navigation layout creates a pairing that is effectively unique. 2. **Variable Font as Narrative Device:** While expressive-variable typography appears at 3% frequency, no other design uses the variable font axes (specifically Fraunces WONK axis) as a storytelling mechanism that changes meaning based on content context. The WONK axis literally bends letterforms between playful and formal, mirroring the domain's theme of mores (customs that exist on a spectrum between rigid tradition and fluid evolution). 3. **Three-Layer Bokeh as Living Architecture:** Bokeh-background imagery sits at 1% frequency in the portfolio, and no other design implements it as a three-layer depth system with differentiated blur, opacity, and animation speeds. The bokeh field functions not as decoration but as spatial architecture -- it defines the "garden beyond the window" that contextualizes the herbarium reading experience. 4. **Herbarium Metaphor as Unified Design System:** The pressed-flower / botanical-journal metaphor unifies every design decision: the sepia palette is the aged paper, the leaf motifs are the specimens, the bokeh is the garden visible through the study window, the Caveat annotations are the naturalist's pencil notes, the magnetic navigation is the act of turning pages. No other design achieves this level of metaphorical coherence across all six design dimensions. 5. **Earned Authority Through Warmth:** While authoritative tone appears at 19% frequency, it is typically paired with cool corporate palettes and rigid grid structures. Here, authority is expressed through warmth -- sepia tones, organic forms, handwritten marginalia -- creating an authoritative voice that feels like accumulated wisdom rather than institutional power. This warm-authority combination is not present in any other portfolio design. **Chosen Seed/Style:** aesthetic: playful, layout: minimal-navigation, typography: expressive-variable, palette: sepia-nostalgic, patterns: magnetic, imagery: bokeh-background, motifs: leaf-organic, tone: authoritative **Avoided Overused Patterns:** centered layout (99%), scroll-triggered as sole animation pattern (97%), parallax (76%), minimal imagery as primary approach (94%), photography-first imagery (72%), warm palette without specificity (100%), mono typography (99%), friendly tone as default (98%), vintage motifs (83%). Each of these dominant patterns has been either avoided entirely or, where present (warm palette, scroll-triggered), deployed in a highly specific contextual way rather than as a generic default.