# Design Language for a6c.boo ## Aesthetics and Tone a6c.boo channels the raw energy of underground street art corridors -- imagine a graffiti-covered overpass at dusk where neon spray-paint catches the last golden light bouncing off the ocean. The visual identity fuses urban graffiti culture with a refined coastal elegance, drawing inspiration from Banksy's stencil precision, the color-drenched murals of Wynwood Walls, and the salt-weathered textures of boardwalk signage. The "A6C" brand (a coded shorthand for "ABC") becomes a typographic playground: letters appear as if tagged onto surfaces, dripping, layered, and alive. The tone is elegant-sophisticated with a street edge -- like a gallery opening in a converted warehouse where graffiti is the fine art. There is tension between chaos and control: paint splatters are precisely placed, tag lines are kerned with intention, and the coastal color palette softens what would otherwise be purely gritty. ## Layout Motifs and Structure The layout employs a **horizontal-scroll** composition that mimics walking along a long graffiti wall. Users scroll sideways through "panels" -- each one a full-viewport mural-like section with distinct content and visual treatment. This horizontal movement is the primary navigation metaphor. **Primary structure:** - **Opening panel (100vw x 100vh):** A brick-textured surface with the "A6C" logotype spray-painted in animated strokes (kinetic typography that draws each letter as if being sprayed in real-time via SVG path animation). Beneath, "boo" appears as a ghostly stencil with a slight ripple distortion. - **Content panels scroll horizontally:** Each panel represents a concept/section, painted onto a different "wall surface" -- concrete, corrugated metal, whitewashed plaster -- achieved via CSS background textures. - **Vertical sub-scrolling within panels:** Some horizontal panels allow vertical micro-scrolling for deeper content, creating a 2D navigation space. - **Navigation:** A thin spray-paint line runs along the bottom edge, acting as a progress indicator. Small tag icons mark section positions along this line. - **No traditional grid:** Content elements are placed with deliberate asymmetry, overlapping at edges, rotated 1-3 degrees, mimicking pasted-up posters and layered stencils. ## Typography and Palette **Fonts:** - **Headlines/Tags:** "Permanent Marker" (Google Fonts) -- a hand-drawn marker typeface that captures the spontaneous energy of graffiti lettering. Used at large sizes (clamp(48px, 8vw, 120px)) with slight CSS rotation transforms (-2deg to +2deg) for an organic, hand-applied feel. - **Body text:** "Space Grotesk" (Google Fonts) -- a clean, modern geometric sans that provides legibility contrast against the raw headline treatment. Weight 400 for body, 500 for emphasis. Letter-spacing: +0.01em. - **Accent/Labels:** "Caveat" (Google Fonts) -- a casual handwriting font used for annotations, captions, and marginal notes, reinforcing the hand-made aesthetic. **Color Palette -- Coastal Graffiti:** - **Spray Cyan:** #00BCD4 -- the dominant accent, evocative of ocean shallows and aerosol neon - **Coral Burst:** #FF6B6B -- warm counterpoint, like sunset reflecting off wet concrete - **Sand Haze:** #F5E6CC -- a warm neutral background tone, the color of sun-bleached stucco - **Deep Asphalt:** #1A1A2E -- primary dark tone for text and deep sections - **Salt White:** #F8F6F0 -- slightly warm white for contrast areas - **Drip Gold:** #E6A817 -- metallic accent for highlights and hover states - **Seafoam Mist:** #A8E6CF -- secondary cool accent for backgrounds and overlays ## Imagery and Motifs **Core visual motifs:** - **Paint drips:** CSS-generated drip shapes (using border-radius and skew transforms) that hang from header elements and section dividers. Colored in Spray Cyan and Coral Burst, these animate downward with a slow gravitational ease on scroll-enter. - **Stencil cut-outs:** Text and icon elements rendered with a stencil aesthetic -- slight gaps in letterforms, rough edges achieved via SVG filters (feTurbulence + feDisplacementMap) applied to key headings. - **Brick/concrete textures:** Subtle repeating SVG patterns layered at low opacity (8-12%) behind content sections, giving every surface the feel of a physical wall. Different sections use different wall textures. - **Spray-paint particle burst:** On hover over interactive elements, a burst of small colored dots radiates outward (CSS custom property animation or canvas particles), simulating overspray. - **Coastal organic blobs:** Soft, rounded shapes in Seafoam Mist float behind content panels at 15-20% opacity, suggesting ocean foam and water-worn pebbles. These drift slowly (translateX oscillation over 30s cycles). - **Layered tag overlaps:** Decorative text elements ("A6C", "BOO", abstract symbols) appear semi-transparently in the background, rotated and scaled, as if previous tags are showing through whitewash layers. **Icon treatment:** Custom SVG icons styled to look hand-drawn with variable stroke widths (2-4px), uneven corners, and slight wobble achieved through subtle path animation. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like an animated graffiti tour. The horizontal scroll is the backbone -- implement with CSS `scroll-snap-type: x mandatory` on a flex container with `flex-direction: row` and `overflow-x: auto`. Each section is `min-width: 100vw; height: 100vh`. **Opening animation sequence:** - Frame 0-800ms: Dark asphalt background. A spray-can cursor icon appears (custom cursor via CSS). - Frame 800-2500ms: The "A6C" letters draw themselves via SVG stroke-dashoffset animation, each letter in a different color (Spray Cyan, Coral Burst, Drip Gold). - Frame 2500-3500ms: ".boo" fades in below with a ripple distortion filter that settles over 1s. - Frame 3500ms+: A horizontal arrow hint pulses at the right edge, inviting scroll. **Section transitions:** As the user scrolls between horizontal panels, implement a "spray-over" transition: the incoming panel slides in with a splatter-shaped clip-path that expands from the leading edge, as if paint is being thrown over the current view. **Kinetic typography:** Key phrases should animate with letter-stagger (each character enters with a 40ms delay), slight bounce overshoot, and random rotation (-3deg to +3deg per character) that settles to 0. Use CSS @keyframes with custom properties for per-character delay. **Hover interactions:** Interactive elements respond with a ripple pattern emanating from the cursor position. Cards or link blocks acquire a drip effect on their bottom edge (pseudo-element height animates from 0 to 15px with a wavy bottom border). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, centered symmetric compositions, traditional hero-with-button patterns. No corporate structure -- this is a street art wall, not a SaaS landing page. **Scroll behavior:** Use `IntersectionObserver` to trigger paint-splatter entrance animations as panels come into view. Each panel's background texture should parallax at 0.3x speed relative to the horizontal scroll, creating depth. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal scroll as graffiti wall walk:** No other design in this collection uses horizontal scrolling as a metaphor for walking along a physical mural wall. The 2D navigation (horizontal primary + vertical sub-scroll) is structurally unique. 2. **Spray-paint animation system:** The SVG stroke-dashoffset animations simulating live spray-painting of text is a distinctive interaction not found in other designs. Combined with the stencil-cut SVG filter treatment, this creates a cohesive "street art being made in real time" experience. 3. **Coastal-graffiti aesthetic fusion:** While graffiti aesthetics exist in design, the deliberate blending with coastal colors (seafoam, sand, coral) and organic blob shapes creates an unusual contrast -- urban edge softened by seaside warmth. This is not standard street-style darkness. 4. **Splatter clip-path transitions:** The section transitions using irregular, splatter-shaped CSS clip-paths that expand organically are mechanically distinct from the parallax, fade, and slide transitions used elsewhere. 5. **Textured surface variation:** Each section panel sits on a visually different "wall surface" (brick, concrete, plaster, metal) via SVG texture patterns, creating the feeling of moving through a multi-surface urban environment. **Planned seed/style:** aesthetic: graffiti, layout: horizontal-scroll, typography: kinetic-animated, palette: coastal-blend, patterns: ripple, imagery: icon-heavy, motifs: organic-blobs, tone: elegant-sophisticated **Avoided overused patterns:** Centered layout (90%), card-grid (70%), parallax patterns (85%), scroll-triggered (80%), mono typography (85%), photography imagery (80%), gradient palette (95%), mysterious-moody tone (60%). Instead uses horizontal-scroll (15%), ripple (30%), kinetic-animated (5%), and elegant-sophisticated tone (10%).