# Design Language for simidiots.com ## Aesthetics and Tone `simidiots.com` is a site that holds tension between contradiction: **sim** (simulation, the virtual, the approximation) and **idiots** (the irreverent, the human, the beautifully imprecise). The aesthetic is **zen-playful** — not the austere silence of a Kyoto rock garden, but the particular quiet that arrives *after* laughter, when you've said something absurd and found it to be true. Think: a meditation app that knows it's ridiculous. A haiku written in crayon. A moss garden with a neon sign. The overall mood is **suspended lightness**: generous negative space that breathes, rounded forms that don't take themselves seriously, jewel-toned accents that glow against near-white fields like stained glass in soft morning light. The site should feel like an invitation to exhale — and then grin. Tone is **minimal but warm**: few words, chosen carefully. Nothing is explained that can be felt. No urgency, no hustle, no conversion pressure. The page is a place to *arrive*, not to be sold to. Visual inspiration: Nobuyoshi Araki's quieter photographs. A ceramic bowl with an intentional crack. The color of a Brazilian tourmaline held up to window light. Hiroshi Sugimoto's long exposures. A rubber stamp, slightly off-center. ## Layout Motifs and Structure The layout is **hero-dominant with radical restraint**: one full-viewport opening panel that holds everything — the domain name, a single generative art canvas, and nothing else. Below it, sparse vertical columns of content arranged with **ma** (間, the Japanese concept of negative space as active presence, not absence). **Macro structure:** 1. **Hero panel (100vh).** The generative art canvas occupies 70% of the viewport width, positioned center-left. The domain name `simidiots` is typeset in a single playful-rounded typeface at `clamp(3rem, 9vw, 8rem)`, positioned lower-right, slightly overlapping the canvas edge. The `.com` suffix appears at 40% opacity, smaller, as if it's a footnote to a more important word. No navigation bar visible on load — it dissolves in from the top after 800ms. 2. **Interstitial space (60vh of pure negative space).** Between the hero and the first content section, a full-width strip of near-white. Centered within it: a single organic leaf-form SVG, ~120px wide, rendered in `#5C3D8F` (deep amethyst) at 15% opacity. It breathes via a slow CSS scale pulse (3.8s ease-in-out, 1.0→1.04→1.0). This is the page's heartbeat. 3. **Content columns (auto height).** Two asymmetric columns: 38% left (text), 62% right (generative art variations or large whitespace). Column gap is `clamp(2rem, 6vw, 5rem)`. Columns never feel like a grid — they float. 4. **Closing panel (100vh).** Mirrors the hero but inverted: dark background (`#1A0A2E`), the generative art canvas now smaller (40% width), the domain name larger and centered, glowing softly. **Grid logic:** - Base unit: `8px` - Max content width: `1080px`, centered - Side margins: `clamp(1.5rem, 8vw, 8rem)` - No visible grid lines anywhere. Grid is felt, not seen. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & wordmark — `Nunito`** (variable, wght 200–900). The playful-rounded seed executed with precision. Nunito's gently curved terminals and generous x-height make `simidiots` feel friendly-absurd rather than childish. Wordmark set at variable weight 800. Body titles at weight 600. All tracking at -0.01em for display sizes, 0 for body. - **Body & captions — `DM Sans`** (variable, wght 100–700). Clean, optically balanced, humanist without being corporate. Body text at 16px / 1.65 line-height, weight 400. Captions and metadata at 12px, weight 300, tracking 0.04em. - **Accent / label — `Space Mono`** (400 only). Used sparingly for single words or short phrases that need to feel precise or self-aware. URL paths, version numbers, small technical aside. **Palette:** | Role | Color | Hex | |------|-------|-----| | Deep amethyst (primary jewel) | Deep violet-purple | `#5C3D8F` | | Teal jade (secondary jewel) | Rich teal | `#1D7A72` | | Topaz (accent jewel) | Warm amber-gold | `#C8860A` | | Rose quartz (soft highlight) | Dusty mauve-pink | `#C4698F` | | Canvas (background) | Warm near-white | `#F7F5F2` | | Ink (text) | Deep warm black | `#1C1219` | | Closing dark (hero reverse) | Deep indigo-black | `#1A0A2E` | | Mist (overlay / leaf motif) | Semi-transparent white | `rgba(247,245,242,0.85)` | **Color logic:** jewel tones appear as accents only — never background fills on large surfaces. The canvas background (`#F7F5F2`) and ink (`#1C1219`) carry 90% of the page. Jewel tones arrive as: generative art palette, leaf SVG fills, hover state borders, and a single horizontal rule at `#1D7A72`. ## Imagery and Motifs **Generative art canvas (primary imagery):** The hero canvas is a `` element rendering a slow-growth Lindenmayer system (L-system) in real time — organic branching forms that grow from a seed point at canvas center-bottom, spreading upward and outward over ~6 seconds on page load. Branches are drawn in thin strokes (`lineWidth: 0.8–1.2px`) in the jewel palette: `#5C3D8F` for primary branches, `#1D7A72` for secondary, `#C8860A` for tertiary tips. Terminal leaf nodes are tiny filled circles (`r: 2–3px`) at 70% opacity. The system runs once, then settles. It is not interactive — the growth is the experience. **Blur-focus pattern:** On scroll past 20vh, the hero canvas applies a progressive `filter: blur(0px→8px)` transition (600ms ease-out) as the interstitial space enters view. The canvas "retreats" into softness as the page content arrives. The reverse happens if the user scrolls back to top. **Leaf-organic motif:** Three leaf forms appear across the page: 1. The interstitial breathing leaf (amethyst, large, centered — described above) 2. A cluster of three smaller leaves in the right margin of the first content column, at 8% opacity in `#1D7A72`, scale 60px, no animation 3. In the closing panel, a single leaf SVG as a page-end mark — white, 32px, centered below the domain name All leaf SVGs share the same path: a single Bézier curve leaf with one rib line — simple, botanical, hand-drawn in feel. **No photography. No stock icons. No library icons.** The only imagery is the generative L-system canvas and SVG leaf forms drawn in code. **Decorative elements:** - A single horizontal rule between hero and interstitial: `1px solid #1D7A72`, width `40px`, centered, `opacity: 0.6` - Subtle `grain-overlay` on the entire page body: a 120×120 SVG noise tile at 3% opacity, `background-blend-mode: overlay` — gives the near-white canvas a slight paper texture without visible grain ## Prompts for Implementation Build `simidiots.com` as a **single-page lyric document** — not a landing page, not a product page, not an explanation. The page is a *thing*, not a pitch for a thing. **Commitment 1 — The L-system canvas is the protagonist.** Before writing any HTML layout, implement the canvas. The L-system should use: - Axiom: `F` - Production rules: `F → FF+[+F-F-F]-[-F+F+F]` (standard plant system, angle ~25°) - Iteration depth: 4 (enough for visible branching without overcrowding) - Stroke colors pulled from CSS custom properties so they respond to `prefers-color-scheme` - Canvas resolution: `devicePixelRatio`-aware, 2x on retina - Growth animation: draw N segments per `requestAnimationFrame`, where N increases over time (starts slow, accelerates, then decelerates near completion — an ease-in-out curve applied to the rendering speed, not just opacity) **Commitment 2 — Blur-focus is a narrative gesture, not a scroll trick.** The blur-to-unfocus on the hero canvas must feel intentional. Use `IntersectionObserver` watching the interstitial leaf panel — when it crosses 30% visibility, begin the canvas blur transition. Do not use `scroll` event listeners. The transition must use CSS `transition: filter 600ms cubic-bezier(0.4, 0, 0.2, 1)`. The blur communicates: *what you came for has become background. Now read.* **Commitment 3 — Typography is the only sound.** Every word on this page must be chosen as if it costs something. Implementation note: do not add placeholder text. If content is not written, leave the space empty — silence is content here. The page's silence is intentional. **Animation budget:** - L-system growth: ~6s on load, runs once - Leaf pulse: `animation: leafBreathe 3.8s ease-in-out infinite` (scale 1.0→1.04→1.0, `transform-origin: center`) - Nav fade-in: `opacity: 0→1` over 400ms, delay 800ms - Canvas blur: 600ms on scroll trigger - Zero other animations. No hover transitions except: `border-bottom: 1px solid #5C3D8F` appearing on text links at 200ms. **Avoid:** - Any CTA button (no "Sign Up", no "Get Started", no "Learn More") - Pricing tables or feature comparison grids - Testimonial carousels - Cookie banners (if needed, use a 1-line inline notice) - Any JavaScript framework — vanilla JS only, no React/Vue/etc. - Auto-playing sound or video **Dark mode (`prefers-color-scheme: dark`):** - Background: `#1A0A2E` - Text: `#F0EBF5` - Jewel tones: increase lightness by 15% (`#7A56B8`, `#2B9E94`, `#E09B18`, `#D67EA3`) - Canvas leaf pulse: switch to `#F0EBF5` at 10% opacity ## Uniqueness Notes **Chosen seed:** aesthetic: zen | layout: hero-dominant | typography: playful-rounded | palette: jewel-tones | patterns: blur-focus | imagery: generative-art | motifs: leaf-organic | tone: minimal **Differentiators from the 240+ design corpus (frequency analysis applied):** 1. **L-system generative art as the primary visual protagonist, not background decoration.** The frequency report shows `generative-art` at 3% usage, but those uses are typically background or decorative. Here, the L-system growth animation is the *event* the page is built around — the entire layout is structured to frame it. The growth-to-blur narrative (canvas blooms → canvas softens → content arrives) is a sequencing pattern not found elsewhere in the corpus. 2. **Jewel tones at 2% frequency, used as accent-only on a warm near-white ground.** The corpus typically pairs jewel tones with dark backgrounds (creating a night-sky-with-gems look). Here, jewel tones appear only as thin accents — branch lines, leaf fills, single hairline rules — against `#F7F5F2`. The effect is stained glass in daylight, not neon in darkness. This inversion is the palette's distinctive character. 3. **blur-focus (4% frequency) implemented as narrative pacing rather than hover effect.** In the corpus, blur-focus is almost always a hover state (blur the background, focus the hovered card). Here, blur-focus is a scroll-driven story beat: the canvas blurs as content arrives, making defocus a *transition between chapters*, not a UI affordance. The IntersectionObserver implementation (not scroll listener) ensures the transition is tied to content visibility, not scroll position — a semantic distinction that makes the pacing feel intentional. 4. **The contradiction in the domain name is the entire brief.** `simidiots` is treated as a kōan — a riddle that points at something true. The design does not resolve the contradiction (between sim and idiots, between zen and playful) but *holds* it. The empty interstitial breathing leaf is the site's answer to what `simidiots` means: something alive, growing, slightly absurd, quietly beautiful. **Avoided patterns (from frequency analysis):** - `playful` (15% — most overused aesthetic): avoided as dominant mode; zen is primary, playful is secondary resonance - `eclectic-hybrid` typography (5%): avoided; type system is disciplined, not mixed - `expressive-variable` (5%): avoided; variable fonts used subtly for weight variation, not as spectacle - `organic-blobs` (5%): avoided; leaf-organic motif used instead, which is botanical-precise rather than blob-amorphous