# Design Language for tsundere.day ## Aesthetics and Tone **tsundere.day** is a **daily operator's dispatch** broadcast from a single, slightly elevated tsundere persona who is nominally running a downtown citywatch console — and who pretends she isn't doing it for *you*. The aesthetic frame is **retro-futuristic civic infrastructure as imagined in 1979 for the year 2014**: chunky bezel-framed signage, hand-routed SVG conduit lines drawn live across the page, a roof-edge city horizon visible through frosted glass cards, and a left-rail sidebar that reads like the side panel of a Brutalist transit shelter — flat, confident, and unapologetic. The palette is locked **two-color** (Civic Gold on Carbon Slate, with a single Cream as page surface), and that hard duotone is the discipline that lets the page shout in scale without becoming visually noisy. The mood is **bold-confident with the eyebrow slightly raised** — every label is set in heavy Frutiger-clean type, every numeric headline is the size of a poster, and every "softer" element is delivered through a card surface that glassmorphs the city horizon behind it rather than through any concession in tone. The page does not greet you. It **logs your arrival** at the top of today's dispatch ("entry 04 — you, 14:22, fine") and proceeds as if it had been running all morning without you. This is the only kind of warmth the design will allow: the persona is doing her job thoroughly enough that *being one of the entries* is the affection. The retro-futurism is anchored not in chrome or neon, but in the **typographic and structural confidence of Cold-War-era civic graphic design** (Frutiger's own Paris RER signage, 1970s NASA Worm-era operations panels, Vignelli's NYC subway map) — re-imagined as a daily personal channel. There is exactly **one accent shape** repeated everywhere: the **drawn conduit-line**, an SVG path that animates `stroke-dasharray` from 0 to full length each time a card enters the viewport, simulating a service crew running fresh wire to that card. By the time the page has settled, the conduit network is complete and the city is "wired up for today." The animation never replays unless the user reloads — today's dispatch is finished. ## Layout Motifs and Structure **Persistent left sidebar (the "Operator Rail")** — `width: clamp(280px, 22vw, 360px)`, `position: sticky; top: 0; height: 100vh`, flush against the left viewport edge. The rail is the entire navigational logic of the site: it holds (1) the **wordmark slab** at the top (`tsundere.day` set across two lines, weight 900, lined-out at line-height 0.88, with a 4px Civic-Gold underscore beneath the period only — a deliberate kerning quirk); (2) the **today-block** — the current date in `DD.MM.YYYY` format at 36px weight 800, the day-of-week in a 12px monospaced caps line above it ("THU / WK 19 / DAY 129"), and a one-line **mood declaration** beneath that auto-rotates from a pool of nine ("crisp, fine.", "rain, deal with it.", "seven hours of meetings, none mine.", "the city is loud today.", "i didn't sleep well — don't ask.", "good light. that's all.", "not in the mood. read anyway.", "warm enough to walk. you should walk.", "i made coffee. it's gone."); (3) a **vertical entry-list** of every dispatch card on the page, each rendered as a 1-line label like `04 — entry — 14:22` in monospace, hover-underlined, scroll-anchored to its card; (4) at the bottom, a **status block** (`broadcasting · day 129 · 14:22 KST`) with a slow blink on the dot every 1.6s. The rail does **not** scroll with the page; it stays fixed as the right column streams. On mobile (≤768px) the rail collapses to a 56px-tall horizontal top-bar showing only the wordmark, the date, and a hamburger that drops the entry-list as a single-column dropdown. **Right column — the "Dispatch Stream"** — `margin-left: clamp(280px, 22vw, 360px)`, `padding: clamp(40px, 5vw, 80px)`, `max-width: 1080px`, single column. Cards stack vertically at `gap: clamp(48px, 6vw, 96px)` — generous, never tight, because each card is a "post" and the page reads like a **broadcast log, not a feed**. The first item in the stream is the **Marquee Card**, a full-width glassmorphic panel that overlaps the rail's right edge by exactly 24px (deliberate violation of the rail line — the day's lead story spills out of its lane). Subsequent cards are: (a) **Numeric Banner** — a single oversized number (today's "city pulse" 1-100, set at `clamp(8rem, 18vw, 16rem)` weight 900); (b) **Three-Column Almanac** — sunrise / golden hour / sunset, glassmorphic cards in a 3-up grid; (c) **Long-form Dispatch** — a written paragraph card with the conduit-line drawn down its left margin; (d) **City-Horizon Card** — the only "image" element, an SVG-drawn skyline; (e) **Sign-Off Card** — closing line, one button-shaped link. Each card is a glass surface (see Imagery) and each is **wired to the next** by a continuous `` `path` that runs from the bottom-right of one card to the top-left of the next, drawn live as the card enters the viewport. **Conduit-Line Network (page-scale SVG):** A single page-spanning `` element absolutely positioned over the dispatch stream (`pointer-events: none`, `z-index: 1`, behind cards which sit at `z-index: 2`). Inside it, **one `` per card-pair** is hand-routed with right-angle bends only (no curves; this is civic engineering, not calligraphy), 2px stroke, Civic Gold, `stroke-linecap: square`. The path enters from the rail's right edge, jogs around the card, and resumes toward the next. Each path's `stroke-dasharray` is set to `pathLength`, `stroke-dashoffset` starts at `pathLength` and animates to `0` over 1200ms with `ease-out` once its target card crosses 60% of the viewport. The cumulative effect: as the user scrolls, **the city's daily wiring is laid down in real time**, and once you reach the bottom, the network is complete. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display & body — Manrope** (weights 400, 600, 800, 900). Manrope is Google Fonts' closest humanist-geometric answer to Frutiger and Avenir; we set it heavy (800/900) for headlines and at `letter-spacing: -0.015em` on display and `-0.003em` on body to lock the Frutiger-clean signal. Manrope's slightly tighter apertures vs. Inter give the page a more "civic signage" feeling — it reads as **printed**, not as **typed**. - **Monospace counterpoint — JetBrains Mono** (weights 400, 700). Used exclusively for: the rail's entry-list, the today-block's day-counter ("WK 19 / DAY 129"), the conduit-line's tiny labels (e.g. `→ 14:22 / dispatch 04`), and the bottom status broadcast. The clash between Manrope (humanist) and JetBrains Mono (geometric mono) is the typographic signature. - **No third family.** No serif, no display script. **Type scale:** Wordmark `clamp(2.5rem, 4vw, 3.25rem)` weight 900, line-height 0.88. Today-date `clamp(1.75rem, 2.4vw, 2.25rem)` weight 800. Marquee-card lead `clamp(3rem, 6vw, 5.25rem)` weight 900, line-height 0.95. Numeric Banner `clamp(8rem, 18vw, 16rem)` weight 900, line-height 0.85, letter-spacing `-0.04em`. Body `1.0625rem` weight 400, line-height 1.55. Mono labels `0.6875rem` weight 700, letter-spacing `0.14em`, all-caps. **Palette — strict duotone, three tones total (two color anchors + one surface):** - **Carbon Slate** `#1a1d24` — every body of type, every card border, every conduit-line shadow-pass. Deeper than off-black, with a faint blue cast that reads as "cold civic infrastructure." Never pure `#000000`. - **Civic Gold** `#d4a017` — the only chromatic accent. Used for: the wordmark's underscore, the conduit-line strokes, the rotating mood-declaration, the numeric banner's digit, the sign-off card's link underline. **No softer/lighter version of gold exists in the design** — gold is either at full saturation or absent. This is the duotone discipline. - **Bone Cream** `#efeae0` — the page surface. Warm, slightly newsprint, never `#ffffff` or `#fafafa`. Cards are this same cream at 0.62 alpha with `backdrop-filter: blur(18px) saturate(1.1)`, so they belong to the surface even when they tint the city-horizon behind them. **Forbidden tones:** No reds. No greens. No blues other than the slate's faint cast. No mid-grays — the page goes from cream straight to slate, with gold as the only step in between, and that step is always at full saturation. This is what makes the duotone earn its keep. ## Imagery and Motifs **Glassmorphic Cards over a SVG City Horizon.** The dispatch-stream column has a single, large `` skyline rendered as the **fixed background** of the right column (`background-attachment: fixed`, `position: absolute`, behind cards). The skyline is hand-drawn: ~14 building silhouettes of varying widths and heights — flat-roofed Brutalist blocks, two with antennas, one with a water tower, one with a rooftop-billboard frame (no billboard art — the frame is empty, deliberately) — all in **Carbon Slate at 0.08 alpha** so the skyline is barely visible against the cream. Above the buildings, a faint horizontal Civic-Gold line at `y = roofline + 4px` runs across the column at 0.18 alpha — a single street-light wire, the only colored element in the background. **Cards glassmorph this skyline:** each card is `background: rgba(239,234,224,0.62); backdrop-filter: blur(18px) saturate(1.1); border: 1px solid rgba(26,29,36,0.12)`, so the skyline blurs into a bone-cream haze beneath each card while the gold wire pokes through faintly along the card's bottom edge. The city is always present, never the subject. **Path-Draw SVG (the Conduit Network) is the page's motion language.** Every animated thing on the page is a `stroke-dasharray` path-draw: (1) the **conduit-line network** described in Layout (card-to-card wiring); (2) the **wordmark underscore** under the period in `tsundere.day` — a 4px-tall, 18px-wide gold strip that draws in left-to-right over 600ms on first paint; (3) the **mood-declaration's** preceding bullet — a single 6px gold dash that re-draws every time the mood text rotates (every 8s); (4) the **city-horizon card's** street-light wire — a horizontal gold line that draws across the card on hover/scroll-into-view, with 5 small evenly-spaced lamp-circles popping into existence one at a time as the wire reaches them. **No fades. No scales. No translates.** All page motion is "drawing a line that wasn't there." This is the retro-futuristic civic-engineering metaphor made literal: the operator is wiring the city as you scroll, and when motion stops, the wiring is done. **The Roman-Numeral Day-Counter.** In the rail's today-block, beside the "DAY 129" mono line, a 14px-tall hand-drawn SVG of the same number in Roman numerals (`CXXIX`) sits in pale Civic Gold at 0.5 alpha. It is drawn fresh each time the date changes (i.e., once per day at midnight client-time), via the same path-draw motif. This is the design's **smallest object** and its quietest place. **No photography. No icons. No raster images of any kind.** The entire site is type, hand-routed SVG paths, and CSS gradients on glass surfaces. The bezel-frame retro-futurism is delivered through 1px Carbon-Slate borders on cards, a 4px Civic-Gold inset shadow on the marquee card only (never on others), and a single 6px-radius corner on every card (small enough to read as "industrial," never as "soft UI"). Buttons-as-buttons do not exist; links are gold-underlined Manrope text, full stop. **Reduced-motion behavior:** The path-draw stays — but instead of animating, all paths render as **already drawn** at full length on initial paint. The page is just as wired-up; it was never going to skip the network. The mood-declaration rotates without the dash redrawing (it just swaps text). This is the only motion concession. ## Prompts for Implementation - Build the page as a **two-column CSS Grid** at the body level: `grid-template-columns: clamp(280px, 22vw, 360px) 1fr;` with the rail in column 1 (`position: sticky; top: 0; height: 100vh; overflow-y: auto;`) and the dispatch stream in column 2. The skyline SVG sits as `position: absolute; inset: 0; z-index: 0;` on the column-2 wrapper, the conduit-line SVG as `position: absolute; inset: 0; z-index: 1; pointer-events: none;`, and the cards stack at `position: relative; z-index: 2;`. - The **rail** is a single `

` whose text content is rotated every 8000ms via `setInterval` from a hardcoded array of nine lines (listed in Layout). On each rotation, the preceding `::before` 6px gold dash re-runs its path-draw animation by toggling a CSS class. The text itself does not fade; it is replaced atomically — the persona doesn't soften the swap. - The **conduit-line network** is implemented as a single `` covering the dispatch column. JS at page-load measures each card's bounding rect, computes a right-angle Manhattan path between adjacent card corners (out of card's bottom-right, jog horizontally toward the rail's right edge minus 24px, jog vertically downward, jog horizontally back toward the next card's top-left), and emits one `` per pair. Each path's `pathLength` is normalized to its actual length, `stroke-dasharray` and `stroke-dashoffset` are both set to that length. An `IntersectionObserver` watches each card; when the card crosses 60% viewport, the corresponding path's `stroke-dashoffset` animates to 0 over 1200ms `ease-out`. Each path also carries a tiny mono label (``) at its midpoint reading `→ HH:MM / dispatch NN` — these are 9px JetBrains Mono 700 in Civic Gold. - The **skyline background** is a single `` with ~14 hand-coded `` and `` elements forming a city silhouette at the bottom 60% of the viewBox. All shapes are filled with `#1a1d24` at `fill-opacity: 0.08`. One horizontal `` runs at the average roofline + 4px, stroked in Civic Gold at 0.18 alpha, 1.5px. The SVG sits at `background-attachment: fixed; background-size: cover; background-position: bottom center` on the dispatch column wrapper. - **Cards** are `
` elements with: `background: rgba(239,234,224,0.62); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); border: 1px solid rgba(26,29,36,0.12); border-radius: 6px; padding: clamp(28px, 4vw, 56px);`. The Marquee Card additionally has `box-shadow: inset 0 0 0 4px #d4a017` and overlaps the rail edge by `margin-left: -24px`. No other card has the gold inset. - The **Numeric Banner** card holds a single number from 1-100, generated client-side by hashing the current date string into a stable integer for the day (so the same number persists all day, then changes at midnight). The digit is set in Manrope 900 at the size in the type scale, color Civic Gold. Below it, a single mono caps line: `CITY PULSE — DAY NN`. - **Reduced-motion guard:** wrap every path-draw `stroke-dashoffset` animation in `@media (prefers-reduced-motion: no-preference)`. In the reduced state, paths render with `stroke-dashoffset: 0` immediately. The mood rotation continues to swap text (it isn't motion that vestibular users object to), but the gold dash does not re-draw — it just stays present. - **Mobile (≤768px):** The rail becomes a `position: sticky; top: 0;` 56px horizontal bar containing only the wordmark, today's date, and a hamburger toggle. The entry-list dropdown opens as a full-width single-column overlay. The dispatch stream becomes single-column with `padding: clamp(20px, 5vw, 32px)` and `gap: clamp(32px, 8vw, 48px)`. The conduit-line network re-routes to vertical-only paths (entering the top of each card from above). The skyline-background remains. The Marquee Card no longer overlaps anything (no rail to overlap). ## Uniqueness Notes 1. **Frutiger-clean typography is at 0% in the batch — this design is the first to claim it.** Every other site reaching for "civic confidence" has used Bebas, oversized-display, or grotesque-neo. Manrope set heavy with tight tracking is the closest Google-Fonts answer to Frutiger's actual humanist-geometric DNA, and pairing it with JetBrains Mono (instead of the more common Space Mono / IBM Plex Mono pairing) keeps the typographic signature distinct from any sibling design. 2. **Strict three-tone duotone with one full-saturation accent (Civic Gold #d4a017) and zero softer variants of it.** Most palette work in the batch uses gradients (59% prevalence) or muted multi-color schemes; the locked Carbon-Slate / Civic-Gold / Bone-Cream three-tone, with gold permitted *only* at full saturation, is a discipline almost no other design adopts. There is no "lighter gold," no "shadow gold" — the page is binary about its color, and the duotone seed is honored at the level of literal hex constraint. 3. **Path-draw SVG as the page's sole motion language — no fades, no scales, no translates.** Every animated element on the page is a `stroke-dasharray` reveal of a hand-routed line. This includes the conduit-line network between cards, the wordmark underscore, the mood-declaration's bullet dash, and the Roman-numeral day-counter. The metaphor — *the operator is wiring the city as you scroll* — turns motion from decoration into civic-engineering theater. No other design in the batch uses path-draw as the *exclusive* motion principle; most mix it with hover-lift or fade-in. 4. **Persistent Operator Rail with the marquee card deliberately spilling over its edge by 24px.** Sidebar layout sits at 21% in the batch — common — but the *deliberate violation* of the rail line by the marquee card (a 24px overlap) is a unique compositional gesture. It signals that today's lead story is too big to stay in its lane, and it shows up nowhere else in the batch's sidebar work, which uniformly respects the rail boundary. 5. **City-urban motif rendered as a fixed-position SVG skyline at 8% alpha behind glassmorphic cards — never as photography.** Photography sits at 82% in the batch as the dominant imagery mode; this design replaces it entirely with a hand-coded SVG skyline (~14 building silhouettes) that sits as an `attachment: fixed` background, blurred by every glass card's `backdrop-filter`. The city is *always present, never the subject* — a structurally different relationship to imagery than the batch's photography-first norm. 6. **Tsundere persona delivered through structural restraint, not copy quirk.** Many tsundere-themed sites in the batch lean on conversational deflecting copy ("ugh, fine"). This one expresses the persona through *what the page refuses to do*: no greeting, no welcome, no soft confirmations, no warming hover-lift, no second accent color. The user is logged as "entry NN" and the page proceeds. Bold-confident tone (rare in the batch) is the carrier. 7. **Roman-numeral day-counter as a daily-changing path-drawn SVG glyph.** The Roman-numeral form of today's day-of-year (e.g. `CIX`, `CXL`, `CCLXV`) sits in the rail's today-block and re-draws once per day at midnight via the same path-draw motif. This is a calendar-aware structural element — *the design itself ages by one Roman numeral per day* — and it appears nowhere else in the batch. **Chosen seed:** aesthetic: retro-futuristic, layout: sidebar, typography: frutiger-clean, palette: duotone, patterns: path-draw-svg, imagery: glassmorphic-cards, motifs: city-urban, tone: bold-confident **Avoided patterns from frequency analysis:** photography (82% — replaced with hand-coded SVG skyline at 8% alpha), gradient palettes (59% — replaced with strict three-tone duotone), hand-drawn aesthetic (common — replaced with civic-engineering geometric restraint), grotesque-neo / bebas-bold typography (replaced with Frutiger-clean Manrope at 0% prevalence), photography-first imagery (replaced with glassmorphic-cards over SVG skyline), hover-lift and scroll-driven motion (replaced with path-draw-svg as the exclusive motion language).