# Design Language for sim-ai.xyz ## Aesthetics and Tone sim-ai.xyz embodies the visual language of a 1980s arcade cabinet instruction manual crossed with a speculative research lab from a Wes Anderson film. The playful aesthetic is grounded not in bright candy colors but in the quiet humor of misaligned grids, intentionally "wrong" element placement, and typography that feels lifted from a VHS rental store's membership card. Think of an AI research company that decorated its office with thrift-store furniture and hand-labeled everything with a Brother P-Touch label maker from 1994. The tone is friendly but slightly absurd -- the kind of warmth you get from a robotics professor who wears Hawaiian shirts to lectures and names all their prototypes after jazz musicians. Every visual element should feel like it was placed by a human who cared deeply but also found the whole enterprise of "looking professional" somewhat amusing. The site should evoke the feeling of flipping through a well-loved technical manual that someone has annotated with doodles in the margins. The overall mood references the intersection of retro computing interfaces (CRT phosphor afterglow, scan lines, blocky pixel grids) with the organic imprecision of risograph printing -- where ink bleeds slightly, registration is never quite perfect, and that imperfection becomes the aesthetic itself. ## Layout Motifs and Structure The layout uses a broken-grid system where content blocks deliberately violate alignment expectations. No two sections share the same grid origin point. The page is structured as a series of overlapping "cards" or "panels" that feel like physical objects scattered across a desk -- some rotated 1-3 degrees via CSS transforms, others offset from center by irregular margins, creating a composition that reads as intentional disorder. **Primary Structure:** - The hero section occupies 100vh and presents a single large headline rotated -2deg against a field of animated abstract shapes. The headline is positioned at approximately 60% from the top and 15% from the left, breaking the expectation of centered hero text. - Below the hero, content is organized into 5 narrative zones. Each zone uses a different sub-grid: Zone 1 uses a 3-column grid with the middle column twice as wide; Zone 2 shifts to a 2-column layout where the left column is only 30% width; Zone 3 is a single wide column offset 20% to the right; Zone 4 returns to 3 columns but with 40px gaps and deliberate overlap between adjacent cards (negative margins of -30px); Zone 5 is a full-bleed section with inset content. - Between zones, "interstitial strips" -- thin horizontal bands (60-80px tall) containing repeating SVG patterns of abstract shapes -- serve as visual breathing room and reinforce the retro-display character. - Navigation is minimal: a fixed top-left wordmark (the domain name in Press Start 2P at 14px) and a floating circular menu button in the bottom-right corner that expands radially when clicked. - Cards within the broken grid cast subtle `box-shadow` values (`4px 4px 0px #2D2D3A`) to create a flat-but-layered paper-cutout depth. No gradients on shadows -- hard edges only, reinforcing the retro print aesthetic. **Scroll Behavior:** - As the user scrolls, panels slide into view from alternating sides (odd sections from left via `translateX(-120px)`, even from right via `translateX(120px)`), with a parallax depth factor applied to background shapes (background moves at 0.4x scroll speed, foreground at 1.0x). The parallax is subtle -- not a theme park ride, but a gentle spatial suggestion. ## Typography and Palette **Typography:** - **Headlines:** "Press Start 2P" (Google Fonts) -- a pixel-style display font that channels 8-bit gaming culture directly. Used at sizes 2rem-4.5rem with generous line-height (1.4) and letter-spacing (0.08em) to prevent the blocky characters from feeling cramped. Headlines are always uppercase. For the hero, use `clamp(2rem, 4vw + 0.5rem, 4.5rem)` for fluid scaling. - **Subheadings:** "Space Mono" (Google Fonts) -- a monospaced font with geometric character that bridges the gap between the pixel headlines and body text. Weight 700 for subheadings, used at 1.2rem-1.8rem. Letter-spacing: 0.04em. - **Body Text:** "Outfit" (Google Fonts) -- a geometric sans-serif with a warm, rounded quality that keeps long passages readable despite the retro context. Weight 400 for body, 600 for emphasis. Size: 1rem-1.125rem with line-height 1.7 and `max-width: 38em` on text blocks for optimal reading measure. - **Accents/Labels:** "Space Mono" at weight 400, 0.75rem, uppercase with 0.12em letter-spacing -- used for category tags, metadata, timestamps, and any "system text" that mimics interface labels. **Palette:** The cool-grays palette builds a sophisticated neutral foundation accented by two carefully chosen signal colors: | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Fog | #E8E9ED | Main page background, carries a slight blue undertone | | Background Secondary | Slate Wash | #C8CCD4 | Card backgrounds, alternating section fills | | Text Primary | Charcoal Ink | #2D2D3A | Headlines, body text, primary content | | Text Secondary | Pewter | #6B7080 | Subheadings, secondary labels, metadata | | Accent Warm | Coral Signal | #E8634A | Interactive elements, hover states, key highlights | | Accent Cool | Electric Slate | #4A6FA5 | Links, active states, secondary interactive elements | | Dark Ground | Deep Graphite | #1E1F26 | Dark section backgrounds, footer, navigation overlay | | Highlight | Lemon Zap | #F2D94E | Sparse highlight for badges, notification dots, special callouts | The palette deliberately avoids warm dominance. Cool grays set the emotional temperature; the Coral Signal and Lemon Zap appear sparingly (no more than 15% of any viewport) to create moments of visual punctuation against the silver-blue monotone. ## Imagery and Motifs **Abstract Shapes as Visual Characters:** The primary imagery strategy uses CSS-generated and SVG abstract shapes that function as recurring "characters" throughout the site. These are not decorative afterthoughts but narrative elements with personality: - **The Wobble Circle:** A large (200-400px) imperfect circle rendered as an SVG path with slightly randomized control points, filled with Coral Signal (#E8634A) at 60% opacity. It appears in the hero section and reappears in smaller variations (40-80px) scattered through content zones. The wobble is achieved via a CSS animation that subtly morphs the border-radius between `42% 58% 45% 55% / 55% 42% 58% 45%` and `55% 45% 58% 42% / 42% 55% 45% 58%` on a 6-second loop. - **The Grid Fragment:** Partial grid patterns (5x5 or 7x7 squares, some cells filled, some empty) rendered in Pewter (#6B7080) at 30% opacity. These float behind content sections and slowly rotate (360deg over 90 seconds) to create ambient movement. Each grid fragment has a unique pattern of filled/empty cells, like a tiny cellular automaton frozen mid-step. - **The Zigzag Strip:** Horizontal bands of zigzag SVG patterns in Charcoal Ink (#2D2D3A) at 15% opacity, used as section dividers. The zigzag frequency varies (some tight at 20px wavelength, some loose at 60px) to prevent monotony. - **The Dot Cloud:** Clusters of 8-15 small circles (4-8px diameter) in various palette colors at 20-40% opacity, positioned near content edges. They drift gently (translateY oscillation of 10px over 8 seconds) to suggest floating particles. **Flowing Curves as Connective Tissue:** Large SVG bezier curves in Electric Slate (#4A6FA5) at 20% opacity sweep across section boundaries, visually connecting zones that the broken grid deliberately separates. These curves are drawn using `stroke-dasharray` and `stroke-dashoffset` animations triggered on scroll -- as the user reaches a section boundary, the curve "draws itself" over 1.5 seconds with an ease-in-out timing function. The curves follow organic flowing paths (no straight segments, no sharp corners) and vary in stroke-width from 2px to 6px. **No Photography:** The site uses zero photographic imagery. Everything is generated through CSS shapes, SVG illustrations, and typographic treatments. This reinforces the abstract, computational identity of the sim-ai brand. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a continuous story about artificial intelligence told through abstract visual metaphors rather than literal imagery. The hero section fills 100vh with the Fog background and a single large Wobble Circle floating at the upper-right quadrant (positioned at `top: 15vh; right: 10vw`). The hero headline in Press Start 2P reads as a provocative question or statement about simulation and AI, rotated -2deg, positioned lower-left. On load, the headline fades in from opacity 0 over 1.2 seconds, and the Wobble Circle scales from 0.3 to 1.0 over 1.8 seconds with a spring-like cubic-bezier(0.34, 1.56, 0.64, 1). **Parallax Depth System:** Three visual layers create spatial depth throughout the scroll experience: - **Layer 0 (Background):** Grid Fragments and Dot Clouds move at 0.3x scroll speed, creating a deep background plane - **Layer 1 (Mid-ground):** Flowing curve SVGs and Zigzag Strips move at 0.6x scroll speed - **Layer 2 (Foreground):** Content cards and text move at 1.0x (normal scroll) Implement parallax via `transform: translateY(calc(var(--scroll-offset) * FACTOR))` updated on `requestAnimationFrame` with scroll position. Use `will-change: transform` on parallax elements for GPU acceleration. The parallax effect should be disabled on screens narrower than 768px (use `prefers-reduced-motion` media query as well). **Broken-Grid Card Interactions:** Content cards have three states: - **Rest:** `box-shadow: 4px 4px 0px #2D2D3A; transform: rotate(Xdeg)` where X is a per-card random value between -2 and 2 - **Hover:** `box-shadow: 6px 6px 0px #E8634A; transform: rotate(0deg) scale(1.02); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)` -- the card "snaps to attention," losing its casual rotation - **Active/Click:** `box-shadow: 2px 2px 0px #4A6FA5; transform: translateY(2px)` -- a subtle press-down **Storytelling Sections:** Each of the 5 content zones tells a chapter: 1. "What is Simulation?" -- introduces the concept with a large Wobble Circle morphing through shapes 2. "The Intelligence Layer" -- Grid Fragments assemble into a larger pattern as the user scrolls through 3. "Patterns in Noise" -- Dot Clouds coalesce and disperse based on scroll position 4. "The Curve of Learning" -- A full-width flowing curve draws itself as the primary visual, with text floating alongside 5. "Building Forward" -- All visual elements from previous sections appear in miniature, creating a compositional summary **Animation Timing:** All scroll-triggered animations use IntersectionObserver with `threshold: 0.15` (elements begin animating when 15% visible). Entry animations use staggered delays: first element 0ms, second 120ms, third 240ms, etc. All transitions use `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for a natural feel. No animation exceeds 1.8 seconds duration. The parallax scroll calculations are throttled to 60fps via requestAnimationFrame. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, team photo sections, generic SaaS landing page patterns. No gradient backgrounds. No glassmorphic blur effects. No stock photography. ## Uniqueness Notes **Differentiators from other designs:** 1. **Broken-Grid with Rotation-State Interactivity:** While broken-grid appears in only 4% of existing designs, this implementation goes further by making the grid breakage interactive -- cards snap from their casual rotated resting state to aligned on hover, creating a playful "attention" mechanic that no other design uses. The grid disorder is not just decorative but responsive to user behavior. 2. **Zero-Photography Abstract Shape System:** Only 1% of designs use abstract-shapes as primary imagery, and this design commits fully to a no-photography approach where all visual interest comes from CSS-generated and SVG shapes with distinct personalities (Wobble Circle, Grid Fragment, Zigzag Strip, Dot Cloud). Each shape type has its own animation behavior and color assignment, functioning as visual characters rather than decorative elements. 3. **Retro-Display Typography in a Cool-Gray Context:** The combination of Press Start 2P (pixel font) with a cool-grays palette (5% usage) is unique in the portfolio. Most pixel/retro typography appears with neon or warm palettes. Placing 8-bit display type against silver-blue tones creates an unusual temperature contrast -- the nostalgia of the font clashes productively with the contemporary coolness of the palette, producing something that feels neither fully retro nor fully modern. 4. **Parallax as Spatial Narrative Rather Than Visual Effect:** While parallax appears in 74% of designs, this implementation uses it structurally -- three distinct depth layers (0.3x, 0.6x, 1.0x) create a genuine spatial hierarchy where background shapes, mid-ground connective curves, and foreground content exist in separate visual planes. The parallax serves the storytelling (abstract shapes float in a different reality than the text) rather than functioning as a scroll effect applied to hero images. 5. **Flowing-Curve SVG Path-Draw as Section Connectors:** The use of flowing-curves motifs (3% usage) as stroke-dashoffset animated connective elements between broken-grid sections is architecturally unique. The curves physically bridge the visual gaps that the broken grid creates, producing a tension between order and disorder that reinforces the AI/simulation theme. **Chosen seed:** aesthetic: playful, layout: broken-grid, typography: retro-display, palette: cool-grays, patterns: parallax, imagery: abstract-shapes, motifs: flowing-curves, tone: friendly **Avoided overused patterns:** centered layout (99% -- used broken-grid instead), warm palette (100% -- used cool-grays instead), mono typography (99% -- used retro-display as primary), minimal imagery (95% -- used abstract-shapes instead), vintage motifs (88% -- used flowing-curves instead). The playful aesthetic (96%) and friendly tone (99%) are retained from the seed as required but recontextualized through an unconventional visual treatment that distinguishes this design from the dominant playful-friendly archetype.