# Design Language for simai.quest ## Aesthetics and Tone Neubrutalism re-staged as the syllabus of a 1972 botanical-glitch faculty seminar — bare concrete pillars supporting hand-lettered herbarium folios, then digitally scratched and torn. The page reads like a scholarly pamphlet stapled to a brutalist lecture-hall column: blunt slabs of color, hard rules, dense margins, hand-pressed botanical specimens caught mid-glitch. The tone is scholarly-intellectual — but the scholarship is feral, with hand-corrected footnotes and obsessive underlines. Inspiration: the Whole Earth Catalog's information density, mid-70s East-German lecture posters, Wolfgang Weingart's chaos-grids, and the digital-archaeological glitch art of Rosa Menkman. The visitor should feel they've been handed a seminar reader that has been read so many times the ink has shifted. ## Layout Motifs and Structure A timeline-vertical spine threads the entire page: a single thick concrete-grey rule runs from masthead to footer, with chapter markers ("MMXXIV.iii", "MMXXIV.iv") staggered along it. Sections branch off the spine asymmetrically — left, right, left — each one anchored to a chapter-marker bullet (a hard 14px terracotta square). Margins are dense and asymmetric: 18% on one side, 8% on the other. Section blocks are wrapped in raw 3px terracotta borders with a 6px hard shadow offset (no blur), in the canonical neubrutalist register. Within each section, hand-pressed botanical specimens overlap with hard-edged glitch slices. Underline-draw patterns activate on every keyword: when a section enters view, a thick terracotta underline draws beneath the chapter-keyword at 600ms. The result is a maximalist scholarly broadsheet that reads vertically as a syllabus, with footnotes hand-numbered along the spine. ## Typography and Palette - **Display:** "Oswald" (Google Fonts) — condensed, weight 700, for chapter markers and section titles - **Body:** "Source Serif Pro" (Google Fonts) — for dense scholarly body text, weight 400 at 16px line-height 1.55 - **Mono / footnote labels:** "JetBrains Mono" (Google Fonts) — for footnote numerals and citation IDs - **Hand-correction accent:** "Special Elite" (Google Fonts) — typewriter accent for hand-correction marginalia - **Numeric mark:** "Bebas Neue" (Google Fonts) — for the spine's roman/mixed-numeral chapter codes Palette — Terracotta Warm scholarly: - `#1C1916` Lecture Slate — primary background - `#F3EAD7` Manila Folder — main reading surface - `#B84A2E` Terracotta Stamp — primary accent for borders and underlines - `#3D2A1F` Foxed Ink — body text - `#7C5638` Bole Earth — secondary herbarium tones - `#D8C28B` Aged Tea — botanical wash and section-band tinting ## Imagery and Motifs - **Glitch-art** specimens: scanned 1972 herbarium press-sheets with horizontal pixel-shift glitches, color-channel splits, and 4–7 narrow horizontal scanlines. Each specimen is named in Latin small-caps beneath its plate - **Floral-botanical motifs**: hand-pressed leaf and fern silhouettes positioned along the spine like specimen tags — at section-changes, the silhouettes carry a hand-corrected footnote tail - Neubrutalist ornaments: hard rules, raw block borders, 6px non-blurred shadows, terracotta corner caps - Recurring marginalia: handwritten asterisks, pencil annotations, scratched-out errata in Special Elite — placed in the wide margin of every chapter - A repeating "specimen card" appears at each chapter close: a 320×220px botanical plate with glitch-shift, captioned with date and Latin binomial ## Prompts for Implementation - The timeline-vertical spine is rendered as a 4px terracotta column running the full document height — sticky position relative to the body - Each section block sits offset from the spine by 80–160px alternating left and right; connected via a 2px hairline rule terminating in a hard 14px terracotta square bullet - Underline-draw: every section keyword (one per chapter) is wrapped in ``; on intersection, a CSS pseudo-element draws a 6px terracotta underline left-to-right over 600ms - Glitch specimens: SVG `` channel shift + a CSS clip-path animation slicing 3 narrow horizontal bands at random offsets, only on hover; otherwise specimens sit static and pressed - Neubrutalist borders: hard 3px solid terracotta, 6px solid box-shadow with zero blur, offset (6px 6px) - AVOID: CTA buttons, pricing blocks, stat tickers, testimonial carousels. Replace any product positioning with annotated specimens captioned scholarly - Footnote system: every chapter has 3–7 numbered footnotes along the right-margin spine, set in JetBrains Mono at 11px with hand-correction strike-throughs in Special Elite - Underline-draw must be triggered on intersection-visible, never on hover for the chapter keyword — the keyword underline is the canonical "enter" animation per section ## Uniqueness Notes - Differentiator 1: neubrutalism + floral-botanical motifs is a head-on category collision — concrete-and-fern, an aesthetic absent from the corpus - Differentiator 2: timeline-vertical used as scholarly spine for chapter footnotes, not as a "company history" timeline - Differentiator 3: glitch-art applied to herbarium press-sheets — botanical-digital archaeology - Differentiator 4: terracotta-warm palette anchors the scholarly tone without slipping into autumn-pumpkin sentimental warmth - Differentiator 5: underline-draw used per-chapter as a single keyword device, not as a sweeping hero treatment - Chosen seed: aesthetic: neubrutalism, layout: timeline-vertical, typography: condensed, palette: terracotta-warm, patterns: underline-draw, imagery: glitch-art, motifs: floral-botanical, tone: scholarly-intellectual - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography (90%), warm palette in generic register, mysterious-moody (70%), mono as default body (81%)