# Design Language for aiice.quest ## Aesthetics and Tone aiice.quest is a deep-ocean exploration into the convergence of artificial intelligence, crystalline ice, and the curious wonderland of "Alice." The visual language channels the feeling of descending into an abyssal trench -- dark, pressurized, luminous with bioluminescent life forms that pulse in rhythm. Imagine the eerie beauty of deep-sea submersible footage from James Cameron's expeditions crossed with the Scandinavian functionalism of IKEA's design labs -- clean surfaces floating in unfathomable depth. The domain's triple meaning (AI + ICE + Alice) manifests as three visual threads woven throughout: algorithmic grid patterns (AI), frosted translucent surfaces with crystalline refraction (ICE), and subtle Alice-in-Wonderland surreal scale shifts where elements grow and shrink unexpectedly. The tone is luxurious and contemplative -- a high-end research lab submerged beneath Arctic waters, where every surface gleams with frost and every interface element pulses with quiet intelligence. ## Layout Motifs and Structure The layout employs a **full-bleed** immersive scroll structure where the viewport is treated as a submarine porthole. Each section is a full-viewport dive level, and scrolling moves the visitor deeper into the ocean of content. **Primary structure:** - **Surface level (100vh):** A shimmering ocean surface rendered with CSS wave animations and the "aiice" logotype frozen mid-crystallization -- letters appear as if forming from ice crystals that assemble from scattered particles. The ".quest" suffix floats below like a depth marker. - **Depth 1 - The Algorithm Layer:** Content panels arranged in a **bento-box** sub-grid (3 columns, 2 rows) with rounded corners (border-radius: 24px) and frosted glass backgrounds (backdrop-filter: blur(20px) saturate(180%)). Each cell contains a concept card that tilts slightly on hover (3D perspective transform). Grid gap: 16px. The entire grid floats over a dark gradient background with slowly drifting particle effects. - **Depth 2 - The Ice Chamber:** A single centered column (max-width: 680px) with generous vertical whitespace. Text blocks appear as if carved into ice -- inset shadows and subtle blue-tinted highlights on the top edges of each paragraph container. Long-form narrative content lives here. - **Depth 3 - The Wonderland:** Layout breaks conventions with elements at deliberately wrong scales -- oversized typography fragments (single letters at 40vw), tiny detail panels clustered in corners, and a diagonal scrolling section where content moves at 15-degree angles. This is the exploratory, playful section. - **Abyss (footer):** A vast dark void (#050510) with only a faintly glowing "aiice.quest" wordmark and a single bioluminescent blob pulsing gently. Navigation is invisible by default -- a thin frosted bar appears on scroll-up with ice-crystal icons for each depth level. ## Typography and Palette **Fonts:** - **Headlines:** "Nunito" (Google Fonts) -- a well-balanced rounded sans-serif with warmth and approachability that contrasts the cold ocean depth aesthetic. Weight 800 for primary headings, 600 for subheadings. Size: clamp(32px, 5vw, 72px). Letter-spacing: -0.02em for tight, elegant headlines. - **Body text:** "Inter" (Google Fonts) -- clean geometric sans with excellent readability at small sizes. Weight 400, line-height: 1.75, size: clamp(15px, 1.2vw, 18px). The functional Scandinavian clarity grounds the more expressive headline treatment. - **Accent/Code:** "IBM Plex Mono" (Google Fonts) -- for data readouts, depth markers, and technical annotations scattered throughout. Weight 400, size: 13px, letter-spacing: 0.05em. Rendered in Bioluminescent Cyan at 70% opacity. **Palette:** - **Abyss Black:** #050510 -- primary background, the deep ocean void - **Pressure Blue:** #0A1628 -- secondary background, deep water panels - **Ocean Deep:** #0D3B66 -- section dividers, depth indicators - **Bioluminescent Cyan:** #00E5CC -- primary accent, interactive elements, glowing highlights - **Ice Crystal:** #E0F7FA -- text highlights, frosted surface tints - **Frost White:** #F0FEFF -- primary text color against dark backgrounds - **Alice Gold:** #FFD54F -- secondary accent, wonderland elements, special markers ## Imagery and Motifs **Core visual motifs:** - **Bioluminescent particles:** A persistent particle system (CSS animation with multiple small radial-gradient dots) drifting slowly upward across the viewport, simulating deep-sea plankton. Colors alternate between Bioluminescent Cyan and Alice Gold at varying opacities (10%-40%). Particles respond to scroll velocity -- faster scrolling increases their drift speed. - **Ice crystal formations:** Decorative SVG elements at section borders -- hexagonal crystal lattice patterns that grow outward from center points. These use stroke animations (stroke-dashoffset transitions) to draw themselves as they enter the viewport. - **Frosted glass panels:** All content containers use backdrop-filter: blur(16px) saturate(150%) with a 1px border of rgba(224, 247, 250, 0.15) and a subtle inner glow (inset box-shadow 0 0 30px rgba(0, 229, 204, 0.05)). This creates the ice-window effect throughout. - **Scale-shift elements:** In the Wonderland section, certain elements use CSS `scale()` transforms triggered by scroll position -- a small icon might grow to fill half the viewport, or a large heading might shrink to a whisper. This Alice-in-Wonderland disorientation is the signature interaction. - **Depth pressure gauge:** A vertical progress indicator on the right edge of the viewport -- a thin line (#0D3B66) with a glowing dot (Bioluminescent Cyan) that tracks scroll position, labeled with "depth" markers in IBM Plex Mono. **Icon system:** Custom line icons rendered at 1.5px stroke weight in Bioluminescent Cyan -- abstract geometric shapes suggesting AI nodes, snowflake/crystal structures, and playing card suits (the Alice thread). ## Prompts for Implementation **Full-screen narrative experience:** The site is a single-page descent. On load, the surface viewport shows a CSS-animated ocean surface -- multiple layered div elements with sinusoidal translateY animations at different speeds and opacities (creating parallax water depth). The "aiice" logotype assembles from scattered crystalline fragments (individual letter spans animated from random positions with spring-eased transitions, delay-staggered 100ms apart). **Scroll-driven depth system:** Use Intersection Observer API to trigger depth-level transitions. As each section enters the viewport, the background color shifts slightly deeper (CSS custom property --depth-color transitions from #0A1628 to #050510 over the page length). The depth gauge on the right updates continuously via scroll event listener. **Frosted glass everywhere:** Every content card, navigation element, and interactive component uses the frosted glass treatment. Vary the blur amount by depth level: Surface = blur(8px), Depth 1 = blur(16px), Depth 2 = blur(24px), Wonderland = blur(32px). This increasing blur suggests increasing pressure/depth. **The Wonderland section disorientation:** Implement with CSS transforms driven by scroll position. Use `transform: scale()` on elements with `transform-origin: center`. A heading might have `scale(calc(1 + var(--scroll-pct) * 4))` where --scroll-pct is updated via JavaScript. Combine with `opacity` fades so elements appear to "fall through" the page. **Elastic interactions:** All hover states use spring-physics easing (cubic-bezier(0.175, 0.885, 0.32, 1.275)) with slight overshoot. Buttons expand 4% on hover, cards lift with translateY(-6px) and increased box-shadow spread. The elastic quality suggests underwater buoyancy. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No testimonial carousels. No sticky headers that compete with the depth gauge. ## Uniqueness Notes **Differentiators from other designs:** 1. **Deep-ocean descent as navigation metaphor:** No other design in the collection uses oceanic depth as a scrolling metaphor with a live depth gauge. The pressure/depth concept drives both aesthetics and interaction -- deeper scroll means darker backgrounds, heavier blur, slower animations. 2. **Triple-meaning visual threading (AI + ICE + Alice):** The three interpretations of "aiice" each get their own visual thread woven throughout -- algorithmic grid patterns, ice crystal formations, and Alice-in-Wonderland scale distortions. This layered meaning system is unique. 3. **Scale-shift Wonderland section:** The deliberate breaking of spatial consistency in the third section -- elements growing and shrinking based on scroll position -- creates a disorienting, playful contrast to the controlled Scandinavian functionality elsewhere. No other design uses scale as an interactive narrative device. 4. **Bioluminescent particle system as ambient layer:** The persistent drifting particles that respond to scroll velocity create a living, breathing atmosphere unique to this design. Combined with the frosted glass panels, it creates an underwater research station aesthetic. **Planned seed:** scandinavian, full-bleed, rounded-sans, ocean-deep, elastic, icon-heavy, geometric-shapes, luxurious **Avoided overused patterns:** centered layout as primary structure, photography imagery, gradient palette as dominant, mysterious-moody tone, mono typography dominance, parallax as primary pattern