# Design Language for mang.quest ## Aesthetics and Tone mang.quest inhabits the dim, leather-scented corridors of a late-19th-century private library that has been quietly accumulating knowledge since before electric light -- a place where amber lamplight pools on mahogany reading tables, where marginalia in faded iron-gall ink reveals generations of readers arguing with the text, and where the floorboards creak with the weight of accumulated thought. The aesthetic is **dark-academia as chronicle**: not the romanticized Instagram version of tweed and coffee, but the genuine obsessive scholar's den where timelines of intellectual history are pinned to cork boards with brass tacks, where hand-drawn genealogies of ideas sprawl across butcher paper taped to oak-paneled walls, and where every surface -- every margin, every endpaper, every index card -- is covered in the dense, compulsive notation of someone trying to map the entire history of a single concept. The domain name "mang" evokes the Korean word for "net" or "web" (망) -- an interconnected lattice of knowledge nodes. The ".quest" suffix transforms the site into an intellectual expedition: a vertical descent through layered strata of accumulated understanding, each era a geological layer in the sediment of human thought. The tone is **nostalgic-retro** not as saccharine sentimentality but as genuine temporal vertigo -- the dizzying recognition that the questions we ask today were asked by someone scratching cuneiform into wet clay four thousand years ago. There is a gravity here, a scholarly weight, but also a kind of reverent wonder at the sheer depth of the human record. The visual atmosphere channels the interiors of the Bodleian Library's Duke Humfrey's Reading Room, the marginalia of medieval scriptoria, the organizational obsession of Aby Warburg's Mnemosyne Atlas, and the hand-ruled timelines in 19th-century comparative history textbooks. Every element should feel as though it has been handled by many hands across many decades -- worn at the edges, rich in accumulated patina, but structurally sound and precisely organized. ## Layout Motifs and Structure The layout follows a **timeline-vertical** architecture -- a single, continuous vertical axis that functions as both navigational spine and visual metaphor. The timeline is not a decorative sidebar element but the fundamental structural principle of the entire page: the user scrolls downward through historical depth, from the present moment at the top into increasingly distant past eras as they descend. Each major section represents an epoch or intellectual period, and the vertical scroll IS the passage of time made spatial. **Structural Principles:** - **The Central Axis:** A single SVG-drawn vertical line runs down the exact center of the viewport, rendered as a hand-ruled ink stroke with slight wobble and variable thickness (achieved via SVG path with subtle bezier deviations from true vertical). This line is the spine of the entire experience. All content hangs from it, alternating left and right like pages in an open book. - **Epoch Nodes:** At irregular intervals along the central axis, circular nodes (48px diameter, drawn as concentric rings in the duotone palette) mark transitions between eras. Each node contains a year, a date range, or an era name rendered in small caps. The nodes are connected to content panels on alternating sides via horizontal connector lines -- thin, ink-like SVG strokes that branch from the spine at precise 90-degree angles before terminating at the content block's inner edge. - **Content Panels:** Rectangular blocks positioned alternately on the left and right of the central axis, offset by approximately 60px from the spine. Each panel has a subtle parchment-toned background (#F5F0E8 at 90% opacity), a 1px border in dark walnut (#3E2723), and a faint drop-shadow (0 2px 8px rgba(30, 20, 10, 0.15)) that creates the illusion of index cards pinned to a dark background. Panels vary in height based on content but maintain a consistent width of approximately 42% of the viewport. - **The Dark Field:** Behind the timeline and its branching content panels, the background is a deep, nearly black umber (#1A1410) that evokes the dark wood paneling of a Victorian study. This creates the visual effect of illuminated content floating against a dark ground -- the scholar's desk lamp casting pools of light on specific documents while the rest of the room recedes into shadow. - **Margin Annotations:** Small, rotated text blocks (transform: rotate(-90deg) or rotate(3deg)) appear in the gutters between the central axis and the viewport edges, functioning as marginal notes or cross-references. These are rendered in a smaller size (0.7rem) and a muted tone, as though scrawled by a previous reader. - **Era Separators:** Between major epochs, full-width horizontal rules appear -- not as simple CSS borders but as SVG-rendered decorative dividers inspired by the ornamental rules found in 19th-century book typography: thin-thick-thin combinations, small geometric ornaments at center, or rows of tiny diamond shapes. ## Typography and Palette **Typography:** - **Primary Display / Era Headings:** "Playfair Display" (Google Fonts) -- a transitional serif with high stroke contrast, elegant ball terminals, and the kind of sharp, authoritative character found in the title pages of scholarly monographs. Used at 3.2rem-5.5rem for epoch titles and major headings. Set with `font-weight: 700`, `letter-spacing: 0.02em`, `line-height: 1.15`. The high contrast between thick and thin strokes catches lamplight beautifully and creates a sense of institutional gravitas. All era headings use `font-variant: small-caps` to invoke the tradition of chapter openings in classical typography. - **Secondary / Content Body:** "Source Serif 4" (Google Fonts, variable) -- a contemporary interpretation of the transitional serif tradition with optical size variation. This is the expressive-variable axis of the typography system: at small sizes (1rem body text), the letterforms have slightly thicker hairlines for legibility; at large annotation sizes (1.4rem pull quotes), the contrast increases for elegance. Used with `font-weight: 400` for body, `font-weight: 600` for emphasis, `line-height: 1.65`, `letter-spacing: 0.01em`. The variable optical sizing creates a living typography that adapts to its context the way a scholar's handwriting shifts between careful inscription and hurried margin notes. - **Tertiary / Dates and Labels:** "JetBrains Mono" (Google Fonts) -- a monospaced face used exclusively for dates, timestamps, reference numbers, and margin annotations. The monospace treatment of temporal data reinforces the precision of the timeline structure and visually distinguishes factual markers from narrative content. Used at 0.75rem-0.9rem, `font-weight: 400`, `letter-spacing: 0.08em`, `text-transform: uppercase`. The regularity of monospaced numerals against the organic flow of serif body text creates a productive tension between measured time and lived experience. - **Decorative / Drop Caps and Initials:** "Cinzel Decorative" (Google Fonts) -- an ornamental titling face inspired by classical Roman inscriptions, used sparingly for drop caps at the beginning of major era sections. Each epoch's opening paragraph begins with a 4-line drop cap in Cinzel Decorative at approximately 4.5rem, colored in the burnished gold accent (#C4956A), creating the illuminated-manuscript effect of a historiated initial that marks the beginning of a new chapter in the timeline. **Palette (Duotone Core with Accent System):** The palette is built on a strict duotone foundation -- deep umber-black and warm parchment-cream -- with precisely controlled accent intrusions that function like the limited color of hand-tinted engravings or the occasional red rubric in a medieval text. | Role | Hex | Name | Usage | |------|-----|------|-------| | Primary Dark | #1A1410 | Umber Night | Background field, deep shadows, primary text | | Primary Light | #F5F0E8 | Aged Vellum | Content panel backgrounds, light text on dark | | Secondary Dark | #3E2723 | Walnut Shell | Borders, timeline spine, secondary text | | Secondary Light | #D4C5A9 | Foxed Paper | Muted text, margin annotations, subtle dividers | | Accent Warm | #C4956A | Burnished Gold | Drop caps, active epoch nodes, hover states | | Accent Cool | #6B7F5E | Scholar's Moss | Secondary highlights, visited states, sub-links | | Ink Dark | #2C1E12 | Iron Gall | Text on light panels, high-emphasis content | | Ink Faded | #8B7355 | Faded Sienna | Timestamps, de-emphasized labels, old annotations | The duotone discipline means that at any given moment, the viewport should read as primarily two values -- dark field and light content -- with accent colors appearing only at points of interaction or emphasis, never as large fills. The effect is of a monotone engraving that has been selectively hand-colored at key moments: a gold initial here, a moss-green underline there, but always restrained, always in service of the scholarly atmosphere. ## Imagery and Motifs **Icon-Heavy Symbolic System:** The imagery vocabulary is entirely **icon-heavy** -- no photography, no illustration in the traditional sense, but a dense system of small, precisely drawn geometric icons that function as a visual shorthand for categories of knowledge, types of sources, and intellectual relationships. These icons are all rendered as inline SVGs in a single stroke weight (1.5px) using the Iron Gall (#2C1E12) or Faded Sienna (#8B7355) color, drawn in a style that evokes the diagrammatic notation of 18th-century encyclopedists. **Icon Categories:** 1. **Temporal Icons:** Hourglass, sundial, pocket watch, pendulum, calendar page, crescent moon phases, seasonal leaf cycle -- used to mark dates and eras on the timeline nodes. Each epoch gets a distinct temporal icon that becomes its visual signature. 2. **Knowledge Icons:** Open book, quill pen, magnifying glass, alembic/flask, compass rose, astrolabe outline, telescope, inkwell -- used to categorize the type of intellectual activity within each content panel (literary, scientific, navigational, alchemical, astronomical). 3. **Relationship Icons:** Chain links, branching tree, concentric circles, crossed arrows, woven threads, nested brackets, Venn diagram outlines -- used in the margin annotations to indicate intellectual connections, influences, contradictions, and lineages between entries. 4. **Geometric Ornament Icons:** These are the **geometric-shapes** motif made specific: small diamonds, nested squares, interlocking triangles, hexagonal rosettes, Greek key fragments, and Celtic knot segments. Used as decorative punctuation between content blocks, as bullet replacements in lists, and as the repeating pattern in the era separators. Each geometric shape is constructed from simple SVG paths and uses only the duotone palette. **Motif Patterns:** - **The Marginalia Layer:** Throughout the page, faint geometric patterns -- grids of tiny dots, parallel ruled lines, compass-arc fragments -- appear in the background of content panels at very low opacity (0.04-0.08), simulating the pre-printed guide patterns found on manuscript preparation sheets or the ghost grid of discarded notebook pages. - **Ink Splatter Accents:** At era transition points, small SVG clusters of irregular dots and micro-strokes (2-5px) appear near the timeline nodes, simulating the accidental ink spots that accumulate near the nib of a dip pen that has been writing for hours. These are rendered in Walnut Shell (#3E2723) at 40-60% opacity. - **Border Ornament System:** Content panels feature corner ornaments -- small right-angle bracket designs composed of geometric shapes (two nested squares in the corner, a diamond at the vertex) -- that evoke the decorative borders of Victorian bookplates and ex libris designs. ## Prompts for Implementation **Full-Screen Narrative Descent:** The site opens with a full-viewport prologue section. The entire screen is Umber Night (#1A1410). After a 0.3-second pause, the central vertical timeline spine begins drawing itself from the top center of the viewport downward, using SVG path-draw animation (`stroke-dasharray` and `stroke-dashoffset` transitioning over 2.5 seconds). The line is rendered with a hand-drawn quality -- slight lateral wobble achieved through bezier control points that deviate 0.5-1.5px from true vertical at irregular intervals. As the line reaches approximately 40% of the viewport height, the domain name "mang.quest" fades in (opacity 0 to 1 over 1.2 seconds) at the very top of the page, set in Playfair Display small caps at 2.8rem, centered above the timeline's origin point, in Aged Vellum (#F5F0E8). Simultaneously, a subtitle in Source Serif 4 italic at 1.1rem fades in beneath it: a brief tagline rendered in Foxed Paper (#D4C5A9). As the user begins scrolling, the prologue section scrolls away naturally (no parallax -- the movement is direct, honest, like turning a page). The first epoch node enters the viewport from below, and as it crosses the 70% viewport threshold, its circle draws itself using path-draw-svg animation (stroke-dasharray/offset over 0.8 seconds), followed by the horizontal connector line extending toward the first content panel (0.4 seconds), followed by the panel itself fading in with a slight upward translation (transform: translateY(20px) to translateY(0), opacity 0 to 1, over 0.6 seconds). **Scroll-Driven Timeline Construction:** The core interaction pattern is that the timeline constructs itself as the user scrolls. Each element -- node, connector, panel, annotation -- draws, fades, or slides into existence as it enters the viewport, creating the impression that the user's downward scroll is the act of writing the timeline into being, like a pen moving down a page. This is achieved through Intersection Observer API with threshold arrays at [0.1, 0.3, 0.5, 0.7] for staggered multi-phase reveals: - Phase 1 (threshold 0.1): The epoch node's outer circle begins its path-draw animation. - Phase 2 (threshold 0.3): The connector line draws from the spine toward the content panel's position. - Phase 3 (threshold 0.5): The content panel fades in with its upward translation. The drop cap initial, if present, appears with a slight scale animation (0.9 to 1.0 over 0.4s). - Phase 4 (threshold 0.7): Margin annotations in the gutters fade in at 60% opacity, rotated to their final angles. **Path-Draw SVG Animation Details:** All line-drawing animations use the `stroke-dasharray` / `stroke-dashoffset` technique. The timeline spine, epoch connectors, era separators, and border ornaments are all constructed as SVG paths with `stroke-dasharray` set to the path's total length and `stroke-dashoffset` transitioning from total length to 0. Easing is `cubic-bezier(0.25, 0.1, 0.25, 1.0)` -- a gentle ease-out that mimics the deceleration of a pen stroke as it comes to rest. Duration varies by path length: short connectors at 0.4s, longer decorative rules at 1.2s, the initial spine animation at 2.5s. **Icon Animation on Reveal:** Timeline node icons (the temporal icons -- hourglass, sundial, etc.) animate in a two-step reveal: first, the geometric outline draws itself using path-draw-svg (0.6s), then a subtle fill fades in at 15% opacity of Burnished Gold (#C4956A) over 0.3s, creating a ghost-fill effect that suggests gilding without overwhelming the line-drawn aesthetic. **Hover Interactions:** Content panels respond to hover with restrained, scholarly-appropriate micro-interactions: - Border color transitions from Walnut Shell (#3E2723) to Burnished Gold (#C4956A) over 0.3s. - The corner ornaments scale from 1.0 to 1.08 with a spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)). - Any knowledge icons within the panel shift from Faded Sienna (#8B7355) to Iron Gall (#2C1E12) over 0.2s. - The drop shadow deepens slightly (0 2px 8px to 0 4px 16px, rgba opacity from 0.15 to 0.22). Epoch nodes on the timeline respond to hover by expanding their outer ring radius by 4px (transition: 0.3s ease-out) and revealing a small tooltip-style label (the epoch's full name) that fades in above the node in JetBrains Mono at 0.7rem. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, parallax scrolling (the scroll is direct and honest), stock photography, neon colors, rounded-playful UI elements, dashboard layouts, card grids with uniform sizing. The experience should feel like descending into a library's special collections vault, not browsing a SaaS landing page. **BIAS TOWARD:** Full-screen narrative immersion, SVG path-draw choreography, typographic hierarchy as navigation, the timeline as both structure and story, handcraft-suggesting asymmetries in otherwise precise layouts. ## Uniqueness Notes **Differentiators from other designs:** 1. **Timeline-as-Architecture (0% frequency):** No other design in the portfolio uses `timeline-vertical` as its layout principle. While other sites use centered or asymmetric layouts, mang.quest makes the vertical timeline the literal structural spine of the entire page -- all content, all navigation, all visual hierarchy radiates from this single drawn line. The timeline is not a UI component; it is the architecture itself. 2. **Dark-Academia Scholarship (1% frequency):** The dark-academia aesthetic at 1% frequency is nearly absent from the portfolio. Most designs lean playful (95%) or friendly (98%); mang.quest deliberately inverts this with a scholarly, weighty, nostalgic atmosphere that treats the user as a fellow researcher rather than a casual browser. The Victorian-library materiality -- oak paneling, iron-gall ink, foxed paper, brass-tacked documents -- creates a sensory environment entirely distinct from the clean, bright, corporate-inflected majority. 3. **Icon-Heavy Symbolic Language (1% frequency):** At only 1% frequency, icon-heavy imagery is virtually unused. mang.quest builds its entire visual vocabulary from a system of precisely drawn geometric and thematic SVG icons rather than photography (73%), minimal imagery (94%), or mixed-media approaches. The icon system functions like the pictographic notation of an encyclopedist -- each symbol carries specific semantic meaning, and the accumulation of icons across the timeline creates a visual index of intellectual categories. 4. **Duotone Discipline with Rubric Accents:** The duotone palette (8% frequency) resists the overwhelming tendency toward warm (100%) and gradient (90%) palettes. The strict umber-and-vellum duotone, punctuated only by controlled Burnished Gold and Scholar's Moss accents, creates a visual atmosphere closer to a printed engraving than a modern website -- restrained, archival, and unmistakably analog in feeling. 5. **Path-Draw SVG as Narrative Engine (3% frequency):** While path-draw-svg appears at only 3% frequency, mang.quest makes it the primary animation language rather than a decorative accent. Every structural element -- the timeline spine, epoch connectors, era separators, icon outlines, border ornaments -- constructs itself through line-drawing animation, creating the visceral impression that the entire page is being written/drawn in real-time by an invisible scholarly hand. **Documented Seed/Style:** ``` aesthetic: dark-academia layout: timeline-vertical typography: expressive-variable palette: duotone patterns: path-draw-svg imagery: icon-heavy motifs: geometric-shapes tone: nostalgic-retro ``` **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with scholarly gravitas - centered layout (99%) -- replaced with timeline-vertical bilateral structure - warm palette (100%) -- replaced with duotone umber-vellum discipline - gradient palette (90%) -- eliminated entirely in favor of flat duotone fills - scroll-triggered (97%) -- used sparingly via Intersection Observer rather than as generic scroll-jacking - parallax (79%) -- deliberately rejected; scroll is direct and honest - friendly tone (98%) -- replaced with nostalgic-retro scholarly weight - minimal imagery (94%) -- replaced with dense icon-heavy symbolic system - photography imagery (73%) -- eliminated entirely; all visuals are SVG icons and geometric patterns - mono typography (99%) -- JetBrains Mono used only for date labels, not as primary face - vintage motifs (81%) -- replaced with geometric-shapes as primary motif system