# Design Language for archetype.boo ## Aesthetics and Tone archetype.boo is a luxury-premium digital experience that explores the concept of archetypes -- universal patterns, primordial images, Jungian templates of human behavior -- through a lens of opulent dark-mode elegance. The ".boo" TLD adds a ghost-like, spectral quality: archetypes are the phantoms that haunt our collective unconscious. Imagine a private viewing room in a contemporary art museum -- walls of deep charcoal velvet, spotlit display cases with aurora-lit specimens floating inside, and a hushed atmosphere where every surface has the weight of expensive materials. The visual language draws from high-end fashion lookbooks (Bottega Veneta's quiet luxury) crossed with the atmospheric mystery of aurora borealis photography -- layers of translucent color floating over darkness, bokeh circles drifting like memories, depth layered upon depth. The tone balances technical explanation (this is a tutorial on archetypes) with premium experiential design (this should feel like something expensive and exclusive). ## Layout Motifs and Structure The layout employs a **layered-depth** system where content exists on multiple visual planes stacked in z-space. Background layers, mid-ground content, and foreground accents create a parallactic depth illusion without actual scroll-parallax. **Primary structure:** - **Opening viewport (100vh):** A deep charcoal background (#141420) with aurora-colored bokeh circles drifting slowly across the viewport (5-8 circles, each 100-400px diameter, blurred, in aurora palette colors at 15-30% opacity). The "archetype" wordmark appears in the center in Commissioner at weight 300, tracking extremely wide (letter-spacing: 0.2em), creating an ethereal, dispersed quality. Below, ".boo" pulses softly with a subtle opacity oscillation (0.6 to 1.0, 3s cycle) in Aurora Rose. - **The Archetypes Gallery (layered cards):** Content is presented as large cards (min-height: 60vh, max-width: 900px, centered) that overlap slightly as you scroll -- each new card slides up and partially covers the previous one (30% overlap). Cards use layered-depth construction: a blurred background layer (bokeh image), a translucent mid-layer (rgba overlay), and a sharp foreground layer (text and icons). Each archetype card has a distinct aurora color accent. - **The Phantom Theatre (immersive section):** A full-viewport dark section where a single archetype is explored in cinematic fashion. Content appears phrase by phrase on scroll, with each phrase positioned at different locations in the viewport (never centered twice in a row). Aurora gradient bands sweep across the background triggered by scroll position. - **The Mirror (interactive reflection):** A section where the user discovers "their" archetype through a visual interactive -- a series of image/word choice pairs presented as overlapping translucent cards. Each selection changes the ambient aurora color palette of the entire page. - **Fade to Black (footer):** Content gradually reduces to nothing -- text size decreases, opacity lowers, spacing increases -- until only the faintest "archetype.boo" whisper remains in the void. ## Typography and Palette **Fonts:** - **Headlines:** "Commissioner" (Google Fonts) -- used at extremely light weight (300) with wide letter-spacing (0.15-0.2em) for an ethereal, luxury feel. Size: clamp(28px, 4vw, 64px). The wide tracking makes the text feel like it's floating apart, ghostly. For emphasis, weight increases to 500 with tracking reduced to 0.06em. - **Body text:** "Crimson Pro" (Google Fonts) -- an elegant serif with excellent readability on dark backgrounds. Weight 400, line-height: 1.85, size: clamp(15px, 1.15vw, 18px). Its classical proportions ground the more ethereal headline treatment with scholarly authority. - **Accent/Labels:** "DM Mono" (Google Fonts) -- a clean monospace for metadata, archetype classifications, and small labels. Weight 400, size: 12px, letter-spacing: 0.06em. Rendered at 60% opacity in the section's accent color. **Palette:** - **Void Black:** #0A0A14 -- deepest background, the unconscious - **Charcoal Deep:** #141420 -- primary background, dark velvet - **Smoke Grey:** #2A2A3A -- card backgrounds, raised surfaces - **Aurora Green:** #00E5A0 -- primary aurora accent - **Aurora Rose:** #FF6B9D -- secondary aurora accent - **Aurora Violet:** #9D4EDD -- tertiary aurora accent - **Aurora Gold:** #FFD166 -- quaternary aurora accent - **Ghost White:** #E8E8F0 -- primary text, soft white with slight lavender ## Imagery and Motifs **Core visual motifs:** - **Bokeh circles:** Large, soft, circular blurred shapes (CSS `border-radius: 50%; filter: blur(40-80px)`) in aurora colors at low opacity (10-25%). They drift slowly across the viewport on CSS keyframe animations with long durations (30-60s) and slight scale pulsing (scale: 0.9 to 1.1). 5-8 circles create the ambient bokeh field. They exist on a fixed background layer that scrolls slower than content. - **Aurora gradient sweeps:** Horizontal bands of blended aurora colors (linear-gradient at 135deg through Aurora Green, Aurora Violet, Aurora Rose) that move slowly across section backgrounds. Implemented as a background with `background-size: 300% 300%` and animated `background-position`. Applied to section dividers and accent panels. - **Layered card depth:** Each archetype card has three visual layers: Layer 1 (back) is a full-bleed blurred color shape. Layer 2 (mid) is a semi-transparent overlay panel (rgba(42, 42, 58, 0.7) with backdrop-filter: blur(12px)). Layer 3 (front) is the crisp text content. The layer separation creates perceived depth. - **Ghost shimmer on text:** An extremely subtle shimmer effect on the hero wordmark -- a linear-gradient with a transparent-white-transparent pattern (background-clip: text) that animates its position slowly, creating a moving highlight across the letterforms. Duration: 8s, infinite. - **Scroll-triggered aurora shifts:** As the user scrolls through sections, the page's ambient aurora color shifts -- CSS custom properties (--aurora-primary, --aurora-secondary) transition between different color combinations, changing the entire atmosphere gradually. ## Prompts for Implementation **Full-screen narrative opening:** On load, the Void Black background fades to Charcoal Deep (800ms). Bokeh circles fade in one by one (stagger 400ms, each from opacity 0 to their target opacity). The "archetype" wordmark materializes letter by letter (opacity 0 to 1, stagger 60ms per character, from center outward -- middle letters appear first, edge letters last). The ".boo" pulses in after all letters settle (opacity 0 to 0.6, then begins its 3s oscillation cycle). **Overlapping scroll cards:** Implement with a vertical stack of `position: sticky` cards. Each card has `position: sticky; top: 30vh` (with incrementing top values: 30vh, 32vh, 34vh...) so they stack and overlap as the user scrolls. Each card needs a higher z-index than the previous. The scroll container uses padding-bottom to allow all cards to reach their sticky position. **The Phantom Theatre phrase-by-phrase:** Use Intersection Observer on each phrase element (span or p). Each phrase starts with `opacity: 0; transform: translate(var(--x), var(--y))` where --x and --y are unique per phrase (e.g., first phrase: 0, 30px; second: -40px, 0; third: 20px, -20px). On intersection, animate to `opacity: 1; transform: translate(0, 0)` with stagger easing. Background aurora bands shift via scroll-driven custom property updates. **Aurora color system:** Define CSS custom properties on `:root` for the aurora palette. Use JavaScript scroll listener to interpolate between color sets: Section 1 emphasizes green, Section 2 rose, Section 3 violet, Section 4 gold. Apply these properties to bokeh circles, card accents, and text highlights. The transition is continuous and smooth (CSS transition: 1.5s ease on the custom property values). **Fade-to-nothing footer:** Implement with CSS custom properties driven by scroll position. As the footer enters the viewport, `--footer-opacity` decreases from 1 to 0.05, `--footer-scale` decreases from 1 to 0.95, and `--footer-spacing` increases. Apply these to the footer content: `opacity: var(--footer-opacity); transform: scale(var(--footer-scale)); letter-spacing: calc(0.2em + var(--footer-spacing) * 0.5em)`. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No bright backgrounds. No aggressive contrast. No sharp borders or hard edges. No photography -- only abstract color and light. ## Uniqueness Notes **Differentiators from other designs:** 1. **Overlapping sticky-card scroll system:** The card stacking mechanism where each archetype card slides over the previous one using sticky positioning creates a unique depth-of-reading experience. No other design in the collection uses this overlapping scroll technique. 2. **Page-wide aurora color shifting on scroll:** The ambient color palette that continuously transitions as the user scrolls through different archetype sections creates a synesthetic experience where content themes are reinforced through environmental color change. This system-level color shifting is unique. 3. **Center-outward letter materialization:** The hero wordmark animation where middle letters appear first and edge letters appear last (reverse of typical left-to-right stagger) creates a visually distinctive text reveal that suggests the archetype emerging from its core. 4. **Fade-to-nothing footer as philosophical statement:** The footer that literally dissolves -- text shrinking, spacing increasing, opacity dropping -- rather than providing standard footer content, reinforces the "archetype as ghost" concept. No other design uses progressive dematerialization as a footer treatment. **Planned seed:** luxury-premium, layered-depth, commissioner-versatile, aurora-gradient, shake-error, bokeh-background, aurora-lights, tech-tutorial **Avoided overused patterns:** centered layout, card-grid, parallax, cursor-follow, mono as primary type, photography, gradient as flat fill, mysterious-moody as default rather than intentional