# Design Language for a6c.xyz ## Aesthetics and Tone a6c.xyz is a surrealist cabinet of curiosities rendered in neon and marble. The visual identity draws from Salvador Dali's melting landscapes, Giorgio de Chirico's impossible architectural perspectives, and the dreamlike collages of Max Ernst -- but filtered through a contemporary dark-neon lens. The ".xyz" TLD suggests coordinates in three-dimensional space, and the design leans into this: elements appear to exist at impossible depths, perspectives shift as you scroll, and the boundary between foreground and background is deliberately ambiguous. The tone is energetic -- there is constant visual motion, surprising juxtapositions, and a sense that the page is alive and slightly unpredictable. This is not calm contemplation; it is the exhilarating vertigo of falling through a Magritte painting at midnight. Information is delivered with theatrical confidence, each section a new stage set. ## Layout Motifs and Structure The layout uses **stacked-sections** with each section occupying near-full viewport height, but with a surrealist twist: sections appear to overlap in impossible ways, with elements from one section "bleeding" into the next through CSS clip-path shapes that create torn, organic edges rather than clean horizontal dividers. **Primary structure:** - **Opening viewport (100vh):** A deep dark-neon void (#0A0A1A) with the "a6c" logotype rendered in Art Deco display treatment -- tall, narrow, gilded letterforms centered on screen. The letters cast long shadows that extend downward impossibly far (200% letter height), creating a de Chirico-esque perspective illusion. ".xyz" appears below as three separate characters spaced wide (letter-spacing: 2em), each floating at a slightly different vertical position. - **Section stacking with bleed:** Each section sits in a `position: sticky; top: 0` arrangement, so as you scroll, new sections slide up over the previous ones. The top edge of each section uses a CSS clip-path with organic wave shapes, creating the illusion of one reality peeling back to reveal another beneath. - **Marble texture panels:** Key content blocks sit within containers that have a marble-texture background (CSS only: layered radial-gradients with noise filters creating vein patterns). These panels are rotated 1-2 degrees, with box-shadow creating a floating-slab effect. - **Surrealist depth layers:** Each section contains background elements (oversized text, geometric shapes, marble fragments) at z-index layers behind content, scrolling at different rates to create parallax depth without using the overused parallax scroll library patterns. - **Book-scholarly layout within sections:** Individual content blocks use a scholarly two-column format with wide margins, footnote-style annotations, and ornamental drop caps in Art Deco style. ## Typography and Palette **Fonts:** - **Headlines:** "Poiret One" (Google Fonts) -- a distinctive Art Deco geometric display typeface with thin, elegant strokes and characteristic round terminals. Its decorative nature perfectly suits the surrealist-theatrical tone. Size: clamp(36px, 6vw, 96px), weight 400 (only weight available), text-transform: uppercase, letter-spacing: +0.08em. - **Body text:** "Source Serif 4" (Google Fonts) -- a robust transitional serif with excellent readability and a scholarly gravity. Weight 400 for body, 600 for emphasis. Line-height: 1.75. Its classical proportions ground the surrealist visual layer in readable authority. - **Accent/Annotations:** "Inconsolata" (Google Fonts) -- a clean monospace for footnotes, annotations, and metadata labels. Weight 300, font-size: 0.85em, used to create the scholarly apparatus around main content. **Color Palette -- Dark Neon Surreal:** - **Void Black:** #0A0A1A -- the deep base, an almost-purple black suggesting infinite depth - **Neon Magenta:** #FF00FF -- primary neon accent, used sparingly for maximum impact on key interactive elements and highlights - **Electric Violet:** #7B2FBE -- secondary accent for gradients, hover states, and shadow tints - **Marble Vein:** #C5B8A5 -- warm neutral for marble textures, ornamental borders, and body text backgrounds - **Gilded Edge:** #D4AF37 -- metallic gold for Art Deco ornamentation, drop caps, and divider lines - **Cool Slate:** #2A2A3E -- raised panel backgrounds, slightly lighter than Void Black - **Phosphor White:** #EAEAFF -- slightly cool white for text on dark backgrounds, with a hint of blue that matches the neon environment ## Imagery and Motifs **Core visual motifs:** - **Marble texture surfaces:** CSS-generated marble patterns using layered radial-gradients with varying sizes and positions, combined with SVG feTurbulence filters for vein detail. These appear as content panel backgrounds and decorative floating slabs. Colors: Marble Vein with darker veins in Cool Slate. - **Book-scholarly ornamentation:** Decorative drop caps (first letter of key paragraphs) rendered at 4x body size in Poiret One with Gilded Edge color. Section numbers in roman numerals (I, II, III) positioned in the left margin like a classical text. Ornamental rules (1px Gilded Edge lines with small diamond shapes at center) divide subsections. - **Impossible shadows:** Elements cast shadows that behave incorrectly -- shadows that point in different directions, that are longer than their source, that have color (Electric Violet tinted). Achieved with multiple box-shadow declarations using offset, blur, and colored values. - **Neon edge glow:** Interactive elements have a subtle outer glow (box-shadow: 0 0 20px rgba(255,0,255,0.15)) that intensifies on hover (0.4 opacity). Text links gain a text-shadow glow effect. - **Surrealist floating fragments:** Decorative elements -- fragments of marble slabs, geometric shapes, single oversized letters -- float in the background layers, slowly rotating (CSS animation rotate, 120s duration) and drifting (translateY oscillation), creating a dreamscape quality. - **De Chirico archways:** SVG illustrations of classical arches and colonnades rendered in thin Gilded Edge lines against Void Black, positioned at the edges of sections to create the illusion of architectural frames around content. ## Prompts for Implementation **Full-screen narrative scroll:** The page is a vertical descent through surrealist spaces. Each section (100vh) uses `position: sticky; top: 0` to create a card-stack effect where new sections overlay previous ones. The organic clip-path at each section's top edge (`clip-path: polygon(0 4%, 15% 0, 35% 3%, 50% 1%, 70% 4%, 85% 0, 100% 3%, 100% 100%, 0 100%)`) creates a torn-reality transition. **Fade-reveal entrance pattern:** Content within each section uses a fade-reveal animation: elements start at opacity: 0 and translateY(40px), then animate to opacity: 1 and translateY(0) with a 600ms duration and ease-out timing. Stagger child elements with 150ms increments. Trigger via IntersectionObserver with threshold: 0.2. **Opening sequence:** - Frame 0-600ms: Void Black screen. A thin Gilded Edge horizontal line draws itself across the center (width animates 0 to 100%). - Frame 600-1800ms: "A6C" letters fade-reveal from below, one at a time (400ms each), in Poiret One at maximum size, Phosphor White. - Frame 1800-2600ms: ".xyz" characters fade in simultaneously but at staggered vertical positions (y offsets: -10px, 0, +10px), then settle to aligned position over 400ms. - Frame 2600ms+: Neon Magenta glow pulses once around the logotype. Background marble fragments begin their slow drift animation. **Marble panel hover:** When hovering over marble-textured content panels, the marble veins animate subtly (the feTurbulence baseFrequency value shifts slightly via CSS filter animation), making the stone appear to breathe. **Scroll-linked shadow play:** As the user scrolls through a section, the impossible shadows on elements shift their angle (box-shadow offset values update via CSS custom properties tied to scroll position), creating an eerie moving-light-source effect. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No bright-white SaaS layouts. No symmetrical hero-button-features patterns. Every section should feel like entering a new room in a surrealist museum. ## Uniqueness Notes **Differentiators from other designs:** 1. **Sticky-stack section transitions with organic clip-paths:** The card-stacking scroll behavior combined with torn-reality clip-path edges creates a unique section transition that feels like peeling back layers of a dream. No other design uses this sticky-overlay-with-organic-mask technique. 2. **CSS-generated marble textures:** Rather than using image assets, the marble surfaces are created entirely with layered CSS gradients and SVG filters, making them lightweight, infinitely variable, and animatable (breathing stone effect). 3. **Impossible shadow system:** Shadows that deliberately violate physical light rules (multi-directional, colored, disproportionate) as a cohesive design element tied to the surrealist concept. This is a consistent visual language, not a bug. 4. **Art Deco scholarly hybrid:** Combining Art Deco display typography (Poiret One) with scholarly apparatus (roman numerals, drop caps, footnote margins, ornamental rules) creates an aesthetic hybrid -- a surrealist academic journal -- that has no parallel in the collection. 5. **De Chirico architectural framing:** Using classical arch and colonnade SVG illustrations as section frames directly references specific surrealist art history, creating a curated gallery experience. **Planned seed/style:** aesthetic: surreal, layout: stacked-sections, typography: art-deco-display, palette: dark-neon, patterns: fade-reveal, imagery: marble-texture, motifs: book-scholarly, tone: energetic **Avoided overused patterns:** Centered layout (90%), card-grid (70%), parallax (85%), scroll-triggered (80%), cursor-follow (75%), mono typography (85%), gradient palette (95%), mysterious-moody tone (60%). Instead uses stacked-sections (15%), fade-reveal (50%), art-deco-display (0%), dark-neon (20%), and energetic tone (5%).