# Design Language for mores.dev ## Aesthetics and Tone mores.dev (Mores — the essential customs and conventions of a community) channels a dark-mode aesthetic — deep backgrounds with luminous typography and atmospheric depth, applied to a developer platform exploring the unwritten rules and cultural norms of software development communities. The site is a digital codex of the customs that shape how developers work, communicate, and build together. Inspiration draws from GitHub's dark mode, the atmospheric depth of planetarium interfaces, vintage field guides to cultural anthropology, and the moody richness of film noir cinematography. The tone is pastoral-romantic — lyrical, contemplative writing that treats developer culture with the reverence of documenting a living tradition. ## Layout Motifs and Structure The layout uses an **immersive-scroll** architecture — a continuous vertical experience where content unfolds cinematically as the user scrolls, creating the sensation of descending deeper into cultural knowledge. **Immersive Scroll Architecture:** - Single continuous page, no section breaks - Content max-width: 720px centered, with atmospheric full-width backgrounds - Scroll-triggered content reveals at threshold intervals - Parallax-rate background elements at 0.3x scroll speed - Progressive darkening of background as user scrolls deeper **Section Sequence:** 1. **Surface:** Hero with garamond-classic title emerging from muted-vintage gradient, grain-overlay atmospheric texture, flowing-curves decorative wisps 2. **Customs:** Developer customs documented in scroll-revealed passages with glitch-effect text emphasis and flowing-curves connecting narrative threads 3. **Rituals:** Code rituals and conventions presented as immersive scroll vignettes with grain-overlay aged documentary texture 4. **Lineage:** Historical origins of dev customs traced through flowing-curves timeline threads with vintage photographic treatment 5. **Depths:** Footer that fades into darkness — pastoral closing that trails off as the scroll journey ends, content dissolving into black ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.5rem-3.5rem, weight 700. Its centuries of typographic heritage mirrors the deep traditions this site documents. - **Body Text:** "EB Garamond" at 1rem, weight 400, line height 1.85. Full serif for extended reading of cultural narratives. - **Code:** "Fira Code" (Google Fonts) — monospace at 0.85rem for code examples and convention syntax. - **Captions:** "Source Sans 3" (Google Fonts) — clean sans at 0.75rem, weight 400 for image captions and metadata. **Color Palette:** - **Void Deep:** #0c0a10 — near-black with violet undertone for deepest backgrounds - **Dusk Mid:** #1a1820 — dark warm gray for content backgrounds - **Amber Vintage:** #b09060 — warm amber for primary accents - **Rose Faded:** #a07068 — faded rose for secondary accents - **Sage Dusty:** #708868 — dusty sage for tertiary accents - **Parchment Dim:** #c8c0b0 — dim parchment for primary text - **Text Faded:** #807870 — faded warm gray for secondary text - **Border Ember:** #302820 — warm dark brown for borders ## Imagery and Motifs **Grain-Overlay Documentary Texture:** Every surface carries a pronounced film grain — pseudo-element with repeating noise pattern at 0.06 opacity, plus warm vignetting (radial-gradient with rgba(12,10,16,0.4) at edges). The grain is more visible than typical implementations, creating the feeling of vintage documentary footage capturing cultural traditions. **Glitch-Effect Text Emphasis:** Key terms and convention names feature a controlled glitch — on scroll entry, text briefly shows a 1px horizontal displacement with color channel separation (text-shadow: -1px 0 Rose Faded, 1px 0 Sage Dusty) for 300ms before resolving to clean text. Represents the moment of disruption when conventions are questioned. **Flowing-Curves Narrative Threads:** Thin SVG curves (1px, Amber Vintage at 0.1 opacity) flow through content margins, connecting related sections like threads through a tapestry. Curves use cubic-bezier paths, never straight lines, creating organic movement that mirrors the natural evolution of cultural customs. **Muted-Vintage Atmospheric Depth:** Background gradients use muted vintage tones — linear-gradient(180deg, #0c0a10, #1a1820) with radial highlights in Amber Vintage (rgba(176,144,96,0.03)) creating warm pools of light in the darkness, like candlelight illuminating an old manuscript. **Progressive Depth Darkening:** As users scroll, the background progressively deepens — CSS custom properties (--scroll-depth) updated via JavaScript, shifting background from Dusk Mid toward Void Deep. Creates the sensation of descending into deeper cultural knowledge. ## Prompts for Implementation Build the page as a dark-mode immersive cultural codex. Container: max-width: 720px, margin: 0 auto. Background: full-width atmospheric gradients. Grain overlay: .grain::after { content: ''; position: fixed; inset: 0; opacity: 0.06; pointer-events: none; background-size: 200px 200px; z-index: 100; } .grain::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(12,10,16,0.4) 100%); pointer-events: none; z-index: 99; } Glitch text: .glitch-word { animation: glitchText 300ms forwards; } @keyframes glitchText { 0%, 40% { text-shadow: -1px 0 #a07068, 1px 0 #708868; } 100% { text-shadow: none; } } Flowing curves: SVG path elements with d="M0,100 C100,80 200,120 300,90 S500,110 600,85", stroke: rgba(176,144,96,0.1), stroke-width: 1, fill: none. Positioned absolute in content margins. Progressive dark: JavaScript scroll listener setting --scroll-depth custom property. body { background: color-mix(in srgb, #1a1820 calc(100% - var(--scroll-depth, 0) * 1%), #0c0a10); } AVOID: Bright documentation platforms, casual developer blogs, and sterile technical reference layouts. Let the dark-mode atmosphere and pastoral-romantic narrative create a developer culture platform that treats customs as living heritage. ## Uniqueness Notes 1. **Dark-mode for cultural documentation:** Deep atmospheric backgrounds create the reverent environment for documenting unwritten traditions. 2. **Immersive-scroll as cultural descent:** Continuous scrolling simulates descending deeper into layers of cultural knowledge and historical context. 3. **Grain-overlay as documentary texture:** Pronounced film grain creates the feeling of archival footage preserving living traditions. 4. **Flowing-curves as narrative threads:** Organic SVG lines connect cultural topics like threads through a tapestry of shared knowledge. 5. **Pastoral-romantic tone for developer culture:** Lyrical writing treats coding customs with the same reverence as documenting any living tradition. **Seed/Style:** aesthetic: dark-mode, layout: immersive-scroll, typography: garamond-classic, palette: muted-vintage, patterns: glitch, imagery: grain-overlay, motifs: flowing-curves, tone: pastoral-romantic **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses dark-mode aesthetic, immersive-scroll layout, muted-vintage palette, grain-overlay imagery, and pastoral-romantic tone.