# Design Language for archetype.boo ## Aesthetics and Tone archetype.boo is a site that feels like stepping into the collective unconscious -- a liminal space where Jungian archetypes manifest as spectral, half-formed entities drifting through fog. The aesthetic is **surreal psychoanalytic theater**: imagine a dimly lit stage where shadow puppets enact primordial dramas, or the moment between sleep and waking when dream logic feels more real than daylight. The ".boo" TLD is not cute here -- it is the whisper of recognition when you encounter a pattern you have always known but never named. The visual language draws from three sources: **Hilma af Klint's** theosophical paintings (biomorphic forms in pastel veils), **Remedios Varo's** architectural dreamscapes (impossible rooms with hidden logic), and **Rorschach inkblots** (symmetrical ambiguity that invites projection). Every visual element should feel like it could be a symbol or could be nothing -- the viewer completes the meaning. The tone is mysterious without being gothic, intellectual without being clinical, and haunting without being dark. Think of a museum of the mind where each room is a different archetype: the Trickster's corridor tilts and distorts, the Mother's chamber breathes slowly, the Shadow's alcove absorbs light. Color temperature shifts across the scroll journey -- beginning in cool spectral violet (the unconscious) and warming toward amber and gold (individuation/integration). This thermal narrative is the site's hidden structure: the user literally scrolls from shadow into light. ## Layout Motifs and Structure The layout uses a **radial-convergence** system: content modules are arranged not on a conventional grid but along invisible concentric circles emanating from a central void at the page's midpoint. This void -- an empty circle roughly 200px in diameter -- is the "Self" in Jungian terms, the center that all archetypes orbit. Modules drift closer to or further from this center based on their thematic weight. **Primary structure:** 1. **The Threshold (0-100vh):** A full-viewport fog field with no visible navigation. The site title "archetype.boo" materializes letter by letter in the center, each letter arriving from a different direction as though summoned. Below the title, a single downward-pointing chevron pulses with a 4-second breathing animation. No other content is visible. The entire viewport is a single CSS gradient that shifts imperceptibly -- `background: radial-gradient(ellipse at 50% 50%, #1a1128 0%, #0d0a14 100%)` -- with a layered SVG noise filter at 3% opacity. 2. **The Circle of Archetypes (100vh-400vh):** As the user scrolls, twelve archetype modules emerge from the fog in a radial arrangement. Each module is a roughly square card (clamp(200px, 25vw, 360px)) positioned using CSS transforms calculated from a central point. The cards do not align to any traditional grid -- they orbit. Each card contains a Rorschach-style symmetrical SVG form, the archetype's name in small caps, and a single evocative sentence. Cards closer to the viewport center appear more opaque and larger; peripheral cards are translucent and smaller, creating forced perspective without 3D transforms. 3. **The Descent (400vh-600vh):** A single-column deep-scroll section where each archetype gets a full-viewport treatment. The layout shifts to **split-screen** here: the left half shows a slowly morphing abstract SVG form (the archetype's visual sigil), while the right half contains text that scrolls independently within a fixed container. The split ratio is 55/45 favoring the visual side. Background color transitions smoothly between archetype-specific hues using `scroll-timeline` CSS. 4. **The Integration (600vh-700vh):** All twelve archetype sigils converge toward the center void from Step 2, now visible again. They overlap and blend using CSS `mix-blend-mode: screen`, forming a composite mandala. The final state is a luminous golden circle -- all archetypes unified. Below this, a single line of text in Cormorant Garamond italic: "You already know." **Spatial rhythm:** Generous negative space (ma) between all sections. No section touches another. The gaps themselves are content -- they represent the unconscious space between recognized patterns. Minimum section gap: 15vh. ## Typography and Palette **Typography:** - **Display / Archetype Names:** "Cormorant Garamond" (Google Fonts) -- a refined, high-contrast serif with sharp wedge serifs and dramatic thin-to-thick stroke variation. Used at `clamp(2.5rem, 5vw, 5.5rem)` with weight 600 and letter-spacing `0.08em` in small caps (`font-variant: small-caps`). The classical elegance of Cormorant evokes scholarly authority -- this is typography that belongs in a leather-bound volume of Jungian texts. Its delicate hairlines become almost invisible at distance, creating a ghostly quality appropriate for archetypes that exist at the edge of perception. - **Body / Descriptions:** "Nunito Sans" (Google Fonts) -- a clean, rounded humanist sans-serif that provides warmth and approachability as counterbalance to Cormorant's severity. Weight 300 (light) for body text at `clamp(0.95rem, 1.2vw, 1.15rem)` with generous line-height (1.85). The rounded terminals of Nunito Sans soften the intellectual atmosphere, making dense psychological concepts feel inviting rather than intimidating. - **Monospace / Annotations:** "IBM Plex Mono" (Google Fonts) -- used sparingly for archetype indices, metadata labels, and the breathing chevron animation's timing readout. Weight 400 at `0.75rem`. Color: #6b5e7d (muted lavender-gray). This font appears as though it belongs to a clinical observation layer overlaid on the dreamscape -- the analyst's notation on the patient's vision. **Palette:** The palette follows a thermal arc from cold unconscious to warm individuation: - **#0d0a14** -- Void Black: The deepest background, used in The Threshold and between sections. Not true black but a blue-shifted near-black that preserves a sense of depth rather than flatness. - **#1a1128** -- Unconscious Indigo: Primary background for The Circle of Archetypes. A dense purple-black that suggests vast interior space. - **#3d2d5c** -- Shadow Violet: Used for card backgrounds and container surfaces. Enough contrast against the dark backgrounds to register as a distinct plane without being bright. - **#7b5ea7** -- Amethyst Mid: Accent color for borders, dividers, and the orbital paths that archetype cards follow. Also used for hover states and focus rings. - **#c9a86c** -- Individuation Gold: The warm accent that appears increasingly as the user scrolls deeper. Used for The Integration section's mandala glow, emphasized text, and the final convergence. This color is the reward -- it signals psychological wholeness. - **#e8dfd0** -- Parchment Light: Text color for body copy. Not white (too harsh against the dark backgrounds) but a warm, aged-paper tone that feels like reading by candlelight. - **#f0e6d2** -- Illumination Cream: Used for display typography and the hero title. Slightly warmer and brighter than Parchment Light, creating a subtle typographic hierarchy through temperature. - **#9b4d4d** -- Shadow Red: A muted, desaturated crimson used exclusively for The Shadow archetype's section and as a danger/transformation accent. Appears sparingly -- its rarity makes it psychologically potent. **Gradient system:** Sections transition using `linear-gradient(180deg, currentSectionColor 0%, nextSectionColor 100%)` applied to 15vh spacer divs between content sections. This creates the thermal arc without hard color breaks. ## Imagery and Motifs **No photographs. No stock illustrations.** Every visual element is generated from three primitive forms: the **circle** (wholeness/Self), the **triangle** (aspiration/conflict), and the **bilateral mirror** (the unconscious doubling that creates meaning from ambiguity). **Core motifs:** - **Rorschach sigils:** Each archetype has a unique symmetrical SVG form created by mirroring an organic inkblot shape along the vertical axis. These are rendered as `` elements with `fill: none; stroke: currentArchetypeColor; stroke-width: 1.5px` and animated using `stroke-dasharray` + `stroke-dashoffset` to draw themselves into existence when scrolled into view. The inkblots are abstract but suggestive -- the Hero's sigil might evoke a winged figure or a sword; the Trickster's might suggest a face or a knot. This ambiguity is intentional and central. - **Concentric orbit lines:** Thin (#7b5ea7 at 15% opacity) circular paths that connect archetype cards in The Circle section. These lines pulse gently with a 6-second `@keyframes` animation, suggesting gravitational relationships between archetypes. Where orbit lines intersect, small diamond nodes (4px, #c9a86c) mark the connection point. - **Fog layers:** Three overlapping `
` elements with CSS `backdrop-filter: blur()` at different intensities (2px, 8px, 20px) positioned at different z-indices. These drift laterally using a slow CSS animation (`transform: translateX` oscillating over 30 seconds). The fog layers create depth and obscure content at the periphery, forcing the eye toward the center. They also serve as transition devices -- thickening fog signals the approach of a new section. - **The breathing void:** The central empty circle that appears in both The Circle and The Integration sections. It has no fill, only a border of 1px #7b5ea7 with `box-shadow: 0 0 60px 20px rgba(123, 94, 167, 0.1)`. It pulses with a 4-second scale animation (0.97 to 1.03), synchronized with the chevron in The Threshold. This subtle animation makes the void feel alive -- it breathes, therefore it is. - **Shadow doubling:** Throughout the site, key visual elements cast a second, slightly offset and inverted version of themselves using CSS `transform: scaleX(-1) translateX(offset)` with reduced opacity (0.15). This creates a persistent mirror-image motif -- everything has a shadow self. The offset increases as the user scrolls deeper, suggesting the shadow separating from its source. ## Prompts for Implementation **Narrative structure is paramount.** This site tells the story of individuation -- the Jungian process of integrating unconscious archetypes into conscious awareness. The scroll IS the journey. Implementation must honor this: 1. **The Threshold must feel like a portal.** The initial viewport should load with nothing visible for 800ms, then the fog gradient fades in over 1200ms, then the title materializes letter by letter at 120ms intervals using `@keyframes` with `opacity` and `transform: translateY(-10px)`. Each letter arrives from a slightly different Y offset, creating a summoning effect. Use `animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1)` for a soft deceleration. No navigation bar -- the threshold is a commitment, not a menu. 2. **Archetype cards must orbit, not grid.** Position cards using `position: absolute` with `top` and `left` calculated from `Math.cos(angle) * radius` and `Math.sin(angle) * radius` where angle = `(index / 12) * 2 * Math.PI` and radius is responsive (`clamp(180px, 30vw, 450px)`). As the user scrolls through The Circle section, cards should rotate slowly (the entire arrangement turns 15 degrees over 300vh of scroll) using `scroll-timeline` or Intersection Observer-driven transforms. Cards at the "12 o'clock" position (closest to top of viewport) should be largest and most opaque. 3. **The Descent's split-screen must breathe.** The left-side SVG sigil should morph continuously using `` or CSS `@keyframes` on path `d` attributes, cycling through 3-4 related forms over 20 seconds. The right-side text container uses `overflow-y: auto` within a `position: sticky` frame so text scrolls independently of the page. The background color of the entire section shifts using `animation-timeline: scroll()` in CSS or a lightweight scroll listener that interpolates between two HSL values. 4. **The Integration mandala must feel earned.** All twelve sigils converge using staggered animations (80ms delay between each) with `cubic-bezier(0.34, 1.56, 0.64, 1)` easing (slight overshoot). As they overlap, `mix-blend-mode: screen` creates additive light blending. The final golden circle fades in only after all sigils have arrived. The closing text appears 600ms later with a simple `opacity` fade. No fanfare -- quiet revelation. 5. **Sound design consideration:** If audio is implemented, use a single sustained drone that shifts pitch across the scroll journey (lower in The Threshold, higher in The Integration). But audio should be opt-in, never autoplay. **AVOID:** CTA buttons of any kind. Pricing blocks. Stat-grids. Testimonial carousels. Navigation hamburger menus. Footer link columns. Cookie banners (handle through other means). Any element that breaks the immersive dreamscape. This is a full-screen narrative experience -- every pixel serves the story. **Technical notes:** Target modern browsers with `scroll-timeline` support. Provide graceful fallback using Intersection Observer for scroll-linked animations. All SVG sigils should be inline (not ``) for animation control. Total page weight target: under 200KB excluding fonts (all visuals are CSS/SVG, no raster images). ## Uniqueness Notes **Differentiators from other designs:** 1. **Radial layout as psychological map:** No other design in the collection uses a radial/orbital layout where content modules are positioned along concentric circles around a central void. This is not decorative -- it maps directly to the Jungian model of the psyche where archetypes orbit the Self. The layout IS the content's meaning, which is unique. 2. **Thermal narrative through color:** The deliberate shift from cold violet (#1a1128) to warm gold (#c9a86c) across the scroll journey encodes the individuation process as a color temperature arc. Other designs use color transitions decoratively; here the transition IS the story -- shadow to light, unconscious to conscious. 3. **Rorschach ambiguity as design principle:** Every visual element is deliberately ambiguous -- the SVG sigils could mean anything, the fog obscures as much as it reveals, the shadow-doubling motif suggests hidden selves. No other design in the collection uses intentional interpretive ambiguity as its primary visual strategy. The user doesn't consume this site -- they project onto it. 4. **The breathing void:** An empty circle as the site's gravitational and thematic center. Most designs fill every container; archetype.boo puts emptiness at its literal center and makes it the most important element on the page. This is anti-pattern by design -- the void is the Self, and the Self cannot be depicted, only approached. 5. **No navigation, no UI chrome:** The site has zero traditional interface elements. No nav bar, no footer, no buttons, no links (except possibly a muted "enter" prompt). The entire experience is a continuous scroll through psychological space. This radical commitment to narrative immersion distinguishes it from every other design that maintains conventional web UI framing. **Chosen seed/style:** surreal dreamscape promo -- adapted from the surrealist paradigm but redirected toward depth psychology rather than commercial promotion. The "promo" aspect is inverted: instead of promoting a product, the site promotes self-knowledge through encounter with archetypal forms. **Avoided patterns from frequency analysis:** - corporate aesthetic (83% -- deliberately avoided; no professional veneer) - card-grid layout (90% -- replaced with radial orbital arrangement) - photography imagery (90% -- zero photographs; all SVG/CSS generated) - centered layout (80% -- radial convergence instead of axis centering) - scroll-triggered animations used sparingly and purposefully, not as decoration (93% frequency suggests overuse) - gradient palette acknowledged (96%) but implemented as narrative device (thermal arc) rather than decorative background **Preferred underused patterns:** - ma-negative-space layout (10% -- generous void between sections is structural) - monochrome-adjacent palette (6% -- the palette is essentially a monochromatic violet scale with one warm accent) - kinetic-animated typography (10% -- the letter-by-letter title summoning) - serif-classic typography via Cormorant Garamond (26% -- less common than mono at 83%) - surreal aesthetic (23% -- underrepresented relative to corporate 83%)