# Design Language for aiice.io ## Aesthetics and Tone aiice.io is a wonderland engine — an art-deco ice palace where artificial intelligence, frozen crystallography, and Lewis Carroll's Alice converge into a single playful, jewel-toned universe. The visual identity draws from the geometric opulence of 1920s Chrysler Building lobbies, but reimagined as if the entire interior were carved from translucent, tinted ice blocks. Every surface shimmers with the cold precision of AI computation rendered through the warm, ornamental language of art-deco fan motifs, stepped arches, and chevron borders. The tone is **playful** — not childish, but delightfully curious. The site speaks with the confident whimsy of Alice stepping through the looking glass into a world where logic is both perfectly maintained and deliciously inverted. Headlines read like riddles. Transitions feel like tumbling. The experience rewards exploration with small visual surprises: a geometric rabbit that blinks, ice crystals that refract when hovered, deco archways that expand to reveal hidden content chambers. The triple-meaning of "aiice" (AI + Ice + Alice) informs every design choice: AI provides the grid-line precision and computational geometry; Ice provides the crystalline transparency, refraction effects, and cool palette; Alice provides the narrative whimsy, the sense of passage between worlds, and the playful inversions of expectation. The result is a site that feels like a frozen art-deco arcade discovered at the bottom of a digital rabbit hole. ## Layout Motifs and Structure The layout follows a **bento-box** grid system — a dense, irregularly proportioned grid where content blocks of varying sizes snap into a tight mosaic. Unlike a uniform card-grid, the bento-box composition uses 2:1, 1:1, 3:2, and 1:3 aspect ratios arranged with intentional asymmetry within a containing grid. The grid itself is visible: thin gold (#C9A84C) lines at 1px weight trace every cell boundary, creating the art-deco geometric scaffolding that defines the entire visual system. **Structure:** - **Hero zone (100vh):** A full-viewport art-deco archway rendered in translucent jewel tones. The archway is constructed from nested chevron shapes in emerald, sapphire, and amethyst, forming a tunnel-like perspective that draws the eye to the center. At the center sits the "aiice" wordmark, set in Baloo 2 at 96px, with each letter encased in its own ice-facet hexagonal cell. Below the wordmark, a single line of text — "Through the Looking Glass of Intelligence" — in Quicksand at 18px, letter-spacing 0.3em. The entire hero subtly pulses with a slow breathing animation (scale 1.0 to 1.015 over 6 seconds), as if the archway is alive. - **Bento grid zone:** Immediately below the hero, a 4-column bento grid fills the viewport. The grid uses `grid-template-columns: 2fr 1fr 1fr 2fr` with 8px gaps. Each cell is a self-contained content chamber with its own jewel-tone background (deep emerald #065535, midnight sapphire #0F3460, rich amethyst #4A0E4E, or warm ruby #6B0F1A). Cells contain short text blocks, animated SVG motifs, or organic blob illustrations. The grid is 3 rows deep on desktop, reconfiguring to a 2-column then single-column stack on smaller viewports. Cell heights vary: some span 2 rows, creating the characteristic bento irregularity. - **Passage zone (100vh):** A transitional full-screen section styled as a looking-glass portal — a large circular art-deco frame (constructed from concentric rings of stepped geometry in gold and ice-blue) centered on screen. Inside the circle, a slow-morphing organic blob shifts between amethyst and emerald gradients. This section has no text; it is a visual breath, a passage between the informational grid above and the narrative section below. - **Narrative cards zone:** A horizontal arrangement of 3 tall cards (aspect ratio ~1:2) positioned in a staggered vertical offset (middle card sits 40px lower than flanking cards). Each card has a frosted-glass effect (backdrop-filter: blur(12px) with a semi-transparent jewel-tone overlay) and contains a short narrative block with an animated SVG header motif. The stagger creates a sense of depth without relying on parallax. - **Footer zone:** A narrow band styled as the base of the art-deco archway from the hero — the same chevron geometry, but inverted and compressed into a 120px strip. The "aiice" wordmark reappears at 24px, centered, with a subtle ice-crystal SVG pattern repeating horizontally behind it. ## Typography and Palette **Typography:** - **Display / Wordmark:** "Baloo 2" (Google Fonts) — a rounded, buoyant display typeface with generous curves and a playful personality that counterbalances the geometric precision of the art-deco grid. Used at 64px-96px for the hero wordmark and section titles. Weight 700 (Bold). Letter-spacing: 0.04em. The rounded terminals of Baloo 2 evoke melting ice and soft computation — the warmth inside the frozen palace. - **Headings:** "Quicksand" (Google Fonts) — a geometric sans-serif with perfectly rounded terminals and a clean, modern feel. Used at 24px-36px for bento cell headings, card titles, and navigational labels. Weight 600 (SemiBold). Letter-spacing: 0.08em. Text-transform: uppercase for grid headings, sentence-case for card titles. Quicksand's roundedness harmonizes with Baloo 2 while providing better readability at smaller sizes. - **Body / Descriptive Text:** "Nunito" (Google Fonts) — a well-balanced rounded sans-serif with excellent legibility at body sizes. Used at 15px-17px, weight 400, line-height: 1.75. Nunito's rounded letterforms maintain the playful-rounded typographic identity at paragraph scale without sacrificing readability. - **Accent / Data / Labels:** "IBM Plex Mono" (Google Fonts) — used sparingly for numerical data, code-like labels, and small annotations within bento cells. 12px-14px, weight 400. The mono typeface introduces the AI/computational thread without dominating; it appears only in small doses as a counterpoint to the rounded trio. **Palette — Jewel Tones on Deep Black:** | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (primary) | Deep Obsidian | #0B0C10 | Near-black with a cool blue undertone; the void behind the ice palace | | Background (cell alt) | Midnight Sapphire | #0F3460 | Deep blue for alternating bento cells | | Background (cell alt) | Forest Emerald | #065535 | Deep green for alternating bento cells | | Background (cell alt) | Deep Amethyst | #4A0E4E | Rich purple for alternating bento cells | | Background (cell alt) | Dark Ruby | #6B0F1A | Warm red-black for accent cells | | Accent (primary) | Deco Gold | #C9A84C | Art-deco gold for grid lines, borders, and ornamental geometry | | Accent (secondary) | Ice Blue | #A8D8EA | Pale translucent blue for highlights, hover states, and frosted overlays | | Accent (tertiary) | Refracted Teal | #00B4D8 | Bright teal for interactive elements and blob gradients | | Text (primary) | Frost White | #E8E6E3 | Warm off-white for body text against dark backgrounds | | Text (heading) | Pure Ice | #F0F5F9 | Slightly cooler white for headings | | Glow / Effect | Amethyst Glow | #9B59B6 | Used in box-shadows and glow effects on hover | | Glow / Effect | Emerald Spark | #2ECC71 | Used in SVG animation accents and blob gradient endpoints | **Color Application Rules:** - Bento cells rotate through the four jewel-tone backgrounds (sapphire, emerald, amethyst, ruby) in a non-repeating pattern — no two adjacent cells share the same background. - Deco Gold (#C9A84C) is used exclusively for structural geometry: grid lines, chevron borders, archway outlines, and ornamental SVG paths. It never appears as text color or background. - Ice Blue (#A8D8EA) is used for hover states, focus rings, and the frosted-glass overlay tint. - All text sits on dark backgrounds; there are no light-background sections. ## Imagery and Motifs **Organic Blobs (Primary Visual Element):** The site's signature visual motif is CSS/SVG organic blobs — amorphous, slowly morphing shapes that evoke both biological cells and ice formations viewed under a microscope. These blobs are constructed using SVG `` elements with cubic Bezier curves, animated via CSS keyframes or JavaScript to continuously shift their control points over 8-12 second cycles. Each blob is filled with a radial gradient that blends two jewel tones (e.g., amethyst-to-emerald, sapphire-to-teal, ruby-to-gold). The gradients have a subtle transparency (opacity 0.7-0.85), allowing the dark background and grid lines to show through, creating a sense of the blob floating behind or within the deco framework. Blob placement is strategic: one large blob (300-500px diameter) anchors the passage zone; smaller blobs (80-150px) appear within specific bento cells as decorative elements; micro-blobs (20-40px) serve as bullet-point markers and list decorations. The blobs never overlap text — they are positioned in dedicated visual zones within each cell. **Art-Deco Geometric Patterns (Grid-Lines Motifs):** The grid-lines motif manifests as visible structural geometry drawn in Deco Gold (#C9A84C). This includes: - The bento grid's cell borders (1px solid gold lines) - Chevron/fan patterns at section transitions (constructed from nested `` SVGs) - Stepped archway frames around the hero wordmark and passage zone portal - Corner ornaments on bento cells: small deco flourishes (quarter-circle fan shapes with radiating lines) placed at the top-left corner of every third cell - A continuous horizontal rule pattern between major sections: a repeating stepped pyramid motif, 24px tall, rendered as an inline SVG **Ice Crystal Decorative Elements:** Small hexagonal crystal shapes appear as secondary decorative elements — used as hover indicators, loading states, and list markers. Each crystal is a simple SVG hexagon with internal facet lines drawn in Ice Blue (#A8D8EA) at 0.5px stroke-width. On hover, the crystal fills with a brief flash of Refracted Teal (#00B4D8) before returning to transparent. **Alice Narrative Illustrations:** Three custom SVG scenes appear within the narrative cards zone, each constructed entirely from geometric shapes in the jewel-tone palette: 1. "The Rabbit" — a geometric rabbit silhouette composed of overlapping circles and triangles in Deco Gold, with amethyst blob eyes that blink on a 5-second interval 2. "The Keyhole" — a classic keyhole shape framed by a deco arch, with a morphing emerald blob visible through the keyhole opening 3. "The Chess Queen" — a stylized chess queen piece built from stacked deco geometric forms (stepped crown, cylindrical body), rendered in ruby and gold ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be built as a single continuous vertical scroll from the art-deco archway hero through the bento grid, past the looking-glass passage, into the narrative cards, and down to the chevron footer. There is no traditional navigation bar. The only navigational affordance is a small geometric compass rose (four overlapping deco triangles in gold) fixed at the bottom-right corner that, when hovered, reveals a minimal radial menu with section labels in Quicksand 12px uppercase. **Elastic Animation Pattern:** All animated elements use an elastic easing function — `cubic-bezier(0.68, -0.55, 0.265, 1.55)` — that creates a slight overshoot-and-settle on every transition. This gives the entire site a bouncy, playful feel: bento cells scale to 1.03 on hover before settling back to 1.0; the passage zone blob morphs with elastic overshoots in its Bezier control points; section titles slide in from below with a spring-like arrival. The elastic feel is the kinetic signature of the site and must be applied consistently to all transitions and animations. **Bento Cell Entrance Animations:** As the user scrolls into the bento grid zone, cells enter the viewport with a staggered elastic animation: each cell begins at opacity 0 and translateY(30px), then animates to opacity 1 and translateY(0) using the elastic easing. The stagger delay is 80ms per cell, creating a cascading tile-reveal effect that moves left-to-right, top-to-bottom. This animation triggers once via IntersectionObserver and does not repeat. **Blob Morphing Implementation:** The organic blobs must use SVG path morphing. Define 3-4 keyframe path shapes (each a closed Bezier path with the same number of control points) and animate between them using CSS `@keyframes` on the `d` attribute (via CSS `d: path(...)` in supported browsers) or JavaScript `animate()`. The morphing should be continuous and looping, with each transition taking 3-4 seconds and using the elastic easing for control point interpolation. The effect should look like a living, breathing amoeba trapped in ice. **Frosted Glass Card Effect:** The narrative cards use `backdrop-filter: blur(12px) saturate(1.4)` combined with a semi-transparent jewel-tone background (e.g., `rgba(15, 52, 96, 0.4)` for sapphire). The blur catches the organic blob and deco geometry behind the card, creating a frosted-ice effect. A 1px border in `rgba(201, 168, 76, 0.3)` (translucent gold) outlines each card. On hover, the border opacity animates to 1.0 with elastic easing. **Grid-Lines as Living Architecture:** The gold grid lines are not static. On page load, they draw themselves in using SVG `stroke-dasharray` / `stroke-dashoffset` animation — lines extend from intersection points outward over 1.5 seconds, creating the impression that the art-deco framework is constructing itself in real-time. This animation plays once on initial load. **Storytelling Bias:** The site tells the story of aiice in three acts: Act 1 (Hero + Bento) introduces the world and its visual language; Act 2 (Passage) creates a moment of wonder and transition; Act 3 (Narrative Cards) delivers the conceptual payload — what aiice means, what it does, where it leads. Each act has a distinct emotional rhythm: Act 1 is energetic and dense; Act 2 is meditative and spacious; Act 3 is intimate and narrative. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, generic hero-with-button patterns. This is not a SaaS landing page. It is an experience. ## Uniqueness Notes **Differentiators:** 1. **Art-Deco Ice Palace Metaphor:** No other design in this collection uses the art-deco aesthetic (only 4% frequency). The combination of 1920s geometric opulence with ice/crystalline materiality is entirely unique. While other designs may use gold accents or geometric patterns individually, none frame their entire visual identity as an ice palace viewed through art-deco architectural ornament. 2. **Bento-Box Grid with Visible Gold Structure:** The bento-box layout appears at only 8% frequency across existing designs. Here it is made even more distinctive by making the grid structure itself a primary visual element — the gold lines are not hidden infrastructure but celebrated ornament. The grid is the art, not just the container for art. 3. **Triple Semantic Layer (AI/Ice/Alice):** The design encodes three distinct meaning layers into every visual choice. The geometric precision comes from AI; the translucent jewel-tone materiality comes from Ice; the playful narrative structure comes from Alice. No other design in the collection operates with this kind of multi-referent semantic system where every element simultaneously serves three conceptual masters. 4. **Elastic-Only Animation System:** While elastic easing appears at only 12% frequency, this design uses it as the exclusive animation easing for every transition on the site. This creates a unique kinetic personality — the entire site bounces and settles with a consistent physical character that no other design replicates. 5. **Organic Blobs Inside Geometric Architecture:** The tension between fluid, morphing organic blobs (4% imagery frequency) and rigid art-deco geometric framing is a deliberate visual paradox. The blobs represent the organic (Alice, wonder, biological intelligence) trapped within or emerging through the geometric (AI, computation, deco architecture). This interplay does not exist in any other design in the collection. **Seed / Style Documentation:** - aesthetic: art-deco - layout: bento-box - typography: playful-rounded - palette: jewel-tones - patterns: elastic - imagery: organic-blobs - motifs: grid-lines - tone: playful **Avoided Overused Patterns:** - Avoided asymmetric layout (95% frequency) in favor of bento-box (8%) - Avoided mono typography (95%) in favor of playful-rounded (8%) - Avoided parallax/stagger patterns (95%) in favor of elastic (12%) - Avoided tech motifs (95%) in favor of grid-lines (0% as standalone) - Avoided minimal imagery (87%) in favor of organic-blobs (4%) - Avoided warm palette (100%) in favor of jewel-tones (0% as standalone) - Avoided friendly/authoritative tone (41%/33%) in favor of playful (specific playful tone is underrepresented)