# Design Language for archetypic.dev ## Aesthetics and Tone archetypic.dev inhabits the space where Carl Jung's collective unconscious meets avant-garde editorial design -- a site that treats archetypes not as dusty psychological categories but as living, breathing visual entities that shift and recombine before the viewer's eyes. The aesthetic draws from the tradition of high-concept fashion lookbooks: each archetype is presented as a "look" -- a full-page composition of type, color, and abstract form that communicates an entire personality in a single viewport. Think of it as a runway show for ideas rather than garments, where each archetype walks the stage in its own visual language. The mood oscillates between scholarly gravitas and bold creative provocation. There is a tension at the core: the archetypes themselves are ancient, primordial, universal -- but their presentation is aggressively contemporary, using oversized typography, stark negative space, and unexpected color collisions. The site should feel like opening an issue of a magazine that doesn't exist yet -- something between Emigre, The Gentlewoman, and a Jungian textbook redesigned by Neville Brody. Every element carries intentionality; nothing decorates, everything signifies. The tone is **scholarly-intellectual** crossed with **edgy-rebellious** -- the site takes archetypes seriously as a framework for understanding human experience, but refuses to present them in the expected way. There is a dry wit in the juxtapositions: a primordial "Shadow" archetype rendered in bubblegum pink, a nurturing "Mother" archetype expressed through jagged geometric shards. The design language itself IS the argument: that archetypes are not fixed, that the primordial is always being reborn in contemporary form. ## Layout Motifs and Structure The layout follows a **magazine-spread** composition with **ma-negative-space** philosophy, creating the feel of turning pages in an oversized art book. There is no conventional grid. Instead, the site is organized as a sequence of full-viewport "plates" -- each one a self-contained composition devoted to a single archetype or concept. The transitions between plates are the primary interaction: not scrolling but a deliberate, weighted page-turn gesture. **Primary structure:** - **The Index Plate**: The opening viewport presents a typographic composition of the word "ARCHETYPIC" at extreme scale -- so large that only fragments of letters are visible, creating abstract forms. The letterforms themselves function as windows: through the counters and bowls of the letters, abstract color fields and moving textures are visible, hinting at the archetypal content within. A single thin sans-serif line at the bottom reads "A Pattern Language for the Unconscious" in all-caps with extreme letter-spacing (0.5em). No navigation menu is visible -- the entire viewport is the statement. - **The Codex**: Below the index plate, the archetypes are presented in a sequence of full-bleed plates. Each plate follows a strict compositional rule: one massive typographic element (the archetype name), one abstract visual field (its emotional color), and one fragment of text (its description). These three elements are positioned according to the **rule of thirds** but with deliberate violations -- the text might bleed off the right edge, the type might be rotated 90 degrees and pinned to the left margin, the color field might be a single thin stripe bisecting the viewport diagonally. Each plate has a unique composition but shares the same underlying tension between structure and disruption. - **The Intersection Plates**: Between every third archetype, an "intersection plate" appears -- a viewport that overlays two archetype color palettes and typographic treatments simultaneously, creating a visual collision. These plates represent the Jungian concept of archetype interaction: the Hero meeting the Shadow, the Trickster encountering the Sage. The intersection plates use **split-screen** composition (vertical or diagonal) with the two halves bleeding into each other at the seam. - **The Colophon**: The final plate functions as both credits and manifesto. It presents a dense block of justified text (the only justified text on the site) explaining the project's intellectual framework, set in a classic serif at a comfortable reading size. This plate breaks every rule established by the preceding plates -- it is calm, conventional, readable -- and in doing so becomes the most surprising moment in the experience. **Spatial philosophy:** The dominant spatial principle is **ma** (the Japanese concept of pregnant emptiness). Each plate uses no more than 30% of the viewport area for content, leaving the remaining 70% as active negative space that establishes mood through color and texture. Content is never centered -- it gravitates toward edges, corners, and margins, creating diagonal tension lines across the empty space. ## Typography and Palette **Typography:** - **Display / Archetype Names**: "Dela Gothic One" (Google Fonts) -- a high-impact Japanese-influenced display face with extreme weight and compressed proportions. Its strokes have a calligraphic quality despite being geometric, bridging the gap between ancient brush traditions and contemporary display typography. Used at enormous scale (clamp(8rem, 20vw, 24rem)) for archetype names. The weight and density of this face makes each archetype name feel like a carved inscription or a brand mark. Applied with `text-transform: uppercase` and `letter-spacing: -0.03em` for maximum visual density. - **Body / Descriptions**: "Cormorant Garamond" (Google Fonts) -- an elegant, high-contrast serif with pronounced thin strokes and generous x-height. Its classical proportions reference the intellectual tradition of archetype theory while its display-quality details maintain visual interest at smaller sizes. Used for all descriptive text at 1.125rem/1.7 line-height. The contrast between Dela Gothic One's brutalist density and Cormorant Garamond's refined elegance embodies the site's core tension between the raw and the cultivated. - **System / Navigation and Labels**: "Space Grotesk" (Google Fonts) -- a geometric sans-serif with monospaced-influenced spacing, used for all functional text: plate numbers, navigation hints, the index line. Set at 0.75rem with letter-spacing: 0.3em and text-transform: uppercase. Its technical precision provides a neutral frame for the more expressive faces. **Color Palette:** The palette is built on a **triadic** structure with extreme desaturation in two corners and full saturation in the third, creating a system where most of the site lives in muted territory but each archetype can claim one moment of shocking chromatic intensity. - **#0e0c15** (Void Indigo) -- The primary background. A blue-black so deep it reads as absence rather than color. Used for 70%+ of the visual field. Not pure black -- the blue undertone creates depth and prevents the flatness of #000. - **#f0ece4** (Parchment) -- The primary text color against dark backgrounds. A warm off-white with yellow undertones that references aged paper and feels less clinical than pure white. Used for body text and thin UI elements. - **#e63946** (Arterial Red) -- The accent color and primary chromatic statement. A warm, slightly orange-shifted red that references blood, fire, and urgency. Used sparingly for archetype-specific color fields and the single accent stroke on the Index Plate. When this red appears against the Void Indigo, it commands absolute attention. - **#2b2d42** (Slate Dusk) -- A mid-tone blue-gray used for secondary surfaces, the Intersection Plate backgrounds, and subtle UI elements. Dark enough to feel like shadow, light enough to separate from Void Indigo. - **#8d99ae** (Mist) -- A cool, desaturated blue-gray for tertiary text, plate numbers, and navigation hints. Reads as "whispered" text against both dark and light backgrounds. - **#edafb8** (Blush) -- A muted pink that serves as the "unexpected" color in the system. Used for specific archetype color fields (the Shadow, the Anima/Animus) where the expectation of darkness is subverted. Its softness against the angular typography creates productive dissonance. - **#540b0e** (Dried Blood) -- A near-black red used for depth effects -- gradients that transition from Void Indigo through Dried Blood into Arterial Red, creating the impression of color emerging from darkness. Used in the Intersection Plates as a blend layer. **Archetype-specific palettes:** Each archetype plate introduces one unique color that appears nowhere else on the site, drawn from a wider spectrum -- sulfurous yellow (#d4a017) for the Trickster, deep ocean teal (#1b4965) for the Mother, burnt amber (#bc6c25) for the Hero. These per-plate colors reinforce the sense that each archetype possesses its own visual sovereignty. ## Imagery and Motifs **Core Visual Motifs:** - **Fragmented letterforms as abstract art**: The primary visual identity of the site. Rather than illustrations or photographs, archetypic.dev uses its own typography as imagery. Archetype names rendered at extreme scale are cropped, rotated, and layered so that individual letter strokes become abstract compositions -- the crossbar of an "A" becomes a horizon line, the bowl of a "P" becomes a crescent moon, the descender of a "g" becomes a hanging thread. These letterform fragments are rendered as SVG elements with path-draw animation on entry, so each abstract shape is seen being inscribed in real-time. - **Geometric arcana**: Each archetype is associated with a simple geometric symbol inspired by alchemical and astrological notation but redrawn in a contemporary, minimal style. The Hero is a triangle (pointing up), the Shadow is an inverted triangle, the Trickster is a circle bisected by a zigzag, the Sage is a square with a circle inscribed, the Mother is concentric circles. These symbols appear as subtle watermarks behind the text, at roughly 40% opacity in the Mist color, large enough to fill the viewport. They are rendered as single-stroke SVG paths that draw themselves on scroll entry. - **Diagonal tension lines**: Thin (1px) lines in Mist color that extend from content elements to the edges of the viewport, creating visual vectors that guide the eye across the empty space. These lines suggest the invisible connections between archetypes -- the web of the collective unconscious rendered as a geometric diagram. Lines animate in with a stagger effect, appearing one by one as if being drawn by a compass. - **Texture grain**: A subtle film-grain noise overlay (CSS filter) at 3-5% opacity across all backgrounds, adding analog warmth to the otherwise clean digital surfaces. The grain is animated -- not a static texture but a gently shifting field that breathes life into the large empty spaces. This prevents the Void Indigo from feeling like a dead screen. - **No photography, no illustrations, no icons**: The site's visual language is exclusively typographic and geometric. This restriction is deliberate: archetypes are abstractions, and representing them with figurative imagery would reduce them to specific instances. The site's imagery must remain abstract to preserve the universal quality of its subject matter. ## Prompts for Implementation **Narrative Architecture:** The site is a single continuous scroll experience structured as a codex -- a book of archetypes to be read sequentially. Each viewport-height section is a "plate" with its own composition, and the transitions between plates are the primary source of animation and delight. There is no navigation in the traditional sense; the scroll IS the navigation. A small, fixed plate counter in the bottom-right corner (e.g., "04 / 12") provides positional awareness in the Space Grotesk system font. **Animation Philosophy:** 1. **Path-draw SVG for archetype symbols**: Each geometric arcana symbol draws itself as it enters the viewport, using `stroke-dasharray` and `stroke-dashoffset` animation. Drawing duration: 2.5 seconds with an `ease-in-out` timing function. The symbol begins drawing from the bottom of its path and proceeds clockwise, mimicking the gesture of ritual inscription. 2. **Magnetic cursor interaction on archetype names**: When the cursor approaches the large Dela Gothic One archetype names, individual letters respond with subtle magnetic attraction -- shifting 2-5px toward the cursor. This gives the typography a sense of sentience, as if the archetype is aware of being observed. The effect uses `requestAnimationFrame` and per-character `` wrapping with CSS transforms. On touch devices, this effect is replaced by a slight parallax shift on device tilt via the `DeviceOrientationEvent`. 3. **Fade-reveal with opacity gradient for body text**: Descriptive text does not pop into existence; it fades in from 0 to 1 opacity over 800ms as its plate scrolls into position. The fade is non-uniform -- text at the top of the block appears first, with each subsequent line delayed by 40ms, creating a reading-speed reveal that draws the eye downward through the content. 4. **Cross-dissolve for plate transitions**: As one plate scrolls out and the next scrolls in, the background color transitions through a 200vh-tall gradient zone where both plates' colors mix. This prevents hard cuts between chromatic environments and creates the impression of one archetype bleeding into the next -- a visual metaphor for the fluid boundaries between psychological archetypes. 5. **Counter-animation for plate numbers**: The plate counter in the corner animates between numbers using a slot-machine effect -- digits scroll vertically rather than simply changing. This micro-interaction adds mechanical precision to the otherwise organic transitions. **Technical Emphasis:** - **CSS `scroll-snap-type: y mandatory`** on the main container ensures each plate locks to the viewport. `scroll-snap-align: start` on each plate section. This creates the page-turning rhythm essential to the lookbook metaphor. - **CSS `mix-blend-mode: difference`** on the diagonal tension lines allows them to remain visible against both dark and light backgrounds without color changes. - **CSS `clip-path: polygon()`** for the split-screen Intersection Plates, with animated clip-path transitions that shift the diagonal seam as the user scrolls through the plate. - **No external libraries for animation** -- all animation uses CSS transitions, CSS `@keyframes`, and the Web Animations API. The only JavaScript is for scroll position detection (IntersectionObserver), magnetic cursor math, and the plate counter logic. This keeps the site fast and dependency-free. - **AVOID**: CTA buttons, pricing sections, testimonial carousels, stat-grid counters, team photo grids, newsletter signup forms, cookie banners, hamburger menus, gradient mesh backgrounds, stock photography, and any element that signals "SaaS landing page." This is an art object, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Typography-as-imagery exclusivity**: While other designs use generative art, photography, or custom illustrations as their visual identity, archetypic.dev uses exclusively its own typographic elements as imagery. Letterform fragments, cropped and rotated at extreme scale, replace all conventional visual content. No other design in the portfolio treats typography as the sole source of visual complexity. 2. **Plate-based codex structure instead of continuous scroll**: Rather than the flowing sections or grid-based layouts used elsewhere, the site is structured as discrete, scroll-snapped viewport plates -- each a self-contained composition. This imposes the rhythm of page-turning rather than scrolling, creating a fundamentally different temporal experience. The user reads the site like a book rather than scanning it like a feed. 3. **Triadic palette with deliberate desaturation asymmetry**: While other designs use warm gradients, muted earth tones, or high-contrast duotones, this palette uses a triadic structure (#0e0c15, #f0ece4, #e63946) where two points are near-neutral and the third is chromatically intense. This creates a visual economy where color is a rare event with maximum impact -- the opposite of the gradient-heavy approach dominant in other designs. 4. **Per-archetype chromatic sovereignty**: Each content plate introduces a unique color that exists nowhere else on the site. This means the color system is not fixed but expands as the user progresses, creating a cumulative chromatic experience. No other design in the portfolio uses a growing palette. 5. **Geometric arcana symbol system**: The site creates its own iconographic language of simple geometric symbols for each archetype, drawn from alchemical and astrological traditions but rendered in contemporary minimal style. These symbols provide visual shorthand without resorting to conventional iconography. 6. **Ma (negative space) as dominant visual element**: While other designs may use whitespace, archetypic.dev makes emptiness the primary visual element -- 70%+ of each plate is intentionally empty, with content pushed to edges and corners. The negative space is not passive but active: textured with grain, colored with meaning, crossed by tension lines. **Document chosen seed/style:** avant-garde fashion lookbook -- reinterpreted as a "lookbook for ideas" where each archetype is presented as a "look" in a conceptual fashion editorial, with the compositional drama and typographic boldness of high-end fashion publishing. **Avoided patterns from frequency analysis:** - Avoided corporate aesthetic (83% overused) in favor of avant-garde/editorial approach - Avoided card-grid layout (90% overused) in favor of full-viewport plate composition with ma-negative-space (10%) - Avoided photography imagery (90% overused) in favor of pure typographic and geometric visual language - Avoided gradient palette (96% overused) in favor of triadic palette with desaturation asymmetry (3%) - Avoided mono typography (83% overused) in favor of display-bold + serif-classic + geometric-sans combination - Avoided mysterious-moody tone (40% overused) in favor of scholarly-intellectual + edgy-rebellious blend - Preferred magnetic cursor interaction (10%) and fade-reveal (13%) and counter-animate (16%) over the dominant scroll-triggered pattern (93%) - Preferred kinetic-animated typography (10%) via the magnetic letter effect