# Design Language for simai.xyz ## Aesthetics and Tone Zen as practiced by a digital tea-master who keeps a glitched fern on the engawa and serves matcha in honey-blue porcelain. The page is silent, ethereal, slightly haunted by pixel-shifted petals. Inspiration: Sōtō-zen temple gardens after a light spring rain, Hiroshi Sugimoto's blurred seascapes, the soft cyan haze of Murakami's "Kafka on the Shore" first-edition jacket, and the way a digital glitch occasionally interrupts a contemplative gif of a rotating bonsai. Tone is warm-inviting — not austere zen, but generous, hospitable, like the welcoming bow of a small shokunin pour-over café. Calm without coldness. Glitches are gentle visitors, not violations. ## Layout Motifs and Structure Hexagonal-honeycomb composition treated as the lattice floor of a tea-house. Hexagons of 3 sizes (240px, 360px, 520px across the flat) tessellate in a soft, breathing arrangement — never a strict beehive grid; instead an organic clustering with generous gaps. Each hexagon holds one micro-narrative: a haiku, a botanical specimen, a soft glitch-art still, an ambient quote. The lattice is anchored top-left by a single large "tokonoma" hexagon (the alcove) holding the day's mood. Blur-focus patterns govern attention: only one hex is in sharp focus at a time; neighbors are softly blurred (filter: blur(2px), opacity 0.7), and on hover/scroll the focus shifts with a 480ms ease. The shifting focus produces a quiet contemplative scan-rhythm across the lattice. Botanical glitch-art specimens nest inside select hexes; small flowing petal silhouettes drift slowly across the gutters. ## Typography and Palette - **Display:** "Work Sans" (Google Fonts) — grotesque-neo, weight 200/500, for haiku display lines at 32–48px - **Body:** "Inter" (Google Fonts) — for short ambient body text, weight 300 at 16px line-height 1.75 - **Accent / ideogram complement:** "Noto Serif JP" (Google Fonts) — for occasional kanji and Japanese characters in marginal annotation - **Caption micro:** "Space Grotesk" (Google Fonts) — 11px caption for hex-coordinates and date stamps Palette — Ethereal-blue tea-house: - `#F4FBFF` Rice Paper — main page background - `#D8ECF6` Spring Mist — base of hex surfaces - `#7FB4D3` Honey Blue — primary accent, hex outlines, glitch tint - `#1F3A4D` Ink Bay — body text, focus-hex deep tone - `#A8C9D9` Pale Reflection — neighbor hex tint - `#EFE4C8` Aged Tatami — single warm accent (tokonoma alcove only) ## Imagery and Motifs - **Glitch-art** specimens: gently glitched botanical photographs — a cherry blossom branch with a 1px horizontal channel-shift, a fern frond with a soft scanline drift. Glitches are always polite: 1–2px max offsets, no harsh tearing - **Floral-botanical motifs**: silhouetted petal and leaf forms drifting in the gutter between hexes — sakura, plum blossom, fern, bamboo - Zen ornaments: subtle ensō circles in honey-blue, single-line raked-sand textures along the base of focus-hexes - Recurring "tea-cup" mark: a small ceramic-cup silhouette appears in the tokonoma hex and three subordinate hexes, rotating slowly via CSS transform - Each hex displays a tiny coordinate label ("HEX 03·07") in mono — a quiet acknowledgement of the lattice grid ## Prompts for Implementation - Render hexagons via CSS clip-path `polygon` or SVG `` with 6 vertices; arrange in an offset honeycomb using nth-child column offsets. Mix three hex-sizes for organic rhythm - Blur-focus pattern: by default ALL hexes have `filter: blur(2px) opacity(0.7)`; on hover or `:focus-within`, a hex transitions to `blur(0) opacity(1)` with a 480ms cubic-bezier(.2,.7,.2,1). On scroll, IntersectionObserver promotes the centered hex automatically - Glitch-art images: implement using SVG `feColorMatrix` for cyan channel + `feOffset` 1px horizontal; very subtle — never aggressive - Floral-botanical petals: 6–9 small SVG petal silhouettes drift across the gutter on `animateMotion` paths at 18–26s durations, with petal opacity 0.4 - AVOID: pricing, CTA buttons, stat counters, comparison tables. Replace all "info architecture" with haiku-length micro-passages - The tokonoma hex (top-left, 520px) holds the day's mood phrase in Work Sans 200 weight, italic, with a single warm Aged Tatami background patch - Hex coordinates ("HEX 03·07") appear as 10px Space Grotesk in the lower-right of each hex, in 30% opacity Honey Blue - The page should feel like a tea garden, not a dashboard: never more than 12 hexes in viewport at once, generous breathing ## Uniqueness Notes - Differentiator 1: zen + glitch-art is a paradox executed with restraint — most zen designs eschew glitch entirely, and most glitch art rejects calm - Differentiator 2: hexagonal-honeycomb realized as tea-house lattice rather than tech-cyber grid - Differentiator 3: blur-focus patterns govern reading flow, replacing parallax (94%) with a contemplative focus-pull - Differentiator 4: ethereal-blue palette anchored with a single warm tatami accent — disciplined ascetic restraint - Differentiator 5: warm-inviting tone breaks the corpus's mysterious-moody (70%) dominance through generosity rather than austerity - Chosen seed: aesthetic: zen, layout: hexagonal-honeycomb, typography: grotesque-neo, palette: ethereal-blue, patterns: blur-focus, imagery: glitch-art, motifs: floral-botanical, tone: warm-inviting - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography (90%), warm palette (93%), mysterious-moody (70%), mono typography (81%)