# Design Language for simai.moe ## Aesthetics and Tone A Y2K-futurism revival re-engineered through the velvet rope of haute couture — imagine a 2001 dot-com prospectus printed on metallic foil, then displayed inside a Place Vendome jewellery vitrine. The look fuses the chrome confidence of pre-iPod Apple keynote graphics, the bubble-clear gel of vintage iMacs, and the sleek bezel-less stage of a couture window display. The tone is luxurious-restrained: every surface gleams, but the gleam is hushed. Pop-ups don't pop — they unfold like a Hermès orange box. Inspiration: 2000–2003 era Sony Vaio webframes, the Helmut Lang minimalism of late-90s Vogue ad pages, classic Saint Laurent press-kit typography, and the chromium translucence of the early Aqua UI rendered through a duotone overlay. Vintage motifs anchor it to nostalgia; the duotone palette keeps it from feeling kitsch. ## Layout Motifs and Structure Bento-box composition treated as a couture jewellery tray. The viewport is divided into asymmetric, gem-cut compartments — each compartment a "vitrine" displaying one artefact (a quote, an artefact image, a wordmark, a numeral). Compartments vary in size: golden-ratio rectangles, lozenges, narrow strip-cells. Each compartment has a soft inner chrome bevel and a faint gel highlight along its top edge, hinting at depth without skeuomorphism. The compartments tessellate cleanly but breathe — a 24px velvet-black gutter separates each tray section. On scroll, trays don't slide in; instead they flip-rotate fractionally on Y-axis at hover via scale-hover patterns (1.02 scale, 2° tilt). Y2K bezel ornaments — small chrome rivets, oval bevels, gel reflections — punctuate corners. The page reads as one large jewellery display window, not a feed. ## Typography and Palette - **Display:** "Big Shoulders Display" (Google Fonts) — oversized-display, used at 180–280px for single-word couture headers - **Subhead / serif accent:** "DM Serif Display" (Google Fonts) — for italic kickers and brand wordmark - **Body:** "Inter" (Google Fonts) — weight 300 for body, 600 for compartment captions, paired with "Manrope" for caption italics Palette — Duotone couture chrome: - `#0E0A14` Velvet Vault — primary background, the lacquered tray bottom - `#F2EBDD` Champagne Pearl — secondary, body text, dominant duotone partner - `#C8A36A` Veined Gold Leaf — accent for couture rivets and bevels - `#1A1622` Bezel Shadow — inset shadows beneath compartments - `#E2D9C2` Mirror Cream — hover highlight, chrome edge gleam The duotone is strictly Velvet Vault + Champagne Pearl; gold is used surgically. ## Imagery and Motifs - **Isometric-icons**: tiny couture artefacts rendered as flat isometric vector compositions — perfume vial, foil envelope, gel-tone iMac, Vaio clamshell, beveled CD jewel case, vintage-couture handbag silhouette. Each icon sits in its own bento compartment as a still-life - **Vintage motifs**: vintage couture references — typewriter ribbon glyph, foil-stamped runway ticket numbers, hot-stamp serial codes ("N° 014/200"), aged silk ribbon underlines - Y2K hardware bevels: small chrome rivets at corners, oval gel highlights, frosted-glass plates as overlays - A single recurring "vitrine" icon (an isometric glass dome on a wood plinth) sits in the masthead compartment, reused throughout as a returning motif - No photography. No avatar bubbles. Only isometric vector icons. ## Prompts for Implementation - Build the page as a single-screen-first bento mosaic that extends with one secondary tray below the fold — 12-column grid with custom span values producing asymmetric compartments - Each compartment renders with a chrome bevel (inset box-shadow + linear-gradient top highlight), a 1px gold rim, and content centered on its own micro-baseline - Hover (scale-hover pattern): each compartment scales to 1.02 and rotates 1.5° on Y-axis; gel highlight intensifies; gold rivets brighten — all over 280ms cubic-bezier(.2,.7,.2,1) - Isometric icons should be inline SVG, each composed from 3–5 simple polygons, dual-toned in Velvet Vault and Champagne Pearl with one small gold facet - AVOID: CTA buttons, pricing tables, stat-grids, testimonial blocks. Every compartment is an artefact, not an offer - The site narrates a single couture release: 12 compartments form a kind of fashion lookbook, captioned in italic Champagne Pearl serif - Animations are restrained: no glow, no neon. Y2K-futurism here means optical depth, not optical noise - Type couture: enormous display words breathe across multiple cells (CSS grid spanning), creating typographic compartments that double as ornament ## Uniqueness Notes - Differentiator 1: Y2K-futurism reframed through luxury rather than ironic camp — a register absent from the corpus - Differentiator 2: bento-box used as jewellery vitrine, not as dashboard or stat-grid - Differentiator 3: duotone palette executed with strict two-color discipline, with gold as surgical accent — restrained where most duotone designs lean neon - Differentiator 4: isometric-icons composed as couture still-lifes, not product UI icons - Differentiator 5: oversized-display used couture-massive (200px+) on body-restrained text — visual register of a Helmut Lang ad, not a SaaS landing - Chosen seed: aesthetic: y2k-futurism, layout: bento-box, typography: oversized-display, palette: duotone, patterns: scale-hover, imagery: isometric-icons, motifs: vintage, tone: luxurious - Avoids overused patterns: parallax (94%), card-grid (90%) — the bento here is asymmetric vitrine, not uniform card-grid; warm palette (93%) — duotone is cool-neutral; mysterious-moody tone (70%) — luxurious-restrained instead