# Design Language for simulai.org ## Aesthetics and Tone simulai.org channels the visual language of **blobitecture** -- the fluid, undulating architectural movement of the early 2000s (think Greg Lynn's embryological houses, Zaha Hadid's Heydar Aliyev Center, Future Systems' Selfridges Birmingham) -- but transplanted into the landscape of computational simulation. The site feels like standing inside a geological survey station perched on a ridgeline at dawn, where the organic curvature of terrain meshes with the precision of simulation data. Every surface breathes: rounded corners aren't decorative choices but structural philosophies. Panels swell and contract like tidal pools. Backgrounds ripple with the bokeh-haze of a telephoto lens trained on distant alpine tree lines. The tone is **raw-authentic** -- stripped of corporate polish, deliberately unfinished in places, as if the site is itself a running simulation that hasn't yet converged. Text appears in tight, compressed columns that feel like field notes. There is no veneer of startup optimism or agency-speak; instead, the voice is that of someone who has spent weeks in a mountain research station, documenting patterns in erosion and airflow, and has now turned that same observational rigor toward artificial intelligence. The mood is overcast morning light filtering through valley fog -- contemplative, grounded, slightly rugged. ## Layout Motifs and Structure The layout is built on a **deliberately asymmetric** grid system where no two sections mirror each other. The primary content column occupies 58% of the viewport and drifts between left-aligned and right-aligned positions as the user scrolls, creating a serpentine reading path that mimics the switchback trails of mountain terrain. This column never centers -- centering implies equilibrium, and simulai.org is about the productive tension of systems in flux. **Blob Containers:** All content panels are wrapped in SVG-clipped containers with organic, amoeboid boundaries generated via cubic Bezier curves. No rectangle exists on this page. Even the smallest info-card has softly bulging edges defined by a `clip-path` using a 12-point custom polygon with `smooth` interpolation. These blob shapes shift subtly on scroll (2-4% boundary distortion via CSS `clip-path` animation), making the layout feel alive, as if the containers themselves are soft bodies responding to gravitational simulation. **Vertical Rhythm:** Sections are separated not by horizontal rules or whitespace bands but by topographic contour lines -- thin, semi-transparent strokes (#8B7355 at 15% opacity) that undulate across the full viewport width, drawn as SVG paths that reference actual mountain elevation data. These contour dividers create a sense of terrain being traversed as one scrolls. **Breakpoint Behavior:** On narrow viewports (<768px), the serpentine column snaps to a single left-aligned flow, and blob containers simplify to rounded rectangles (border-radius: 32px 48px 24px 40px -- irregular but less computationally expensive). The contour dividers reduce to simple curved lines. **Navigation:** A minimal floating pill in the top-right corner -- itself blob-shaped, with a warm-sandstone fill (#C4A882) -- contains a single hamburger icon. When activated, it expands like an inflating membrane to reveal 4-5 navigation items set in condensed type, each item sliding in with a staggered elastic entrance. ## Typography and Palette **Typography:** - **Headlines / Display:** "Barlow Condensed" (Google Fonts) at weights 600 and 700. This typeface's narrow, industrial proportions evoke the compressed data readouts of simulation dashboards while its humanist letter shapes keep it from feeling robotic. Used at 3rem-7rem for primary headings, always in uppercase with `letter-spacing: 0.04em` and `line-height: 0.92`. The tight leading makes headlines feel like geological strata compressed by tectonic pressure. - **Body / Prose:** "Source Serif 4" (Google Fonts) at weight 400 (regular) and 300 (light). A sturdy, readable serif with optical sizing that functions beautifully at body text scales (1rem-1.15rem). Its slightly squared terminals give it the pragmatic quality of field documentation. Set with `line-height: 1.72` and `letter-spacing: 0.008em` for comfortable reading within the blob containers. - **Data / Labels / Captions:** "IBM Plex Mono" (Google Fonts) at weight 400. Used exclusively for numerical data, simulation parameters, timestamps, and metadata labels. Set at 0.8rem-0.9rem with `letter-spacing: 0.06em`. This monospace face grounds the organic visual language in computational precision -- a constant reminder that beneath the blobitecture curves, algorithms are running. - **Accent / Pull Quotes:** "Barlow Condensed" at weight 300 (light), italic. Used at 1.8rem-2.4rem for pull quotes and callout text, creating a whisper-thin typographic voice that contrasts with the bold headline usage. **Palette (Earth-Tones):** | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Ridgeline Fog | #E8DFD0 | Warm parchment with yellow-gray undertone, like morning mist on sandstone | | Background Secondary | Valley Shadow | #2C2419 | Deep umber-brown, nearly black, for dark-mode sections and contrast panels | | Text Primary | Basalt | #33291E | Rich dark brown-black for body text on light backgrounds | | Text Secondary | Shale | #6B5D4F | Warm medium gray-brown for secondary text, captions | | Accent Primary | Ochre Vein | #B8862B | Raw ochre yellow -- the color of iron oxide in exposed cliff faces | | Accent Secondary | Lichen Sage | #7A8B6F | Muted sage green evoking moss and lichen on alpine rock | | Accent Tertiary | Clay Slip | #C4A882 | Warm sandstone for navigation elements and subtle highlights | | Highlight | Copper Seam | #A0522D | Sienna-copper for active states, links, and interactive feedback | | Contour Lines | Trace Brown | #8B7355 | Semi-transparent brown used at 12-18% opacity for topographic dividers | ## Imagery and Motifs **Bokeh Mountain Scapes:** The primary visual motif is **bokeh-rendered mountain landscapes** -- full-bleed background images where the foreground is sharply focused on rock textures, soil strata, or lichen patterns, while the middle and far ground dissolve into soft, luminous bokeh circles. These are not stock photos but CSS-generated approximations: layered radial gradients at varying scales (50px-300px diameter) with Gaussian blur (filter: blur(40px-80px)) overlaid on base gradient backgrounds. The bokeh circles use palette colors at low opacity (#B8862B at 8%, #7A8B6F at 6%, #C4A882 at 10%) to create a photographic depth-of-field effect entirely in code. **Topographic Contour System:** Throughout the site, thin SVG contour lines trace elevation-inspired paths. These are not decorative but informational -- each contour line represents a conceptual "layer" of the simulation stack. The lowest contours (closest to page bottom) use lighter stroke colors; higher contours darken, creating a natural sense of depth. Contour labels appear at irregular intervals in IBM Plex Mono at 0.65rem, displaying simulation terminology ("layer_03: inference," "layer_07: propagation"). **Blob Morphology Icons:** Instead of traditional icons, simulai.org uses a custom set of blob-morphology symbols. Each "icon" is an SVG blob shape that contains a simplified line drawing: a neural network node diagram within a kidney-bean blob, a waveform within a droplet blob, a mountain silhouette within an ovoid blob. These icons are monochrome (#33291E on light, #E8DFD0 on dark) and animate with a slow, breathing scale pulse (transform: scale(1) to scale(1.04) over 4 seconds, easing: cubic-bezier(0.4, 0, 0.2, 1)). **Erosion Texture Overlays:** Certain sections feature a subtle noise texture overlay (SVG `` filter with baseFrequency="0.65" numOctaves="4") that simulates the grainy, weathered surface of sandstone. This overlay is applied at 3-5% opacity over background panels, giving them a tactile, lithographic quality that reinforces the raw-authentic tone. **Mountain Silhouette Horizon:** A persistent, parallax-moving mountain ridge silhouette sits in the background of the lower 30% of the viewport. This SVG path is drawn from a simplified ridgeline (8-12 peaks) in Valley Shadow (#2C2419) at 6% opacity, scrolling at 0.3x the page scroll speed. It creates an ambient sense of landscape without demanding attention. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens to a full-viewport experience. The initial screen shows nothing but the Ridgeline Fog background (#E8DFD0) with a single bokeh-field layer gently pulsing behind it. After a 1.2-second pause, the domain name "SIMULAI" appears in Barlow Condensed at 8rem, weight 700, uppercase, in Basalt (#33291E), positioned at 40% from top with the asymmetric left offset (padding-left: 12vw). Below it, "computational simulation / artificial intelligence" in IBM Plex Mono at 0.85rem, Shale (#6B5D4F), letter-spacing 0.12em. No button, no CTA, no hero image -- just the name and the fog. The text fades in over 1.8s with a subtle upward drift (translateY: 20px to 0). **Blob Panel Reveal Sequence:** As the user scrolls past the opening viewport, the first content section slides into view from the right side. Its blob-shaped container begins off-screen (translateX: 60px, opacity: 0) and eases in (duration: 1s, easing: cubic-bezier(0.16, 1, 0.3, 1)). Simultaneously, the blob boundary itself morphs from a simpler shape to its final organic form (clip-path transition over 1.2s). Each subsequent panel alternates entry direction (right, left, right) and varies its blob shape, so no two sections feel mechanically repeated. **Contour Line Drawing Animation:** When contour-line dividers enter the viewport, they animate via SVG `stroke-dashoffset` from fully hidden to fully drawn over 2.5 seconds. The animation starts from the left edge and traces rightward, as if being drawn by a topographer's hand. Multiple contour lines at different elevations stagger their start times by 200ms each, creating a layered cascade of line-drawing. **Scroll-Responsive Blob Breathing:** All blob containers respond to scroll velocity. When the user scrolls slowly (< 500px/s), blobs maintain their resting shape. As scroll velocity increases, blob boundaries distort slightly (3-6% displacement on control points), as if experiencing wind pressure. This is achieved by monitoring `scroll` events, calculating delta, and interpolating `clip-path` values via `requestAnimationFrame`. The effect is subtle and organic -- blobs appear to "exhale" under scroll momentum. **Dark Section Inversion:** Every third content section uses the Valley Shadow (#2C2419) background with light text (#E8DFD0), creating dramatic contrast bands. The transition between light and dark sections happens via a diagonal wipe -- a rotated (skewY: -3deg) overlay that slides upward, revealing the dark section beneath. This diagonal transition reinforces the mountain-slope geometry. **Data Readout Panels:** Simulation parameters are displayed in dedicated "readout" panels styled to resemble field instruments: dark backgrounds (#2C2419), IBM Plex Mono typography, Ochre Vein (#B8862B) accent lines, and a subtle scanline effect (repeating-linear-gradient of transparent and rgba(0,0,0,0.03) at 2px intervals). Numbers within these panels animate via counter-scroll (counting up as they enter the viewport) using CSS `@property` animated custom properties. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, generic hero-with-button patterns, cookie-cutter SaaS landing pages, sticky headers that consume vertical space. **BIAS TOWARD:** Full-screen immersive sequences, long-scroll narrative, environmental storytelling through background layers, transitions that reference natural phenomena (erosion, flow, fog dispersal). ## Uniqueness Notes **Differentiators from other designs:** 1. **Blobitecture as Structural System (0% frequency):** No other design in the portfolio uses blobitecture. While organic-blobs appear as imagery elements in 5% of designs, simulai.org makes blob morphology the fundamental structural principle -- every container, every panel, every navigation element is defined by organic SVG clip-paths. This is not decorative roundness; it is an architectural philosophy where the page itself behaves like a soft-body simulation. 2. **Bokeh as CSS-Generated Atmosphere (3% frequency):** Bokeh-background appears in only 3% of existing designs, and those uses typically involve actual photographic bokeh. simulai.org generates its bokeh entirely through layered CSS radial gradients and blur filters, creating a depth-of-field effect that is both more performant and more controllable. The bokeh circles use earth-tone palette colors, producing a warm, geological luminosity rather than the typical cool-toned lens flare. 3. **Topographic Contour Lines as Information Architecture:** No other design uses topographic contour lines as section dividers. This motif simultaneously serves three purposes -- visual separation, thematic reinforcement (mountain-landscape), and conceptual mapping (simulation layers). The contour lines carry actual text labels in monospace type, blurring the line between decoration and data. 4. **Scroll-Velocity Responsive Blob Distortion:** The mechanic of blob shapes responding to scroll speed is unique in the portfolio. This creates a physical, almost haptic relationship between user input and visual form -- the page feels like a living membrane that responds to touch/interaction force, directly embodying the simulation concept of the domain. 5. **Earth-Tones Palette at 3% Frequency:** The earth-tones palette is heavily underrepresented. Combined with the raw-authentic tone (also 3%), simulai.org occupies a visual territory that is warm, grounded, and geological -- completely distinct from the dominant warm/gradient/muted palette combinations that appear in 66-100% of existing designs. **Chosen Seed:** aesthetic: blobitecture, layout: asymmetric, typography: condensed, palette: earth-tones, patterns: scroll-triggered, imagery: bokeh-background, motifs: mountain-landscape, tone: raw-authentic **Avoided Overused Patterns:** playful aesthetic (95%), centered layout (99%), friendly tone (99%), warm/gradient palette (100%/88%), mono typography (99%), minimal imagery (95%), vintage motifs (88%), parallax patterns (73%). While scroll-triggered (97%) is in the seed and thus retained, it is deployed through the unique blob-distortion and contour-drawing mechanisms rather than the typical fade-in-on-scroll pattern.