# Design Language for archetypic.dev ## Aesthetics and Tone The visual world of archetypic.dev draws from the clandestine energy of graffiti murals discovered in abandoned subway tunnels at 2 AM -- walls alive with phosphorescent paint, layered tags dissolving into each other, the hiss of aerosol still hanging in the air. But this is not the daylight-sanitized "street art gallery" aesthetic; it is the raw, unauthorized, nocturnal version, suffused with an unsettling mystery. Every surface feels like it was painted in secret and discovered by accident. The tone is mysterious-moody: a low-frequency hum beneath bright surfaces, shadows that move when you are not looking, text that feels like it was left as a coded message for someone who knows how to read it. There is a sense of the archetypal -- primal symbols emerging from layers of paint and noise, as though the graffiti is not decoration but communication from something older and stranger than the person who held the spray can. Colors pop with aggressive contrast against deep, near-black backgrounds, creating a visual experience that is simultaneously vibrant and foreboding. The mood oscillates between exuberant creative rebellion and the eerie stillness of an empty corridor where someone was just standing a moment ago. ## Layout Motifs and Structure The layout follows an organic-flow composition that rejects rigid grids entirely. Content elements are positioned as though they were spray-painted onto an infinite wall at different angles, heights, and scales -- some overlapping, some isolated in expansive negative space, some appearing to drip or bleed into the section below. **Scroll Architecture:** - The page is a single continuous vertical surface that simulates a massive concrete wall stretching downward infinitely. There are no discrete "sections" with clean breaks; instead, content zones emerge and dissolve like layers of paint applied over months by different hands. - The first viewport is dominated by a full-screen dark canvas (#0A0A0F) with a single massive typographic element -- the domain name -- rendered as though spray-painted at an angle, with drip marks trailing from the letterforms. No navigation, no menu icon, no secondary text. Just the name, the drips, and darkness. - Below the hero, content flows in an organic, non-linear path. Text blocks are positioned with CSS transforms that apply slight rotations (1-4 degrees), creating the feeling of tags placed at natural angles on an uneven surface. No two content blocks share the same alignment or margin. - Bubble-shaped containers (border-radius values between 40% and 60% on alternating corners, creating asymmetric blob forms) float at irregular intervals, holding key content. These bubbles use backdrop-filter: blur(12px) over the dark background, creating translucent viewing portals into the wall beneath. - Vertical rhythm is intentionally uneven: some sections breathe with 200px+ margins, others crowd together with only 24px gaps, mimicking the density variations of real graffiti walls where some areas are packed with overlapping tags and others are pristine concrete. **Spatial Relationships:** - Content occupies 45-75% of viewport width, shifting unpredictably between left-biased, right-biased, and center positions as the user scrolls. The eye is never allowed to settle into a predictable scan pattern. - Z-index layering is aggressive: decorative vector elements sit both behind and in front of text, creating genuine depth. Some text appears to be partially occluded by a painted shape, reinforcing the mural illusion. - The footer is not a footer but a fade-to-black: content thins out, spacing increases, and the background darkens from #0A0A0F to pure #000000, as though the tunnel lights are going out one by one. ## Typography and Palette **Typography:** - **Headlines / Display:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif in the Futura tradition with elegant, slightly elongated proportions and a crisp, architectural quality. Used at 4rem-8rem for primary display text, weight 700. All headlines are set in uppercase with letter-spacing of 0.08em, evoking the blocky capital letters of graffiti tags. Selective characters within headlines are rendered in a contrasting color to simulate the multi-color layering of real graffiti lettering. - **Body Text:** "Jost" (Google Fonts) -- a geometric sans-serif inspired directly by the 1920s Futura lineage, with perfectly circular bowls and even stroke widths. Used at 1.05rem-1.2rem, weight 400, with line-height 1.8. Body text is always set in a muted off-white (#D4D0E0) against the dark background, never pure white -- the slight violet tint creates a ghostly, phosphorescent quality. - **Accent / Tags:** "Permanent Marker" (Google Fonts) -- a handwritten marker face that authentically replicates the gestural energy of graffiti handstyles. Used sparingly for pull quotes, annotations, and decorative text elements at 1.5rem-3rem. Always rendered in the brightest accent colors (#FF2D6B or #00F5D4) to simulate fresh paint on old surfaces. - **Monospace Utility:** "IBM Plex Mono" (Google Fonts) -- used exclusively for code snippets, metadata, and small utility labels at 0.85rem, weight 400. Color: #6B6B8D (a muted blue-gray that recedes against the dark background). **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Background Deep | Void Black | #0A0A0F | Primary background, the tunnel wall | | Background Mid | Bruise Purple | #14121F | Secondary background for layered depth | | Text Primary | Phosphor White | #D4D0E0 | Body text, subtle violet undertone | | Accent Hot | Neon Magenta | #FF2D6B | Primary accent, CTAs, highlighted characters | | Accent Cool | Electric Mint | #00F5D4 | Secondary accent, hover states, bubble borders | | Accent Warm | Spray Yellow | #FFD93D | Tertiary accent, decorative drips, warning elements | | Surface Glass | Smoke Violet | #1E1A2E | Bubble containers, translucent overlays | | Muted Detail | Concrete Gray | #6B6B8D | Metadata, captions, secondary information | The palette operates on maximum contrast: the three accent colors (#FF2D6B, #00F5D4, #FFD93D) vibrate aggressively against the near-black backgrounds (#0A0A0F, #14121F). This triadic accent scheme -- magenta, mint, yellow -- directly references the classic spray paint color combinations found in 1980s New York subway graffiti. No gradients between the accents; they exist as sharp, unblended marks against darkness, just as spray paint sits on concrete. ## Imagery and Motifs **Vector Art as Graffiti Iconography:** All imagery is custom SVG vector art rendered in a flat, high-contrast style that evokes stencil graffiti and wheat-paste poster art. No photographs, no raster textures. Every visual element is constructed from clean vector paths with hard edges -- but the subjects are organic and archetypal: eyes, hands, spirals, masks, flames, keys, labyrinths. These are the universal symbols that recur across graffiti cultures worldwide, rendered here with geometric precision (circles, triangles, clean Bezier curves) that reflects the Futura-geometric typography. **Bubble Motifs:** Spherical and bubble forms are the primary decorative motif, appearing at multiple scales: - **Macro bubbles:** Large translucent circles (200-500px diameter) with subtle backdrop-filter blur, floating across the background like phosphorescent orbs in a dark aquarium. They drift slowly with CSS keyframe animations (translateX and translateY oscillation over 15-25 second cycles). Border: 1px solid rgba(0, 245, 212, 0.15). - **Micro bubbles:** Clusters of tiny circles (4-16px) scattered around content blocks like spray-paint overspray. These are purely decorative SVG elements in the three accent colors, positioned with randomized offsets via CSS custom properties. - **Content bubbles:** Key information is housed within large bubble-shaped containers (border-radius: 45% 55% 60% 40% / 55% 45% 40% 60%) that break the rectangular norm. These containers have a 1px border in Electric Mint (#00F5D4) at 20% opacity, a background of Smoke Violet (#1E1A2E) at 85% opacity, and backdrop-filter: blur(12px). - **Bubble trails:** When the user scrolls, a trail of small circles (6-10px) briefly appears along the scroll path and fades, as though the page is effervescing. **Graffiti Drip Effects:** SVG drip shapes -- elongated teardrop forms -- hang from the bottom edges of headlines and accent elements. These are rendered in the accent colors with 40-60% opacity, creating the impression of wet spray paint running down the wall. Each drip has a slightly different length and curvature, avoiding mechanical repetition. **Stencil Overlays:** At irregular intervals during the scroll, full-viewport SVG stencil graphics appear as background layers (opacity: 0.04-0.08) -- geometric renditions of archetypal figures (the trickster, the sage, the shadow). These are barely visible, emerging only as the eye adjusts, like faded stencils under layers of newer paint. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport void (#0A0A0F) that holds its darkness for 300ms before the domain name "archetypic.dev" fades in -- not as a fade-up animation but as a reveal, like a flashlight slowly sweeping across a wall to illuminate text that was always there. The text is set in Josefin Sans at 6rem, uppercase, with each letter tinted in alternating accent colors (magenta, mint, yellow cycling) to simulate the polychromatic lettering of graffiti pieces. Below the name, SVG drip elements animate downward with staggered delays (each drip begins 80ms after the previous), growing from 0 height to their full length over 1.2 seconds with an ease-out curve. **Hover-Lift Interactions:** Every interactive element employs a hover-lift pattern -- on mouseenter, the element translates upward by 6-10px on the Y axis and gains a soft colored glow (box-shadow: 0 12px 40px rgba(0, 245, 212, 0.2)). The lift uses a CSS transition with a spring-like cubic-bezier(0.34, 1.56, 0.64, 1) timing function that overshoots slightly before settling, giving each hover a buoyant, bubble-like quality. On mouseleave, the element settles back with a slower ease (0.4s cubic-bezier(0.25, 0.1, 0.25, 1)). This hover-lift is the ONLY interaction pattern used consistently across the site -- no parallax, no scroll-triggered animations beyond the initial reveal. The restraint creates a tactile, focused interactivity where every hover feels intentional and rewarding. **Bubble Float Animation:** Background macro-bubbles use CSS @keyframes with individual animation-duration values (15s, 19s, 23s) and animation-delay offsets to prevent synchronization. Each bubble follows an elliptical path using combined translateX and translateY transforms. The bubbles have will-change: transform for GPU acceleration. On scroll, bubbles shift slightly (transform: translateY(calc(var(--scroll-offset) * -0.05))) to create a subtle depth parallax, but this is minimal and passive -- the bubbles feel like they exist in a different atmospheric layer from the content. **Spray-Paint Text Reveal:** As the user scrolls into new content zones, text blocks reveal with a custom animation that simulates spray-painting: a colored rectangle (in the section's accent color) sweeps across the text from left to right over 0.6s, revealing the text beneath it. This is achieved with a pseudo-element that transitions transform: scaleX(1) to scaleX(0) with transform-origin: right. The effect is subtle but unmistakable -- it gives every text appearance the feeling of being freshly painted onto the wall as you watch. **Vector Stencil Reveals:** The archetypal stencil SVGs in the background respond to scroll position: their opacity transitions from 0.02 to 0.08 as the user scrolls into their zone, and back to 0.02 as the user scrolls past. This is implemented with Intersection Observer and CSS custom properties (--stencil-opacity) rather than JavaScript animation libraries, keeping the effect lightweight. The stencils never become fully visible -- they are always at the threshold of perception, reinforcing the mysterious-moody tone. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids -- this is not a SaaS landing page - Scroll-triggered animation libraries (GSAP, AOS) -- all animation is CSS-native - Parallax scrolling as a primary effect -- the only parallax is the subtle bubble depth offset - Card grids, testimonial carousels, feature comparison tables - Gradients between accent colors -- all color transitions are hard stops, not blends - Rounded-friendly UI patterns -- despite the bubble motifs, this is not cute; it is unsettling - Light backgrounds anywhere on the page -- the entire experience lives in darkness ## Uniqueness Notes **Differentiators from other designs:** 1. **Graffiti Aesthetic at 5% Frequency:** Only 2 of 36 existing designs use the graffiti aesthetic. archetypic.dev pushes this further by combining graffiti with a mysterious-moody tone rather than the typical energetic/rebellious pairing. The result is graffiti as archaeology rather than vandalism -- ancient symbols discovered on underground walls, not fresh tags on a storefront. This tonal subversion has zero precedent in the existing portfolio. 2. **Vector-Art Imagery at 2% Frequency:** Vector-art is the rarest imagery type in the portfolio (single occurrence). Here it is used not for clean corporate illustration but for stencil-graffiti iconography -- flat, high-contrast SVG renditions of archetypal symbols (eyes, masks, labyrinths). The collision of geometric vector precision with the raw energy of graffiti creates a visual tension that no other design explores. 3. **Bubble-Playful Motifs in a Dark Context:** Bubble motifs appear at 2% frequency and are typically associated with light, playful aesthetics. archetypic.dev subverts this by placing bubbles in an oppressively dark environment -- they become bioluminescent organisms in a deep-sea trench, phosphorescent orbs in a pitch-black tunnel. The playfulness is uncanny rather than cheerful, transforming a whimsical motif into something that amplifies the mysterious mood. 4. **Hover-Lift as Sole Interaction Pattern:** At 5% frequency, hover-lift is underused in the portfolio. Most designs combine multiple interaction patterns (scroll-triggered at 97%, parallax at 77%). archetypic.dev uses hover-lift exclusively, creating a focused, tactile interaction vocabulary where every hover feels significant. The spring-physics timing function gives lifts a bubble-like buoyancy that ties the interaction pattern directly to the visual motifs. 5. **Organic-Flow Layout Without Nature Aesthetic:** Organic-flow layouts (8% frequency) typically pair with botanical or nature aesthetics. Here, organic-flow serves a graffiti context -- content positioned at irregular angles and densities mimics the non-linear composition of real street art walls. The organic flow is urban, not pastoral. **Chosen seed/style:** aesthetic: graffiti, layout: organic-flow, typography: futura-geometric, palette: high-contrast, patterns: hover-lift, imagery: vector-art, motifs: bubble-playful, tone: mysterious-moody **Avoided overused patterns:** - playful aesthetic (97%) -- rejected in favor of graffiti (5%) - centered layout (97%) -- rejected in favor of organic-flow (8%) - mono typography (97%) -- rejected in favor of futura-geometric (8%) - warm palette (100%) -- rejected in favor of high-contrast (50%) with cool-dominant accents - scroll-triggered patterns (97%) -- rejected in favor of hover-lift (5%) as primary interaction - minimal imagery (97%) -- rejected in favor of vector-art (2%) - friendly tone (97%) -- rejected in favor of mysterious-moody (0%) - vintage motifs (52%) -- rejected in favor of bubble-playful (2%)