# Design Language for tsundere.dev ## Aesthetics and Tone tsundere.dev presents itself as a **weathered seaside developer's workshop** -- a coastal artisan's studio where code is treated as a tactile, hand-bound craft rather than ephemeral text. The aesthetic fuses **skeuomorphic materiality** with a **grounded-earthy** disposition: imagine a cliff-side cottage where a senior engineer keeps her terminal in a cherrywood box, her keyboard rests on a slab of slate, and her notes are pinned to a corkboard battered by sea wind. Every surface in the design has *physical pretense* -- visible bevels, soft inner shadows, paper-fiber textures, and the gentle warp of materials that have lived beside salt air. The "tsundere" thematic is read literally: the site begins **cold-blue and reserved** (the dismissive surface), then through scroll and interaction warms into **terracotta and amber tones** (the affection beneath). This is not played as anime kitsch -- it manifests as a *temperature gradient* across the page, with cool slate and overcast sea at the top, gradually mellowing into driftwood, dune-sand, and rusted iron at the foot. The tone is **grounded, dryly affectionate, and unhurried** -- like a craftsperson who pretends not to care that you're reading her work but has clearly polished every dovetail joint. Inspirations: the rope-and-grommet textures of nautical chart binding, Edward Tufte's small-multiple grids printed on cream cotton paper, the bevelled chrome of 1990s Mac OS 8 control panels reimagined in driftwood and sea-foam, and the muted dignity of a Pacific Northwest tidepool field guide. The mood is *introverted competence* -- generous whitespace, no announcements, and a refusal to perform enthusiasm. ## Layout Motifs and Structure The page is composed as a **masonry pinboard** -- an irregular grid of variably-sized cards arranged in a 3-column CSS Grid using `grid-auto-flow: dense` with `grid-auto-rows: 24px` (a fine "grommet" track) so cards span between 6-and-22 row units depending on content weight. There is no hero block, no dashboard, and no symmetric section banding -- instead the eye is pulled diagonally across a *corkboard composition* of pinned panels. Each card is a self-contained skeuomorphic object: a folded blueprint, a stacked manuscript, a brass-cornered notecard, a bottle washed up on shore. **The Coastal Strata (vertical temperature):** The page is divided into four loose horizontal "strata" cued by the palette transition rather than by hard rules. From top to bottom: *Overcast Strait* (intro, cool-blue masonry of code-fragment cards), *Tidemark Bench* (work showcase, where slate cools into wet-sand neutrals), *Driftwood Yard* (process notes, warming into pale ochre and bleached pine), *Hearth Ledger* (about/contact, full terracotta-and-iron warmth). The transitions are bridged by a single horizontal **underline-draw** rule -- a hand-inked line that animates across the viewport on scroll-into-view, like a chart-maker ruling a separator with a fountain pen. **Pinboard Mechanics:** Every card is mounted on the corkboard with a small metallic grommet (a 14px circle with radial gradient simulating brass) at its top-left or top-right corner. The grommet position alternates per card to suggest hand-pinning, not mechanical placement. Cards have a subtle 1.5deg rotational variance (`--tilt: var(--tilt-card)` with values like `-1.2deg`, `0.8deg`, `-0.4deg`) -- never perfectly aligned, as if pinned by a tired but careful hand at the end of a workday. **Background grid:** A faint **grid-lines** texture runs beneath everything -- a 24px square engineering grid drawn in `repeating-linear-gradient` at #2c3e500c (translucent slate over the cool top, fading to #3d2f2410 over the warm bottom). It is the *graph paper underlay* of an architect's notebook, not a décor element. The grid never animates and never disappears; it is the bedrock measurement system the masonry pretends to ignore. **No conventional nav:** The site lacks a sticky header. Instead, a vertical *rope* of section anchors runs along the right margin -- four small brass-rivet markers connected by a thin braided line (an SVG `path` rendered with `stroke-dasharray` to simulate braiding). Clicking a rivet smooth-scrolls to its stratum. ## Typography and Palette **Typography:** - **Display:** "Big Shoulders Display" (Google Fonts) -- a tall, condensed, earnest grotesque with the slightly-mechanical confidence of mid-century cargo-stencil signage. Used for section headlines at clamp(2.4rem, 6vw, 5.2rem), weight 800, with `letter-spacing: -0.015em` and a textured sea-spray subtle inner-emboss (text-shadow: inset-style two-layer). This is the **display-bold** voice -- shouted but weathered, like paint on a ferry hull. - **Subhead/Card title:** "Fraunces" (Google Fonts) -- a soft-hearted serif with optical-size-aware contrast. Used at 1.35rem, weight 600, with `font-variation-settings: 'opsz' 36, 'SOFT' 80, 'WONK' 0`. Its slightly humanist warmth balances the colder Big Shoulders, like a librarian's note clipped to a navigator's chart. - **Body:** "Sorts Mill Goddy" (Google Fonts) -- a slow, rounded old-style serif at 1.05rem / 1.7 line-height, weight 400. It reads like a printed field journal, never glossy. Justification is *off* -- left-aligned with a ragged right edge as if typed on a hand-set press. - **Code/mono accent:** "DM Mono" (Google Fonts) at 0.95rem, weight 400, with a 1px translucent slate underline beneath every inline `` -- the **underline-draw** seed expressed as a literal foundation line beneath each technical token. **Palette (coastal-blend, eight stops top-to-bottom):** - `#3a4f63` (Overcast Slate -- top stratum dominant, cool reserved tone) - `#7c98a6` (Sea-Fog Mist -- secondary cool, used for muted body in strata 1-2) - `#d4d0c4` (Driftwood Bone -- mid-page neutral, paper-card surface) - `#e8dcc4` (Dune Vellum -- warm card backgrounds in strata 3-4) - `#b87a4a` (Terracotta Hearth -- accent for warm-stratum headlines and grommets at scale) - `#8b3a1f` (Rust Oxide -- deep warm accent for the bottom stratum, link hovers) - `#c4a05c` (Brass Rivet -- exclusively for skeuomorphic hardware: grommets, rope-rivet markers) - `#1a1814` (Driftwood Char -- text color throughout, never pure black; a hint of warm umber) **Gradient-mesh underlay:** Behind the masonry, a single full-page **gradient-mesh** lives at `position: fixed; inset: 0; z-index: -1`. It is a CSS `radial-gradient` composition stacking five soft-edged blobs: cool slate top-left, sea-fog top-right, driftwood-bone center, dune-vellum lower-left, terracotta-hearth bottom-right. The blobs are each 60vw wide with `filter: blur(120px)` and 35-50% opacity, producing the temperature gradient described above -- a literal painted background, not a hard-stop linear sweep. The mesh slowly shifts on scroll (each blob with its own `translateY` rate, between 0.05x and 0.2x), giving the feeling of looking through morning fog onto a coastline that subtly breathes. ## Imagery and Motifs **Skeuomorphic card archetypes (5 distinct surfaces):** 1. **Blueprint cards** -- cool stratum. Background `#3a4f63` with a 0.5px white grid overlay at 12% opacity, white technical-pen text, corner-folded with a CSS `clip-path` triangle shaved from the lower-right and a small drop-shadow simulating the curl. Used for code-fragment showcases. 2. **Manuscript cards** -- mid-page. `#e8dcc4` paper background with a subtle `radial-gradient` paper-fiber speckle (generated by stacked `background-image` of two `repeating-radial-gradient` patterns at 0.5px), a 1px deckle-edge using `clip-path: polygon` with gentle irregularity, and a thin rust-oxide horizontal rule beneath each card title. 3. **Cork-pinned notecards** -- scattered as "asides." 4:3 vellum panels with a single grommet, pinned at slight tilt, casting a 2px slate-shadow down-and-right. Brief notes in handwritten-feel "Sorts Mill Goddy" italic. 4. **Driftwood plank cards** -- warm stratum. Background `#d4d0c4` with a layered `linear-gradient` at 92deg simulating wood grain (alternating 1-2px stripes of `#d4d0c4`, `#c8c0b0`, `#bbb09c`), inner-shadow 2px from the top to suggest the plank is recessed into the corkboard. Used for "process" content. 5. **Brass-cornered ledger cards** -- bottom stratum. Terracotta `#b87a4a` background with four small brass-rivet circles (`radial-gradient` simulating polished metal) at the corners. A 1px rust-oxide inner-stroke. Used for contact and the closing affectionate-but-gruff sign-off. **Persistent imagery elements:** - **The grommet:** the unifying skeuomorphic motif. A 14px circle rendered with `radial-gradient(circle at 35% 30%, #e6c87f 0%, #c4a05c 35%, #8a6f3d 70%, #5a4720 100%)` plus a 1px inner-shadow at the center to simulate the hole. Every card has at least one. They are *the* visual handshake. - **Rope rivet line:** a vertical SVG path on the right edge, 2px stroke `#c4a05c`, with a hand-drawn `stroke-dasharray: 6 3` to suggest braiding. Connects the four section-anchor rivets. - **Sea-spray dot pattern:** a sparse `radial-gradient` of 1px white dots at 8% opacity, scattered randomly via a pre-baked SVG noise-texture (no JS), overlaid only on the cool stratum to suggest salt mist on the slate. - **Underline-draw separators:** between major strata, a 60ch-wide horizontal `
` rendered as an SVG path with a hand-inked fountain-pen waver (slight `d` attribute jitter). On scroll-into-view, the path animates `stroke-dashoffset` from full-length to 0 over 1.4s `cubic-bezier(0.7, 0, 0.3, 1)` -- a literal pen-stroke ruling a separator. This is the **underline-draw** motif lifted from card-token underlines into a structural element. - **Tide-mark numbering:** card sequence numbers (01, 02, 03...) rendered in Big Shoulders 800 at 4rem, slate `#3a4f63` at 8% opacity, positioned absolutely *behind* card content as a watermark. Acts as a faint chart-axis tick. **No photography. No icons.** Visual interest comes entirely from CSS-rendered material textures, the gradient-mesh underlay, and the typographic discipline of the four-font stack. ## Prompts for Implementation Build the site as a single long page that mimics a **navigated corkboard** rather than a marketing landing page. The implementation should lean on CSS Grid masonry (`grid-template-rows: masonry` where supported, with a `grid-auto-flow: dense` + `grid-auto-rows: 24px` fallback), `position: sticky` for the right-margin rope-rivet nav, and a single root-level `
` with `position: fixed` for the gradient-mesh underlay. Define CSS custom properties for the entire palette (`--slate`, `--seafog`, `--driftwood`, `--vellum`, `--terracotta`, `--rust`, `--brass`, `--char`) and a *single* derived property `--temp` (0 to 1) that you interpolate per stratum to drive card backgrounds and underline colors -- one variable, two-thirds of the visual personality. Skeuomorphism is the contract: every card has a measurable inner-shadow (2px sea-fog inset top, 1px char-shadow bottom) plus an outer drop-shadow (4px 6px slate at 14% opacity) plus a single `transform: rotate(var(--tilt))` applied per-card via inline `style="--tilt: -0.8deg"` randomized at write-time. The grommet must appear on every card, rendered as a `::before` pseudo-element with the 14px brass radial-gradient, never as an ``. The underline-draw separators are SVG (so they can dasharray-animate). Use IntersectionObserver to add an `.inked` class when the separator enters viewport, which triggers the `stroke-dashoffset` transition. Do not animate anything else on scroll except: (1) the gradient-mesh blob `translateY` (very slow), (2) the underline-draw inking, and (3) a one-time fade-in for cards as they pin themselves to the board (subtle `opacity 0 -> 1` plus a 4px `translateY` settle, 600ms ease-out). No scroll-jacking, no parallax beyond the mesh, no hover-explode card effects -- the corkboard is meant to feel still and considered. Body voice should match the tone: introverted-competent, dryly affectionate, no exclamation points, no marketing imperatives. Section labels read like field-journal entries: "Notes on the Strait," "Bench Work, '23-'26," "From the Driftwood Yard," "Hearth Correspondence." Body copy is short, observational, occasionally self-deprecating. **Avoid:** CTA buttons, pricing tiers, feature-grids, "Trusted by..." logo strips, stat-counters, hero-image overlays. ## Uniqueness Notes 1. **Coastal temperature gradient as page descent:** The site is structured around a cool-to-warm palette transition (slate -> terracotta) running top-to-bottom across four strata. No other design in the batch uses literal *temperature* as the structural metaphor -- this maps the "tsundere" emotional arc onto the palette as a single continuous sweep, with the gradient-mesh underlay enforcing the interpolation as a painted background rather than hard banding. 2. **Skeuomorphic corkboard with five distinct card archetypes:** Each card is a *physical object* (blueprint, manuscript, cork-notecard, driftwood plank, brass-cornered ledger) with its own surface-shader of CSS textures, deckle-edges, and grommets. This pushes hard against the prevailing minimal/dashboard/sidebar layouts (21% sidebar, 15% dashboard in the corpus) and into the rare 6% masonry territory, executed as a tactile pinboard rather than a Pinterest-style image wall. 3. **Underline-draw as both micro-token and macro-separator:** The underline-draw seed is expressed at two scales -- as 1px slate underlines beneath inline `` (the typographic micro-foundation) and as 60ch SVG fountain-pen separators between strata, animated via `stroke-dashoffset`. Most designs use animation seeds at one scale; this binds them. 4. **Big Shoulders + Fraunces + Sorts Mill Goudy + DM Mono four-font stack:** Avoids the corpus-overused mono (79%) and humanist (22%) defaults by making mono a 4th-tier accent rather than the primary voice. Big Shoulders Display brings the rare display-bold register (1% in corpus); Sorts Mill Goudy is essentially absent from the batch and gives the body a printed-journal authenticity. 5. **No nav header, no hero, no CTA:** Most sites in the corpus open with a hero block. This one opens with three small blueprint cards already pinned to the corkboard, content-first. Navigation is a vertical brass-rope rivet line on the right margin -- distinctive and unintrusive. 6. **Avoided patterns from frequency analysis:** consciously skipping minimalist (35%), bento-box (8%), dashboard (15%), sidebar (21%), broken-grid (10%), tech-mono dominance (79%), and the tech motif (20% in corpus). Instead leaning into masonry (6%), grounded-earthy (2%), display-bold (1%), and gradient-mesh + skeuomorphic + coastal-blend, all 0-1% in the analyzed corpus.