# Design Language for archetype.works ## Aesthetics and Tone archetype.works inhabits the psychic territory between a Jungian analyst's consulting room and a brutalist art gallery at midnight -- a place where the primal forms of human consciousness are presented as monumental sculptures you can walk around, examine, and feel the gravity of. The aesthetic is avant-garde editorial meets archeological excavation: imagine thick black frames around empty space that slowly fills with meaning, like watching a Rorschach inkblot resolve into a face you recognize from a dream you forgot you had. The tone is scholarly-intellectual crossed with edgy-rebellious -- the confidence of someone who has mapped the unconscious and returned with blueprints. Not cold or clinical, but charged with the electricity of recognition. Every visual element should carry the weight of something ancient presented through a lens so modern it feels like prophecy. Think Agnes Martin's grids meeting Tadao Ando's concrete, with the narrative ambition of Olafur Eliasson's immersive installations. The site should feel like entering a temple that was designed by a typographer. No soft gradients, no comforting curves. The beauty here is in precision, negative space, and the slow revelation of forms that feel inevitable -- as if they existed before anyone designed them. The atmosphere oscillates between meditative stillness and sudden confrontation, like turning a corner in a gallery and encountering a mirror where you expected a painting. ## Layout Motifs and Structure The layout uses a **f-pattern** reading structure subverted by **ma-negative-space** philosophy -- vast expanses of emptiness that force the eye to rest before encountering the next archetype. This is not a grid system but a system of absences punctuated by presences. Content appears as isolated monoliths on a field of breathing space, each archetype given its own gravitational territory. **Primary structure:** - **The Threshold (0-100vh):** A single enormous glyph -- a custom SVG mark representing "the archetype of archetypes" -- rendered in pure black on a pale ground. It occupies 60% of the viewport, centered vertically but offset 15% to the left, creating asymmetric tension. No text, no navigation, no explanation. The glyph slowly rotates by 1 degree over 10 seconds via CSS transform, imperceptible but creating a subliminal sense of living presence. After 3 seconds of stillness, a single word fades in at the bottom-right: "Enter." Clicking it triggers a vertical split-wipe transition. - **The Gallery of Forms (100vh-500vh):** Each archetype occupies a full viewport height. Content is positioned using a two-column structure where the left column (40% width) holds the archetype's symbol -- a large geometric abstraction rendered as animated SVG -- and the right column (45% width, offset by 15% gap) holds the text. The 15% gap is sacred space, never violated. Each archetype section has a distinct background tint that shifts via CSS `color-mix()` as the user scrolls, creating a chromatic journey without explicit gradient transitions. - **The Mirror Chamber (500vh-600vh):** A single section where all archetype symbols from previous sections are displayed simultaneously in a hexagonal-honeycomb arrangement at reduced scale (each cell ~120px). As the user scrolls through this section, each symbol re-animates its entrance sequence in rapid succession, creating a cascading pattern-recognition moment. The honeycomb uses CSS Grid with `clip-path: polygon()` hexagonal masks. - **The Workshop (600vh-700vh):** The final section breaks the meditative rhythm with a horizontal-scroll sub-region embedded within the vertical flow. Here, archetypes are shown "in process" -- sketched, revised, deconstructed -- presented as a lateral timeline of creation. This section uses `overflow-x: auto` within a `scroll-snap-type: x mandatory` container. **Navigation:** A thin vertical line on the far-left edge of the viewport (2px wide, #1a1a1a) serves as both a scroll progress indicator and navigation. Small circular nodes appear along this line corresponding to each archetype section, expanding to 8px diameter on hover and revealing the archetype name via a tooltip positioned 20px to the right. This navigation is fixed-position and only appears after the Threshold section. ## Typography and Palette **Typography:** - **Display / Archetype Names:** "Cormorant Garamond" (Google Fonts) -- a high-contrast Garamond revival with sharp, elegant serifs that evoke the authority of carved inscriptions. Used at sizes from clamp(3rem, 8vw, 9rem) with weight 300 (light), creating the paradox of enormous text that whispers rather than shouts. Letter-spacing set to `0.08em` for maximum legibility at extreme sizes. Each archetype name is rendered with `font-variant: small-caps` and `font-feature-settings: 'liga' 1, 'onum' 1` for old-style numerals and ligatures. - **Body / Descriptions:** "Inter" (Google Fonts) -- a humanist sans-serif designed for screen readability, used at 18px/1.7 with weight 400. Its neutral clarity provides a functional counterpoint to the ornamental display type. Set with a max-width of 38ch per line for optimal reading rhythm. Paragraph spacing uses `margin-bottom: 1.5em` rather than `line-height` manipulation. - **Annotation / Labels:** "JetBrains Mono" (Google Fonts) -- a monospace typeface used at 11px/1.4 with weight 400 for small labels, section numbers, and metadata. Rendered in uppercase with `letter-spacing: 0.15em` and reduced opacity (0.5) to create a secondary information layer that feels like margin notes in an academic text. - **Typographic interaction:** Archetype names use a kinetic-animated reveal: each character enters independently with a 40ms stagger delay, sliding up 20px from below with `opacity: 0` to `opacity: 1` using `cubic-bezier(0.16, 1, 0.3, 1)`. The animation triggers on scroll-intersection, not on page load. **Palette:** The palette is a triadic scheme built around three anchor colors that represent the three Jungian realms -- consciousness, personal unconscious, and collective unconscious: - **#0d0d0d** (Void Black) -- Primary background and the color of the collective unconscious. Used for large background fields, the navigation line, and display type. Near-black rather than pure black, preserving warmth. - **#f2efe9** (Bone White) -- Primary foreground and the color of consciousness. Used for text on dark backgrounds and as the Threshold section background. A warm off-white with a hint of yellow that reads as aged parchment under certain lighting. - **#8b2e2e** (Archetype Red) -- The triadic accent representing the personal unconscious, where archetypes are first encountered. Used sparingly: for the scroll progress indicator, hover states, active navigation nodes, and a single horizontal rule beneath each archetype name. A deep, dried-blood red that carries weight without aggression. - **#2a3d4f** (Depth Blue) -- Secondary accent for the Mirror Chamber and Workshop sections. A cold, deep blue-gray that suggests oceanic depth. Used for secondary backgrounds and the hexagonal cells. - **#c4a35a** (Inscription Gold) -- Tertiary accent used only for the archetype symbols' stroke color during their animated reveal. A muted, antique gold that references gilded manuscripts and museum labels. Never used for text. - **#3a3a3a** (Charcoal) -- Utility color for borders, dividers, and the navigation line's inactive state. Subtle enough to define structure without competing with content. **Color logic:** Dark sections (#0d0d0d background, #f2efe9 text) alternate with light sections (#f2efe9 background, #0d0d0d text) in a strict rhythm. The alternation is the pulse of the site -- conscious/unconscious, visible/hidden, known/unknown. ## Imagery and Motifs **Core Visual Motifs:** - **Archetypal Glyphs:** Each archetype is represented by a custom geometric abstraction rendered as SVG. These are not literal illustrations but pure geometric compositions -- circles inscribed in squares, triangles bisected by lines, spirals contained in rectangles -- that evoke the archetype's essence through proportion and form alone. The glyphs use only stroke (no fill), rendered in #c4a35a (Inscription Gold) at 2px stroke-width, with a `stroke-dasharray` animation that draws the path over 2.5 seconds when the glyph enters the viewport. Each glyph is approximately 300x300px on desktop, scaling down to 180x180px on mobile. - **The Vertical Line:** A recurring motif of a single vertical line (2px, #3a3a3a) that appears in multiple contexts -- as the navigation spine, as a separator between columns, as a decorative element at the start of each archetype section. The line represents the axis mundi, the world-axis that connects all levels of consciousness. It is always exactly centered in its context and always extends the full height of its container. - **Negative Space Frames:** Instead of traditional borders or cards, content is framed by generous negative space -- minimum 80px padding on all sides of text blocks, with archetype names given 120px of clear space above and below. The negative space IS the frame. On dark sections, a faint 1px border in #3a3a3a may appear at the outer edges of content blocks, barely visible, suggesting containment without enforcing it. - **Hexagonal Cells:** Used exclusively in the Mirror Chamber section. Each hexagon is rendered via CSS `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)` with a 4px gap between cells. The hexagonal grid is built with CSS Grid using alternating row offsets. Each cell has a subtle inner shadow (`box-shadow: inset 0 0 30px rgba(13,13,13,0.3)`) that creates depth. - **Grain Texture:** A subtle film grain overlay applied globally via a CSS pseudo-element on the `` using an SVG `` with `` and ``. The grain is rendered at 5% opacity, adding analog warmth to the digital surfaces. This is the only texture in the entire design -- all other surfaces are flat. **Imagery approach:** No photography. No illustrations. No icons beyond the archetypal glyphs. The site achieves its visual richness entirely through typography, geometric SVG, negative space, and color. This ascetic approach reinforces the concept that archetypes are forms, not images -- they exist prior to representation. ## Prompts for Implementation **Narrative Architecture:** The site is a descent and return -- a journey into the unconscious to encounter archetypes, and a re-emergence carrying their forms. The scroll IS the journey. Implementation must respect the ceremonial pacing: no content should feel rushed, no transition should be abrupt. Every element earns its place through the gravity of empty space around it. **Animation Philosophy:** 1. **Path-draw SVG for glyph reveals:** Each archetypal glyph uses `stroke-dasharray` set to total path length and `stroke-dashoffset` animated from full length to 0 over 2.5 seconds with `cubic-bezier(0.65, 0, 0.35, 1)`. The drawing should feel like a hand inscribing the symbol -- deliberate, unhurried, precise. Triggered by IntersectionObserver at 0.3 threshold. 2. **Staggered character animation for archetype names:** Each letter of the archetype name is wrapped in a `` and animated individually with 40ms delay between characters. The animation: `translateY(20px)` to `translateY(0)`, `opacity: 0` to `opacity: 1`, duration 600ms, easing `cubic-bezier(0.16, 1, 0.3, 1)`. This creates the sensation of words materializing from beneath the surface. 3. **Color-mix scroll transitions:** Between archetype sections, the background color transitions using CSS `color-mix(in oklch, var(--color-a), var(--color-b) var(--scroll-progress))` controlled by a scroll-driven animation (`animation-timeline: scroll()`). No JavaScript color interpolation -- pure CSS scroll-linked animation. 4. **Hexagonal cascade in Mirror Chamber:** When the Mirror Chamber enters the viewport, hexagonal cells appear in a spiral pattern from center outward, each delayed by 60ms from the previous. Each cell scales from 0.8 to 1.0 and fades from 0 to 1 over 400ms. The total cascade duration for all cells should not exceed 2 seconds. 5. **Horizontal scroll momentum:** The Workshop section uses CSS `scroll-snap-type: x mandatory` with `scroll-snap-align: center` on each item. Items entering the visible area trigger a subtle scale animation (0.95 to 1.0, 300ms) to provide tactile feedback. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero banners with stock photography, hamburger menus with slide-out panels, cookie consent modals, floating action buttons, newsletter signup popups. The site has no commercial intent -- it is a gallery, a grimoire, a meditation space. **Full-screen narrative emphasis:** Every section should feel like a full-screen experience. Even the two-column archetype pages should breathe within a full viewport height. Vertical rhythm is measured in viewport units (vh), not pixels. The minimum section height is 100vh. Content that doesn't fill the viewport is centered vertically within it, surrounded by its negative space frame. **Technical notes:** - Use CSS `scroll-behavior: smooth` globally - IntersectionObserver with `rootMargin: '0px 0px -20% 0px'` for all scroll-triggered animations to ensure elements are well within view before animating - All SVG glyphs should be inline (not `` or `background-image`) for animation control - CSS custom properties for all colors, spacing values, and timing functions to enable easy theming - The grain overlay filter should use `pointer-events: none` to avoid blocking interactions ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero-imagery philosophy:** While 90% of designs rely on photography and 70% on minimal illustration, archetype.works uses absolutely no representational imagery. Every visual element is geometric, typographic, or spatial. The site proves that a rich visual experience can emerge from pure form, proportion, and negative space alone -- embodying the concept that archetypes precede images. 2. **Triadic color scheme with Jungian mapping:** The palette is not decorative but semantic -- each of the three anchor colors maps to a specific layer of the Jungian psyche (consciousness, personal unconscious, collective unconscious). The alternation of dark and light sections is not a design choice but a structural metaphor for the oscillation between known and unknown. Only 3% of analyzed designs use a triadic scheme. 3. **F-pattern subverted by ma-negative-space:** The f-pattern (used in only 6% of designs) is here combined with the Japanese concept of ma (negative space as active element, used in only 10% of designs). The result is a layout where the reading pattern exists but is constantly interrupted by deliberate emptiness, forcing a contemplative pace that no card-grid or bento-box layout can achieve. 4. **Kinetic typography as primary animation:** Instead of relying on parallax (50%) or generic scroll-triggered effects (93%), the primary animation vocabulary is the staggered character reveal and SVG path-draw. These two techniques carry the entire motion language, creating consistency through restraint. No particle effects, no cursor-following, no elastic bounces. 5. **Hexagonal-honeycomb as climactic moment:** The hexagonal layout (used in only 3% of designs) appears exclusively in the Mirror Chamber section as a structural crescendo -- the only moment where the strict two-column rhythm breaks. Its rarity within the site mirrors its rarity in the portfolio, making it a genuine surprise. **Chosen seed/style:** avant-garde fashion lookbook -- reinterpreted from fashion editorial into archetypal grimoire. The lookbook's emphasis on individual presentation (each model gets a full page), dramatic negative space, and editorial typography maps directly to the archetype gallery concept, where each archetype receives full-viewport reverence. **Avoided patterns from frequency analysis:** - corporate aesthetic (83% -- replaced with avant-garde/scholarly) - photography imagery (90% -- replaced with geometric SVG only) - card-grid layout (90% -- replaced with f-pattern + ma-negative-space) - centered layout (80% -- replaced with asymmetric two-column) - gradient palette (96% -- replaced with flat triadic color blocks with color-mix transitions) - warm palette (93% -- replaced with cool triadic anchored by void black and depth blue) - mono typography (83% -- mono used only as tertiary annotation face, not primary) - scroll-triggered at 93% -- while scroll triggers are used, they are limited to two specific techniques rather than applied broadly