# Design Language for archetype.boo ## Aesthetics and Tone archetype.boo inhabits the visual world of a forgotten film archive discovered in a moss-covered vault deep within an old-growth forest -- the kind of place where 35mm reels sit in leather-bound canisters on shelving made from reclaimed oak, where projector light cuts through dust motes and pine-scented air, and where every frame tells a story that feels older than the medium itself. The aesthetic is **cinematic** in the truest sense: not the polished blockbuster cinema of multiplexes, but the grainy, deliberate compositions of Andrei Tarkovsky's forests, the chiaroscuro fog of Ridley Scott's early work, and the slow tracking shots through David Fincher's meticulously lit interiors. Every element on the page should feel like it was framed by a cinematographer who understands that darkness is as important as light. The tone is **mysterious-moody** -- not horror-adjacent, but the kind of quiet unease that comes from walking through an ancient forest at twilight, where the canopy filters daylight into deep green shafts and the silence is thick enough to feel on your skin. There is a sense of hidden knowledge, of archetypes lurking beneath surfaces, of stories that have been told a thousand times in a thousand cultures but never quite like this. The domain name itself -- archetype.boo -- suggests something primal and slightly unsettling, a Jungian shadow given a digital address. The experience should feel like opening a leather-bound grimoire in a candlelit study: reverent, charged, anticipatory. This is not a site that announces itself loudly. It reveals itself slowly, like fog lifting from a forest floor, like the developing process of a photograph emerging in a darkroom tray. Every interaction should feel earned, every reveal deliberate, every moment of stillness purposeful. ## Layout Motifs and Structure The layout follows a **z-pattern** reading path -- a deliberate, cinematic technique that mirrors the way the eye naturally scans a movie frame. Unlike the centered or single-column layouts that dominate the current portfolio, the z-pattern creates diagonal energy across the viewport, guiding the viewer's gaze from top-left to top-right, then diagonally down to bottom-left, and across to bottom-right. This creates a sense of visual momentum that feels like a camera pan across a scene. **Primary Structure:** - The page opens with a full-viewport hero that functions as an "establishing shot" -- a slow-burning reveal where the background is a deep forest green gradient overlaid with a subtle leather grain texture. Content is positioned according to the z-pattern: the domain logotype sits at top-left, a single atmospheric tagline stretches to top-right, and the eye is pulled diagonally down-left to an anchor point (a glowing particle cluster) before being carried right to the first content block. - Below the hero, the z-pattern repeats at section level. Each section is structured as a "scene" with content alternating between left-weighted and right-weighted placement. Odd-numbered sections place their primary content block (text or visual) at the left with a decorative particle trail extending toward the upper-right. Even-numbered sections reverse this, creating a persistent zigzag rhythm down the page. - Between sections, there are "interstitial frames" -- narrow horizontal bands (15-20vh) that function as scene transitions. These contain nothing but particle effects drifting across a dark background, providing visual breathing room that mimics the black frames between film cuts. - The overall page width is generous but contained: content occupies a maximum of 1200px, but the background elements (particle effects, leather textures, gradient washes) extend full-bleed to the viewport edges, creating the sensation of looking through a wide-angle lens where the subject is sharp and the periphery falls into atmospheric darkness. **Navigation:** Navigation is minimal and cinematic. A fixed, semi-transparent bar at the top contains only the domain logotype (left) and a single "chapters" toggle (right) that slides open a dark overlay listing section anchors in Commissioner typeface, numbered like film reels (01, 02, 03...). No hamburger icon -- instead, three thin horizontal lines that are staggered in length (long, medium, short), resembling film strip sprocket marks. **Grid System:** A 12-column CSS grid with generous gutters (clamp(1.5rem, 3vw, 3rem)) underlies the z-pattern. Content blocks typically span 5-7 columns, never the full 12, ensuring that negative space always frames the content like the letterboxing of a widescreen film. ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) -- a variable-axis sans-serif with a wide weight range (100-900) and a distinctive feature: its `FLAR` (flare) axis, which controls the terminal shapes of letterforms from completely flat (sans-serif) to subtly flared (quasi-serif). For archetype.boo, the FLAR axis is set to approximately 50, creating letterforms that are neither purely sans nor purely serif but something uncanny in between -- fitting for a site about archetypes and the liminal. Headlines use weight 300 at large sizes (clamp(2.8rem, 5.5vw + 1rem, 5.5rem)) for a thin, cinematic title-card feel. Letter-spacing is set to `0.08em` for an airy, deliberate cadence. All headlines are rendered in sentence case. A subtle `text-shadow: 0 0 40px rgba(34, 87, 52, 0.3)` gives headlines a soft, forest-bioluminescent glow. - **Body Text:** "Commissioner" at weight 400 with FLAR axis set to 30 (more sans-like for readability). Size: `clamp(1rem, 1.1vw + 0.5rem, 1.2rem)`. Line-height: 1.75 for generous vertical rhythm that mimics the pacing of subtitles in a slow-burn film. Color: Fog Pale (#C8D0C5) against dark backgrounds, creating enough contrast for readability while maintaining the muted, atmospheric tone. Paragraphs have a max-width of 38em to prevent overlong lines. - **Accent / Captions:** "Commissioner" at weight 200, FLAR axis at 70 (more flared, more decorative). Used at 0.85rem for figure captions, timestamps, and chapter numbers. Rendered in `letter-spacing: 0.15em; text-transform: uppercase` to create a small-caps effect without actual small caps. Color: Lichen Gold (#8B9A3E) for a subtle organic highlight. - **Monospace (sparingly):** When displaying code-like or archival reference text, use a thin rule divider and Commissioner at weight 200 with `font-feature-settings: "tnum"` for tabular numbers. No separate monospace font -- the Commissioner variable font handles all roles, creating a cohesive typographic identity that is unprecedented in the portfolio. **Palette:** The palette is drawn from the deep forest at dusk, aged leather in firelight, and bioluminescent fungi on rotting logs. | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary Background | Midnight Canopy | #0C1A0F | Main page background, the deepest green-black of a forest at night | | Secondary Background | Bark Shadow | #1A2B1E | Card backgrounds, overlay panels, section alternation | | Primary Text | Fog Pale | #C8D0C5 | Body text, a silvery green that reads as mist between trees | | Headline Accent | Deep Moss | #225734 | Headline glow effects, border accents, active states | | Highlight | Lichen Gold | #8B9A3E | Captions, links, interactive highlights, particle cores | | Warm Accent | Tanned Leather | #7A4B2A | Hover states, texture overlays, decorative borders | | Atmospheric | Spore Dust | #3D5A3A | Gradient midpoints, particle trail fade color | | Bright Accent | Foxfire | #4AE06C | Rare emphasis moments, glow pulses on interaction, particle burst color | The palette operates on a dark-field principle: the background is always the darkest value, and content emerges from it like bioluminescence. Gradients are radial rather than linear, emanating from content focal points as if the content itself is the light source. The leather warm accent (#7A4B2A) appears only in texture overlays and hover states, grounding the forest greens with organic warmth. ## Imagery and Motifs **Leather Texture as Foundational Surface:** The primary imagery mode is **leather-texture** -- not the glossy, commercial leather of luxury brand sites, but the weathered, cracked, patina-rich surface of a century-old book binding or a well-worn saddlebag. This texture functions as the material substrate of the entire site. The hero section background layers a CSS-generated leather grain effect using SVG `` filters (baseFrequency 0.65, numOctaves 4, type "fractalNoise") composited over the Midnight Canopy background through a `multiply` blend mode at 15% opacity. This creates a barely-perceptible tactile quality that registers subconsciously -- the user feels the surface without consciously seeing it. Specific leather texture implementations: - **Hero background:** Full-viewport leather grain at 12-15% opacity, with a radial gradient mask that makes the texture most visible near the center (where the eye naturally focuses) and fades toward edges - **Section dividers:** Thin horizontal bands with leather texture at 30% opacity and a `border-top: 1px solid rgba(122, 75, 42, 0.3)` -- like the tooled edge of a leather binding - **Card surfaces:** Interactive elements have a leather-textured background that becomes more visible (opacity increases from 8% to 20%) on hover, as if pressing your thumb into a leather surface and seeing the grain darken - **Chapter overlay:** The navigation overlay uses leather texture at 25% opacity as its background, evoking the inside cover of an old book **Particle Effects as Atmospheric Motif:** The secondary visual system is **particle-effects** -- specifically, particles that evoke forest spores, fireflies, and the luminescent dust motes of a projector beam. These are not the aggressive particle explosions of tech demos; they are slow, organic, and drift with the weight of things that float in still air. Particle system specifications: - **Ambient drift particles:** 40-60 small particles (2-4px) in Lichen Gold (#8B9A3E) at 20-40% opacity, drifting slowly upward across the viewport at 0.3-0.8px per frame. Movement follows a sine-wave oscillation on the x-axis (amplitude: 30-60px, period: 8-14 seconds) to create organic, non-mechanical motion. These are ever-present, like dust in a sunbeam. - **Scroll-activated particle bursts:** When the user scrolls past section boundaries, a cluster of 15-25 particles in Foxfire green (#4AE06C) at 60% opacity emanates from the center of the interstitial frame and disperses radially over 2 seconds, fading to 0% opacity. This marks scene transitions like a visual chime. - **Cursor proximity glow:** Particles within 150px of the cursor brighten from 20% to 60% opacity and increase in size by 50%, creating a flashlight-in-the-dark effect as the user moves through the page. This uses `requestAnimationFrame` with distance-based calculations, never `mousemove` event handlers directly on particles. - **Connection threads:** When two or more particles drift within 80px of each other, a thin line (0.5px, Spore Dust #3D5A3A, 30% opacity) connects them briefly, evoking mycelium networks or neural pathways. Lines fade over 1.5 seconds as particles drift apart. **Cinematic Film Elements:** - **Letterbox bars:** The hero section includes subtle letterbox-style horizontal bars (3vh height) at top and bottom in pure black (#000000), which fade to transparent over the first 20vh of scroll. This frames the initial viewport as a widescreen film frame. - **Film grain overlay:** A full-viewport CSS animation using `background-image` with a tiling noise pattern, animated with `@keyframes` that shifts `background-position` randomly every 100ms. Opacity: 4%. This adds the barely-perceptible grain of 35mm film stock to every section. - **Vignette:** A persistent `box-shadow: inset 0 0 150px rgba(0,0,0,0.4)` on the viewport container, darkening the edges of the screen like a camera lens vignette. ## Prompts for Implementation **Full-Screen Narrative Experience:** The entire site must feel like watching a slow-burn mystery film in a forest theater. The experience opens with 2 seconds of pure Midnight Canopy (#0C1A0F) darkness -- nothing visible, no content, just the leather grain texture subtly pulsing at 8% opacity (animated via a slow CSS `opacity` oscillation between 6% and 10% over 4 seconds). Then, the letterbox bars appear (sliding in from top and bottom over 0.8 seconds). Then, the domain logotype "archetype.boo" fades in at the z-pattern top-left position over 1.5 seconds, rendered in Commissioner weight 300 at maximum size with the forest glow text-shadow. After 0.5 seconds, the ambient drift particles begin to appear one by one (staggered by 100ms each). Finally, the tagline fades in at the top-right z-pattern position. Total hero entrance sequence: approximately 5-6 seconds. This is not a loading delay -- it is a deliberate cinematic opening that establishes atmosphere. **Scroll-Triggered Scene Transitions:** Each section uses `IntersectionObserver` with a `threshold` of 0.15 to trigger entrance animations. Content blocks do not simply fade in -- they emerge using a cinematic reveal: a dark overlay (Midnight Canopy at 100% opacity) slides away from the content block directionally (left-to-right for odd sections, right-to-left for even sections) over 1.2 seconds with an `ease-out` timing, revealing the content beneath. This mimics a film wipe transition. During the wipe, the particle system generates a concentrated burst of Foxfire particles along the leading edge of the wipe, as if the reveal itself is casting sparks. **Typography Animation:** Headlines do not appear statically. When a headline enters the viewport, each character fades in individually with a stagger of 40ms per character, starting from 0% opacity and `translateY(8px)` to full visibility and position, using an `ease-out` curve over 600ms per character. The Commissioner FLAR axis also animates: characters enter at FLAR 0 (pure sans-serif) and settle to FLAR 50 over 800ms, creating a subtle morphing effect where the letterforms themselves transform as they appear. This variable font axis animation is implemented via CSS `@keyframes` targeting `font-variation-settings`. **Particle System Implementation:** The particle system runs on a dedicated `` element positioned `fixed` with `pointer-events: none` and `z-index: 1`, sitting above the background but below content. Use `requestAnimationFrame` for the render loop. Particle positions are stored in a flat `Float32Array` for performance. Each frame: update positions (gravity: 0, wind: sine-wave), check cursor proximity (distance calculation via squared distance to avoid `Math.sqrt`), draw particles as radial gradients (center: particle color at particle opacity, edge: transparent), check inter-particle distances for connection threads. The canvas resizes on `window.resize` with debouncing (150ms). Target: 60fps on mid-range hardware with 60 particles. **Leather Texture Implementation:** The leather grain is generated purely in CSS/SVG, not from image files. An inline `` in the HTML contains a `` definition with `` followed by `` to desaturate, then `` to boost contrast. This filter is applied to a full-viewport `
` with `mix-blend-mode: multiply` and the appropriate opacity. The seed value (42) ensures the texture is deterministic across loads. On hover over interactive elements, a second SVG filter with slightly different `baseFrequency` (0.75) is crossfaded in over 300ms, creating a tactile "pressing into leather" sensation. **Interstitial Frames:** Between content sections, the interstitial frames (15-20vh) contain only the particle canvas and a centered, barely-visible horizontal rule (1px, Tanned Leather #7A4B2A at 15% opacity, width: 30% of viewport, centered). As the user scrolls through an interstitial, the particle density in that region doubles temporarily (additional particles spawned with 2-second lifetimes) and the horizontal rule extends from 30% to 60% width with an `ease-in-out` transition triggered by `IntersectionObserver`. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, newsletter popups, social media icon rows, stock photography, bright white backgrounds, sharp corners on any element (minimum `border-radius: 2px` on everything, 8px on cards). **BIAS TOWARD:** Full-screen narrative experiences, long-form atmospheric scrolling, ambient animation that rewards slow exploration, interaction patterns that feel discovered rather than presented, dark color fields that make content feel like it emerges from darkness. ## Uniqueness Notes **Differentiators from other designs:** 1. **Single-Font Variable Axis System:** No other design in the portfolio uses a single variable font family across all typographic roles while actively animating its variable axes. The Commissioner FLAR axis animation -- where letterforms morph from sans-serif to flared terminals as they enter the viewport -- is a technique not seen in any existing design. Most designs use 2-3 separate font families. This single-font approach creates an unprecedented level of typographic cohesion while the axis animation adds a dimension of visual interest that is impossible with static fonts. 2. **Cinematic Opening Sequence with Timed Darkness:** While other designs use fade-in effects, no design in the portfolio begins with intentional, extended darkness (2 seconds of near-black) followed by a choreographed multi-stage reveal. This borrows directly from film language (the pre-title darkness before a film begins) and establishes a fundamentally different emotional contract with the user: this is not a website to be scanned, it is an experience to be watched. 3. **Particle-Canvas with Cursor Proximity Detection and Inter-Particle Connection:** The particle system goes beyond simple ambient particles by implementing two interactive behaviors simultaneously: cursor-distance-based brightness modulation (flashlight effect) and inter-particle connection threads (mycelium visualization). These two systems interacting create emergent visual complexity -- the user's cursor movement influences not just individual particles but the network of connections between them, creating a living, responsive atmosphere. 4. **Z-Pattern Layout as Conscious Cinematic Framing:** The z-pattern layout appears at only 2% frequency in the current portfolio, making it one of the rarest structural choices. More importantly, no existing design uses the z-pattern as a deliberate cinematic technique -- mapping it to the concept of camera movement across a scene. The alternating left-right content placement with diagonal eye-flow creates a visual rhythm that is fundamentally different from the centered (97%) and asymmetric (55%) layouts that dominate the collection. 5. **SVG-Generated Leather Texture Without Image Assets:** The leather texture is generated entirely through SVG filters and CSS blend modes, requiring zero image downloads. This is a unique approach -- other texture-heavy designs rely on background images. The SVG filter approach allows for dynamic texture variation (different `baseFrequency` values on hover) that would be impossible with static image textures. **Documented Seed/Style:** ``` aesthetic: cinematic layout: z-pattern typography: commissioner-versatile palette: forest-green patterns: scroll-triggered imagery: leather-texture motifs: particle-effects tone: mysterious-moody ``` **Avoided Overused Patterns:** - `playful` aesthetic (97% frequency) -- replaced with `cinematic` (5%) - `centered` layout (97%) -- replaced with `z-pattern` (2%) - `mono` typography (97%) -- replaced with `commissioner-versatile` (0%, entirely new) - `friendly` tone (97%) -- replaced with `mysterious-moody` (0% in current portfolio) - `minimal` imagery (97%) -- replaced with `leather-texture` (5%) - `warm` palette (100%) -- replaced with `forest-green` (5%) - `parallax` patterns (77%) -- no parallax used; scroll-triggered animations use wipe reveals and particle bursts instead - `photography` imagery (58%) -- no photography; all visuals are generative (SVG filters + canvas particles)