# Design Language for simulai.xyz

## Aesthetics and Tone

simulai.xyz is an enchanted AI atelier — a place where machine intelligence wears the gossamer robes of a fairy court. The aesthetic is **fairycore** filtered through **art deco** geometry: organic luminous blobs bounded by razor-thin gilt rules, iridescent jewel pigments pressed into symmetrical medallion frames, the logic of a crystal grid fused with the soft biomorphism of dewdrops on spider silk.

The experience is ceremonial and hushed. No verbose copy. No busy carousels. A centered axis of symmetry governs every composition, like a portal or a looking glass. The visitor arrives at a single radiant focal point — an animated jewel-toned sigil — then descends through a vertical sequence of sparse, high-impact panels. Silence is a design choice. White space is not emptiness but luminance.

**Mood references:** the iridescent interior of an abalone shell held up to candlelight; an art nouveau poster reprinted on vellum; a fairy-circle of glowing mushrooms arranged in perfect hexagonal symmetry; a crystal ball containing miniature galaxies; an AI's first dream, expressed in stained glass.

**Tone:** minimal — words appear only when they must. Labels are single words. Headings are short phrases. Body text is sparse and poetic, never technical in register. The site communicates through form, color, and motion rather than explanation.

---

## Layout Motifs and Structure

The layout is rigorously **centered** on a single vertical spine, but unlike the flat centered layouts that dominate the corpus, the centering here is *ceremonial*: every element radiates from or returns to the central axis like the arms of a mandala. The page is not a list — it is a sequence of tableaux.

**Hero Tableau (viewport-height, centered):**
A single oversized animated organic blob (SVG, 480–600px diameter) floats at absolute center, rendered in layered jewel tones with internal luminous motion. The logotype "simulai" is set in art-deco display lettering, centered horizontally, positioned just above center vertical. Below it, a single-line descriptor in small-caps spacing. No navigation bars visible initially — they materialize on first scroll as a translucent top rail.

**Vertical Tableau Sequence:**
Each section below the hero is a full-width tableau: centered content block (max-width 680px) surrounded by generous negative space. Sections are separated not by lines but by a 6–8px decorative art-deco divider motif — a thin double-rule with a central diamond pip. Content within each tableau is center-aligned.

**Symmetrical Card Grid (one section only):**
A 3-column grid of square cards, each showing a capability or feature. Cards are perfectly square with clipped organic-blob `clip-path` corners — they feel like cut gemstones rather than rectangles. The grid itself is centered and never breaks asymmetrically.

**Navigation:**
Appears as a slim translucent rail at the top on scroll: logo mark left, 4 navigation links center, a single CTA right. The rail uses `backdrop-filter: blur(12px)` with a jewel-toned tint (`rgba(91, 33, 182, 0.15)`). Links use spaced small-caps lettering. No hamburger menus on desktop; on mobile, a centered bottom sheet.

**Spatial Philosophy:**
Maximum breathing room. The centered layout concentrates attention rather than distributing it. Margins are proportional to a typographic scale (never pixel-arbitrary). The composition always has a clear center of gravity — one dominant object per screen viewport.

---

## Typography and Palette

**Primary typeface — Display & Headings:** `Cinzel` (Google Fonts, serif). A Roman inscriptional face with art-deco sensibility — monoline uppercase capitals with elegant proportions. Used at weights 400 and 700. Sizes: hero logotype 72–96px (fluid), section headings 36–48px. Letter-spacing: `0.08em` for headings, `0.2em` for small-caps labels.

**Secondary typeface — Body & Descriptors:** `Cormorant` (Google Fonts, serif). A refined, high-contrast display serif with delicate hairlines that pair with Cinzel's geometry. Used at 400 and 300 for body text and poetic descriptors. Base size: `clamp(1rem, 0.9rem + 0.3vw, 1.2rem)`. Line-height: 1.8 for spaciousness.

**Accent typeface — Micro-labels & Tags:** `Raleway` (Google Fonts, sans-serif). A geometric humanist sans used exclusively for UI micro-labels, input placeholders, and caption text. Weight 300, letter-spacing `0.15em`, size 12–13px. It serves as the functional voice against the ornamental display faces.

```css
:root {
  --type-hero: clamp(4rem, 8vw, 6.5rem);
  --type-h2: clamp(2rem, 4vw, 3.5rem);
  --type-h3: clamp(1.4rem, 2.5vw, 2rem);
  --type-body: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
  --type-label: 0.75rem;
}
h1 { font-family: 'Cinzel', serif; font-size: var(--type-hero); font-weight: 700; letter-spacing: 0.08em; }
h2 { font-family: 'Cinzel', serif; font-size: var(--type-h2); font-weight: 400; letter-spacing: 0.06em; }
p  { font-family: 'Cormorant', serif; font-size: var(--type-body); font-weight: 300; line-height: 1.8; }
.label { font-family: 'Raleway', sans-serif; font-size: var(--type-label); letter-spacing: 0.15em; text-transform: uppercase; }
```

**Color Palette:**

| Role | Name | Hex |
|---|---|---|
| Background base | Void Alabaster | `#0e0b16` |
| Surface layer | Nightshade Depth | `#160d2e` |
| Card surface | Amethyst Cavern | `#1e1040` |
| Primary jewel | Violet Flame | `#7c3aed` |
| Secondary jewel | Sapphire Bloom | `#2563eb` |
| Tertiary jewel | Emerald Pulse | `#059669` |
| Warm accent | Garnet Ember | `#dc2626` |
| Gilt rule | Pale Gold | `#d4af70` |
| Primary text | Crystal White | `#f0ecff` |
| Secondary text | Lavender Mist | `#a78bfa` |
| Disabled / muted | Dusk Mauve | `#6d5d8e` |

The palette is **jewel-tones against near-black**: deep violet backgrounds that make sapphire and emerald accents ignite like backlit stained glass. The near-black base (`#0e0b16`) leans purple rather than grey, keeping it within the fairycore chromatic world. Gold rules (`#d4af70`) recall art deco posters without veering into luxury-brand territory.

---

## Imagery and Motifs

**Imagery approach — mixed-media:**
simulai.xyz uses no photographs. Instead, imagery is constructed from three layers combined:
1. **SVG organic blob forms** — fluid, amoeba-like shapes with CSS `filter: blur(0.5px)` edges, filled with radial jewel-tone gradients, animated with `d` path morphing.
2. **Art-deco geometric overlays** — thin SVG `stroke`-only constructions: concentric circles, radial line bursts, double-diamond rules, and chevron grids layered over the blobs at low opacity (15–25%). These function as the "cage" or "crystal lattice" around the organic forms.
3. **Generative color mesh gradients** — CSS `conic-gradient` and `radial-gradient` combinations creating iridescent lens-flare pools behind key elements.

No stock photography. No hand-drawn illustration. No icons. The visual language is entirely constructed from geometry and gradient.

**Organic Blob Motif System:**
The hero blob is a 5-point irregular SVG path that morphs continuously between three keyframe shapes using CSS `d` animation (1 path per keyframe, 8s cycle, `ease-in-out infinite`). It has:
- A base fill: `radial-gradient(ellipse at 40% 40%, #7c3aed 0%, #2563eb 60%, #059669 100%)`
- An inner luminance spot: smaller blob at 30% opacity, fill `#d4af70`, positioned offset to simulate subsurface light
- A thin outer stroke: 1px, `rgba(212, 175, 112, 0.3)` — the gilt rule that "frames" the organic form

Smaller blob ornaments (80–120px) appear as decorative elements in section gutters and card corners, using single-jewel fills. They drift very slowly (12–20s cycle, `transform: translateY(±8px) scale(0.98–1.02)`).

**Art Deco Structural Motifs:**
- Section dividers: a centered SVG unit consisting of two parallel horizontal rules (1px, `#d4af70`, 40% opacity) flanking a diamond pip (10px × 10px, filled `#d4af70`)
- Card corner ornaments: quarter-circle art deco fan motifs (SVG stroke-only, `#d4af70`, 20% opacity) at two diagonal corners of each gem-card
- Background radial burst: behind the hero blob, a very faint SVG radial line burst (48 spokes, 2px wide at origin tapering to 0, `rgba(212,175,112,0.06)`) creates an aureole effect

---

## Prompts for Implementation

**Entry experience:**
The page arrives in darkness (`background: #0e0b16`). The hero blob begins at `opacity: 0; scale: 0.7` and elastically expands to `opacity: 1; scale: 1` over 900ms (`cubic-bezier(0.34, 1.56, 0.64, 1)` — the elastic overshoot). The art-deco radial burst fades in simultaneously at 0.4× speed. The logotype `Cinzel` text drops in 200ms after the blob settles: `translateY(-16px) opacity 0` → `translateY(0) opacity 1`, 400ms `ease-out`. The descriptor line arrives last, 150ms after the heading.

**Elastic interaction pattern:**
Every interactive surface uses elastic spring easing on both enter and exit, never linear:
- Button press: `scale(0.94)` on mousedown, springs back to `scale(1.03)` then settles to `scale(1)` on release — total duration 280ms, split `cubic-bezier(0.68, -0.55, 0.265, 1.55)`
- Card hover: `translateY(-6px) scale(1.02)` arrives with spring overshoot (`cubic-bezier(0.34, 1.56, 0.64, 1)`, 350ms); exits with gentle damping (250ms `ease-out`)
- Blob hover (hero): the blob's morph speed increases from 8s to 4s cycle on hover, and its scale pulses `1.0 → 1.04 → 1.0` with spring easing, making it feel responsive and alive

**Gem-card entry animation:**
The 3-column capability cards enter with a staggered elastic rise: each card starts at `translateY(40px) opacity 0 scale(0.92)`, then springs to final position when scrolled into view. Delay increases by 80ms per card (left to right). Spring: `cubic-bezier(0.34, 1.56, 0.64, 1)`, 500ms.

```js
// Elastic spring easing (CSS custom property shorthand)
const SPRING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
const cards = document.querySelectorAll('.gem-card');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      const idx = parseInt(el.dataset.idx);
      el.style.transition = `transform 500ms ${SPRING} ${idx * 80}ms, opacity 400ms ease ${idx * 80}ms`;
      el.style.transform = 'translateY(0) scale(1)';
      el.style.opacity = '1';
    }
  });
}, { threshold: 0.15 });
cards.forEach(card => observer.observe(card));
```

**Gem-card clip-path:**
Each capability card uses a custom `clip-path: polygon()` that approximates a cut-gemstone shape — an octagon with slightly truncated corners, applied consistently. The `clip-path` itself transitions on hover to a slightly different polygon (same cut, fractionally larger), creating the elastic gem-expand feel.

```css
.gem-card {
  clip-path: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);
  transition: clip-path 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gem-card:hover {
  clip-path: polygon(6% 0%, 94% 0%, 100% 6%, 100% 94%, 94% 100%, 6% 100%, 0% 94%, 0% 6%);
}
```

**Blob morphing implementation:**
```css
@keyframes blob-morph {
  0%   { d: path('M 240 80 C 320 60 380 120 400 200 C 420 280 360 360 280 380 C 200 400 120 340 90 260 C 60 180 100 100 240 80 Z'); }
  50%  { d: path('M 260 70 C 350 50 410 130 420 210 C 430 300 370 370 270 390 C 170 410 100 350 80 270 C 60 190 120 90 260 70 Z'); }
  100% { d: path('M 240 80 C 320 60 380 120 400 200 C 420 280 360 360 280 380 C 200 400 120 340 90 260 C 60 180 100 100 240 80 Z'); }
}
.hero-blob path { animation: blob-morph 8s ease-in-out infinite; }
.hero-blob:hover path { animation-duration: 4s; }
```

**Art-deco divider SVG:**
```html
<svg class="art-deco-divider" width="200" height="16" viewBox="0 0 200 16">
  <line x1="0" y1="7" x2="88" y2="7" stroke="#d4af70" stroke-width="1" opacity="0.4"/>
  <line x1="0" y1="9" x2="88" y2="9" stroke="#d4af70" stroke-width="1" opacity="0.4"/>
  <polygon points="100,2 108,8 100,14 92,8" fill="#d4af70" opacity="0.7"/>
  <line x1="112" y1="7" x2="200" y2="7" stroke="#d4af70" stroke-width="1" opacity="0.4"/>
  <line x1="112" y1="9" x2="200" y2="9" stroke="#d4af70" stroke-width="1" opacity="0.4"/>
</svg>
```

**Conic iridescence effect (behind hero):**
```css
.hero-iridescence {
  position: absolute;
  width: 800px;
  height: 800px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(124, 58, 237, 0.12) 0deg,
    rgba(37, 99, 235, 0.08) 90deg,
    rgba(5, 150, 105, 0.10) 180deg,
    rgba(220, 38, 38, 0.06) 270deg,
    rgba(124, 58, 237, 0.12) 360deg
  );
  border-radius: 50%;
  filter: blur(60px);
  animation: iridescent-spin 20s linear infinite;
  pointer-events: none;
}
@keyframes iridescent-spin { to { transform: rotate(360deg); } }
```

---

## Uniqueness Notes

**3+ Differentiators:**

1. **Elastic Gem-Card Clip-Path Morphing:** The capability cards are clipped to octagonal gem shapes whose clip-path polygons elastically transition on hover — the card physically reshapes as a gemstone being "cut" tighter. This is a clip-path animation technique absent from the entire corpus and directly expresses the jewel-motif identity through interaction rather than illustration.

2. **SVG Blob Path-Morphing with Art-Deco Cage Overlay:** The hero visualization layers CSS `d` path animation on an organic blob with a stroke-only art-deco radial burst superimposed — the organic form breathes inside a geometric armature. This combination of biomorphic motion and geometric constraint as a single composition is unique in the corpus.

3. **Conic-Gradient Iridescence Pool:** The background behind the hero uses a slowly rotating `conic-gradient` at high blur to simulate the iridescent color-shift effect of abalone or butterfly wings — a technique that requires no images and creates depth from pure CSS. No other design in the corpus uses conic-gradient as a primary atmospheric element.

4. **Jewel-Tone Palette Against Near-Black Purple Base:** Where warm tones (88%) and gradients (76%) dominate the corpus palette space, simulai.xyz inverts to a cold violet-black base where jewel accents read as self-luminous rather than pigment. The near-black is purple-tinted (`#0e0b16`) rather than neutral, which keeps the fairycore register without softening into pastels.

**Chosen Seed:** `aesthetic: fairycore, layout: centered, typography: art-deco-display, palette: jewel-tones, patterns: elastic, imagery: mixed-media, motifs: organic-blobs, tone: minimal`

**Avoided Patterns (from frequency analysis):**
- Photography (87% usage) — replaced with SVG blob morphing, CSS gradient mesh, and art-deco geometry; no photographic imagery anywhere
- Warm palette (88% usage) — inverted to jewel-tones against near-black violet; no warm neutrals in the base palette
- Parallax (74% usage) — replaced with elastic spring easing as the primary motion language
- Stagger (49% usage) — retained only for gem-card entry, which uses elastic spring rather than standard ease timing
- Mono typography (74% usage) — replaced with inscriptional Roman (Cinzel) + high-contrast serif (Cormorant) + geometric sans (Raleway); no monospace anywhere
- Centered layout (83% usage) — used as seed but differentiated through ceremonial mandala composition, gem-card clip-paths, and conic iridescence rather than flat columnar centering
<!-- DESIGN STAMP
  timestamp: 2026-05-11T09:48:00
  domain: simulai.xyz
  seed: but differentiated through ceremonial mandala composition, gem-card clip-paths, and conic iridescence rather than flat columnar centering
  aesthetic: simulai.xyz is an enchanted AI atelier — a place where machine intelligence wear...
  content_hash: 417515169fbf
-->