# Design Language for simulai.dev

## Aesthetics and Tone

`simulai.dev` is a **deco simulation oracle** — picture a 1930s Parisian computation salon that has crossed into the far future and back. The aesthetic is Art Deco at its most architectural: chevrons, sunbursts, stepped cornices, and gilded geometry — but translated through a retro-futurist lens, as if Fritz Lang's Metropolis and a 1970s NASA concept art folio were bound together and left in a couture atelier in the Marais. The site smells of lacquered mahogany and burning vacuum tubes.

The mood is **elegant-sophisticated**: unhurried, deliberate, supremely confident. There is no hype, no urgency, no countdown timers. simulai.dev presents itself as a place that existed before the user arrived and will continue long after they leave — a salon for serious simulation work. Every element is placed with the precision of a master typographer setting type for a first edition.

The retro-futuristic palette is not pastel-synthwave — it is **oxidised amber, deep Prussian ultramarine, antique ivory, and a single vein of rose-gold leaf**. The site breathes through negative space the way a deco facade breathes through setbacks and reveals. Ornamentation is earned, never decorative for its own sake.

Cultural motifs are present as **architectural DNA**, not surface ornament: Art Deco drew from Egyptian revival, Aztec geometry, Bauhaus rationalism, and Pan-African modernism simultaneously. simulai.dev inherits this cosmopolitan synthesis — a stepped pyramid reference here, a lotus-capital column line there, always sublimated into pure geometric form rather than pastiche.

## Layout Motifs and Structure

The fundamental composition is a **split-screen**, deployed vertically at 50/50 on large viewports and stacked on mobile. This is a deliberate rarity — the frequency analysis shows split-screen at just 2%, making it one of the least-used layouts in the corpus. simulai.dev claims it.

**Left panel — The Oracle Face:** A full-height, deep Prussian-blue panel. This is the branded identity side: the simulai.dev wordmark set vertically along a deco column baseline, a large sunburst / stepped-arch SVG motif occupying the lower two-thirds, and a minimal navigation list (3–4 items) at the far left edge in vertical orientation. The left panel is `position: sticky` on scroll — it never moves. Its background carries a subtle diagonal herringbone pattern in a slightly lighter shade of ultramarine, referencing Art Deco textile work.

**Right panel — The Field:** A scrollable content column set against antique ivory (#F5EED8). This panel holds all content: prose sections, code specimens, project showcases. The content is set in a strict 68-character measure, creating the rhythmic, even rag of a well-set book page. Section breaks are marked by a full-width deco hairline — a 0.5 px rule flanked by two small diamond lozenges.

**Spatial system:** 8-point grid with generous multiples. Section padding is 80px top/bottom. The vertical rhythm is set by the body line-height (28px), and every spatial interval is a multiple or fraction of it. There is no 12-column grid; the layout reads as **two columns of the world**, not twelve slices of a spreadsheet.

**Scale-hover interactions:** Every interactive element scales on hover — but subtly, 1.0 → 1.04 over 220ms with a cubic-bezier ease that accelerates into the destination. Cards and image containers reveal a faint rose-gold border on hover. The wordmark on the left panel scales 1.0 → 1.02 on hover with a simultaneous letter-spacing increase of +0.05em, mimicking the way embossed type on lacquered paper swells under a loupe.

**Organic blobs — used as counterpoint:** Against all the strict geometry, the right panel backgrounds occasionally feature very slow-moving, low-opacity organic blob shapes in amber/ivory, rendered as CSS `clip-path` polygons with rounded corners and animated via `@keyframes` at 30–45 second cycles. They never overlap text. They function as a breathing, living sub-layer beneath the rigid deco grid — the tension between organic and geometric is the site's visual soul.

## Typography and Palette

**Type system (Google Fonts only, verified):**

- **Display headlines — `Cormorant Garamond`** (variable, wght 300–700, italic available). Used for all H1 and H2 headlines. Set at 64px (H1) and 40px (H2), weight 600, tracking +0.04em. Cormorant's high-contrast stroke, long ascenders, and ink-trap details recall the engraved type of 1920s deco printing. H1 headlines are set with a small-caps variant on the first word. All headlines are set in #2B1F0A (deep warm black) on the right panel and in #F5EED8 (antique ivory) on the left panel.

- **Body text — `EB Garamond`** (variable, wght 400–800). Set at 18px / 28px line-height on the right panel. The combination of Cormorant (high optical contrast, display cut) and EB Garamond (text-optimised Garamond, lower contrast) gives the site two voices from the same historical family — a deco editorial hierarchy without importing two unrelated families.

- **UI labels and navigation — `Josefin Sans`** (wght 100–700, tracking +0.15em). All uppercase. Used for navigation items (left panel), section labels, metadata, and any supporting UI copy. Josefin Sans was designed in 1920 with explicit Art Deco influence — its geometric construction, hairline thin strokes, and all-caps orientation are native to the aesthetic rather than applied to it.

- **Code specimens — `JetBrains Mono`** (variable). Used sparingly for any code blocks or technical strings. Set at 14px, weight 400, in #4A3728 on a code-block background of #EDE5CE.

**Palette:**

| Role | Hex | Name |
|---|---|---|
| Primary background (right) | `#F5EED8` | Antique Ivory |
| Primary background (left) | `#1A2744` | Prussian Ultramarine |
| Headline / primary text | `#2B1F0A` | Deep Warm Black |
| Left panel text / ivory | `#F5EED8` | Antique Ivory |
| Accent / rose-gold leaf | `#C8956C` | Oxidised Rose-Gold |
| Secondary accent | `#8A6A2E` | Burnished Amber |
| Decorative herringbone | `#1E2F52` | Shadow Ultramarine |
| Code block background | `#EDE5CE` | Warm Parchment |
| Deco hairline / diamond | `#C8956C` | Oxidised Rose-Gold |

The palette is deliberately constrained to five named values and four functional variants. There is no gradient except on the sunburst SVG motif (amber to ivory, radial). There is no drop shadow except on the left-panel column motif (a 2px offset, 4px blur in `#0a0f1f` at 60% opacity — barely perceptible, like pressing type into wet clay).

## Imagery and Motifs

**No photography. No stock imagery.** The corpus shows photography at high usage rates; simulai.dev opts out completely in favour of constructed geometric imagery.

**1. The Sunburst Arch (SVG, left panel):** The centrepiece of the left panel. A full deco sunburst composed of 24 rays radiating from a central point, capped at the top by a stepped arch (three steps inward, each 8px taller than the last). The rays are drawn at 0.8 px stroke in `#C8956C` (rose-gold) with alternating long (240px) and short (180px) rays. The arch is filled with `#C8956C` at 15% opacity. This SVG is `position: absolute`, bottom-aligned in the left panel, and does not animate — it is architectural, not kinetic.

**2. Diamond-lozenge hairlines:** Every section break on the right panel is marked by a horizontal rule composed of: `[◇ ——————————————— ◇]`, where the diamonds are 8px SVG elements and the rule is a 0.5 px line in `#C8956C`. This replaces the standard `<hr>` and gives the page its deco rhythm.

**3. Organic blob layer (right panel):** Slow-moving CSS `clip-path` blob shapes in `#C8956C` at 4% opacity and `#8A6A2E` at 3% opacity. Each blob is a 9-point polygon with all corners rounded via `border-radius: 50%` on a `div` set to `position: absolute`. Three blobs total, each on a different `animation-duration` (31s, 43s, 37s) to ensure they never synchronise. They drift within a 200px bounding box, never overlapping text columns.

**4. Stepped pyramid accent:** Used on project cards (right panel). Each card has a top-left corner decoration: a 3-step notched corner in `#C8956C` at 20% opacity — a single SVG `path` that forms a staircase from the corner inward. This references Aztec and Mesoamerican stepped-temple geometry, one of Art Deco's cultural borrowings, rendered as pure line.

**5. Vertical column rule (left panel):** A 1px rule in `#C8956C` runs the full height of the left panel, 40px from the left edge. The simulai.dev wordmark is attached to this rule at its midpoint, rotated 90° counter-clockwise, set in Josefin Sans 200 weight, 13px, all-caps, tracking +0.4em. This is the site's spine — the element that anchors the entire composition.

**6. Lotus capital divider (left panel footer):** At the very bottom of the left panel, a stylised lotus capital SVG (three petal arches, 1px stroke, rose-gold) sits above the copyright line. This references Egyptian Deco revival — the lotus was the most-borrowed motif of 1920s ornamental architecture.

## Prompts for Implementation

Build simulai.dev as a **split-screen salon**: left panel fixed, right panel scrolling. The visitor arrives at a composition that reads like a double-page spread from a 1930s luxury architectural magazine — except it breathes.

**Implementation structure:**

The outer wrapper is `display: grid; grid-template-columns: 50% 50%; height: 100vh; overflow: hidden`. The left panel is `position: sticky; top: 0; height: 100vh; overflow: hidden`. The right panel is `height: 100vh; overflow-y: auto`.

**Left panel construction:**
1. Prussian blue background (`#1A2744`) with a CSS `background-image: repeating-linear-gradient` herringbone at 45°, 2px stripes, `#1E2F52` at 60% opacity — barely visible texture.
2. The vertical column rule (1px, rose-gold) at left: 40px.
3. The wordmark attached to the rule's midpoint via absolute positioning, rotated.
4. The sunburst arch SVG anchored to the bottom.
5. The lotus capital SVG at the very bottom.
6. Navigation as a vertical list: 4 items, Josefin Sans, 11px, tracking +0.3em, all-caps, `#F5EED8` at 80% opacity. Each item has a `scale: 1.04` on hover with a rose-gold left border (3px) appearing.

**Right panel construction:**
1. Antique ivory background (`#F5EED8`).
2. Three organic blob `<div>`s positioned absolutely, animated with CSS `@keyframes` translate+scale, `clip-path: polygon(...)`, pointer-events: none.
3. Content sections stacked: Hero → About → Work / Projects → Contact.
4. Each section separated by the diamond-lozenge hairline (`<div class="deco-rule">`).
5. Project cards (2-column sub-grid inside the right panel) with the stepped pyramid corner decoration.

**Hero section (right panel, first screen):**
A single large Cormorant Garamond headline — two lines, left-aligned, 64px, weight 600, italic on the second line. Beneath it: a 3-line EB Garamond body paragraph at 18px. Then a single Josefin Sans label ("Selected Simulations, 2024–2025") marking the transition to the work section. No hero image. No CTA button. The headline IS the hero.

**Scale-hover pattern (universal):**
Apply `transition: transform 220ms cubic-bezier(0.34, 1.0, 0.64, 1.0)` to every interactive element. On hover: `transform: scale(1.04)`. For project cards: additionally reveal the stepped-corner decoration (opacity 0 → 1, 180ms). For navigation items: scale + rose-gold left border. Never animate background-color or opacity on the primary text elements — movement is the only signal.

**Story arc (right panel scroll):**

1. **Hero** — Headline + tagline. Sets the salon atmosphere. No imagery.
2. **Manifesto** — Two paragraphs on what simulation means at simulai.dev. Set in EB Garamond 20px at a 56-char measure, looser line-height (32px). Pull-quote styled in Cormorant italic 28px rose-gold — the only coloured headline on the right panel.
3. **Selected Simulations** — 4–6 project cards in a 2-column grid. Each card: project title (Josefin Sans, 12px, all-caps), a 2-line EB Garamond description, and a faint stepped-corner decoration. No images. Cards have a 1px border in `#2B1F0A` at 20% opacity, and the full rose-gold border appears on hover.
4. **Method** — 3 short paragraphs on the studio's simulation methodology. Section opened by a section label (Josefin Sans, rose-gold) and a diamond-lozenge hairline.
5. **Contact** — Minimal: an email address in Josefin Sans, a one-line invitation in EB Garamond, and the lotus capital SVG repeated at small scale (24px) as a visual full-stop.

**Avoid:**
- CTA buttons, pricing blocks, stat-grids, hero carousels
- Any photography or stock illustration
- Gradient backgrounds (except the sunburst SVG)
- Animations faster than 200ms or with bounce (keep cubic-bezier dignified)
- Color outside the defined palette

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic: art-deco, layout: split-screen, typography: serif-classic, palette: retro-futuristic, patterns: scale-hover, imagery: organic-blobs, motifs: cultural, tone: elegant-sophisticated.

**Differentiators from the corpus (informed by frequency analysis):**

1. **Split-screen at 2% frequency — claimed.** The corpus is dominated by centered columns and full-bleed heroes. simulai.dev's fixed-left / scrolling-right architecture gives it an immediately recognisable silhouette: the double-page spread. No other current design in the corpus uses this layout.

2. **Art Deco as structural grammar, not surface decoration.** The corpus shows several "vintage" designs (34% vintage motifs overall), but vintage in the corpus means texture, sepia, or retro-typography. simulai.dev uses deco as a spatial system — the stepped-arch, sunburst, diamond-hairline, and lotus-capital are load-bearing compositional elements, not wallpaper. The cultural motifs (Egyptian lotus, Mesoamerican stepped temple, Bauhaus column) are encoded in SVG geometry, not historical pastiche.

3. **Two Garamonds in conversation.** The corpus uses either a single serif (common) or a serif + sans pairing (very common). simulai.dev pairs two optical cuts of the same historical typeface — Cormorant Garamond (display) and EB Garamond (text) — with Josefin Sans as the only sans. This intra-family pairing creates typographic coherence that reads as a single voice at multiple registers, unlike the more common "contrast pairing" strategy.

4. **Organic blobs as tension against geometric rigour.** The deco grid is strict. The blob layer underneath the right-panel content introduces slow organic movement that no other geometric design in the corpus uses. The blobs are not decorative — they embody the philosophical tension at the core of simulation: rule-based systems producing emergent, organic-feeling behaviour.

5. **Prussian blue + rose-gold + antique ivory — a palette unused in the corpus.** The frequency analysis shows warm (88%) and gradient (76%) as dominant palette characteristics. simulai.dev's cool-anchored Prussian blue as the dominant half (the fixed left panel) running against the warm ivory right panel creates a temperature split that mirrors the split-screen layout itself.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T09:44:32
  domain: simulai.dev
  seed: seed
  aesthetic: `simulai.dev` is a **deco simulation oracle** — picture a 1930s Parisian computa...
  content_hash: 020bb46b77ff
-->