# Design Language for memorial.wiki ## Aesthetics and Tone memorial.wiki lives in the visual space of a midnight vigil procession -- the moment when hundreds of people stand in a darkened field holding lit candles, and the only light in the world comes from those small, wavering flames reflected in the polished brass of memorial plaques. The aesthetic is **dopamine memorial** -- not the sterile grief of institutional remembrance, but the electrifying, almost euphoric rush of encountering a life fully lived. This is remembrance as celebration, where the gravity of loss is met with an overwhelming surge of color, warmth, and luminous energy. The visual vocabulary draws from two specific real-world inspirations: the neon-soaked night markets of Taipei's Shilin district (where thousands of glowing signs stack vertically into the sky, creating canyons of colored light) and the tradition of Obon lantern festivals in Japan (where illuminated paper lanterns float on dark water, each one carrying a name, a prayer, a fragment of memory). These two sources collide to create a digital space where every memorial entry feels like a lantern placed on still water -- glowing, intimate, and impossibly beautiful against the surrounding darkness. The tone is **friendly** in the deepest sense: not cheerful or perky, but the kind of warmth you feel when someone you trust puts their hand on your shoulder and says "tell me about them." It is approachable without being casual, reverent without being solemn. There is an undercurrent of joy -- the dopamine hit of remembering someone's laugh, the sudden brightness of a favorite photograph, the unexpected comfort of a shared story. The site makes you want to contribute, to add your own lantern to the water. ## Layout Motifs and Structure The layout employs a **diagonal-sections** architecture -- a bold departure from horizontal or vertical stacking. Content panels are arranged along a 12-degree diagonal axis that cuts across the viewport from lower-left to upper-right, creating a visual metaphor for the upward trajectory of remembrance (from earthly loss to elevated celebration). Each section is a parallelogram-shaped container clipped with `clip-path: polygon()` values, tilted along this consistent diagonal, with content inside counter-rotated to remain readable. **The Diagonal River:** The primary structural element is a luminous diagonal band -- 60% of the viewport width -- that flows from bottom-left to top-right across the page. This "river of light" is rendered as a CSS gradient blending #0A1628 (deep navy void) to #1B2D4A (midnight metallic) with a faint #C9A96E (warm brass) glow along its center axis. Content flows within this river. On either side of the river, the background is pure #060D18 (near-black) void, with occasional neon-glow memorial entries floating like lanterns in the margins. **Section Transitions:** Between diagonal sections, the transition is not a hard line but a dissolving edge -- achieved with a CSS mask using a soft gradient (`mask-image: linear-gradient(168deg, transparent 0%, black 15%, black 85%, transparent 100%)`). This creates the impression of sections bleeding into one another like watercolor on wet paper, but executed in luminous navy and brass tones. **The Memorial Grid:** Individual memorial entries are displayed in a staggered grid within each diagonal section. Cards are offset by alternating 40px and 80px top margins, creating a descending staircase effect that echoes the diagonal axis. Each card is 280px wide with a 1px border of #2A4A6B (muted steel-blue) that brightens to #C9A96E (brass) on hover. Cards have a background of `rgba(15, 25, 45, 0.85)` with `backdrop-filter: blur(8px)`, giving them a frosted-glass quality that lets the diagonal river glow through. **Navigation:** Navigation is minimal -- a single horizontal bar fixed at the top of the viewport, with the memorial.wiki wordmark on the left and three text links ("Remember," "Explore," "Contribute") on the right, all set in monospace type. The nav bar has a background of `rgba(6, 13, 24, 0.92)` with a 1px bottom border that pulses slowly between #1B2D4A and #C9A96E using a CSS animation (4-second cycle, ease-in-out). ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Mono" (Google Fonts) -- a monospaced typeface with a technical, almost telegraphic quality that evokes the precision of engraved memorial inscriptions. Used at 2.8rem-5.5rem for section titles and primary headings. Set with `font-weight: 700`, `letter-spacing: 0.08em`, `line-height: 1.15`. All headings are rendered in uppercase with a custom `text-shadow: 0 0 30px rgba(201, 169, 110, 0.4)` to create a warm brass glow effect. The monospace grid of the letterforms creates a visual rhythm that echoes the staggered card layout below. - **Body / Memorial Text:** "IBM Plex Mono" (Google Fonts) -- at weight 400 (regular) for memorial descriptions and body copy. Size 1rem (16px), `line-height: 1.75`, `letter-spacing: 0.02em`. The generous line height gives breathing room to the memorial text, treating each paragraph as a carefully spaced inscription. Color: #B8C4D4 (soft silver-blue) against the dark navy backgrounds, providing high contrast without the harshness of pure white. - **Accent / Metadata:** "JetBrains Mono" (Google Fonts) -- at weight 300 (light) and size 0.8rem for dates, attribution lines, tags, and UI metadata. Color: #6B7D94 (muted slate) for secondary information, #C9A96E (brass) for highlighted metadata like names and dates of significance. The lighter weight distinguishes metadata from body text while maintaining the monospace family cohesion. - **Epitaph / Pull Quotes:** "Space Mono" italic at 1.4rem, with `font-style: italic`, `letter-spacing: 0.04em`. Used for memorial epitaphs, notable quotes from the remembered person, or contributor tributes. Set in #C9A96E (brass) with a left border of 3px solid #2A4A6B, creating a visual "candle flame beside the words" effect. **Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Primary Background | #060D18 | Void Black | Page background, outer margins | | Secondary Background | #0A1628 | Deep Navy | Diagonal river base, card backgrounds | | Tertiary Background | #1B2D4A | Midnight Metallic | Elevated surfaces, hover states | | Primary Accent | #C9A96E | Memorial Brass | Headings glow, active borders, name highlights | | Secondary Accent | #4A7FAA | Vigil Blue | Links, interactive elements, secondary borders | | Tertiary Accent | #E8446D | Neon Rose | Notification badges, "new memorial" indicators, heart icons | | Body Text | #B8C4D4 | Silver Mist | Body copy, memorial descriptions | | Muted Text | #6B7D94 | Slate Fog | Metadata, timestamps, secondary labels | | Border Default | #2A4A6B | Steel Blue | Card borders, dividers, inactive states | | Candle Glow | #F5D799 | Warm Flame | Candle animations, hover glow effects, featured entries | The palette operates on a navy-metallic foundation where every color is either a variation of deep ocean blue or a warm metallic accent. The contrast between the cold, deep navy backgrounds and the warm brass/flame accents creates the visual tension of candlelight against darkness -- intimate warmth surrounded by vast, respectful space. ## Imagery and Motifs **Neon-Glow Lantern System:** The primary visual motif is a **neon-glow lantern** -- a CSS-only element that represents each memorial entry in overview mode. Each lantern is a rounded rectangle (16px border-radius) with a double border: an inner 1px solid #2A4A6B and an outer glow created by `box-shadow: 0 0 20px rgba(201, 169, 110, 0.15), 0 0 60px rgba(201, 169, 110, 0.05)`. The glow intensity varies per lantern based on recency or engagement, creating a field of lights where some burn brighter than others. This is pure CSS -- no images required. **Candle-Atmospheric Particles:** Across the diagonal river, a subtle particle system renders floating candle-flame sprites. These are CSS-only elements: tiny circles (4px-8px diameter) with `background: radial-gradient(circle, #F5D799 0%, #C9A96E 40%, transparent 70%)` and a gentle vertical float animation (`translateY(-120vh)` over 15-25 seconds with `ease-in` timing, randomized delays). Approximately 20-30 particles are active at any time, drifting upward like embers from a bonfire or lanterns ascending into a night sky. Each particle also has a slow opacity pulse (0.3 to 0.8 over 3-4 seconds) simulating the flicker of a real flame. **Brass Etch Dividers:** Section dividers are not simple `
` elements but SVG-rendered "brass etch" lines -- thin horizontal rules with a subtle sawtooth pattern that mimics the engraved lines on memorial plaques. The SVG path uses `stroke: #C9A96E` with `stroke-width: 0.5` and `stroke-dasharray: 2 6` to create a dotted, etched appearance. On scroll-into-view, the line draws itself from center outward using `stroke-dashoffset` animation. **Memorial Portrait Frames:** When a memorial entry includes an image, it is displayed within a custom frame: a circle (200px diameter) with a 2px border of #C9A96E, surrounded by a subtle outer glow (`box-shadow: 0 0 30px rgba(201, 169, 110, 0.2)`). On hover, the glow intensifies to `0 0 40px rgba(201, 169, 110, 0.35)` and the border brightens to #F5D799. The circular frame is intentional -- it echoes the shape of a candle flame's halo and avoids the formality of rectangular photo frames. **Neon Registry Lines:** In the "Explore" section, memorial entries are listed in a registry format -- each name occupying a full-width row with a thin neon underline that glows on hover. The underline is a CSS pseudo-element: `height: 1px; background: linear-gradient(90deg, transparent, #4A7FAA 20%, #C9A96E 50%, #4A7FAA 80%, transparent)`. This creates the effect of a name illuminated by a passing light source, reinforcing the vigil/candlelight metaphor. **Constellation Map:** The site's "Explore" view offers an optional constellation display where memorial entries are positioned as nodes on a dark canvas, connected by thin lines (#2A4A6B at 0.3 opacity) based on relationships, shared dates, or geographic proximity. Each node pulses with the lantern glow effect. The result resembles a star chart -- positioning the remembered as constellations in a personal cosmos. This is rendered using absolute-positioned elements with CSS transforms, not canvas or WebGL, to maintain accessibility and simplicity. ## Prompts for Implementation **Full-Screen Vigil Opening:** The site opens to a full-viewport screen of #060D18 (void black). After a 0.5-second pause, a single candle-flame particle fades in at the exact center of the viewport -- a 12px circle with the radial gradient glow, pulsing gently. Over the next 2 seconds, the flame drifts slowly upward while additional particles begin to appear around it (stagger-animated at 150ms intervals), gradually filling the viewport with 30-40 ascending embers. At the 2.5-second mark, the domain name "memorial.wiki" fades in (opacity 0 to 1 over 1 second) at 40% from the top, set in Space Mono 700 at 4.5rem, #C9A96E with the brass text-shadow glow. Below it, "a place to remember" appears in IBM Plex Mono 400 at 1.1rem, #6B7D94, with a 0.5-second delay. The particles continue to drift upward throughout the experience -- they never stop. A subtle downward-pointing chevron at the bottom of the viewport (JetBrains Mono, #2A4A6B, 0.8rem) pulses slowly, inviting the scroll. **Diagonal Section Scroll Reveal:** As the user scrolls, the first diagonal content section slides into view. The entire parallelogram-shaped section translates from `translateX(-100px) translateY(50px) rotate(-2deg)` to its resting position over 800ms with a spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)). Within the section, individual memorial cards stagger in with 100ms delays between each card, entering from `opacity: 0; translateY(30px)` to their resting state. The stagger creates a cascading waterfall effect that emphasizes the diagonal axis. **Memorial Card Interaction:** Hovering a memorial card triggers three simultaneous effects: (1) the card's border transitions from #2A4A6B to #C9A96E over 300ms, (2) the card's box-shadow intensifies from `0 0 20px rgba(201, 169, 110, 0.15)` to `0 0 40px rgba(201, 169, 110, 0.3)` -- the lantern burns brighter, and (3) the card lifts 4px via `translateY(-4px)`. Clicking/tapping a card expands it in place (CSS `scale` from 1 to 1.05, `max-height` transition for content reveal) to show the full memorial text, epitaph, and portrait. The expansion pushes adjacent cards downward with a smooth layout transition (`transition: transform 500ms ease`). **The Eternal Scroll:** The site is designed as an infinite-feeling vertical journey. As the user scrolls deeper, the background subtly shifts from pure void (#060D18) through gradations of navy (#0A1628, #0F1D35, #1B2D4A) and back, creating a slow breathing rhythm across the page. This is achieved with a CSS gradient that spans 300vh and repeats. The diagonal sections alternate in their tilt direction (12deg, then -12deg, then 12deg again), creating a zigzag river of light that the user navigates like a mountain switchback trail. Each directional change is signaled by a brass etch divider that draws itself on scroll. **Contribution Flow:** The "Contribute" section inverts the color scheme locally -- a bright field of #1B2D4A (midnight metallic) with text in #F5D799 (warm flame) -- creating the sensation of stepping into the warmth of the vigil circle. Form inputs are styled as minimal monospace fields: transparent backgrounds with only a bottom border of #C9A96E, placeholder text in #6B7D94, and a focus state that adds a subtle glow (`box-shadow: 0 2px 10px rgba(201, 169, 110, 0.3)`). The submit button is a full-width bar with `background: transparent`, `border: 2px solid #C9A96E`, `color: #C9A96E`, `font-family: 'Space Mono'`, `letter-spacing: 0.15em`, `text-transform: uppercase` -- and on hover it fills with a `background: rgba(201, 169, 110, 0.1)` glow transition. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, carousel sliders, hamburger menus, cookie banners, or anything that treats a memorial as a product. No stock photography. No generic hero images. No countdown timers or urgency patterns. The experience must feel timeless, not transactional. ## Uniqueness Notes **Differentiators from other designs:** 1. **Diagonal-Sections Layout (0% frequency):** This is the only design in the entire portfolio to use diagonal-sections as its primary layout architecture. While other designs rely on centered (99%), asymmetric (51%), or full-bleed (35%) layouts, memorial.wiki cuts across the viewport at a 12-degree angle, creating a river-of-light metaphor that is structurally unique. The parallelogram clip-paths, counter-rotated content, and zigzag section flow have no precedent in any existing design. 2. **Neon-Glow Imagery (0% frequency):** No other design uses neon-glow as its imagery mode. This is not generic neon (no cyberpunk, no arcade kitsch) -- it is specifically candlelight-as-neon, where the warm brass glow of memorial flames is rendered with the precision and intensity of neon signage. The lantern system, the ascending ember particles, and the registry glow lines create a unique visual language of "luminous remembrance." 3. **Candle-Atmospheric Motifs (1% frequency):** The candle motif appears in only 1% of existing designs. Here it is elevated to a complete visual system: floating flame particles, circular portrait halos, pulsing border animations, and brass etch dividers all derive from the single metaphor of candlelight in darkness. No other design uses atmospheric candlelight as its organizing metaphor. 4. **Navy-Metallic Palette (2% frequency):** The palette avoids the warm earthy tones, cool grays, and high-contrast schemes that dominate the portfolio. Instead, the navy-metallic combination (#060D18 through #1B2D4A with #C9A96E brass accents) creates a specific visual environment: the interior of a night vigil. This is neither "dark mode" (which implies UI chrome) nor "midnight blue" (which implies serenity) -- it is the specific, emotionally charged darkness of a memorial space illuminated by brass-toned flame. 5. **Dopamine-Memorial Fusion:** The "dopamine" aesthetic (5% frequency) is typically associated with bright, energetic, attention-grabbing design. Here it is recontextualized for memorial purposes: the "dopamine hit" comes not from neon commerce but from the emotional intensity of encountering a beautiful memorial -- the rush of recognition, the warmth of shared remembrance, the visual pleasure of glowing lanterns against infinite darkness. This collision of dopamine aesthetics with memorial reverence is completely novel. 6. **All-Monospace Typography System:** While mono typography appears at 99% frequency, no other design commits to a full three-font monospace stack (Space Mono, IBM Plex Mono, JetBrains Mono) where every text element -- from headlines to body to metadata -- exists within the monospace family. The effect is that of an etched inscription or telegraph transmission: every character occupies the same width, creating a visual democracy where every name, every word of remembrance, carries equal weight in the grid. **Documented seed/style:** aesthetic: dopamine, layout: diagonal-sections, typography: mono, palette: navy-metallic, patterns: stagger, imagery: neon-glow, motifs: candle-atmospheric, tone: friendly **Avoided patterns from frequency analysis:** centered layout (99% - avoided in favor of diagonal), parallax (79% - not used), scroll-triggered (97% - used sparingly only for section reveals, not as primary pattern), warm palette (100% - replaced with navy-metallic cold foundation), photography imagery (72% - replaced with CSS-only neon-glow elements), vintage motifs (81% - replaced with candle-atmospheric), humanist typography (39% - avoided entirely in favor of pure monospace stack).