# Design Language for simulai.tech ## Aesthetics and Tone simulai.tech is an **AI simulation platform** rendered as a **midnight control room**: the aesthetic lives at the crossroads of brutalist precision and ethereal depth — a black void where geometric forms pulse with cold electric light. The site does not sell software; it *demonstrates dimensional intelligence*, as if the AI itself is the designer of the interface it inhabits. The dominant feeling is **edgy-rebellious control**: this is not the soft-gradient future of consumer AI. This is the raw edge — engineers who understand that intelligence is geometry, that thought has topology, that simulation is the act of folding space inward until you can hold it. The palette is **midnight-blue absolute**: not navy, not indigo, but the specific cold black-blue of deep space 300 milliseconds before dawn. Every element sits against this void as if floating in a depressurization chamber. Tone is severe, confident, and technically poetic. Copy is terse, in sentence fragments, uppercase where it matters. The site should feel like walking into a system that is already running — not a landing page, but an interface that the AI is actively using and you have been granted read access. Visual references: CERN control room aesthetics fused with Sol LeWitt wall drawings executed in neon wire. The geometry is never decorative — every line is load-bearing, every grid cell is a data container in a system that does not apologize for its own intelligence. ## Layout Motifs and Structure The page is built as a **strict bento-box grid** — a CSS Grid layout of asymmetric cells of three sizes (S: 1×1, M: 2×1, L: 2×2) arranged across a `12-column / auto-row` base at 48px gutter. The grid is **not a card grid**: each cell is a sealed viewport into a running simulation, with its own coordinate system, its own scroll, its own time. **Bento cell taxonomy (left to right, top to bottom):** 1. **CORE CELL [L 2×2]** — The primary simulation window. A full-resolution animated SVG mesh of interlocking triangles (Delaunay triangulation over 120 random seed points) that shifts topology every 4s via GSAP `morphSVG`. No text inside. A hairline `#00D4FF` border. This is the "brain." 2. **IDENTIFIER CELL [M 2×1]** — The wordmark `SIMULAI` in Bebas Neue at `clamp(64px, 10vw, 120px)`, tracking `0.12em`, stacked over `.tech` in a mono system font at 18px. No logo, no icon — pure typographic identity against raw `#050B1A`. 3. **SIGNAL CELL [S 1×1]** — A live-updating counter (JS `setInterval`, 60ms) displaying a rolling simulation tick in monospace: `SIM_TICK: 0000000`. The number increments visibly, implying the system has been running since before you arrived. 4. **AXIS CELL [M 2×1]** — A horizontal rule of staggered-opacity grid lines: 12 parallel lines of `#1A3A5C` at 1px, spaced 8px apart, with the central line at `#00D4FF` full opacity. A single word floats above: `TOPOLOGY` in Bebas Neue caps at 14px, tracking `0.4em`. 5. **VECTOR CELL [S 1×1]** — A rotating geometric shape: an icosahedron wireframe rendered in CSS 3D `transform`, 80px edge length, `border: 1px solid #00D4FF`, spinning at `animation: spin-y 12s linear infinite`. 6. **EXCERPT CELL [S 1×1]** — Five lines of copy, left-aligned, monospace, 11px: a fragment of fictional simulation output (`> PHASE_3 CONVERGED / DELTA 0.0002 / NODES 1,440`). Reads like a terminal log frozen mid-output. 7. **DOMAIN CELL [L 2×2]** — The "what this is" panel: two sentences of copy in Inter at 18px/28px line-height, left-aligned, over a faint `#0A1E35` background that is 6% lighter than void. A single animated `>` cursor blinks at the end of the second sentence. 8. **STATUS CELL [M 2×1]** — A horizontal progress bar across the full cell width: filled 73% in `#00D4FF`, track in `#0D2035`. Label above: `SIMULATION_READINESS` in Bebas at 13px. This is not a real progress bar — it never reaches 100%, drifting between 71–74% as if the system is perpetually calibrating. **Spatial philosophy:** No element bleeds outside its cell border. The 2px `#0D2035` cell walls are visible — grid lines are the motif, not the background. The composition feels like a cockpit instrument panel, not a marketing layout. ## Typography and Palette **Typography:** - **Display / Wordmark:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — weight 400 (the only weight), at `clamp(64px, 10vw, 120px)` for the wordmark; 13–18px for cell labels with `letter-spacing: 0.35em` and `text-transform: uppercase`. This font does all the shouting. - **Body / Copy:** [Inter](https://fonts.google.com/specimen/Inter) — weight 300/400, at 16–18px for reading copy, 11px for data fragments. The lightness of Inter against a dark ground gives a "printed on air" quality. - **Mono / Terminal:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400, 11–13px, for all simulation ticks, terminal fragments, and data counters. Tabular numerals on. This is the voice of the machine. **Palette — midnight-blue absolute system:** - `#050B1A` — Void Black (primary background, deepest layer; not pure black — has 2% blue cast) - `#0A1E35` — Deep Navy (cell backgrounds, slightly elevated above void) - `#0D2035` — Cell Wall (grid line color, border of every bento cell) - `#1A3A5C` — Submerged Blue (secondary grid lines, inactive states, muted data) - `#00D4FF` — Ice Signal (primary accent: the one color that cuts through void; active states, progress bars, cursor blinks, the CORE CELL border) - `#4DA8D4` — Muted Signal (hover states, secondary accents at 60% brightness of Ice Signal) - `#FFFFFF` at 85% opacity — Ghost White (body copy, cell labels; never full white which would burn against the void) - `#7AA8CC` — Twilight Blue (data fragments, terminal text, low-priority elements) **Color rule:** Only `#00D4FF` is ever fully saturated. Everything else is a shade of midnight. The eye is always guided by the single neon wire. ## Imagery and Motifs **No photography. No stock. No icons from icon libraries.** The visual world is built entirely from mathematical geometry rendered inline as SVG and CSS. **Primary motifs:** 1. **Delaunay mesh (CORE CELL).** 120 seed points distributed with Halton sequence over a 600×600 SVG viewport. Triangulation lines in `#1A3A5C` at 0.5px stroke, vertices as 2px circles in `#00D4FF`. The mesh does not animate randomly — it solves a new triangulation every 4s as if a new simulation domain has been loaded. Transition via GSAP `morphSVG` with 1.2s ease. 2. **Grid line system (background layer).** Behind all bento cells: a CSS `background-image: linear-gradient` crosshatch of horizontal and vertical lines at 48px intervals in `#0D2035` at 40% opacity. This is the substrate. It does not scroll — it is fixed to the viewport. As bento cells sit on top, the grid peeks through at cell gaps, making the layout feel like it lives inside the grid rather than on top of it. 3. **Icosahedron wireframe (VECTOR CELL).** 20 CSS-bordered triangular faces assembled via `clip-path` polygons and `perspective(400px) rotateY()` — not canvas, not WebGL, pure CSS 3D. Each face is a transparent `border: 1px solid #00D4FF` at 25% opacity except two "active" faces at 80% opacity that rotate around the visible cluster. The rotation speed never stops. 4. **Horizontal staggered lines (AXIS CELL).** 12 lines rendered as `
` elements, each 1px tall, full cell width. Opacity varies: lines 1–5 fade in from `#0D2035` at 20%, line 6 is `#00D4FF` at 100%, lines 7–12 fade out to 20% again. A sine wave of visibility. 5. **Blinking cursor.** In DOMAIN CELL, the `>` cursor blinks at 530ms on/off — the standard terminal cadence. It is the only animated element that uses pure CSS `@keyframes opacity` with no JS. Its presence implies something is still being written. 6. **Cell border accent.** CORE CELL has a double-border: an outer `2px solid #0D2035` and an inner `1px solid #00D4FF` inset by 8px via `outline` offset. No other cell has the inner line. This marks it as the focal point without text. ## Prompts for Implementation Build simulai.tech as a **single-screen bento cockpit** that requires no scrolling on desktop — the entire design fits in `100dvh` with the grid cells visible at load. On mobile, cells reflow to a single column with vertical stacking; the CORE CELL comes first. **Load sequence (500ms total, no JS framework — vanilla GSAP 3):** 1. `t=0ms`: Void background renders. Grid line substrate fades in over 300ms via CSS `opacity` transition. 2. `t=200ms`: Bento cell walls materialize — each cell border draws from top-left corner clockwise via SVG `stroke-dashoffset` animation, 200ms per cell, staggered 30ms apart. 8 cells × 30ms stagger = 240ms total draw time. 3. `t=440ms`: Content inside each cell fades up with `translateY(8px) → translateY(0)` and `opacity: 0 → 1`, staggered 20ms per cell. 4. `t=640ms`: CORE CELL mesh renders its first triangulation. The `#00D4FF` vertex dots pop in via `scale(0) → scale(1)` with `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring). 5. `t=700ms`: SIGNAL CELL counter begins incrementing. The machine is live. **Do NOT implement:** - Sticky navigation or any nav at all — no menus, no hamburgers, no tabs - Hero sections, above-the-fold CTAs, pricing blocks, testimonials, stat grids - Scroll-based animations (this is a fixed viewport, not a scroll narrative) - Modals, tooltips, dropdowns - Social proof, logo clouds, feature lists **Animation philosophy:** Nothing is decorative. Every moving element is communicating data (the tick counter, the mesh evolution, the status drift). Animation implies computation, not aesthetics. When in doubt: is this element running a simulation, or performing one? Only run simulations. **CSS architecture:** - CSS custom properties for all palette values on `:root` - `display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr)` on the main container - Each bento cell uses `grid-column: span N; grid-row: span N` — no absolute positioning - `box-sizing: border-box` everywhere; 2px gap between cells (the visible grid seam) **Typography sizing:** All Bebas Neue labels use `font-variant-numeric: tabular-nums; letter-spacing: 0.3em`. The wordmark is set with `line-height: 0.9` to collapse leading — Bebas at this size needs no air above or below. **Interactivity (subtle, purposeful):** - Hovering any bento cell darkens its background to `#071428` and thickens its border to `3px #00D4FF` — a "selected instrument" effect - Hovering CORE CELL triggers a new mesh triangulation immediately (on `mouseenter`, not waiting for the 4s timer) - The STATUS CELL progress bar drifts continuously via JS `setInterval(300ms)`, oscillating ±2% around 72% ## Uniqueness Notes 1. **Bento-box at 5% frequency, executed as a cockpit instrument panel rather than a feature-card grid.** Every other bento implementation in the registry treats cells as marketing cards with icons and copy. simulai.tech treats each cell as a sealed instrument viewport with its own time and data — this is an interface within a page, not a grid of messages. 2. **Midnight-blue palette at 1% frequency — and executed without gradients.** The frequency report shows `midnight-blue` at 1% in the corpus. Crucially, this design uses **flat midnight tones only** — no radial gradients, no aurora glow, no gradient mesh. The depth comes from the strict luminance ladder (`#050B1A → #0D2035 → #1A3A5C`) not from gradient blur. This is the first flat-midnight design in the registry. 3. **Grid-lines as the primary motif at 2% frequency — but used as the literal structural substrate, not decoration.** Other designs use grid-lines as a background texture overlaid on content. Here, the CSS crosshatch grid IS the bento layout grid made visible — the cell gaps *are* the grid lines. Structure and ornament are the same object. 4. **Bebas Neue used exclusively for data labels, not for editorial copy.** The frequency report shows `bebas-bold` at 6%. In all other uses in the corpus, Bebas serves as the narrative display type. simulai.tech uses it only for instrument labels (13–18px, high tracking) — the display role is filled by the geometry of the mesh, not typography. This inverts the conventional Bebas use case. 5. **No scroll, no parallax, no stagger animation.** The frequency report shows `stagger` at 50% and `parallax` at 75% — the two most overused patterns in the registry. simulai.tech uses neither. The load animation is a strict sequential draw (cell borders, then content, then mesh) with fixed 30ms inter-cell delay — not a stagger cascade, but a circuit-board initialization sequence. **Chosen seed:** aesthetic: ethereal, layout: bento-box, typography: bebas-bold, palette: midnight-blue, patterns: stagger (subverted — used only in border draw, at 30ms fixed interval, not as the primary motion language), imagery: geometric-abstract, motifs: grid-lines, tone: edgy-rebellious **Avoided patterns:** parallax (75% — not used), full-bleed (63% — cells are bounded, not full-bleed), asymmetric (43% — grid is strict and symmetric), stagger as primary motion language (50% — border draw uses fixed-interval sequence instead).