# Design Language for tsundere.tech

## Aesthetics and Tone

tsundere.tech is **The Conservatory of Improper Engines** — a maximalist art-deco glasshouse where industrial prototypes are nursed under a lattice of brass ribs and rippling jewel-toned light, like a 1929 World's Fair pavilion that was abandoned by its mechanics and quietly colonized by tropical foliage. The domain belongs to a fictional engineering atelier whose mascot is a sulky little turbine — a "tech-tsundere" that insists it doesn't *want* to compute for you, but its blade fans flutter faster the closer you get. The aesthetic refuses every dominant trope of the modern tech-page: there are no neon-on-black hacker grids, no minimalist whitespace, no chrome gradients. Instead the surface is **engraved, fluted, foliated** — every panel of the page reads as a brass-edged glass cabinet inside which an organic blob of magnetorheological fluid pulses to the rhythm of an unseen machine.

The mood is **energetic but composed**, the way a Tesla coil is energetic — an enormous quantity of latent voltage held inside disciplined art-deco geometry. The page should feel *kinetic at rest*: ripples cross the jewel-tone backdrop even when the user isn't scrolling, leaves quietly sway, blobs breathe. Visiting the site should feel like stepping into a verdant turbine hall where the machinery has been replaced by botany and the botany has been replaced by data, and somewhere a deco-condensed marquee announces the next demonstration. The tsundere voice surfaces in microcopy: the page header reads "I built this for nobody in particular, certainly not you," and the section headings are stamped with little sniffing turbine glyphs.

This is **not** the tech aesthetic of GitHub README pages. It is the tech aesthetic of a 1928 patent illustration colored by a peacock.

## Layout Motifs and Structure

**Primary layout: a broken-grid art-deco vitrine.** The page is composed of seven asymmetric "vitrine" panels arranged on a deliberately fractured 12-column CSS grid. Adjacent vitrines never share a top edge, never share a bottom edge, and never have the same width — each one breaks the implied row. Vitrine widths cycle through `span 7`, `span 5`, `span 9`, `span 4`, `span 8`, `span 6`, `span 11`, and they offset vertically by `transform: translateY()` values of `0`, `4.2vh`, `-2.8vh`, `7.1vh`, `-5.5vh`, `3.3vh`, `-1.9vh`. The result is a tilted-cabinet layout — the user's eye descends in a zig-zag rather than a straight column, exactly the way a stroller's gaze drifts across a 1929 exposition gallery.

**Each vitrine is a deco proscenium.** Every panel is framed by a hand-coded deco border built from CSS `clip-path` polygons: a stepped-pyramid header crown at the top, fluted vertical ribs on left and right (`background: repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 6px)`), and a fan-burst footer in inline SVG. No vitrine is rectangular — the corners are notched, chamfered, or fluted off.

**Inside each vitrine sits an organic blob.** Within the strict deco frame, an SVG `<path>` morphs continuously through three keyframe states using `<animate>` on the `d` attribute (durations 11–17s, jewel-tone fills). The blob is the soft heart inside the disciplined frame — and **the blob is what holds the actual content.** Headlines and paragraphs sit *on top of* the blob with `mix-blend-mode: difference` so the text seems printed onto a slowly-shifting puddle of amethyst.

**Ripple ground.** The body's `<main>` background is a fixed-position SVG covering 100vw × 100vh that paints concentric ripples in `--peridot` and `--sapphire` using a single `<radialGradient>` whose stops shift with `<animate>` over a 23-second cycle. Vitrines float over this ripple ground; the ripples bleed visibly between them through chamfered corners.

**No header bar, no footer bar, no nav.** The site title is engraved into the top-left vitrine as a deco cartouche; "navigation" is simply the act of scrolling through the seven cabinets. There is no fixed UI furniture — the page is a continuous diorama.

**Leaf garlands as dividers.** Between vitrines 3-4 and 5-6, hand-drawn SVG leaf garlands stretch edge-to-edge — fluted bay-laurel arrangements rendered in `--brass` with `--peridot` veins. The garlands respond to scroll position with a `transform: rotate()` of ±3°, as if disturbed by the user's passage.

## Typography and Palette

**Display — Vitrine titles:** **"Limelight"** (Google Fonts) at `clamp(2.6rem, 7vw, 6.4rem)`, weight 400, `letter-spacing: 0.06em`, `text-transform: uppercase`. A genuine 1920s art-deco display face with elongated stems and high-waisted geometry. Used only for the seven vitrine titles. Color: `--ivory` with a 1px `text-stroke` of `--brass` to achieve the engraved-on-glass effect.

**Sub-display — Cartouche numerals & epigraphs:** **"Poiret One"** (Google Fonts), weight 400, `letter-spacing: 0.18em`, used for the Roman numeral cartouches (I through VII) at `clamp(1.4rem, 2.6vw, 2.4rem)` and for pulled-quote attributions in italic mood. Thin geometric deco face — pairs with Limelight as a tonal counterpoint.

**Body:** **"Cormorant Garamond"** (Google Fonts), weight 400 for prose, weight 600 for emphasis, set at `1.05rem / 1.7`. The transitional serif gives the body text a salon-publication feel — formal but warm — and stays readable even when overlaid via `mix-blend-mode: difference` against the morphing blob beneath. Italics weight 400 used liberally for asides and tsundere parentheticals.

**Micro — Engraved labels & tooltips:** **"Cinzel"** (Google Fonts), weight 600, set at `0.72rem` with `letter-spacing: 0.32em` and `text-transform: uppercase`. Used for the small brass plaques pinned to each vitrine ("SPECIMEN III · MAGNETORHEOLOGICAL"). Cinzel is drawn from Roman inscription capitals — surprising and correct in a deco context because it shares deco's love of strict capital geometry.

**Palette (jewel-tones, eight stops):**

- `--obsidian: #0E0712` — page background, the vault between the vitrines
- `--midnight-velvet: #1A1230` — vitrine inner background, behind the blobs
- `--amethyst: #5B2A82` — primary blob fill, also accent rule color
- `--sapphire: #1C3A6B` — secondary blob fill, ripple inner ring
- `--emerald: #1D5A3F` — tertiary blob fill, leaf-vein color
- `--peridot: #87B23A` — ripple highlight, leaf body, aliveness color
- `--ruby-glow: #B0234A` — single-use accent: the turbine mascot's blush, the "active" cartouche
- `--brass: #C9A24B` — deco frame, fluting, garland armature
- `--ivory: #F2E7CE` — typography on dark ground, the "engraved-glass" body

The palette runs cool-jewel through the spectrum (purple → blue → green → green-yellow) with two warm accents (`--brass` and `--ruby-glow`). No pure white, no chrome, no neon. Every color is sampled from late-Edwardian / early-deco enameled jewelry boxes, not from "tech" templates.

## Imagery and Motifs

**Seven custom SVG "specimens"** — one per vitrine — each a hand-coded inline SVG composition occupying the heart of its blob. The specimens are absurd hybrids that justify the domain's "tech" label without ever showing a circuit board:

1. **Vitrine I — The Sulking Turbine.** A small art-deco turbine fan rendered as eight fluted blades around a brass hub, with a single peridot leaf growing improbably between two of the blades. The blades rotate at 0.18 rad/s. The mascot.
2. **Vitrine II — The Pollen Capacitor.** Three glass bell-jars containing animated organic blobs of `--amethyst` "pollen-fluid"; each jar has a brass plaque with "Cap. III mF" in Cinzel.
3. **Vitrine III — The Ripple Calculator.** A deco abacus whose beads are concentric ripples — the beads are `<circle>` elements with `r` animated 0→8→0 to simulate calculation pulses.
4. **Vitrine IV — The Fern Antenna.** A fluted brass radio antenna terminating in a fully-foliated fern frond rendered with ~120 `<path>` leaves; the frond sways ±2° at 7-second cycle.
5. **Vitrine V — The Jewel Battery.** A cross-section diagram of a battery whose cells are emerald, sapphire, amethyst, ruby — labeled in Cinzel small-caps as "Cell I — Cell II — Cell III — Cell IV."
6. **Vitrine VI — The Botanical Punchcard.** A 12×8 art-deco grid of holes through which leaf-organic vines have grown, recoding the data in chlorophyll.
7. **Vitrine VII — The Coda Engine.** A central organic blob splits into seven smaller blobs that each float toward the corresponding vitrine numeral above; this is the only cross-vitrine animation.

**Persistent ambient motifs:**

- **Ripple ground:** the background `<svg>` paints six concentric ripples that pulse outward continuously, anchored at `cx: 50%, cy: 35%` — the visual "heartbeat" of the page.
- **Leaf garlands:** two fluted bay-laurel garlands divide the seven vitrines into three movements (I-II-III, IV-V, VI-VII). Each garland is ~30 inline SVG leaf paths with `--peridot` body and `--brass` outline.
- **Brass fluting:** every vitrine's vertical edges carry the same `repeating-linear-gradient` fluted texture — the unifying material across the broken grid.
- **Deco fan-bursts** at vitrine corners: small inline SVG sun-fans with seven rays (matching the seven vitrines), in `--brass`.
- **No raster imagery, no photography, no icons-from-a-set, no Unicode emoji.** Every glyph and every illustration is hand-coded SVG or a typeface choice. The only bitmap-like effect is the ripple, which is itself an animated SVG.

## Prompts for Implementation

Build `index.html` as a **single static document** with embedded `<style>` and inline `<svg>` — no build step, no framework, no external JS. The seven vitrines are seven sibling `<section>` elements inside a single `<main class="conservatory">` whose grid is declared once: `display: grid; grid-template-columns: repeat(12, 1fr); gap: 0;` and whose children carry `grid-column: span N` plus `transform: translateY(...)` to break the implied row alignment.

Render the **ripple ground** as the very first child of `<body>`: a fixed-position SVG (`position: fixed; inset: 0; z-index: 0; pointer-events: none;`) containing six concentric `<circle>` elements with a shared `<animate>` on `r` from `0` to `140vmax` over 23s with `repeatCount: indefinite` and staggered `begin` offsets. Use `<radialGradient>` with stops at `--peridot` and `--sapphire` for the fill. The user always sees ripples breathing under everything.

For **organic blobs**, give each vitrine an inline `<svg viewBox="0 0 400 400">` with a single `<path>` whose `d` attribute is animated via `<animate dur="13s" repeatCount="indefinite" values="d1; d2; d3; d1">`. Hand-author three blob silhouettes (~12 cubic-Bézier control points each) so the morph stays organic rather than mechanical. Fill with `var(--amethyst)` at `opacity: 0.68`. Place vitrine text inside a sibling `<div>` with `mix-blend-mode: difference` so the prose reads as inverted-color ink riding the moving blob.

For the **deco frames**, build each vitrine border from four CSS pseudo-elements (`::before` and `::after` on the section, plus `::before` and `::after` on an inner wrapper). Top: a stepped-pyramid `clip-path: polygon(...)` in `--brass`. Sides: `repeating-linear-gradient(90deg, var(--brass) 0 1px, transparent 1px 5px)`. Bottom: an inline `<svg>` fan-burst placed as the last child of the section.

**Animation rule:** every motion should be slow and continuous, never on hover, never on click. The page should feel *alive at rest* — the user does not have to interact for the conservatory to breathe. Use durations of 7–23 seconds for all repeating animations. Never use `transition: 0.3s` snaps; this is not that kind of website.

**Storytelling structure:** the seven vitrines are a narrative descent through "The Conservatory's Inventory" — each numeral cartouche corresponds to a specimen plaque written in tsundere voice. Vitrine I introduces the Sulking Turbine ("It's not as if I built this engine *for* you. The blades just happen to rotate."). Vitrine VII closes with a coda paragraph in italic Cormorant: "Mind the leaves on your way out. They are not — that is, they are not glad you came." The middle five vitrines each pair their custom SVG specimen with a one-paragraph deco-engineering pseudo-essay (200-280 words each) about magnetorheological pollen, fern-antennae signal botany, etc.

**Bias toward full-screen narrative:** the seven vitrines together should occupy ~6× viewport height; the user's primary action is *vertical scrolling through a continuous tilted gallery*, not clicking through pages. There is no CTA, no contact form, no pricing, no stat-grid, no testimonial block, no "features" enumeration. The site is an experience, not a funnel.

**Forbidden:** dark-mode toggle, hamburger menu, sticky header, hero with centered CTA, three-column feature grid, terminal-prompt motifs, neon-on-black palette, monospace body type, glassmorphism cards, pixel-icon sets. Any of these would betray the conservatory.

## Uniqueness Notes

1. **Art-deco vitrine framing wrapped around organic-blob bodies.** Across the corpus, art-deco-display sits at 1% and organic-blobs at 1% — combining the two is structurally rare, and using deco geometry as the *frame* while organic SVG morphs sit *inside* it (rather than the more conventional inverse) is the central inversion of this design. The discipline holds the chaos; the chaos breathes inside the discipline.

2. **Mix-blend-mode prose on living blobs.** Body text is rendered with `mix-blend-mode: difference` directly over animated SVG blobs, so the typography itself becomes a kinetic surface. This is unlike any plain-text-on-card layout in the corpus and unlike the dominant photography-with-overlay pattern (~83% of corpus); zero raster imagery is used here.

3. **Jewel-tones palette at literal 0% adoption** in the corpus frequency analysis — every other tsundere sibling site reaches for burgundy, neon, sepia, or pastel; none commit to a full Edwardian-jewel palette of amethyst-sapphire-emerald-peridot-ruby-brass. This site claims that empty quadrant.

4. **Broken-grid implemented via per-vitrine `translateY` offsets** rather than the more common 50/50 split or magazine asymmetry. The page descends in a literal zig-zag — the user's eye traces a tilted path through the cabinets — which is mechanically distinct from broken-grid implementations elsewhere (broken-grid sits at 10% in the corpus but typically as static asymmetry, not as deliberate vertical zig-zag).

5. **Ripple background as an always-on heartbeat**, not a hover effect. Ripple at 2% in the corpus is usually triggered by interaction; here the ripples are continuous (23s cycle) and exist below all content as an ambient living surface. The page is never still.

6. **Tsundere-voice microcopy applied to a tech domain** — engineering pseudo-essays written in the affectedly-defensive register of an anime trope, paired with deco-illustrated absurd-machine specimens. Genuinely no other tech-themed domain in the corpus does this; the contrast between the disciplined deco frames and the sulking-turbine voice is the conceptual core.

7. **Leaf-organic motif at 0% corpus adoption** — bay-laurel garlands as inline-SVG dividers between deco vitrines, executing the brief literally and visibly while staying coherent with the conservatory metaphor.

8. **Avoided patterns from frequency analysis:** centered-hero (66% of corpus), card-grid (73%), feature-three-column, sticky-nav, parallax-scroll (15%), photography-with-overlay (83%), neon-on-black hacker tech tropes, sans-grotesk display, gradient-mesh hero. None of these appear in the design.

**Chosen seed:** `aesthetic: maximalist, layout: broken-grid, typography: art-deco-display, palette: jewel-tones, patterns: ripple, imagery: organic-blobs, motifs: leaf-organic, tone: energetic`
<!-- DESIGN STAMP
  timestamp: 2026-05-10T10:29:53
  domain: tsundere.tech
  seed: seed:
  aesthetic: tsundere.tech is **The Conservatory of Improper Engines** — a maximalist art-dec...
  content_hash: 8d3e4eee626a
-->