# Design Language for tsundere.style ## Aesthetics and Tone tsundere.style is staged as a **botanical conservatory of frosted glass**, set inside an Edwardian-era greenhouse that has been retrofitted as a quiet style-bureau for a single, slow-spoken curator. The aesthetic is **glassmorphism** rendered in the unusual register of a sun-warmed plant atrium at four in the afternoon: panes that fog at their lower edges, brass mullions, the green hush of philodendrons pressing against the glass from the outside. The tone is **optimistic-bright** without being giddy — the page glows with the high, luminous green of late spring and the gold-cream of the lime-washed plinths inside the conservatory, but every panel is held in place by the calm gravity of a slab-serif headline cut from a sheet of veined Carrara marble. The contradiction is deliberate: the cheer of light through frosted glass, suspended on the seriousness of a museum colophon. The contradiction is also the domain's argument. "tsundere" means a surface coolness that protects an underlying warmth, and "style" here is the catalogue of clothing, posture, and small ornaments the curator has gathered — frosted on the outside, optimistic-bright through the seams. Nothing is sold; nothing is quantified; the whole site reads as a conservatory tour given on a quiet weekday, in which each successive pane reveals one more arranged tableau. The competing emotional axes that the page must hold simultaneously: 1. **Greenhouse warmth** — the bright, optimistic, sun-bleached green of spring foliage seen through frosted glass. 2. **Curatorial gravity** — the slow, weighted authority of a marble museum label, cut in a slab-serif and set in small caps. 3. **Tsundere refusal** — the page never asks, never persuades, never performs urgency; it lets the visitor wander between panes the way one wanders between palms. This is not a SaaS-glassmorphism page. The corpus already runs glassmorphism at 17%, and the trap to avoid is the corporate-frosted-card-on-purple-gradient cliché. Here, glassmorphism is reframed as **architectural glazing inside a botanical building** — frosted panes set in green-veined marble jambs, with hexagonal honeycomb skylights overhead. That reframing is what gives the page its emotional weather. ## Layout Motifs and Structure The page is a **vertical promenade through a single greenhouse** built from **hexagonal honeycomb cells** (corpus rate 0%). The structural grammar is rigorous: every meaningful piece of content sits inside a regular pointy-top hexagon, and the hexagons interlock into a true honeycomb lattice with no gutters and no rectangular safe zones. **Hex math (axial coordinates, pointy-top):** - Large cells: flat-to-flat width `clamp(220px, 19vw, 280px)`, height = width × `2/sqrt(3)`. - Medium cells: 0.62 × large. - Small cells (ornament/label only): 0.34 × large. - Column step `x = 0.866 × W`; row step `y = 0.75 × H`. Every odd column is offset by `0.5 × H` on the y-axis. - The lattice is laid out with CSS Grid `grid-template-columns: repeat(auto-fill, 0.866 × W)` and `clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%)` on each cell. **Scenes (top to bottom of the conservatory promenade):** 1. **Vestibule** — a single oversized hex with the slab-serif wordmark "tsundere.style" cut into a marble plate, glowing faintly green from behind the frosted glaze. 2. **The Mullion Wall** — a 7-cell honeycomb cluster establishing the curator's voice (one editorial paragraph per cell, each cell a frosted glass pane held by a brass-thin marble jamb). 3. **The Cabinet of Verbs** — a 13-cell cluster of small-and-medium hexes, each containing a single verb in slab-serif small caps ("press", "fold", "fasten", "wear softly", "leave open"). Hovering a cell triggers a **morph** transition (corpus 5%, used as the page's signature animation): the frosted plane warps via animated `clip-path` and `filter: blur()` interpolation into a different hex outline before settling back, suggesting condensation forming and clearing. 4. **The Marble Plinth** — a wide hex-row of medium cells, each containing a single styled vignette built from **abstract-shapes**: drape-curves, sleeve-arcs, hem-ellipses (no human figures, no clothing photography). 5. **The Skylight Lantern** — a single oversized hex, set against the Carrara-marble ceiling motif, holding the curator's slow, three-line closing remark. 6. **The Conservatory Ledger** — a final 5-cell honeycomb where the only "footer" content (last-updated date, three internal cross-links, a single hand-set initial) lives, each in its own pane. Vertical rhythm is set by the hex row-step, not by section padding. There are no `
`/`
`/`