# Design Language for simai.one ## Aesthetics and Tone Corporate gravitas of a 1976 annual report, hand-bound in saddle-stitched cordovan and printed on cream paper that has aged seven seasons in a mahogany executive office. The page reads like a re-photographed page-spread from an IBM, Westinghouse, or Hewlett-Packard prospectus — confident, square-shouldered, slightly dust-warmed. Inspiration: Paul Rand for IBM, Lester Beall for International Paper, Lance Wyman's wayfinding, and the leather-bound shareholder letters that quietly defined American mid-century commerce. The tone is nostalgic-retro — the warmth of executive teak, the soft creak of a leather chair, the slow gleam of a brass nameplate. Not ironic vintage; sincere institutional memory. The visitor should feel addressed by a typeset thank-you letter, not a sales pitch. ## Typography and Palette - **Display:** "Playfair Display" (Google Fonts) — for the masthead and section opener serifs, weight 900, italics for kickers - **Subhead:** "Source Serif Pro" (Google Fonts) — for executive sub-heads and quoted memoranda - **Body:** "Lora" (Google Fonts) — humanist serif body at 17px, weight 400 with 500 emphasized passages - **Caption / mark:** "Cormorant Garamond" (Google Fonts) — for small-caps section labels and rule annotations The combination is a deliberate "eclectic-hybrid": three serifs of different historical lineages cohabit, signaling a chairman's letter set across multiple eras of in-house typography. Palette — Warm executive cordovan: - `#1F140C` Boardroom Mahogany — primary background of section banners - `#F6EDD9` Aged Letterhead Cream — main page surface - `#7B3A1E` Cordovan Brown — primary serif accent and rule color - `#C28E48` Brass Nameplate — for ornament dividers and italic kickers - `#2C1F13` Walnut Ink — body text - `#8A6B45` Tobacco Smoke — secondary captions and dust-warmed shadows ## Layout Motifs and Structure A Z-pattern layout configured as a printed corporate annual: the eye is led top-left masthead → top-right index → mid-page chairman portrait inset → bottom-right signature mark. Sections progress as paginated spreads, each spread a full viewport composed as an asymmetric two-column print page with a thick rule across the top, page-number in the outer corner, and a small ornamental cordovan mark in the gutter. Layered depth is achieved through subtle paper-stack drop-shadows: each "spread" appears to sit on the page beneath it with a 1mm cream offset and a soft tobacco shadow. Z-pattern transitions guide reading order from spread to spread; small skeleton-loading shimmers appear before quotes and tabular memoranda load in (treated as the parchment "developing"). No cards, no grids of tiles — only paginated executive layouts. ## Imagery and Motifs - **Leather-texture** plates: tooled cordovan leather backdrops appear as inset hero plates behind each spread opener — embossed with the section roman numeral as if blind-stamped - **Layered-depth** ornaments: stacked-paper shadows, slight page curl on lower corners, small dog-eared folds at section transitions - Corporate motifs: brass corner brackets, ribbon bookmarks dangling from spread tops, executive monogram stamps in cordovan ink - Recurring "thank you" cards: small tipped-in note cards with handwritten serif notes, used as section breaks - A single embossed seal (a circular cordovan mark) reappears at every chapter close as the signature device - No photography of people. Only typographic ornament, leather plates, ribbon, and seal motifs. ## Prompts for Implementation - Build the page as a vertical sequence of paginated "spreads" — each spread is one viewport-height stage with a cordovan band at top, the section title in Playfair, body in Lora, and a brass page-number mark in the outer corner - Implement Z-pattern reading flow per spread: masthead glyph anchors top-left, index mark top-right, body left column, signature mark bottom-right — animate eye-trace via subtle staggered fade-in along that path - Skeleton-loading: when a spread enters the viewport, its quoted blockquote first appears as a soft cream skeleton bar that pulses (2.4s) then dissolves into typeset text — like watching a letter develop in a Polaroid - Leather plates: SVG-defined cordovan texture (turbulence + soft inner shadow), with embossed roman numerals raised via subtle drop-shadow + highlight - Layered-depth: each spread renders with a 3-layer stack of off-cream "page" backgrounds, each offset by 4px and progressively deepening shadow - AVOID: pricing blocks, CTA buttons, social-proof bars, testimonial carousels, stat-counters. Replace any "stats" with quoted memoranda set as italic Playfair pull-quotes - Page furniture: a thin top rule, a section monogram stamp in upper-left, a brass page-number in lower-right — never a hamburger menu, never a sticky nav - The whole experience is a "chairman's letter" — long-form prose, paginated, signed off in italic Cormorant at the close ## Uniqueness Notes - Differentiator 1: corporate aesthetic here means 1976 annual report, not 2024 SaaS landing — a register the corpus's "corporate" 25% rarely commits to - Differentiator 2: eclectic-hybrid typography executed as three serifs cohabiting — opposite of the corpus's 81% mono dominance - Differentiator 3: leather-texture imagery + layered-depth motifs achieves a paginated print-spread feel virtually unseen in the corpus - Differentiator 4: Z-pattern layout used to honor print-page reading order, not as a marketing-funnel diagram - Differentiator 5: skeleton-loading reinterpreted as parchment-developing, a narrative reframe rather than a perf-loading affordance - Chosen seed: aesthetic: corporate, layout: z-pattern, typography: eclectic-hybrid, palette: warm, patterns: skeleton-loading, imagery: leather-texture, motifs: layered-depth, tone: nostalgic-retro - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography imagery (90%), mysterious-moody tone (70%), mono typography (81%)