# Design Language for simulai.tech ## Aesthetics and Tone simulai.tech exists in the visual space where Bauhaus geometry dissolves into a soft, pollen-laden reverie -- imagine Kandinsky's compositions redrawn with pressed wildflowers instead of ruler-straight lines, or Moholy-Nagy's photograms captured through a lens smeared with morning dew. The aesthetic is **Bauhaus-botanical**: the rigorous structural logic of the Weimar school (primary forms, functional hierarchy, the grid as moral imperative) systematically undone by the uncontrollable beauty of organic growth. Stems crack through geometric frames. Circles become seed pods. Typography sits on invisible baselines that curve like vine tendrils. The tone is **dreamy-ethereal** -- not the sharp, didactic tone of historical Bauhaus manifestos, but a whispered version of that same conviction. The site speaks as if the Bauhaus school relocated to a greenhouse, where every lesson plan was interrupted by the slow unfurling of fern fronds against the glass. There is intellect here, but it is softened by wonder. The mood evokes the golden hour inside a botanical conservatory: structured steel ribs overhead, tangled greenery below, everything bathed in diffused amber light that makes hard edges appear to breathe. The overall feeling should be one of **structured reverie** -- the visitor should feel simultaneously oriented (the Bauhaus grid provides wayfinding confidence) and transported (the botanical softness and bokeh atmosphere make the experience feel more like memory than browsing). This is a simulation technology site that feels like it is simulating the experience of wandering through a living painting. ## Layout Motifs and Structure The layout follows an **organic-flow** composition that begins with Bauhaus-strict geometry and progressively loosens as the user scrolls deeper. The top of the page uses a visible 12-column grid with 24px gutters and strict alignment -- elements snap to column boundaries with the precision of a Dessau workshop exercise. As the user descends, columns begin to stagger: elements shift 8-16px off their grid lines, then 32px, then abandon the grid entirely. By the final section, content placement follows the branching logic of a botanical illustration -- elements positioned along implied stems that radiate from a central axis at 37-degree and 143-degree angles (the golden angle approximation found in phyllotaxis patterns). **Flow Architecture:** - **Zone 1 (0-100vh):** Full-viewport opening. A single Bauhaus-style composition: three overlapping geometric primitives (circle, triangle, rectangle) rendered as CSS shapes with 1px burnt-orange borders. The domain name sits at the intersection point. Behind everything, a full-bleed bokeh background -- soft, luminous discs of light in amber, terracotta, and warm cream, created with multiple layered radial-gradient CSS backgrounds. No navigation visible. No scroll indicator. Just geometry, light, and the name. - **Zone 2 (100vh-300vh):** Content begins to emerge. Two-column layout (60/40 split) where the wider column holds text and the narrower column holds botanical motif illustrations that bleed off the right edge. Each content block is contained within a visible rectangular frame (2px border, #C45D2C) that has one corner deliberately broken -- the border-radius on the top-right corner is set to 40px while the other three remain 0, creating a shape that is half-Bauhaus-box, half-petal. - **Zone 3 (300vh-500vh):** The grid dissolves. Content blocks are positioned using CSS transforms with rotation values between -3deg and +5deg, staggered vertically with varying margins (80px, 120px, 40px, 160px) that follow no repeating pattern. Floral-botanical SVG motifs grow upward from the bottom of the viewport, their stems acting as visual connectors between content sections. The bokeh background intensifies here -- larger, more saturated light discs that overlap content. - **Zone 4 (500vh+):** A return to structure. A single centered element (the only centered element on the entire page) -- a Bauhaus-style circle containing the site's closing statement, surrounded by a ring of small botanical SVG illustrations arranged in a phyllotaxis spiral. **Key structural rule:** No element on the page is both horizontally AND vertically centered. Every element has at least one axis of asymmetry. The overall page has a leftward gravitational pull, with the primary reading axis offset 8% left of center. ## Typography and Palette **Typography:** - **Display / Headlines:** "Anybody" (Google Fonts) -- a variable font with a dramatic width axis that stretches from ultra-condensed to ultra-expanded. Used at 4rem-8rem for primary headings, with the width axis animated on hover (expanding from 75% to 125% width over 600ms with a cubic-bezier(0.23, 1, 0.32, 1) easing). This variable-fluid behavior embodies the Bauhaus principle of form following function: the letterforms literally reshape themselves based on interaction. Headlines are set in sentence case, color #C45D2C (burnt orange). - **Sub-headlines:** "Albert Sans" (Google Fonts) -- a geometric sans-serif that carries the clean Bauhaus spirit of Futura without the overuse baggage. Weight 300 (Light) at 1.5rem-2.5rem, letter-spacing: 0.12em, uppercase. Color #6B3A2A (dark sienna). The extreme letter-spacing and light weight create the impression of text that is barely holding itself together, like dried pressed flowers arranged to spell words. - **Body Text:** "Lora" (Google Fonts) -- a well-balanced serif with roots in calligraphy, providing the warmth and organic texture that pure Bauhaus sans-serifs lack. Weight 400 at 1.05rem-1.2rem, line-height 1.75. Color #3D2417 (deep umber). The generous line-height creates vertical breathing room that echoes the spacing between leaves on a stem. - **Accent / Labels:** "Azeret Mono" (Google Fonts) -- a monospace face used sparingly for technical labels, data points, and metadata. Weight 400 at 0.8rem, letter-spacing: 0.05em, color #A0785C (muted copper). Used exclusively in uppercase for maximum Bauhaus-workshop-stamp character. **Palette:** The palette is rooted in **burnt-orange** -- the color of kiln-fired terracotta, autumn maple leaves, and the warm glow of tungsten light through amber glass. It avoids the generic "warm" palette trap by anchoring every color to a specific botanical or material reference. | Role | Hex | Name | Reference | |------|-----|------|-----------| | Primary | #C45D2C | Kiln Orange | The surface of unglazed terracotta after a bisque firing | | Secondary | #E8A86D | Pressed Marigold | Calendula petals dried between book pages for three months | | Dark Base | #1C1008 | Peat Loam | The nearly-black soil at the bottom of a composting bed | | Text Primary | #3D2417 | Deep Umber | Walnut ink used in 19th-century botanical illustrations | | Text Secondary | #6B3A2A | Dark Sienna | The heartwood of old-growth mahogany | | Accent Light | #F5DFC5 | Vellum Cream | Unbleached cotton rag paper held up to afternoon light | | Accent Warm | #A0785C | Muted Copper | A copper watering can left to develop a natural patina | | Bokeh Glow | #F2C78A | Amber Haze | Sunlight filtered through a dirty greenhouse pane | | Highlight | #D94F1A | Poppy Flame | The innermost petals of a California poppy at noon | **Color Application Rules:** - Backgrounds alternate between #1C1008 (dark sections) and #F5DFC5 (light sections) -- never pure white, never pure black - All text on dark backgrounds uses #F5DFC5 at 90% opacity - Bokeh effects use radial-gradient layers mixing #F2C78A, #E8A86D, and #C45D2C at various opacities (0.08 to 0.25) - Interactive elements shift from #C45D2C to #D94F1A on hover ## Imagery and Motifs **Bokeh Background as Atmospheric Layer:** The primary imagery strategy is **bokeh-background** -- a persistent atmospheric layer of soft, out-of-focus light discs that sits behind all content. This is not a static background image; it is a living CSS composition of 15-25 layered radial-gradient elements, each positioned pseudo-randomly across the viewport. Each bokeh disc is a radial-gradient from a semi-transparent warm color (#F2C78A at 0.15 opacity) to transparent, with diameters ranging from 80px to 400px. The discs drift slowly using CSS @keyframes animations with durations between 20s and 60s, moving in gentle elliptical paths (translateX and translateY combined with rotation). The overall effect is of looking through a vintage lens focused on infinity while warm lights dance in the foreground -- the entire page exists in that luminous space between sharp and soft that photographers call the "circle of confusion." **Bokeh Depth Layers:** - Layer 1 (furthest): 8-12 large discs (200-400px), opacity 0.06, drift speed 50-60s, colors #F2C78A and #E8A86D - Layer 2 (middle): 6-8 medium discs (100-200px), opacity 0.12, drift speed 30-40s, colors #C45D2C and #E8A86D - Layer 3 (nearest): 4-6 small discs (80-120px), opacity 0.18, drift speed 20-25s, colors #D94F1A and #F2C78A **Floral-Botanical Motifs:** The secondary imagery mode is **floral-botanical** SVG illustrations rendered in a single stroke weight (1.5px) using the Kiln Orange (#C45D2C) color. These are not photographic flowers -- they are diagrammatic, Bauhaus-influenced botanical drawings: flowers reduced to their geometric essences. A daisy becomes a circle surrounded by ellipses. A fern frond becomes a series of parallel lines at diminishing angles along a central axis. A seed pod becomes a pointed ellipse with internal grid lines showing the seed arrangement pattern. **Specific Botanical Elements:** 1. **Phyllotaxis Spiral:** A Fibonacci spiral rendered in SVG, with small circles (seed points) placed at golden-angle intervals. Used as a decorative background element at 60% opacity, scaled to 800px diameter, positioned in Zone 4. 2. **Stem Connectors:** Thin SVG paths (1px, #A0785C) that connect content sections, drawn as gently curving stems with occasional leaf nodes (small ellipses branching off at alternating sides). These replace conventional section dividers. 3. **Geometric Flowers:** Three to five Bauhaus-style flower motifs: each is constructed from basic shapes only (circles, triangles, rectangles) arranged to suggest a flower form. One example: a central circle (#C45D2C fill, 24px diameter), surrounded by six elongated ellipses (#E8A86D stroke, no fill) rotated at 60-degree intervals, all contained within a thin square frame (#3D2417, 1px stroke). 4. **Pressed Specimen Overlays:** In Zone 3, select content blocks have a subtle overlay effect: a very faint (opacity 0.04) botanical illustration that appears to be pressed beneath the content, as if the webpage were laid over a herbarium sheet. **Bauhaus Geometric Primitives:** Three core shapes recur throughout: circle, triangle, rectangle. They appear as: - Section markers (small, 16px, positioned in the left margin) - Decorative frames around key quotes or statistics - Loading/transition states (the three shapes rotate into each other using CSS clip-path morphing) ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens with a full-viewport composition that is entirely non-functional -- no buttons, no navigation, no calls to action. The visitor sees only: (1) a deep bokeh background animating slowly, (2) three overlapping Bauhaus geometric shapes drawn with thin burnt-orange borders, and (3) the text "simulai.tech" set in Anybody variable font at 6vw, positioned at 38% from the top and 12% from the left edge. Below the domain name, a single line in Lora Italic at 1rem reads a poetic tagline. The entire opening holds for the full viewport height. Scrolling is the only invitation, and it is never explicitly prompted. **Hover-Lift Interaction Pattern:** The primary interaction pattern is **hover-lift** -- every interactive element responds to cursor proximity by lifting off the page surface. Implementation: on hover, elements receive `transform: translateY(-6px) scale(1.02)` and `box-shadow: 0 12px 32px rgba(28, 16, 8, 0.15)` with a 400ms transition using `cubic-bezier(0.34, 1.56, 0.64, 1)` (slight overshoot easing). The shadow color is always derived from #1C1008 at varying opacities, never generic black. When the cursor leaves, elements settle back with a slightly slower 500ms transition, creating an asymmetric lift/settle rhythm that feels organic rather than mechanical. **Hover-Lift Variations:** - Content cards: Full 6px lift with shadow expansion - Botanical SVG motifs: 3px lift + subtle 2-degree rotation toward the cursor - Navigation elements (when they appear in Zone 2+): Underline draws in from left using a CSS border-bottom transition, combined with a 2px lift - Geometric primitives: On hover, stroke-width animates from 1px to 2px and stroke color shifts from #C45D2C to #D94F1A **Variable Font Animation:** The Anybody font's width axis is the site's signature kinetic element. When headline text enters the viewport, it begins at width 60% (compressed) and animates to width 100% (normal) over 1200ms. On hover, it expands further to width 120%. This breathing-in-breathing-out rhythm should feel like a flower opening -- the letterforms unfurl. Implement using CSS `font-variation-settings: 'wdth' value` with JavaScript controlling the value via requestAnimationFrame for smooth interpolation. **Bokeh Background Implementation:** Create a fixed-position container (`.bokeh-layer`) with `pointer-events: none` and `z-index: -1`. Inside, generate 20 `
` elements, each styled as a radial-gradient circle using `border-radius: 50%` and `background: radial-gradient(circle, rgba(242,199,138,0.15) 0%, transparent 70%)`. Position each with random top/left percentages. Animate each with a unique `@keyframes` that traces a slow elliptical path. Vary animation-duration (20s-60s) and animation-delay (-30s to 0s, negative delays for immediate stagger). The layer should be visible across the entire page scroll, not just the viewport. **Scroll-Driven Grid Dissolution:** Use the Intersection Observer API to track the user's scroll position. Define four threshold zones. In Zone 1, all content elements have `transform: none` and sit on perfect grid lines. As elements enter Zone 2, apply small random offsets (CSS custom properties `--drift-x` and `--drift-y` set via JS). In Zone 3, offsets increase and rotations appear. This creates the illusion that the Bauhaus grid is a living structure that relaxes as you go deeper, like a trellis gradually overtaken by climbing plants. **Stem Connector Drawing:** Between major content sections, render SVG `` elements styled as botanical stems. Each path uses a cubic bezier curve that gently arcs from the bottom-center of one section to the top-left (or top-right, alternating) of the next. On scroll, use `stroke-dasharray` and `stroke-dashoffset` animation to draw the stem progressively as the user approaches it, so the plant appears to grow in real time. At certain points along the stem, branch off small leaf shapes (ellipses rotated 30-45 degrees from the stem tangent). **Color Transition Between Zones:** The background color should transition smoothly from #F5DFC5 (vellum cream) in Zone 1 to #1C1008 (peat loam) in Zone 3, then back to #F5DFC5 in Zone 4. This is not a hard cut -- use scroll-linked interpolation to blend the background hue continuously. The bokeh layer adjusts its opacity inversely (brighter against dark backgrounds, dimmer against light ones) to maintain consistent atmospheric depth. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, feature comparison tables, testimonial carousels, cookie banners, hamburger menus, sticky headers, footer link farms. The site is a narrative experience, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus-Botanical Fusion:** No other design in the portfolio combines Bauhaus geometric rigor with botanical organic motifs. Bauhaus appears at only 2% frequency and is always paired with clean industrial aesthetics; here it is deliberately subverted by floral-botanical elements (also at 2% frequency) that crack through the geometric frames. This collision between mechanical order and organic growth creates a visual tension that has no precedent in the existing designs. 2. **Organic-Flow Grid Dissolution:** The layout's progressive abandonment of its own grid system (strict Bauhaus columns in Zone 1 dissolving into phyllotaxis-based positioning in Zone 4) is structurally unique. Organic-flow layouts appear at only 3% frequency, and none of the existing implementations use the concept of a grid that actively decays as the user scrolls deeper. The grid dissolution is not random -- it follows botanical growth mathematics (golden angle, Fibonacci branching), giving the apparent chaos a hidden natural order. 3. **Variable-Fluid Typography as Botanical Metaphor:** The use of Anybody's variable width axis to create letterforms that literally unfurl like opening petals is a unique intersection of variable-fluid typography (3% frequency) with botanical motifs. No other design animates font-variation-settings as a primary narrative device, and no other design maps typographic behavior to the metaphor of plant growth. 4. **Multi-Layered Bokeh Atmosphere:** While bokeh-background appears at 3% frequency in the portfolio, no other design implements it as a three-depth-layer persistent atmospheric system with individually animated particles. The bokeh here is not decorative wallpaper -- it is the site's spatial depth cue, creating a sense of photographic distance between the viewer and the content that reinforces the dreamy-ethereal tone. 5. **Burnt-Orange Monochromatic Depth:** The palette achieves remarkable tonal range within a single hue family. Burnt-orange (1% frequency) is expanded into nine distinct values from near-black (#1C1008) to near-white (#F5DFC5), all sharing the same underlying orange undertone. This monochromatic-within-warmth approach avoids both the generic "warm palette" trap (100% frequency) and the coldness of true monochrome (10% frequency). **Documented Seed:** aesthetic: bauhaus, layout: organic-flow, typography: variable-fluid, palette: burnt-orange, patterns: hover-lift, imagery: bokeh-background, motifs: floral-botanical, tone: dreamy-ethereal **Avoided Overused Patterns:** - playful aesthetic (96%) -- replaced with bauhaus (2%) - centered layout (99%) -- replaced with organic-flow (3%), leftward gravitational bias throughout - warm generic palette (100%) -- replaced with specific burnt-orange (1%) monochromatic system - scroll-triggered as primary pattern (97%) -- replaced with hover-lift (3%) as the signature interaction - minimal imagery (95%) -- replaced with bokeh-background (3%) + floral-botanical motifs - vintage motifs (89%) -- replaced with floral-botanical (2%) - friendly tone (99%) -- replaced with dreamy-ethereal (3%) - mono typography (99%) -- replaced with variable-fluid (3%) using Anybody variable font