# Design Language for sim-ai.net ## Aesthetics and Tone sim-ai.net is a **chrome-burnished simulation laboratory** — imagine a 1970s aerospace computing center whose punch-card walls have been lacquered with liquid metal, every exposed surface polished to a mirror that reflects the glow of cathode-ray phosphor. The aesthetic is **retro-opulent**: the industrial authority of mid-century scientific instruments fused with the grand swagger of a world's-fair pavilion sponsored by a billionaire who has read too much Buckminster Fuller. This is not warm nostalgia. It is **cold glamour** — the kind that lives in the gap between a vacuum tube and a titanium shard. The mood is **opulent-grand**: every element carries the specific gravity of a precision instrument. Curves flow like mercury pooling on a glass stage — slow, inevitable, heavy with surface tension. Grain whispers across every surface as if the page itself is a silver-gelatin photographic print, light-struck during development. The site never shouts. It exhales, deliberately, with the confidence of a machine that has already computed the answer before you asked the question. Domain reading: **sim** = simulation, system, synthesis; **ai** = intelligence, inference, augmentation; **.net** = network, lattice, mesh. The site is a **lattice of simulated intelligence** — a mesh of mirrored panels that the visitor moves through, each panel reflecting back a slightly different angle on the same idea. Inspiration sources: NASA's Apollo-era instrument panels; the chrome and brushed-aluminum facades of mid-century IBM mainframe cabinets; the surface quality of a wet-plate collodion photograph; the runway lighting of a 1964 World's Fair hall; the typeface culture of scientific monographs printed on rag paper. ## Layout Motifs and Structure The page is built as a **portfolio-grid of full-width and half-width chrome panels**. Think of a lightboard — a flat illuminated surface divided into a mosaic of backlit rectangular fields, some spanning the full width, some paired side-by-side, none smaller than half the viewport width. The grid never becomes a card deck: panels bleed to the horizontal edge, separated only by a 1px hairline of `#C8CDD6` (cool silver) that catches the light like a seam in a brushed-metal fascia. Grid structure (top to bottom): 1. **Hero Panel** — full-width, 100vh. The wordmark "SIM-AI.NET" centered in viewport coordinates, rendered in chrome letterforms. Below it, a single line of descriptor text. Background: deep charcoal `#0F1114` with a grain overlay running at 12% opacity. A slow radial glow (`#8FA3B8` at 4% opacity) pulses from center over 8 seconds, looping. Flowing-curve SVG lines — three arcs, each 2px, in `#B8C4D0` at 20% — cross the panel diagonally, animating with a draw-on effect over 3.2 seconds on page load. 2. **Half + Half Row** — two panels side by side, each 50vw. Left panel: a project/capability showcase. Right panel: a contextual description. The division line is the `#C8CDD6` hairline. 3. **Full-Width Accent Panel** — a horizontal band at 40vh height, dark-on-dark (`#0A0C0E` background), containing a single quote or thesis statement in oversized type. A grain overlay at 18% opacity here. Flowing-curve arcs snake through this panel in white at 8% opacity. 4. **Three-Column Grid Row** — three equal panels in a row, each presenting a facet of capability. Each column has a chrome-line top border (2px, gradient from `#6E8FAB` to `#B4C8D8`). 5. **Half + Half Row (reversed)** — capability showcase flipped: right panel image/diagram, left panel text. 6. **Footer Panel** — full-width, 60vh. A single chrome arc SVG, slow-rotating (360° over 30s), centered. Contact information in small-caps mono below it. Navigation: a single horizontal rule at the very top of the page, 100vw wide, 2px, gradient `#4A6070` to `#B8CCD8`. Below it, 7 navigation labels spaced evenly in small-caps, separated by the `·` mid-dot in `#6A7A86`. Navigation does not scroll with the page — it appears only at the top, then fades out by 80vh scroll depth (fade-reveal in reverse: fade-out-on-scroll). Fade-reveal pattern: every panel below the fold fades in from opacity 0 and translateY(24px) to opacity 1 and translateY(0) over 640ms with cubic-bezier(0.22, 1, 0.36, 1) as the panel enters the viewport. The hero panel is already visible; no animation on load except the curve draw-on and the glow pulse. ## Typography and Palette **Palette — chrome-metallic with deep-charcoal grounds:** | Role | Color | Hex | |---|---|---| | Deep Ground | Charcoal void | `#0F1114` | | Panel Ground | Gunmetal | `#181C21` | | Chrome Highlight | Polished silver | `#D4DCE6` | | Chrome Midtone | Brushed steel | `#8FA3B8` | | Chrome Shadow | Blue-slate | `#4A6070` | | Hairline | Cool silver | `#C8CDD6` | | Accent Arc | Ice-blue chrome | `#B4C8D8` | | Text Primary | Warm near-white | `#EBF0F5` | | Text Secondary | Steel-gray | `#8A9BAA` | | Grain Tint | Silver gelatin | `#6E7E8C` | All backgrounds are dark. No light-mode. The page never shows white — the lightest value is `#EBF0F5` for body text, which reads as white against charcoal but holds a barely-perceptible cool tint. **Typography — sans-grotesk system with mono accent:** - **Wordmark / Hero Display:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 700, size `clamp(52px, 9vw, 120px)`, letter-spacing `-0.04em`. Rendered in a CSS `background-clip: text` gradient from `#D4DCE6` (top) to `#8FA3B8` (bottom), simulating a chrome letterform catch-the-light effect. No text shadow. - **Section Headers (H2):** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 500, `clamp(22px, 3.2vw, 44px)`, letter-spacing `-0.02em`, color `#D4DCE6`. - **Body / Descriptor Text:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 300, `clamp(15px, 1.4vw, 18px)`, line-height 1.68, color `#8A9BAA`. Running text in the panels uses this typeface exclusively. - **Navigation Labels / Small-caps UI:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 500, `font-variant-small-caps`, `0.72rem`, letter-spacing `0.12em`, color `#8FA3B8`. - **Code / Technical Labels:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono), weight 400, `0.85rem`, color `#6E8FAB`. Used sparingly for technical identifiers — model names, version strings, parameter labels. Type scale is strict. No display type other than Space Grotesk. No serif anywhere. No italic use except in pull-quotes (DM Sans 300 italic, `#8A9BAA`, inset with a 2px left border in `#4A6070`). ## Imagery and Motifs **Grain overlay (primary texture):** A subtle film-grain SVG filter (`feTurbulence` + `feColorMatrix`) applied as a persistent layer above all panel backgrounds at 10–18% opacity. The grain is monochrome silver-gray, never colored. It shifts frequency slightly between panels — coarser grain (0.65 frequency) on hero and footer panels; finer grain (0.85 frequency) on content panels — so each panel has a slightly different photographic surface quality. **Flowing-curve arcs (structural motif):** SVG `` elements using smooth cubic Bézier curves — never straight lines, never sharp angles. Each arc is `2px` stroke, no fill, in `#B4C8D8` at 8–22% opacity. Three to five arcs per panel; they are not decorative borders but **compositional diagonals** that guide the eye across the panel in the direction of reading. Arcs animate in with a CSS `stroke-dashoffset` draw-on technique, staggered by 0.4s between arcs. On the hero panel, arcs re-draw slowly and continuously (each arc completes its draw in 4s, then holds for 6s, then fades out and re-draws — a 10s breathing cycle). **Chrome letterform gradient:** The CSS technique `background-image: linear-gradient(180deg, #D4DCE6 0%, #8FA3B8 55%, #4A6070 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent` is used exclusively for the hero wordmark. Section headers use flat `#D4DCE6` — the gradient is a singular, controlled flourish. **Panel hairlines:** Every panel boundary is defined by a 1px `#C8CDD6` line. Horizontal hairlines use `border-top: 1px solid #C8CDD6`. The hero panel has no hairline at its top — it begins from the navigation rule. **Radial glow pulse:** A CSS radial gradient overlay (`#8FA3B8` at 0% center → transparent at 60% radius) positioned at viewport center, opacity animated from 0.03 to 0.07 and back over 8s with `animation: glowpulse 8s ease-in-out infinite`. Applied only on the hero panel. No glow on content panels. **No photography, no icons, no illustrations.** The visual world is entirely typographic + geometric (arcs + hairlines + grain). If a project thumbnail is needed in a portfolio panel, it is represented as a dark rectangle (`#181C21`) with a 1px hairline border and a two-line text label in JetBrains Mono — never an image file. ## Prompts for Implementation Build sim-ai.net as a **single-page chrome lattice** — a continuous scroll of chrome-panel sections, each fading into the viewport as the user descends. The page is a simulation of a high-resolution monograph about computational intelligence, produced by a design studio that bills by the nanometer. **Implementation sequence:** 1. **CSS custom properties first.** Define the entire palette as `--color-*` variables. Define `--grain-opacity: 0.12`, `--arc-opacity: 0.14`, `--glow-opacity: 0.05` as tunable levers. The grain filter SVG is inlined in `` and referenced by `filter: url(#grain)` on each panel's `::after` pseudo-element. 2. **Hero panel.** `height: 100vh; background: #0F1114`. The wordmark is a single `

` with the chrome gradient technique. Below it: one line of `

` in DM Sans 300. The hero SVG arcs layer is a full-bleed `` positioned absolutely, `pointer-events: none`, `z-index: 1`, containing three `` elements with `stroke-dasharray` + `stroke-dashoffset` animation. 3. **Navigation.** `position: absolute; top: 0; width: 100%`. Seven `` labels in Space Grotesk small-caps. CSS `transition: opacity 400ms` controlled by a scroll listener that sets `--nav-opacity` on `:root` — nav fades from 1 to 0 between 60vh and 80vh scroll depth. No sticky positioning. No hamburger. 4. **Content panels.** Each panel is a `
` with `class="panel panel--full"` or `class="panel panel--half"`. Half panels are wrapped in `

` using CSS Grid `grid-template-columns: 1fr 1fr` with a `gap: 1px` (creating the hairline via the grid background set to `#C8CDD6`). Fade-reveal is implemented via an `IntersectionObserver` that adds class `.visible` to each section when it enters the viewport at 15% threshold; CSS handles the transition. 5. **Three-column row.** `grid-template-columns: repeat(3, 1fr)`, same 1px gap on `#C8CDD6` background. Each column has a `::before` pseudo-element providing the chrome-gradient top accent line (`height: 2px; background: linear-gradient(90deg, #6E8FAB, #B4C8D8)`). 6. **Grain overlay.** In each `
`, insert `