# Design Language for tsundere.studio ## Aesthetics and Tone tsundere.studio is the portfolio site of a design studio that *refuses to flatter you* — and then, three scroll-lengths in, quietly admits it cares. The whole site is built around the **tsundere structural contradiction**: a hard, almost rude exterior shell (raw neubrutalism — black borders, brutal grids, shouting display type, error-red accents, a homepage that opens with the literal words **"Don't get the wrong idea."**) that progressively *cracks open* to reveal a soft, blush-warm, hand-set interior the further down you read. It is not a gimmick layered on top; it is the navigation logic, the color logic, and the type logic all at once. The mood: think a vending machine that insults you, then gives you an extra can. A brutalist concrete stairwell with a hand-knitted blanket folded at the bottom step. The exterior is **cold high-contrast neubrutalism** — uncompromising, slightly hostile, deliberately under-designed in the "I didn't try" way. The interior — earned only by scrolling, never by clicking a "warm mode" button — is **honeyed, pastel, slightly shy**: cream paper, dusty rose, soft drop-shadows replacing hard ones, the type loosening from screaming caps to a gentle humanist whisper. The site's personality literally softens as it trusts you. This is **edgy-rebellious tone resolving into warm-inviting tone** — a single emotional arc, not a palette swatch. No part of the site is neutral or "professional-calm." It is either prickly or fond; the journey is the point. ## Layout Motifs and Structure A **split-screen spine that physically tilts as you descend.** The page is divided into a LEFT column (the "armor" — black-bordered brutalist blocks, system-font labels, hard 0px-radius rectangles, hairline-thin 1px rules that read as *cheavy*) and a RIGHT column (the "honesty" — warm cream cards, soft 16px radii, blushy fills, looser leading). At the top of the page the split is **95% armor / 5% honesty** — the right column is a thin sliver. As you scroll, the divider **migrates rightward in discrete, ratchet-like steps** (95/5 → 70/30 → 50/50 → 30/70 → 8/92), so the armor literally shrinks panel by panel and the warm side takes over the viewport by the end. Each ratchet step is a "section." Sections, top to bottom: 1. **THE BRUSH-OFF** — full-bleed black, left-aligned, "Don't get the wrong idea." set in screaming condensed caps. The 5% right sliver shows a single cropped pixel of warm peach — a hint you're not even supposed to notice yet. 2. **WHAT THIS IS (RELUCTANTLY)** — the studio's actual description, but written grudgingly: short jabby sentences, em-dashes used like eye-rolls. Armor blocks dominate; the warm sliver widens to ~30% and shows the first soft card peeking from behind a brutalist block, as if hidden there. 3. **WORK (FINE, LOOK AT IT)** — the project showcase, presented as a 50/50 split: left side lists projects in cold mono labels (`PROJECT_01 / ROLE: EVERYTHING / YEAR: WHATEVER`), right side reveals each project's image on hover *with a soft blushy glow* the cold side never gets. 4. **THE QUIET PART** — split flips to 30/70 warm. The studio admits what it actually loves about the work. Type is now warm humanist, hard borders gone, replaced by feathered shadows. The leftover 30% armor strip is now just a thin black margin rule — vestigial, like the tsundere forgot to keep their guard up. 5. **OKAY, FINE — HELLO.** — 8/92 warm. Almost entirely the soft interior: cream field, a single warm hand-set line ("...you can come back if you want.") and a contact line presented plainly, no shouting. The 8% black strip on the left has shrunk to a single vertical hairline — the last sliver of armor, retained out of habit. No top nav bar in the conventional sense — instead a **left-edge "tsun/dere meter"**: a vertical gauge, all the way up the page, that fills from cold-grey (top) to blush (bottom) as you scroll, with a tiny blinking marker. It IS the progress bar AND the emotional state indicator. Clicking it scrolls. There is no hamburger, no mega-menu, no sticky CTA, no footer link soup — the contact info appears once, at the bottom, when the site has finally decided you're worth it. ## Typography and Palette **Type system — all Google Fonts:** - **Armor display face:** **Anton** — a single-weight, ultra-condensed, ultra-heavy grotesque. Used for the hostile headlines: "DON'T GET THE WRONG IDEA.", section numbers, the brush-off. Set in ALL CAPS, tight `letter-spacing: -0.01em`, line-height crushed to `0.92`. Anton is the visual equivalent of a slammed door. - **Armor label / mono face:** **Space Mono** — for the cold metadata, project labels, the tsun-meter readouts, timestamps, `ERROR:` style asides. Uppercase, `letter-spacing: 0.08em`. Reads like a terminal that's annoyed with you. - **Interior warm face:** **Fraunces** (variable, optical sizes, soft italics available) — the studio's true voice. Used for everything in the warm sections: the confessions, "...you can come back if you want.", the gentle body copy. Set at relaxed `line-height: 1.6`, generous size, occasional soft italic for the most vulnerable lines. Fraunces has a wobbly, almost embarrassed warmth — old-style serif curves with a wonky personality. It is the blush made into letterforms. - **Body utility (warm side, small text):** **Newsreader** for captions and small running text in the interior — a quiet, readable companion to Fraunces. The type *transforms* down the page: caps → mixed case, condensed → optical-normal, heavy → light-italic, tight → loose. Same content, softening voice. **Palette:** Armor (cold exterior): - `#0B0B0B` — near-black, the armor ground and border ink - `#F2F2EF` — bone white, armor panel fill (slightly grubby, not pure white) - `#E63329` — alarm red, the only accent on the cold side ("DON'T", error labels, the warning sliver) — aggressive, deliberately abrasive - `#9A9A93` — dead grey, the cold half of the tsun-meter and disabled-looking labels Interior (warm reveal): - `#FBEFE3` — warm cream, the interior ground - `#E9B7A8` — dusty rose / blush, soft fills and the warm half of the meter - `#C7836E` — terracotta, the warm accent (links, the "...come back" line, hover glows) - `#7A4A3A` — cocoa brown, warm body text ink (never pure black on the warm side — that would be too harsh) The two sets never blend into a gradient — they meet at **hard vertical seams** that walk rightward. The drama is the *collision* of cold and warm, not their fusion. ## Imagery and Motifs - **The crack motif:** thin jagged white "crack" lines (SVG paths) that appear across the big black armor blocks, more of them lower down the page — the facade visibly fissuring. By section 4, light (warm cream) leaks through the cracks. - **Hidden warmth peeking:** in the early sections, fragments of the soft interior (a rounded card corner, a blush swatch, a curl of Fraunces italic) literally poke out from *behind* brutalist blocks — like the tsundere accidentally let something show, then "didn't mean to." - **The tsun/dere meter:** left-edge vertical SVG gauge — a cold-grey-to-blush vertical bar with tick marks, a small `▮` marker, and tiny labels `[ TSUN ]` at top, `[ DERE ]` at bottom. It animates with scroll. - **Brutalist UI honesty:** raw `