# Design Language for simai.tech ## Aesthetics and Tone Seapunk recast as a scholarly archive — a tidepool catalogued by a marine biologist with a CRT, a typewriter, and a deep respect for both. The page conjures the cool seafoam of an early-90s aquarium documentary stitched to the studious chrome of a CD-ROM educational encyclopedia. Inspiration: the SimEarth packaging palette, Lisa Frank's iridescent surfaces filtered through Stewart Brand's CoEvolution Quarterly, vintage National Geographic deep-sea photography reprinted in cyan-magenta separations, and the cool restraint of a Pelagic Society field guide. The tone is scholarly-intellectual but unmistakably aquatic: glossy without sugariness, mono-typed without coldness, observational and patient. Like a marine card catalog gone slightly hallucinatory at the gills. ## Layout Motifs and Structure A card-grid catalog of aquatic specimens, arranged as 4 columns desktop / 2 columns tablet / 1 column mobile, each card a 3:4 "field guide" plate. Each card front displays a vintage-photography seapunk specimen with cyan-magenta channel offset and a typed mono caption (Latin binomial + collection date). On card-flip patterns (a click or focus interaction), each card rotates 180° on Y-axis to reveal its complementary back: a long-form scholarly note in cool mono, dimensions, salinity range, hand-drawn flowing-curve diagrams. The grid avoids uniformity by mixing card heights in a slow seafloor rhythm — every fifth card is double-height to reveal a panoramic specimen. Between rows, soft cyan-magenta flowing-curve waves drift across the page as section dividers. ## Typography and Palette - **Display:** "JetBrains Mono" (Google Fonts) — for card titles, specimen IDs, and field-guide headers at 36–56px - **Body:** "IBM Plex Mono" (Google Fonts) — for scholarly back-of-card narratives at 14px line-height 1.65 - **Latin / binomial accent:** "Cormorant Garamond" (Google Fonts) — italic for the Latin binomial only, paired against the dominant mono - **Caption micro:** "Space Mono" (Google Fonts) — at 11px for catalog date stamps Palette — Complementary cyan-magenta seapunk archive: - `#0A2434` Abyssal Indigo — primary background, the deep page - `#E9F4F3` Reef Foam — main card surface - `#1FB7B0` Lagoon Cyan — primary accent, card rules, complementary anchor #1 - `#F062B0` Coral Magenta — secondary accent, channel-split highlight, complementary anchor #2 - `#9DD8D2` Pale Surf — body mono text on dark surfaces - `#3E1F3A` Octopus Plum — card back-side surface ## Imagery and Motifs - **Vintage-photography**: cyan-magenta separations of mid-century deep-sea photography — fish, kelp, anemones, plankton silhouettes — printed as if reproduced from a 1989 oceanographic monograph and slightly mis-registered (2px cyan shift, 2px magenta shift) - **Flowing-curve motifs**: long horizontal waves drawn in single SVG paths, drifting across the gutter between rows — animated stroke-dashoffset at a 14s cycle - Seapunk ornaments: shell silhouettes, kelp ribbon, dolphin-graphic stickers redrawn as monochrome cyan glyphs (Lisa Frank by way of restraint) - Catalog motifs: typed catalog numbers ("SP-0418.07"), collection-date stamps, scholarly field-guide rules, hatched bathymetric contour lines on card edges - Each card back includes a tiny ASCII-art coastline drawn in mono characters as a hand-set field sketch ## Prompts for Implementation - Build the catalog as a CSS Grid of 4 columns × N rows, with every fifth slot spanning 2 columns × 1 row (the panoramic plate); cards retain a 3:4 aspect except panoramics which are 8:3 - Card-flip pattern: on click/keyboard activation, perform a 3D `rotateY(180deg)` over 720ms with `transform-style: preserve-3d` and `backface-visibility: hidden` on both faces. Cards do NOT flip on hover - Vintage-photography effect: layered SVG using `feColorMatrix` to extract cyan/magenta channels and offset them by 2px in opposing diagonals, multiplied over a soft grain layer - Flowing-curves: 3 long horizontal SVG paths between sections, each a low-amplitude sine wave with a magenta-to-cyan gradient stroke, drifting via `stroke-dashoffset` animation - AVOID: pricing tiers, CTA bars, social-proof modules, testimonial stacks. The grid is a field-guide catalog, not a product gallery - Every card displays a typed catalog number in upper-left, Latin binomial in italic Cormorant in lower-right, mono caption beneath - Reading scroll behavior: as cards enter viewport, the cyan-magenta channel separation widens momentarily then settles — a 240ms misregistration "breathe" - The complementary palette must remain disciplined: cyan and magenta never overlap on the same element except as channel-split offset ## Uniqueness Notes - Differentiator 1: seapunk + scholarly-intellectual tone is a crossover absent from the corpus — seapunk normally goes camp or vaporwave - Differentiator 2: card-grid (an overused 90% layout) is redeemed by card-flip patterns and field-guide content — each card narrates, doesn't sell - Differentiator 3: vintage-photography rendered with strict cyan-magenta channel separation, complementary palette discipline - Differentiator 4: flowing-curve motifs as inter-section dividers, not as hero backgrounds - Differentiator 5: mono typography used scholarly rather than tech-terminal — paired with italic Cormorant Latin binomials for editorial gravitas - Chosen seed: aesthetic: seapunk, layout: card-grid, typography: mono, palette: complementary, patterns: card-flip, imagery: vintage-photography, motifs: flowing-curves, tone: scholarly-intellectual - Avoids overused patterns: parallax (94%) is replaced with card-flip; centered (94%) is broken by mixed-height grid; warm palette (93%) replaced with cool cyan-magenta; mysterious-moody (70%) replaced with scholarly observational