# Design Language for simai.dev ## Aesthetics and Tone Mid-century editorial calm — the visual register of a 1957 oceanographic monograph reissued for a contemporary developer journal. The page reads like a long, deep dive: slow, considered, and contemplative, with the still-water hush of a marble-walled reading room. Inspiration draws from Lustig's Knopf jackets, the Container Corporation of America print campaigns, and the cool, deliberate restraint of Saul Bass title sequences before they accelerate. Nothing flashes. Nothing pulses. Type breathes. The dominant emotional note is calm-serene — a contemplative blue twilight that invites the reader to slow their pulse and let the long-form articles unfurl. Where most developer sites perform urgency, simai.dev performs patience. ## Layout Motifs and Structure Editorial-flow composition modeled on the spreads of mid-century literary quarterlies. A wide one-and-a-half-column reading measure (max-width 68ch for body) is offset by generous marginalia (24% gutter) that holds floating captions, side-notes, and small marble vignettes. Sections progress as scroll-triggered chapters: each chapter occupies a full viewport with a deep dropcap initial, a slow-rising rule beneath the chapter number ("I.", "II.", "III."), and a horizontal hairline that draws across the column as the chapter enters view. No cards. No tiles. No CTA blocks. The grid is a 12-column editorial frame, but only 7 are ever used at once — the rest is intentional negative space, like the pale margin of a thick-paper book. Between chapters, a single tropical fish silhouette swims across the page on a slow horizontal vector (12s duration, ease-in-out), then dissolves. ## Typography and Palette - **Display:** "Cormorant Garamond" (Google Fonts) — for chapter numbers and section headings, weight 300, italic for kickers - **Body:** "Spectral" (Google Fonts) — humanist serif, weight 400/500, optical sizing tuned for 18px reading - **Marginalia / captions:** "Inknut Antiqua" (Google Fonts) — at 13px, used sparingly for footnote-like asides Palette — Midnight Blue editorial twilight: - `#0B1A2E` Midnight Hull — primary background, the deep water beneath the page - `#1B3556` Atlas Indigo — secondary surface, the slow rule and chapter band - `#E8E0CC` Aged Foolscap — body text and marginal rules - `#C7B27A` Brass Bookmark — accent for dropcaps, ornament rules - `#7FA9C9` Lagoon Mist — hover-state and faint fish silhouettes - `#3A1F1A` Inkblot Burgundy — used only for the publisher's mark and footer mast ## Imagery and Motifs - **Marble-texture** backgrounds: large pale travertine and Carrara fields used as inset plates behind chapter openers — scanned at 600dpi feel, with subtle veining (SVG noise + radial gradient overlay) - **Tropical-fish motifs**: hand-traced silhouettes of angelfish, butterflyfish, and unicornfish species in single-line ink — used as section dividers and as a slow-swimming hero element. Fish are always rendered as silhouettes against marble, never as photographs - Mid-century editorial ornaments: small typographic rules, asterism (⁂), section sigils numbered in Roman - A single recurring "still life": a marble plinth holding an aged paperback with a fish silhouette resting on the cover, redrawn each chapter at different scales - No icons. No emoji. No avatars. No screenshot mockups. ## Prompts for Implementation - Build a single long-scroll page composed of 5–7 narrative "chapters", each its own viewport-height stage with a Roman numeral, an italic kicker, and a long-form essay body - Use IntersectionObserver to trigger chapter entry: dropcap fades up, hairline rule draws left-to-right over 1.4s, marginalia slides in from the gutter - Animate one tropical fish silhouette per chapter on an SVG `` or CSS keyframe path — slow, never reversing, no easing bounce. Fish should never overlap text - Marble texture: layer a tiled SVG turbulence with `feTurbulence baseFrequency=0.012 numOctaves=2` plus a warm sepia gradient, opacity 0.18, multiplied over the midnight background - Typography must remain large, generous, and unhurried: line-height 1.7 body, 1.1 display, letter-spacing 0.02em on numerals only - AVOID: CTA buttons, pricing tiles, stat counters, hero CTAs, sign-up modals, social proof bars, testimonial carousels. There are no products on this site — only essays - Treat scroll as page-turning. Each section should land with a soft "settle" easing (cubic-bezier(.2,.7,.2,1)) - No dark mode toggle, no theme switcher, no nav drawer. A single thin top mast bearing the wordmark and current issue number suffices ## Uniqueness Notes - Differentiator 1: editorial-flow + tropical-fish is a vanishingly rare pairing — most sites with fish go aquatic-cyber, this is monastic-literary - Differentiator 2: marble-texture as imagery + midnight-blue palette + humanist typography is a precise mid-century literary-quarterly register absent from the corpus - Differentiator 3: scroll-triggered patterns used for narrative chaptering rather than card reveals — story-driven, not product-driven - Differentiator 4: calm-serene tone counters the corpus's heavy lean toward mysterious-moody (70%) and corporate (25%) - Differentiator 5: Cormorant Garamond + Spectral + Inknut Antiqua is a serif-only stack that resists the corpus's 81% mono-typography dominance - Chosen seed: aesthetic: mid-century, layout: editorial-flow, typography: humanist, palette: midnight-blue, patterns: scroll-triggered, imagery: marble-texture, motifs: tropical-fish, tone: calm-serene - Avoids overused patterns from frequency analysis: parallax (94%), card-grid (90%), centered (94%), photography imagery (90%), warm palette (93%), mysterious-moody tone (70%), mono typography (81%)