# Design Language for tsundere.one ## Aesthetics and Tone tsundere.one is a **street-style** zine pinned to a city wall -- a one-and-only flagship page that feels like a hand-stapled flyer behind a clear vinyl sleeve. The aesthetic borrows from neighborhood riso-print posters, fly-posted gig bills, and corner-store sign letters: confident **art-deco** display capitals dropped onto a **muted** wash of pavement greys and chalked terracotta, with **glitch-art** imagery that registers as misprint rather than malfunction. The tone is **friendly** -- approachable, gently teasing, never gatekeeping -- the kind of street that nods at strangers. Counter-direction motion across modular city-block panels gives the page a quiet tension: things drift opposite each other the way buses pass cyclists, but nothing shouts. The "one" in the name is treated as a marquee numeral, the single-of-its-kind feeling of a corner shop that doesn't franchise. ## Layout Motifs and Structure **Modular city blocks on an asymmetric concrete grid.** The page is a 12-column desktop grid with rectangular blocks of varied span, arranged so that no two adjacent blocks share the same width -- the overall silhouette reads like a city map of irregular lots rather than a uniform card deck. Each block has a thick chalked outline (`box-shadow: 4px 4px 0 #2a2825`) and sits on a pavement-grey field, separated by 24px gutters that read as alleyways. The hero is a wide horizontal block (cols 1-9) with the marquee "ONE" numeral; immediately to its right (cols 10-12) is a tall narrow block holding a small art-deco insignia and a single sentence of copy. The next row inverts this -- a tall narrow column on the left, a wide block on the right -- and the inversion repeats every two rows, so the eye walks the page in a Z that never quite closes. **Counter-animate transit:** as the user scrolls, odd-row blocks translate slightly leftward (`translateX(-12px)`) and even-row blocks translate rightward (`translateX(12px)`) at half scroll speed, giving the impression of two opposing one-way streets sliding past each other. Mobile collapses to a single column where the counter-animation flips to vertical: alternating blocks parallax up vs. down. Section thresholds are marked by horizontal "curb" rules -- 2px solid `#2a2825` lines with a 1px dashed `#a9a298` shadow 4px below, mimicking street-paint and its weathered ghost. ## Typography and Palette **Fonts (Google Fonts only):** - **Display/Marquee:** "Limelight" -- art-deco display face cut for the page title, the numeral "ONE", and section markers. Used at `clamp(3rem, 9vw, 7rem)`, weight 400, letter-spacing 0.04em, often set in solid uppercase. Limelight's hand-cut deco terminals carry the marquee feel without descending into pastiche. - **Sub-display:** "Poiret One" -- thin geometric deco companion for sub-heads and pull-quotes, weight 400 at `clamp(1.25rem, 2.4vw, 1.75rem)`, letter-spacing 0.08em. - **Body:** "Public Sans" -- a humanist neutral sans that keeps the street-friendly tone readable; weight 400 at `1rem/1.65`, weight 600 for inline emphasis. - **Caption/Meta:** "Public Sans" weight 500 at `0.78rem`, letter-spacing 0.12em, uppercase, used for block labels and curb-rule annotations. **Palette (muted, pavement-and-chalk):** - `#e6e1d8` -- Pavement Cream (page background, the dry-sidewalk base) - `#d3cdc1` -- Sandstone (block fills, slightly darker than page) - `#2a2825` -- Asphalt Ink (primary text, outlines, curb rules) - `#7a7367` -- Concrete Mid (secondary text, captions) - `#a9a298` -- Chalk Ghost (dashed shadow rules, dimmed labels) - `#b8755a` -- Faded Brick (single warm accent, used only for numerals and the deco insignia) - `#5d6b66` -- Slate Moss (cool accent for hover/focus states) - `#1c1a18` -- Deep Asphalt (rare, used only for the marquee numeral fill) Contrast contract: Asphalt Ink on Pavement Cream meets WCAG AA at body sizes; Faded Brick is reserved for elements 24px+ where its lower contrast is acceptable. ## Imagery and Motifs **Glitch-print Misregister:** All photographic blocks are treated with a 3-channel CMY misregister rather than RGB displacement -- imitating a riso or screen-print where the cyan, magenta, and yellow plates landed 2-3 pixels apart. Implemented as three stacked `` (or `background-image`) layers with `mix-blend-mode: multiply` and `filter: hue-rotate()` shifted to plate-cyan (`#5fa8b3`), plate-magenta (`#c47a8a`), and plate-yellow (`#d8c168`), each translated by `(2px, 0)`, `(0, 2px)`, `(-2px, -2px)`. The result reads as honest misprint, not digital glitch -- friendly, not aggressive. **Marquee Numeral "ONE":** The hero block is dominated by the word ONE set in Limelight at hero scale, filled `#1c1a18` with a 6px outset offset shadow in `#b8755a` -- a deco marquee sign weathered by time. A subtle 1px inner stroke in `#e6e1d8` cuts a gap between fill and shadow, suggesting layered paint. **City-block Insignia:** A small 64x64 SVG mark appears in the narrow header column: an art-deco rendition of a city block (a square divided by two perpendicular lines off-center, with stepped corner notches in the upper-right). Drawn in `#2a2825` linework on `#d3cdc1` fill, it serves as the favicon and recurs as a section terminator at the bottom of long blocks. **Curb Stencil Numerals:** Each modular block is labeled with a stencil number (01, 02, 03...) set in Limelight at `1.4rem`, positioned bottom-left of the block with `letter-spacing: 0.06em`, prefixed with a 2px-thick horizontal stroke 24px wide -- the way curb addresses are painted by city crews. **Counter-animate Crosswalk:** Between the hero and section two, a horizontal band of 8 short vertical bars (each 6px wide, 24px tall, `#2a2825`, 12px gap) animates: odd-indexed bars slide left, even-indexed bars slide right, on a 4-second loop, `ease-in-out`, never overlapping their neighbors. This is the page's literal expression of counter-animation: a crosswalk where the stripes themselves walk past each other. **Posted-paper Texture:** The Pavement Cream background carries a very low-amplitude SVG noise filter (`` composited at 4% opacity) to mimic the toothy surface of newsprint or zine stock. No drop shadows on text -- only the chalked block outlines suggest depth. ## Prompts for Implementation Build the page as a **single-flagship street zine** -- one long, deliberately paced scroll that never asks the user to click into a sub-page. Treat each modular block as a self-contained postcard. **Modular Grid:** Use CSS Grid with a 12-column track and `grid-auto-rows: minmax(160px, auto)`. Define block spans explicitly per element rather than auto-flow; the asymmetry must be authored, not algorithmic. Provide a `.block` base class that supplies the chalked outline (`border: 2px solid #2a2825; box-shadow: 4px 4px 0 #2a2825; background: #d3cdc1; padding: 28px 32px; position: relative;`). Modifiers `.block--wide`, `.block--tall`, `.block--marquee` set grid spans. **Counter-animate Scroll:** Implement with a single `IntersectionObserver` plus a `requestAnimationFrame` scroll handler that updates a CSS custom property `--scroll-y`. Each block reads its row index from a `data-row` attribute and applies `transform: translateX(calc(var(--scroll-y) * (var(--row-parity) * 0.12px)))`. Cap displacement at +/- 18px so motion stays gentle. Wrap the entire effect in `@media (prefers-reduced-motion: reduce) { transform: none !important; }`. **Misregister Image Component:** Build a `
` with three nested layers -- one `` and two `
` siblings using the same image as `background`. Apply `mix-blend-mode: multiply`, plate-tinted `filter: brightness(1.05) contrast(0.92) sepia(0.2) hue-rotate(...)` per layer, and translate each layer 2-3 pixels in three different diagonals. Crucial: do not animate the misregister -- it must read as a static printing artefact, not a live glitch. **Marquee Numeral:** Use a `ONE` with the deco filled-and-shadowed treatment. Render via `text-shadow` for the brick offset (`text-shadow: 6px 6px 0 #b8755a`), and a `-webkit-text-stroke: 1px #e6e1d8` for the inner gap. Limelight at the largest viewport-clamp. **Crosswalk Animation:** SVG with 8 `` elements, each given inline `style="animation: crosswalk-{odd|even} 4s ease-in-out infinite"`. Two keyframe sets translate +/- 16px horizontally and return. Stagger nothing -- the interest is in the parity, not in waves. **Stencil Block Numbers:** Inject as `::before` pseudo-elements on each `.block`, content set from `data-block-num`, positioned `bottom: 16px; left: 32px;` with the stroke prefix as a `::after` 2px line. **AVOID:** card-grid layouts that imply equal-weight catalog items; CTA-heavy hero stacks; pricing tables; stat counters; centered single-column hero compositions; warm-bright color palettes; sans-serif display typefaces (Limelight is non-negotiable for marquee); stock photography of laptops or office scenes; rounded card corners (everything is a rectangle); aggressive RGB-channel glitch effects (the misregister is print-derived, not screen-derived); animations faster than 600ms (the street is not in a hurry); dark mode (this design lives in daylight on a sidewalk). ## Uniqueness Notes 1. **Counter-direction parallax columns.** Most parallax in the collection moves all elements at varying speeds in the same direction; tsundere.one slides odd rows left and even rows right against the scroll, expressing the seed's `counter-animate` pattern as opposing one-way streets rather than as decorative speed differences. 2. **Print-misregister glitch instead of digital RGB glitch.** The collection's other glitch-art entries lean on chromatic aberration and CRT/VHS metaphors; this one routes glitch through CMY plate misalignment from riso/screen printing. The artefact is friendly and analog, supporting the friendly tone where digital glitch would betray it. 3. **Marquee numeral as primary motif.** The "ONE" of the domain is treated as a deco marquee sign with brick-offset shadow and chalk-gap inner stroke -- the only typographic element in the design that crosses 4rem, anchoring the page on a single typographic event rather than a hero photograph. 4. **Pavement-and-chalk muted palette.** Where most muted palettes in the collection lean cool-grey or sage-mauve, this one is built from sidewalk concrete with a single faded-brick warm accent -- a palette derived from the street itself rather than from interior or natural-world references. 5. **Asymmetric authored modular grid.** No two adjacent blocks share a span, and the asymmetry is hand-authored per block rather than emerging from auto-flow; the result is a city-map silhouette rather than a card deck, expressing `modular-blocks` as urban lots instead of as an equal-weight grid. **Chosen seed/style:** street-style aesthetic, modular-blocks layout, art-deco-display typography, muted palette, counter-animate patterns, glitch-art imagery, city-urban motifs, friendly tone. **Avoided overused patterns:** card-grid (74%), centered (61%), warm palette (80%), sans-serif display (high), photography imagery (81%), playful aesthetic (72%), dark-mode (high), CTA-heavy hero. Embraced underused: counter-animate motion, art-deco-display typography, modular-blocks asymmetric authoring, print-misregister glitch interpretation. **Similarity reference:** Distinct from mysterious.boo (dark-mode glitch horror, single-column scroll), distinct from xity.dev (glassmorphism HUD with celestial nav), and distinct from sibling tsundere.* designs by anchoring on art-deco display marquee, muted pavement palette, and counter-direction parallax rather than on figurative anime/character motifs.