# Design Language for archetype.works ## Aesthetics and Tone archetype.works channels the raw, confrontational energy of a wheat-pasted wall in a Berlin underpass at 2 AM -- where layers of torn posters, spray-painted tags, and stenciled manifestos accumulate into an accidental masterpiece. The aesthetic is **graffiti** not as vandalism but as archetypal expression: the primal human need to mark surfaces, to declare "I was here," to carve meaning into the indifferent skin of the city. This is the domain where Jungian archetypes meet aerosol cans, where the collective unconscious bleeds through stencil cutouts onto concrete. The tone is **authoritative** -- not the authority of institutions, but the authority of conviction. It speaks like a manifesto nailed to a gallery door, like a zine distributed hand-to-hand at a lecture on semiotics. Every word carries weight. Every statement is declarative, not interrogative. The voice does not ask permission; it asserts, defines, and claims territory. There is no hedging, no "perhaps," no soft qualifiers. The domain name itself -- archetype.works -- is a statement of function: archetypes work here. They labor. They produce. They operate. The visual world draws from three specific reference points: (1) the layered, decaying poster walls of Haussmann-era Paris where Situationist slogans still ghost through peeling paper; (2) the botanical illustration tradition of Ernst Haeckel, whose meticulous drawings of leaf and fern structures provide the organic counterpoint to urban grit; and (3) the bold, geometric letterforms of 1920s Constructivist propaganda posters, where typography was architecture. The collision of these three traditions produces a visual language that is simultaneously natural and industrial, ancient and urgent, beautiful and abrasive. ## Layout Motifs and Structure The layout follows a **stacked-sections** architecture -- not the tired SaaS landing page stack, but a vertical sequence of discrete, self-contained environments, each occupying a full viewport height. Think of it as a vertical gallery wall where each floor is a different world, connected by the act of scrolling as physical traversal. Each section has its own internal logic, its own density, its own gravity. **Structural Principles:** - **The Concrete Slab:** Each full-viewport section is treated as a separate concrete wall surface. The background texture subtly shifts between sections -- some rougher (visible aggregate), some smoother (poured and polished), some showing the ghost impressions of formwork boards. This textural variation prevents monotony while maintaining the architectural metaphor of stacked floors in a brutalist structure. - **The Tear Line:** Between sections, instead of clean horizontal dividers, a rough, irregular edge separates the spaces -- like the torn edge of a wheat-pasted poster, or the ragged boundary where one paint layer gives way to another. This is achieved through SVG clip-paths with deliberately irregular, hand-drawn curves. The tear line is never straight, never geometric, never repeated. Each boundary is unique. - **Off-Grid Placement:** Within each section, content elements are positioned with deliberate asymmetry. Text blocks sit at 15-20% from the left edge, never centered. Images bleed off the right edge. Pull quotes float at unexpected vertical positions. Nothing aligns to a visible grid -- the placement follows the logic of a wall where things are pasted, pinned, and sprayed wherever there is space. However, there is an invisible underlying 12-column grid that prevents true chaos; the apparent disorder is carefully composed. - **The Margin Tag:** In the left margin of each section (the gutter between the viewport edge and the content), small typographic elements appear -- section numbers rendered as spray-paint stencils, dates in monospace, cryptic alphanumeric codes. These margin tags create a secondary reading layer, like the notations a curator might pencil onto a gallery wall plan. - **Vertical Rhythm Through Density:** Sections alternate between "dense" (full of layered content, overlapping elements, visual noise) and "sparse" (a single statement on an expanse of wall, breathing room as palate cleanser). This oscillation between compression and expansion creates a rhythmic experience as the visitor scrolls. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a geometric skeleton and just enough quirk in its letterforms (the distinctive single-story 'a', the squared-off curves) to feel like something designed for an exhibition poster rather than a corporate deck. Weight: 700 (Bold) for section titles at 5rem-8rem, tracked tight at -0.03em. All caps for primary headings, creating the stencil-cut feel of spray-painted block letters. At these sizes, the geometric precision of Space Grotesk collides productively with the organic textures behind it. - **Secondary / Body Text:** "Work Sans" (Google Fonts) -- a grotesque sans-serif optimized for screen reading, with open apertures and a slightly condensed proportion that echoes the efficiency of Constructivist typography. Weight: 400 (Regular) for body text at 1.05rem, line-height 1.7. Weight: 600 (SemiBold) for subheadings and emphasized passages at 1.3rem-1.8rem. The typeface's name -- Work Sans -- resonates with the domain: archetype.works. - **Accent / Marginalia:** "IBM Plex Mono" (Google Fonts) -- for the margin tags, technical annotations, dates, and any text that should feel like it was typed on a label maker and stuck to the wall. Weight: 400, size 0.75rem-0.85rem. Always uppercase. Letter-spacing: 0.08em. Color: muted, never the primary burgundy. This monospace layer creates a documentary, archival quality -- the voice of the cataloguer rather than the artist. **Palette:** The palette is **burgundy-cream** -- the deep, oxidized red of dried blood on a poster wall, paired with the warm off-white of aged paper and plaster. | Role | Color | Hex | Reference | |------|-------|-----|-----------| | Primary Burgundy | Deep wine red | #6B1D2A | Dried spray paint on concrete; the anchor color | | Secondary Burgundy | Lighter cranberry | #8C2F3B | Hover states, secondary emphasis, warm highlights | | Dark Ground | Near-black charcoal | #1A1216 | Deep shadow, text on light backgrounds, darkest layer | | Cream Base | Warm aged paper | #F2EAE0 | Primary background, the "wall" surface | | Warm Cream | Slightly darker ivory | #E5D9CC | Secondary background, alternate section surfaces | | Graphite | Cool medium gray | #5A5259 | Body text, secondary information, muted elements | | Leaf Sage | Muted botanical green | #7A8C6E | Organic motif accents, hover glows, natural counterpoint | | Stencil Gold | Oxidized metallic warm | #B8943F | Sparse highlights, margin tags, structural accents | The burgundy never appears as a flat field -- it is always textured, grained, slightly uneven, as if applied by hand with imperfect coverage. The cream backgrounds carry a faint paper-grain noise texture at 3-5% opacity, preventing the clinical flatness of pure digital white. The sage green appears sparingly, only in the leaf-organic motif elements, creating moments of life breaking through the urban surface. ## Imagery and Motifs **Mixed-Media Collage System:** The imagery approach is **mixed-media** -- the deliberate collision of different visual registers within a single composition. No single image style dominates; instead, elements from different traditions are layered, overlapped, and juxtaposed, the way a wall accumulates posters from different eras and purposes. Specific media layers: 1. **Botanical Line Drawings:** High-contrast black-on-cream illustrations of leaf structures, fern fronds, root systems, and branch patterns -- drawn in the style of 19th-century scientific illustration but rendered as SVG for crisp scaling. These **leaf-organic motifs** are the primary decorative vocabulary. They appear as: - Large background watermarks at 4-6% opacity behind text sections - Border elements where leaf veins extend outward to frame content - Transitional elements between sections, where a root system grows downward through the tear-line boundary - Small inline decorations at the end of text blocks, like botanical printer's ornaments 2. **Stencil Typography Fragments:** Portions of words, letters, and symbols rendered as if spray-painted through cardboard stencils -- rough edges, overspray dots, the characteristic bridging of stencil letterforms (where letters like 'O' and 'A' need connecting bars to maintain the template). These fragments appear at the edges of sections, partially cropped, as if the viewport is a window onto a larger wall. They use the Primary Burgundy at varying opacities. 3. **Concrete and Paper Textures:** Subtle photographic textures applied as CSS background layers -- poured concrete with visible aggregate and formwork lines, aged paper with foxing spots and fold creases, torn cardboard edges. These are always low-opacity (5-12%) and serve to add tactile depth without overwhelming the typography. Applied via `background-blend-mode: multiply` over the cream base. 4. **Geometric Overlay Fragments:** Thin lines, circles, and angular shapes rendered in Stencil Gold (#B8943F) -- the remnants of an underlying grid or architectural plan showing through the surface layers. These recall Constructivist compositions and provide structural counterpoint to the organic botanical elements. **The Leaf-Organic Motif System:** The leaf motif is not decorative wallpaper. Each leaf structure represents an archetype -- a branching pattern of meaning. The veins of a leaf are a natural diagram of how archetypes branch, subdivide, and interconnect. Specific implementations: - **Hero Leaf:** A single, large (40-60% viewport width) botanical illustration of a skeletal leaf -- just the vein structure, no flesh -- positioned behind the primary heading of the first section. Rendered in Graphite (#5A5259) at 8% opacity. On scroll, the leaf very slowly rotates 2-3 degrees, creating a subtle sense of organic movement. - **Margin Ferns:** Small fern frond illustrations in the left margin, growing upward from the bottom of each section. These are rendered in Leaf Sage (#7A8C6E) at 15-20% opacity. They create a vertical vine effect in the gutter space. - **Root Transitions:** Between sections, SVG root-system illustrations extend through the tear-line boundaries, connecting one section to the next. These roots are drawn in Primary Burgundy (#6B1D2A) and give the impression of organic continuity beneath the fragmented surface. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport section of warm cream (#F2EAE0) with the paper-grain texture. For 0.4 seconds, nothing happens -- just the wall. Then, from the left edge of the viewport, a horizontal spray-paint line in Primary Burgundy (#6B1D2A) draws itself across at approximately 40% from the top, extending about 65% of the viewport width. The line has rough edges, overspray dots, and slight vertical wobble -- it is not a CSS border but an SVG path with hand-drawn noise applied to its control points. Above this line, the domain name "ARCHETYPE.WORKS" fades in over 0.6 seconds, set in Space Grotesk Bold at 6rem, all caps, tracked at -0.03em, in Dark Ground (#1A1216). Below the line, a single sentence in Work Sans Regular at 1.1rem appears with a 0.3-second delay: a manifesto-style declaration about what archetypes are and what they do. No navigation visible. No menu. No logo. Just the statement on the wall. Behind all of this, the Hero Leaf illustration fades in at 8% opacity over 1.5 seconds, slightly larger than expected, its vein-structure extending beyond the viewport edges. **Shake-Error Interaction Pattern:** The primary interaction pattern is **shake-error** -- a deliberate, controlled disruption that signals boundary-crossing. When a user hovers over an interactive element that requires attention or commitment (a link to a deep-content section, a term that needs definition, a claim that needs evidence), the element performs a quick horizontal shake: 3 oscillations over 0.3 seconds, amplitude 3-4px. This is not the violent shake of a form validation error; it is the sharp, intentional vibration of a spray can being shaken before use -- the "I am ready" signal. Implementation: CSS `@keyframes shake` with `translateX` values of 0, -3px, 3px, -3px, 3px, -2px, 2px, 0 over 300ms. Applied on `:hover` with a 150ms delay (so it triggers only on intentional hovers, not drive-by cursor movement). The shake is accompanied by a subtle color shift: the element's text momentarily flashes from Dark Ground to Primary Burgundy during the shake, then settles back. This creates the visual impression of the element "activating" or "charging up." Secondary use: When a new section scrolls into view, the section title performs a single, heavier shake (amplitude 5-6px, duration 200ms) as a punctuation mark -- the typographic equivalent of slamming a fist on a table to begin a speech. This shake fires once per section, only on first entry into the viewport, tracked via `IntersectionObserver` with a `threshold` of 0.3. **Scroll-Driven Section Reveals:** Each section enters the viewport with a distinct reveal animation tied to its content density: - **Dense sections:** Elements stagger in from multiple directions over 0.8 seconds. Text slides in from the left (translateX: -40px to 0), images slide in from the right (translateX: 40px to 0), margin tags fade in from below (translateY: 20px to 0). Stagger delay: 80ms between elements. Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) -- a slightly decelerated curve that feels like something being slapped onto a wall and sticking. - **Sparse sections:** The single content element (a quote, a heading, a standalone image) appears with a simple opacity fade from 0 to 1 over 1.2 seconds. No movement. The stillness after the density of the previous section creates dramatic contrast. **Layered Depth via CSS:** The mixed-media collage effect is achieved through careful z-index layering: - z-0: Cream background with paper-grain texture - z-1: Concrete/paper texture overlays (blend-mode: multiply, opacity 5-12%) - z-2: Botanical line drawings (SVG, opacity 4-8%) - z-3: Geometric overlay fragments (SVG, Stencil Gold, opacity 10-15%) - z-4: Primary content (text, images) - z-5: Stencil typography fragments (positioned at edges, partially cropped) - z-6: Margin tags and annotations **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, centered hero sections, card carousels, testimonial sliders, hamburger menus, gradient backgrounds, smooth rounded corners, drop shadows, anything that feels like a SaaS landing page template. This is a wall, not a wireframe. **BIAS TOWARD:** Full-screen narrative immersion, typographic dominance, textural richness, layered visual depth, slow reveals, deliberate pacing, the feeling that the visitor is walking through a space rather than scrolling through a page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Graffiti-Botanical Collision:** No other design in the portfolio combines the raw, urban energy of graffiti aesthetics with the meticulous, organic precision of botanical illustration. The graffiti aesthetic appears at only 5% frequency and is never paired with organic leaf motifs (leaf-organic is at 0% frequency). This collision -- spray paint meets herbarium, concrete meets chlorophyll -- creates a visual language entirely absent from the existing portfolio. The botanical elements are not decorative afterthoughts; they are structural, serving as the site's primary organizational metaphor (leaf veins as branching archetype maps). 2. **Shake-Error as Primary Interaction Pattern:** The shake-error pattern has 0% representation in existing designs. While most designs rely on scroll-triggered (97%), parallax (77%), and stagger (55%) patterns, archetype.works uses deliberate micro-disruption as its signature interaction. The shake is not an error state but a readiness signal -- the physical act of shaking a spray can before application. This recontextualization of a typically negative UX pattern (form validation shake) into a positive, anticipatory gesture is unique. 3. **Stacked-Sections Without SaaS DNA:** The stacked-sections layout appears at only 2% frequency, and where it does appear, it typically follows the predictable SaaS template of hero-features-pricing-CTA. archetype.works uses the same vertical stacking but with fundamentally different internal logic: each section is a distinct environment with its own density, texture, and pacing. The tear-line boundaries, off-grid internal placement, and density alternation (dense/sparse oscillation) make the stacked structure feel like a vertical gallery walk rather than a marketing funnel. 4. **Sans-Grotesk Typography in Authoritative Voice:** The sans-grotesk typography choice (2% frequency) paired with an authoritative tone (13% frequency) is a rare combination. Most authoritative designs default to serif classics; most grotesk designs lean playful or corporate. archetype.works uses the geometric precision of Space Grotesk as a typographic analog for stencil-cut letterforms -- the authority of declaration rather than tradition. 5. **Burgundy-Cream as Oxidized Material Palette:** The burgundy-cream palette is not yet represented in the portfolio. Unlike warm palettes (100% frequency) that tend toward amber/gold warmth, this palette derives its warmth from oxidation -- the chemical process of drying, aging, and weathering. The burgundy is dried blood-red, not cherry-red. The cream is aged-paper, not fresh-linen. The sage green accent introduces biological life into an otherwise post-industrial palette, reinforcing the graffiti-botanical duality. **Documented Seed:** aesthetic: graffiti, layout: stacked-sections, typography: sans-grotesk, palette: burgundy-cream, patterns: shake-error, imagery: mixed-media, motifs: leaf-organic, tone: authoritative **Avoided Overused Patterns:** playful aesthetic (97%), centered layout (97%), mono typography (97%), warm palette generics (100%), scroll-triggered as sole pattern (97%), minimal imagery (97%), friendly tone (97%), vintage motifs (52%), photography imagery (58%). None of these dominant patterns appear as primary elements in this design.