# Design Language for sim-ai.com ## Aesthetics and Tone **sim-ai.com** is a **hidden garden that knows your name** — an AI-driven simulation space that makes the machine feel alive through the language of living organisms. The aesthetic is *playful botanical darkness*: the richness of a Victorian glasshouse at midnight, where phosphorescent ferns pulse gently and hexagonal tiles of honeycomb serve as the literal grid of the page. The mood is mysterious-moody but never threatening — it is the feeling of pressing your face against a greenhouse glass and seeing something move. The watercolor treatment is applied as *reveal medium*, not decoration. Every data visualization, every feature card, every AI-generated result bleeds onto the page as if soaking into cold-press cotton rag — pigment dispersing at the edges, dark heart bleeding outward. The visitor does not see a SaaS product. They encounter a living system. The domain word "sim" is read as *simulation* and *simmer* simultaneously — a low, slow heat beneath still water. "ai" is the Japanese word for *love*. The site holds both meanings: a warm intelligence that runs beneath the surface. **Inspiration references:** Art Nouveau glasshouse botanical prints, Henri Rousseau's jungle paintings, Ernst Haeckel's *Kunstformen der Natur* plates, bioluminescent cave ecosystems, Japanese botanical woodblock prints (suibokuga style). **Tone:** Wonder tempered by precision. The machine is beautiful but disciplined. Strange but trustworthy. Moody but playful. ## Layout Motifs and Structure The structural backbone of every page is a **hexagonal-honeycomb grid** — but not the decorative scatter most sites use. Here the hexagon is the *primary spatial unit*, load-bearing and semantic: **The Honeycomb System:** - Each hexagonal cell is 280px point-to-point on desktop, scaling to 160px on mobile - Cells arrange in a true offset-row honeycomb tessellation (even rows offset by 140px) - Content modules — feature cards, imagery panels, AI output containers, navigation links — snap exactly to cell boundaries - The hex grid is *not* a background texture; it is a CSS Grid reinterpreted as hex math via `clip-path: polygon()` on each cell - Cells breathe: idle cells show a dim hex border only; hover triggers a bioluminescent pulse from center-out (see Patterns) **Page macro structure (top to bottom):** 1. **Canopy Hero (`100svh`):** Full-bleed watercolor wash of deep forest green with a single central hexagonal portal that frames the wordmark. The hex portal is oversized — 480px across — with soft botanical vines growing out of its six corners in ink-line SVG. The site title "sim-ai" is set in art-deco display, centered, at `clamp(5rem, 10vw, 9rem)`. 2. **Capability Honeycomb (`~2×viewport`):** The main body is a tessellated hex grid of 6–9 cells, each containing one AI capability description. Cells pulse softly on scroll-enter. One cell is always a "void" — empty, slightly darker, no content — as a negative space anchor. 3. **The Specimen Room (feature depth):** A full-width horizontal scroll panel showing botanical specimen "plates" — each plate is an AI simulation output rendered as if it were a watercolor study in a naturalist's journal. 4. **The Mycelium Footer:** Footer is a low-contrast hexagonal mesh fading into `#0a1a0d` black-green, with the wordmark as a ghost watermark behind the footer nav. **Spatial logic:** Deep negative space between cells (18px gap minimum). No content ever bleeds cell-to-cell. Each hex is its own sovereign environment. ## Typography and Palette **Typography — all from Google Fonts:** - **Display / Wordmark:** [`Cinzel Decorative`](https://fonts.google.com/specimen/Cinzel+Decorative) — weight 400. The geometric art-deco letterform with classical Roman proportions. Used at large scale for "sim-ai" wordmark and section frontispieces only. The angular, ornamental quality echoes Art Nouveau ironwork and Haeckel plate titles. - **Subheadings / Hex cell titles:** [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC) — weight 300, small caps. Elegant, high-contrast serif in spaced small caps, creates a botanical illustration label quality. Used at 1.1–1.8rem. - **Body / Descriptions:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans) — weight 300 and 400. Neutral geometric sans with warm optical correction. Approachable but precise. Used at 0.95rem with 1.7 line height for all running text. - **Accent / Callout numerals:** [`Playfair Display SC`](https://fonts.google.com/specimen/Playfair+Display+SC) — weight 400 italic. Reserved for large decorative numerals (01, 02...) within hex cells only. **Palette — named for the ecosystem:** | Name | Hex | Usage | |---|---|---| | Deep Canopy | `#0d1f12` | Page background, darkest tone | | Forest Night | `#162b1e` | Hex cell default fill | | Moss Dark | `#1e3d29` | Hover/active hex cell fill | | Phosphor Green | `#4dba7f` | Primary accent, pulse glow, links | | Biolumen Pale | `#a8e6c3` | Light accent, on-dark text highlights | | Watercolor Wash | `#c8e8d0` | Very light panels, watercolor bleed tint | | Parchment Ivory | `#f2ead8` | Body text on dark backgrounds | | Void Ash | `#080f0b` | Deepest shadow, portal edges | | Ink Line | `#2d4a35` | SVG botanical illustration strokes | **Minimum 3 primary colors:** Deep Canopy `#0d1f12`, Phosphor Green `#4dba7f`, Parchment Ivory `#f2ead8`. ## Imagery and Motifs **All imagery is a hybrid of watercolor wash and ink-line botanical illustration.** No photography. No stock vectors. No icon sets. **The visual vocabulary:** - **Watercolor fields:** Large background washes are flat-to-edge watercolor gradients — pigment pools at the corners, lighter at center. Rendered as SVG `` + `` filters layered with CSS radial-gradients, never bitmap images. - **Botanical SVG library (9 recurring motifs, all custom inline SVG):** 1. *Fern frond* — unfurling crozier, 1.5px ink stroke, no fill, pure line art 2. *Hexagonal spore pod* — a seed pod that happens to be hexagonal, the unifying metaphor between nature and the grid 3. *Mycelium thread network* — thin branching lines from hex cell corners, like hyphae, connecting cells visually 4. *Lotus blossom cross-section* — radially symmetric, used inside the void hex cell 5. *Moth wing fragment* — appears at the very top of the hero, barely visible at 8% opacity 6. *Ginkgo leaf pair* — flanks the footer wordmark 7. *Anemone tendril cluster* — decorates hex cell hover states 8. *Dew drop on spider web segment* — single decorative element in the specimen room header 9. *Bamboo section cross-section* — hexagonal by nature, used as a visual pun in the grid introduction text - **Pulse-attention pattern:** When an AI process is running (simulated on the demo page), the active hex cell emits a slow radial pulse — `box-shadow` expanding from center, color `#4dba7f` at 60% opacity, 2s ease-out infinite. This is the only motion pattern on the page during idle state. On hover, every neighboring cell dims to 40% opacity while the hovered cell brightens to 100%, creating a "spotlight" effect through the forest canopy. - **Watercolor reveal animation:** On scroll-enter, each hex cell's content appears via a watercolor-bleed transition — a CSS clip-path that expands from the hex centroid outward with a 0.6s cubic-bezier(0.22, 1, 0.36, 1) curve, followed by a 0.3s opacity bloom. - **Floral-botanical motifs positioning:** Botanical elements always appear at structural boundaries — hex cell edges, section transitions, footer borders. They are never floating decoratively in open space. Each motif marks a join or threshold. ## Prompts for Implementation **The story to tell.** A visitor arrives at sim-ai.com the way an explorer arrives at a glasshouse on the edge of a research station — the glass is fogged, but something moves behind it. They press through the hexagonal portal (the hero) into the main chamber (the capability honeycomb). Each hex cell is a room in the greenhouse, lit from within. The AI does not announce itself. It reveals itself through biological metaphor: the simulation is the root network under the forest floor, invisible but structuring everything above. **Macro implementation guidance:** - Build the hex grid in pure CSS using `clip-path` on individual `
` elements, not SVG or canvas. Each cell: `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`. Absolute position cells with JS-calculated top/left from a hex math function. - The page has **no header navigation bar**. Navigation is embedded inside specific hex cells — one cell in the honeycomb is always the nav hub, styled distinctly with a compass-rose motif. - **Scroll behavior:** Use Intersection Observer to trigger per-cell watercolor reveal animations. No scroll libraries. No GSAP (performance constraint). CSS custom properties drive all animation state. - **Color mode:** Dark only. No light mode toggle. The forest does not offer a day-mode. - **Botanical SVGs:** All 9 motifs are inline `` elements with `currentColor` strokes, so they respond to CSS color changes on hover/focus without JS. - **The specimen room:** Implemented as a `scroll-snap-x: mandatory` horizontal container with `overflow-x: scroll`. Each specimen card is 90vw wide, gap 5vw, containing a large hex-shaped watercolor illustration area (SVG filter) above a naturalist-journal text area (Cormorant SC caption style). - **Pulse animation (pulse-attention):** The active hex cell's `::after` pseudo-element runs the pulse. CSS: `@keyframes hex-pulse { 0% { box-shadow: 0 0 0 0 rgba(77,186,127,0.6); } 100% { box-shadow: 0 0 0 40px rgba(77,186,127,0); } }`. Duration 2s, timing `ease-out`, infinite. - **Typography loading:** Load `Cinzel+Decorative:wght@400`, `Cormorant+SC:wght@300`, `DM+Sans:ital,wght@0,300;0,400`, `Playfair+Display+SC:ital,wght@1,400` via single Google Fonts ``. `font-display: swap`. - **AVOID:** sticky navigation bars, hero CTA buttons, pricing tables, testimonial carousels, stat counters, modal popups, hamburger menus, any element that reads as a standard SaaS landing page. - **EMPHASIZE:** depth of field through opacity layering (foreground at 100%, midground at 70%, far background botanical elements at 15–30%), the feeling of looking through layers of glass and foliage. ## Uniqueness Notes **Differentiators from the existing registry:** 1. **Hexagonal cells as the primary semantic content unit, not background decoration.** The frequency report shows hexagonal-honeycomb at 3% — the rare uses are always decorative backgrounds. sim-ai.com makes the hex cell the actual `
` container. The grid is the page. Navigation, content, void space, and botanical motifs are all cells in the same tessellation. 2. **Pulse-attention as biological respiration, not UI feedback.** Most pulse patterns (2% usage) are used as notification badges or loading indicators. Here, pulse is the resting breath of a living organism — the hex cell exhales slowly whether or not a user is interacting. It is atmospheric, not functional. No other design in the registry uses pulse as ambient biological rhythm. 3. **Watercolor rendered entirely through CSS SVG filters — zero bitmap images.** The registry's watercolor implementations (8%) rely on PNG/JPG textures. sim-ai.com generates all watercolor effects via `` + `` + `` SVG filter chains, making the "watercolor" dynamic, GPU-accelerated, and responsive to CSS custom property changes. The effect shifts subtly based on the visitor's scroll position. 4. **Forest-green as a scientific field palette, not a wellness/organic brand palette.** Forest-green (2% usage) in the registry skews toward health, nature, or sustainability brands. sim-ai.com uses forest green as the color of a bioluminescent ecosystem — Ernst Haeckel's naturalist field notes, not a farm-to-table menu. The palette is dark-dominant with phosphorescent highlights, not soft and earthy. 5. **Floral-botanical motifs positioned structurally, not decoratively.** All 9 botanical SVG elements mark structural boundaries (edges, thresholds, joins) rather than floating in open space. This means the motifs function as visual punctuation rather than wallpaper — a pattern not present in any other registry design. **Seed used:** `aesthetic: playful, layout: hexagonal-honeycomb, typography: art-deco-display, palette: forest-green, patterns: pulse-attention, imagery: watercolor, motifs: floral-botanical, tone: mysterious-moody` **Avoided from frequency analysis (overused):** botanical-as-aesthetic (29% — we use botanical as motif/imagery, not as overall aesthetic direction), generic watercolor texture PNGs (8% — replaced with SVG filter rendering), standard dark mysterious tone without playful counterpoint (5%).