# Design Language for memorial.wiki ## Aesthetics and Tone memorial.wiki channels a cottagecore aesthetic — warm handcrafted textures, gentle natural materials, and the comforting beauty of things made with care, applied to community memorial documentation and remembrance. The site frames memorial content as a shared act of crafting memory — each entry lovingly assembled like a pressed flower in a scrapbook, where collective remembrance is an intimate, domestic act rather than a monumental one. Inspiration draws from Victorian mourning art, Japanese kintsugi (golden repair), handwritten condolence letters, and the quiet beauty of roadside memorial flowers. The tone is raw-authentic — memorials presented without polish or performance, letting genuine emotion speak through unadorned documentation. ## Layout Motifs and Structure The layout uses a **timeline-vertical** architecture — content organized chronologically along a vertical axis, tracing the passage of time downward like pages in a memorial book. **Timeline-Vertical Architecture:** - Central vertical line (1px, muted color) running down the page center - Content cards alternate left and right of the timeline - Timeline nodes: small circles (10px) at connection points between line and cards - Cards connect to timeline via thin horizontal stems (1px, 30px wide) - Progressive date markers along the timeline in small caption type **Section Sequence:** 1. **Threshold:** Hero with elegant serif title on midnight-blue gradient, soft crystalline accent shapes, and a single flickering candle animation (CSS) 2. **The Record:** Timeline of memorials — alternating left-right cards with neon-glow accent borders, each containing name, dates, and remembrance text 3. **Gathering:** Featured community memorials with expanded imagery and longer narratives, crystalline-framed photo placeholders 4. **Offerings:** Ways to contribute — submission forms and guidelines styled as handwritten notes on aged paper backgrounds 5. **Vigil:** Footer as candlelight closing — minimal text fading into deep midnight blue, single persistent glow ## Typography and Palette **Typography:** - **Headlines:** "Cormorant Garamond" (Google Fonts) — elegant serif at 2.5rem-3.5rem, weight 600. Its refined, slightly condensed forms channel the gravitas of memorial inscriptions. - **Body Text:** "Lora" (Google Fonts) — contemporary serif at 0.95rem, weight 400, line height 1.8. Warm readability for emotional content. - **Dates/Meta:** "Cormorant Garamond" at 0.8rem, weight 400, italic, for dates and attribution. - **Labels:** "Lora" at 0.7rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Midnight Depth:** #0e1428 — deep midnight blue for primary backgrounds - **Midnight Mid:** #1a2440 — medium midnight for card backgrounds - **Candle Warm:** #e0c080 — warm candlelight gold for primary accents - **Memorial White:** #f0f0f4 — clean white for primary text - **Neon Violet:** #8040c0 — soft violet neon for memorial accent glows - **Rose Dust:** #c09090 — muted rose for secondary accents - **Stone Gray:** #6070808 — blue-gray for secondary text and borders - **Deep Indigo:** #101830 — dark indigo for section transitions ## Imagery and Motifs **Neon-Glow Memorial Borders:** Memorial cards emit a soft ethereal glow — box-shadow: 0 0 15px rgba(128,64,192,0.12), border-left: 2px solid rgba(128,64,192,0.3). On hover, the glow gently intensifies (opacity to 0.2) over 500ms, suggesting the flickering presence of remembered lives. **Crystalline Frame Accents:** Featured memorial entries framed with crystalline geometric borders — clip-path: polygon(3% 0%, 97% 0%, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0% 97%, 0% 3%) creating subtle octagonal shapes in Candle Warm at 0.15 opacity. The faceted frames suggest the precious, gem-like nature of preserved memories. **Parallax Starfield Background:** Deep midnight backgrounds feature slowly drifting star-like points — small dots (1-2px) in Memorial White at 0.05-0.15 opacity, positioned at different parallax depths. Background stars move at 0.2x scroll speed, mid-ground at 0.5x. Creates the sense of memories floating in infinite space. **Candle Flicker Animation:** The hero section features a CSS-animated candle flame — a small element (8px wide, 16px tall) with border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%, background: radial-gradient(Candle Warm, transparent), animated with @keyframes flicker varying scale(0.95-1.05) and slight rotation(-2deg to 2deg) over 3s infinite. **Timeline Pulse Nodes:** Timeline connection points pulse gently — the 10px circles alternate between opacity 0.5 and 0.8 with a slow 4s infinite animation, synchronized with entry order for a cascading wave effect down the timeline. ## Prompts for Implementation Build the page as a cottagecore memorial timeline. Timeline: central div, width: 1px, background: rgba(96,112,128,0.3), position: absolute, left: 50%, height: 100%. Cards: alternating margin-left: 55% and margin-right: 55% with max-width: 420px. Timeline nodes: position: absolute, left: 50%, transform: translateX(-50%), width: 10px, height: 10px, border-radius: 50%, background: Candle Warm at 0.5 opacity. @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.8; } } 4s infinite. Neon glow: .memorial-card { box-shadow: 0 0 15px rgba(128,64,192,0.12); border-left: 2px solid rgba(128,64,192,0.3); transition: box-shadow 500ms; } .memorial-card:hover { box-shadow: 0 0 20px rgba(128,64,192,0.2); } Crystalline frames: clip-path: polygon(3% 0%, 97% 0%, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0% 97%, 0% 3%). Candle flicker: @keyframes flicker { 0%, 100% { transform: scaleY(1) rotate(0deg); } 25% { transform: scaleY(1.05) rotate(2deg); } 50% { transform: scaleY(0.95) rotate(-1deg); } 75% { transform: scaleY(1.02) rotate(1deg); } } 3s ease-in-out infinite. AVOID: Corporate memorial templates, heavy religious iconography, and emotionally manipulative design. Let the cottagecore warmth and raw-authentic tone create a gentle, genuine space for remembrance. ## Uniqueness Notes 1. **Cottagecore aesthetic for memorial content:** Handcrafted warmth transforms digital memorials into intimate, personal remembrance acts. 2. **Timeline-vertical as passage of time:** Chronological vertical flow mirrors how memory extends backward through time. 3. **Neon-violet glow as spectral presence:** Ethereal light effects suggest the lingering presence of those being remembered. 4. **Candle flicker as persistent remembrance:** A single animated flame anchors the site in the universal symbol of vigil-keeping. 5. **Parallax starfield as infinite memory space:** Drifting points of light create the sense of memories existing in boundless cosmic space. **Seed/Style:** aesthetic: cottagecore, layout: timeline-vertical, typography: elegant-serif, palette: midnight-blue, patterns: parallax, imagery: neon-glow, motifs: crystalline, tone: raw-authentic **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 cottagecore aesthetic, timeline-vertical layout, midnight-blue palette, neon-glow imagery, and raw-authentic tone.