# Design Language for underdark.date ## Aesthetics and Tone A holographic vertical timeline rendered as an iridescent jeweler's chain — a vertical scroll where each milestone is a holographic vector cameo flanked by cultural ornament, set on a triadic-jeweled background that shimmers as the visitor moves. The aesthetic merges late-90s holographic foil stickers, the cultural ornament traditions of Persian mosaics and Bukharan tilework, the elegance of Playfair-typeset wedding invitations, and the iridescent gradient of opal jewelry photographed under shifting light. Elegant-sophisticated in tone: the timeline narrator speaks as a generous historian of intimate moments, dignifying each entry with literary precision. The voice is composed and lyrical. "On the fourteenth of May, in the holographic year before the others, the two of them met for the second first time." Long sentences that read with the gravity of an illuminated manuscript. ## Layout Motifs and Structure Timeline-vertical layout: a central vertical spine runs down the middle of the viewport, glowing with a holographic gradient (cycling through Triadic Magenta, Cerulean, and Saffron). Along this spine, milestone nodes appear at regular intervals (every 600-800px vertical), each anchored to the spine with a small holographic clasp. Each milestone node alternates left/right alignment relative to the spine: - Left-side nodes: vector-art cameo on the left, text panel on the right (closer to spine). - Right-side nodes: text panel on the left, vector-art cameo on the right. - Cameos are 320×240 with holographic iridescent borders. - Text panels are 280×220 with Playfair italic headings and Cormorant body copy. - A small cultural-ornament "linker" connects each node to the central spine (a hand-drawn ornament motif from a specific culture, rotating per node). Typewriter-effect pattern: each milestone's date and headline type out character-by-character as the node enters viewport, like a calligrapher inscribing into the timeline. Body copy fades in after the type-out completes. The header is an oversized illuminated capital letter "U" at the top of the spine, decorated with hand-drawn flourish. The footer dissolves into the holographic spine fading to Inkwell. ## Typography and Palette - **Display headlines:** "Playfair Display" (Google Fonts), weight 800 italic — playfair-elegant for milestone titles at 44-58px, with classic italic ligatures. - **Sub-display:** "Playfair Display" (Google Fonts), weight 500 italic — at 22-28px for milestone sub-titles and dates. - **Body:** "Cormorant Garamond" (Google Fonts), weight 400 — at 17px line-height 1.7 for milestone narrative copy. - **Typewriter accent:** "Special Elite" (Google Fonts), weight 400 — for the typewriter-effect timestamps and inscriptions, 16-20px. - **Cultural label / spine codes:** "Cinzel" (Google Fonts), weight 400 — for engraved spine-node labels at 11px ALL CAPS letter-spacing 0.2em. Palette — Triadic holographic jeweler: - `#0F0B1F` Velvet Night — base background, deep blue-violet. - `#1F1A36` Twilight Shadow — secondary background for node interiors. - `#FF4DA2` Triadic Magenta — primary triadic hue (jewel 1). - `#4DA2FF` Triadic Cerulean — primary triadic hue (jewel 2). - `#FFC74D` Triadic Saffron — primary triadic hue (jewel 3). - `#F0E0BC` Vellum Cream — paper-aged for text panels and Playfair body type. Holographic gradient: the spine and node borders use a 3-stop linear gradient (Magenta → Cerulean → Saffron) that cycles its `gradientTransform` translation over 8s, creating a shimmering jewel effect. On hover over a node, the gradient cycle accelerates to 3s. ## Imagery and Motifs - **Vector-art cameos**: each milestone's central image is a hand-drawn SVG vector cameo (silhouette of a moment: two hands almost touching, a cup of tea steaming, a door slightly ajar, a window with rain, a chair pulled out). Drawn in 1.2px Vellum Cream with Triadic Magenta/Cerulean/Saffron accent fills at 0.5 alpha. - **Cultural motifs**: each node's linker is a hand-drawn ornament from a specific culture (Persian sun rosette, Bukharan star tile, Andalusian arabesque, Yoruba beadwork band, Filipino capiz pattern, Croatian filigree, Wayuu mola fragment). Each ornament rotates per node, giving a procession of cultural references. - **Holographic clasp**: each node connects to the spine via a small SVG "clasp" — a 24×24 hexagonal ornament with iridescent gradient, drawn in 1.5px Vellum stroke. - **Vellum text-panel borders**: a thin 1px Vellum Cream border around each text panel, with corner ornaments in Cultural motif style. - **Spine glow**: the central vertical spine has a 4px holographic gradient core + a 16px outer halo at 0.32 alpha; the halo subtly pulses at 0.4Hz. ## Prompts for Implementation - Build timeline-vertical with a single absolutely-positioned `
` spine at `left: 50%; transform: translateX(-50%); width: 4px; height: 100%`. Set its background as a holographic linear-gradient and animate `background-position` over 8s. - Milestone nodes are `
` elements with `display: grid; grid-template-columns: 1fr 4px 1fr` (cameo / spine-gap / text). Alternate by row. - Typewriter-effect: on IntersectionObserver enter, JS reveals characters one-by-one at 35-50ms intervals. Cursor blinks at 1Hz. Body copy opacity remains 0 until the type-out completes, then fades in over 520ms. - Vector cameos: inline SVGs (20-60KB each), with `filter: drop-shadow(0 8px 24px rgba(15,11,31,0.6))` to give them depth on the dark background. Each cameo has a single animated micro-element (the tea steam drifts, the door swings 4deg, the rain drops fall). - Cultural-ornament linkers: pre-built SVG library (7 ornaments), assigned to nodes in a fixed cycle. Each linker has a subtle 0.6Hz rotation drift for visual life. - Holographic gradient: define as CSS custom property `--holo-gradient: linear-gradient(135deg, #FF4DA2 0%, #4DA2FF 50%, #FFC74D 100%)`. Apply with `background-size: 300% 300%` and `background-position` animated. - Bias toward elegant narrative: each milestone is a 2-4 sentence vignette in literary prose. No CTAs, no pricing, no stat-grids — only milestones, cameos, and cultural linkers. - Cursor becomes a Vellum Cream pointer with a tiny holographic ring; on hover over a cameo, the cameo lifts slightly (translateY -4px) and the cultural-linker rotates by 30deg. - Reduced motion: disable typewriter-effect (reveal text immediately); freeze holographic gradient cycling; disable linker rotation drift; disable spine halo pulse. ## Uniqueness Notes - Differentiator 1: timeline-vertical used as a literary milestone procession with alternating left/right cameos, not as a typical project timeline. - Differentiator 2: holographic aesthetic enforced via cycling triadic gradients on the spine and node borders — iridescent jeweler chain effect. - Differentiator 3: typewriter-effect paired with Playfair Display + Cormorant Garamond — a high/low typography clash that becomes part of the rhythm. - Differentiator 4: cultural motifs assigned procedurally per node, creating a procession of global ornaments — diversifies what would otherwise be a generic timeline. - Differentiator 5: vector-art cameos with single animated micro-elements (steam, swing, drops) — small kinetic moments inside otherwise still imagery. - Chosen seed: aesthetic: holographic, layout: timeline-vertical, typography: playfair-elegant, palette: triadic, patterns: typewriter-effect, imagery: vector-art, motifs: cultural, tone: elegant-sophisticated. - Avoided patterns from frequency analysis: parallax (94% — replaced with vertical spine progression), card-grid (90% — replaced with alternating timeline nodes), centered (94% — spine-centered with alternating sides), photography (90% — replaced with vector cameos), mono typography (81% — replaced with Playfair + Cormorant + Cinzel + Special Elite), mysterious-moody (71% — replaced with elegant-sophisticated).