# Design Language for archetype.boo ## Aesthetics and Tone archetype.boo is a holographic oracle chamber — a site that feels like consulting an ancient divination machine rebuilt with prismatic optics and pearlescent circuitry. The holographic aesthetic is not the cheap rainbow-shimmer of a credit card sticker; it is the deep, shifting iridescence of an oil slick on obsidian, of light diffracting through a crystal prism in a dim stone room. Every surface carries a faint spectral shift: backgrounds transition through barely-perceptible hue rotations, text shimmers with a subtle color-fringe effect at its edges, and decorative elements refract light into soft prismatic halos. The tone is authoritative — the voice of a system that has catalogued every archetype, every pattern of human behavior and myth, and presents its knowledge with calm, absolute confidence. There is no friendliness, no playful winking. This is a repository of universal truths, delivered with the gravity of carved stone tablets that happen to glow with iridescent light. The authority is not corporate or institutional; it is oracular, ancient-feeling, like a library that predates the internet but has always existed in some form. The word "boo" in the domain is treated as a ghost-whisper, a spectral presence — the archetypes haunt the interface, floating in and out of visibility. ## Layout Motifs and Structure The layout follows a diagonal-sections architecture: content is organized into full-width bands that are sliced at opposing angles, creating a zigzag descent through the page. Each section's boundaries are defined not by horizontal lines but by CSS clip-path polygons angled at 6-8 degrees, so the bottom edge of one section and the top edge of the next create a diagonal seam. The angle alternates direction with each section (leaning right, then left, then right), producing a cascading chevron rhythm down the page. **Structure:** - **Hero zone:** A full-viewport holographic void. The background is a dark base (#121018) overlaid with a slow-rotating conic-gradient that cycles through spectral hues at very low opacity (8-12%). Centered in this void, a single archetype glyph — an abstract geometric sigil built from thin luminous lines — floats with a gentle bobbing animation. Below it, the domain name "archetype.boo" in large rounded-sans type with a prismatic text-shadow (three offset shadows in cyan, magenta, and gold at 1px displacement each). No scroll indicator; the diagonal cut at the bottom of the hero reveals a sliver of the next section's contrasting background, naturally drawing the eye downward. - **Content bands:** Each diagonal section contains a single thematic block: a concept definition, an archetype description, or an atmospheric vignette. Content is set in a narrow column (max-width 640px) that is offset from center — alternating left-aligned and right-aligned in successive sections — reinforcing the diagonal energy. The offset column leaves generous negative space on the opposite side, where floating decorative elements (holographic orbs, spectral glyphs, prismatic lens-flare bursts) drift slowly. - **Transition seams:** At each diagonal junction between sections, a thin (2px) iridescent gradient line runs along the clip-path edge, creating a glowing seam effect. This line uses a linear-gradient cycling through #00e5ff, #c77dff, #ffd166, and back, animated with background-position shift over 8 seconds. - **Terminal section:** The final section has no bottom diagonal cut — it dissolves into solid black (#0a0a10) with the floating elements fading to nothing, leaving only a single line of small text at the very bottom: a cryptic archetype classification code in monospace, like a museum accession number. ## Typography and Palette **Typography:** - **Display / Headlines:** "Nunito" (Google Fonts) — a rounded-sans typeface with soft, friendly terminal shapes that paradoxically serves the authoritative tone by making the oracular pronouncements feel inevitable rather than aggressive. Used at 2.5rem-4.5rem, weight 800 (ExtraBold), with letter-spacing: 0.02em. The rounded terminals of Nunito echo the holographic orbs and soft prismatic light throughout the design — no sharp serif daggers, only smooth luminous curves. - **Body / Paragraphs:** "Quicksand" (Google Fonts) — a geometric rounded-sans with excellent readability and a clean, slightly futuristic character. Used at 1rem (16px), weight 400 (Regular) for body text, weight 600 (SemiBold) for emphasis and subheadings. Line-height: 1.75. The rounded geometry of Quicksand creates visual harmony with Nunito while maintaining clear distinction through its lighter weight and more open spacing. - **Accent / Labels:** "Nunito" at 0.75rem, weight 700, letter-spacing: 0.12em, text-transform: uppercase. Used for section labels, archetype classification tags, and navigational hints. Set in a spectral accent color. **Palette:** The palette is muted-vintage with holographic accents — faded, desaturated base tones punctuated by brief prismatic flashes: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Deep Background | Obsidian Plum | #121018 | Near-black with a violet undertone; the void from which holograms emerge | | Section Alt Background | Charcoal Mauve | #1e1a24 | Slightly lighter than the deep background; used for alternating diagonal sections | | Primary Text | Aged Parchment | #d4c9b8 | A warm, muted cream — not white, but the color of old paper under lamplight | | Secondary Text | Dusty Lavender | #8a7f96 | Muted purple-gray for body text, captions, and secondary information | | Spectral Accent 1 | Prismatic Cyan | #00e5ff | The cool end of the holographic spectrum; used for links, glowing seams, hover states | | Spectral Accent 2 | Prismatic Magenta | #c77dff | The warm end of the holographic spectrum; used for active states, archetype glyphs | | Spectral Accent 3 | Faded Gold | #ffd166 | A muted, vintage gold — not bright yellow but the color of tarnished gilt; used for highlights and the third point of the prismatic triad | | Muted Vintage Rose | Vintage Rose | #b8706e | A desaturated terracotta-rose for occasional warm accents, blockquote borders, and decorative strokes | The three spectral accents (#00e5ff, #c77dff, #ffd166) are never used at full opacity in large areas. They appear as thin lines, small glyphs, text-shadows, and gradient seams — brief holographic flickers against the muted vintage base. ## Imagery and Motifs **Holographic Orbs (Floating Elements):** The primary decorative motif is floating holographic orbs — circular CSS elements (40px-120px diameter) with radial-gradient fills that blend two or three spectral accent colors, heavily blurred (filter: blur(20px-40px)) and set at low opacity (0.15-0.3). These orbs drift slowly across the viewport using CSS keyframe animations with long durations (20-40 seconds) and subtle translateX/translateY movements. They exist in the negative space beside content columns, never overlapping text. At least 5-7 orbs are present at any time, at varying sizes and depths (z-index layers), creating a sense of spectral presences floating in the void — the "ghosts" implied by the .boo domain. **Prismatic Lens-Flare Bursts:** At key moments — section headings, the hero glyph, the terminal classification code — a lens-flare effect radiates from a focal point. This is built with a CSS pseudo-element: a horizontal gradient stripe (200px wide, 2px tall) crossing a vertical gradient stripe (2px wide, 200px tall) at center, both using the spectral accent gradient, with a radial blur glow behind them. The effect is subtle and static, not animated — a frozen moment of light diffraction, like a photograph of a flashlight beam hitting a crystal. **Archetype Glyphs:** Each archetype section features a unique abstract sigil — a geometric line-drawing rendered as an inline SVG. These glyphs are composed of thin (1.5px stroke) lines forming abstract symbols: overlapping circles, nested triangles, radiating lines from a center point, interlocking squares rotated 45 degrees. The stroke color uses the prismatic gradient (animated background on SVG stroke via CSS). These are not literal icons representing concepts; they are abstract, almost alchemical symbols that evoke meaning without defining it. **Lottie Animation — The Oracle Pulse:** A single Lottie animation serves as the site's signature motion element: a slow, breathing radial pulse that expands and contracts at the center of the hero zone. The animation depicts concentric rings expanding outward from a central point, each ring cycling through the spectral accent colors as it grows, fading to transparent at its outermost extent. The animation loops infinitely at a slow pace (one full cycle every 6 seconds), creating a meditative heartbeat effect. This Lottie is embedded via the lottie-web player (loaded from CDN) and sized at 300px-500px, centered in the hero, behind the archetype glyph. **Background Texture:** A very faint noise-grain texture (CSS background using a tiny repeating PNG or SVG noise pattern at 3-5% opacity) is applied to all section backgrounds, giving the muted vintage palette a tactile, film-grain quality that prevents the dark backgrounds from feeling purely digital. ## Prompts for Implementation **Full-Screen Narrative Descent:** The site must be experienced as a single continuous vertical scroll — a descent through an oracle's archive. There is no traditional navigation bar. The hero is a long, meditative pause: 100vh of dark void with the Lottie pulse breathing at center and the archetype glyph floating above it. The user scrolls down through diagonal section after diagonal section, each presenting a different archetype or concept in its offset column. The experience should feel like turning pages in a sacred text, not browsing a website. **Diagonal Section Implementation:** Each section uses `clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw))` (with alternating polygon points for left-lean vs right-lean). The `4vw` value ensures the diagonal angle scales proportionally with viewport width. On mobile, reduce to `3vw` to keep the angle subtle. The iridescent seam line at each junction is a pseudo-element positioned along the clip-path edge. **Floating Element Animation Strategy:** The holographic orbs use pure CSS `@keyframes` with `will-change: transform, opacity`. Each orb has a unique animation-duration (20s, 28s, 35s) and animation-delay (-5s, -12s, -22s) to prevent synchronized movement. Orbs gently fade in/out (opacity oscillation within the keyframe) so they appear to materialize and dematerialize — ghostly presences. On mobile (below 768px), reduce orb count from 7 to 3 and sizes to 30px-80px. **Prismatic Text-Shadow Technique:** The hero domain name and section headlines use a triple text-shadow to create the holographic color-fringe effect: ``` text-shadow: 1px 0px 0px #00e5ff, -1px 0px 0px #c77dff, 0px 1px 0px #ffd166; ``` This creates a subtle RGB-split impression without JavaScript. On hover or scroll-into-view, the shadow offsets animate from 0px to their final values over 0.6s, making the holographic fringe "activate" as content appears. **Lottie Integration:** Load `lottie-web` via CDN (`