# Design Language for xity.dev ## Aesthetics and Tone xity.dev is a quiet city that does not announce itself. The name — a compression of *city* — is treated as a philosophical gesture: the city stripped down to its syllable, to the hiss and silence beneath the bustle. The aesthetic is **japanese-minimal** rendered through a Northern European lens, the way a Kyoto machiya townhouse sits beside a Swedish *stuga* in the same imagined mountain valley. Nothing decorated. Nothing redundant. Everything present for one clear reason. The visual mood is **grounded-earthy**: moss, oak heartwood, river-smoothed granite, aged mulberry bark-paper. This is not "nature minimalism" in the generic sense — there are no flat leaf icons, no brand-green call-to-action buttons. The ground is organic but the geometry is precise. A moss-covered stone *is* a right angle if you look long enough. The site earns its calm through structural discipline, not through softness. The tone is **contemplative and laconic**. Copy is short, almost gnomic — one-sentence paragraphs separated by long breathing rooms. There is no marketing copy, no features list, no social proof carousel. The site is a place to arrive at and stay in, not a place to scan and click through. **Temporal layer**: the page carries the weight of paper that has been folded, unfolded, and folded again across decades. The **paper-aged** imagery idiom — foxing at the edge of a leaf, ink that has spread into fiber — is present in the background texture and in photograph treatment, not as decoration but as material memory. The site looks like it has been used. ## Layout Motifs and Structure The composition is **stacked-sections**, but each section is conceived as a *room* rather than a content block. Rooms have different proportions, different light levels, different silences. The visitor walks from one room to the next by scrolling — there is no jump navigation, no section indicator, no hamburger menu. The page is continuous. **Macro structure (top to bottom, six rooms):** 1. **Vestibule** — full-viewport opening. The word `xity` set in Noto Serif JP, weight 300, at `clamp(7rem, 16vw, 18rem)`. Below it, one line of body text — 12 words maximum. Background: the lightest layer of the paper texture, aged-parchment tone. A single faint star-glyph drawn in SVG at top-right corner, positioned as if always been there. 2. **Passage** — a transitional room, 60vh tall, no text beyond a single date or coordinate in small-caps. This room exists only to let the visitor breathe. A micro-interaction triggers here on scroll entry: the star-glyph traces its own path in a slow SVG `stroke-dashoffset` animation over 2.4 seconds, like a compass needle finding north. 3. **Work Room** — the main content area, built on an asymmetric **8/4 column grid** at 1200px max-width (or full-width single column below 768px). The 8-column left zone holds the primary content; the 4-column right zone holds marginalia in a smaller weight — dates, annotations, short parentheticals — the way a scholar's notebook margin holds the real thinking. Vertical rhythm is set at 1.6rem base. 4. **Archive Room** — a lower-density section listing prior works or projects as a single typographic stack, no cards, no images, no hover states except a micro-interaction: on hover, the line subtly shifts left by 3px and the color deepens from `#7a8a72` to `#2f3a2a` over 180ms. The motion is small enough to be noticed only by someone paying attention. 5. **Garden** — a meditative closing section, 80vh, holding only a short piece of prose and one aged photograph treated in duotone. No buttons. No forms. The photograph is positioned off-center, rotated 1.3 degrees counter-clockwise, as if placed on a desk and not squared up. 6. **Foundation** — a minimal footer: copyright, one link. No social icons. Font weight 300, size 0.75rem, color `#a0a898`. The star-glyph appears again here, smaller, at `0.6rem`. **Spatial logic**: sections are separated by deliberately oversized vertical padding — `clamp(6rem, 12vw, 14rem)` — so the white/paper space between rooms is itself a room. Horizontal padding is `clamp(1.5rem, 6vw, 9rem)`. Nothing touches the edges of the viewport without intent. **No horizontal scrolling. No sticky header. No scroll-triggered fade-ins (overused at 36%). No parallax (overused at 73%).** ## Typography and Palette **Primary display: [Noto Serif JP](https://fonts.google.com/specimen/Noto+Serif+JP)** Weight 300. Used for the wordmark and all H1/H2 section titles. The Japanese optical spacing and the subtle calligraphic stroke endings give the Latin characters a quietly eastern quality without being theatrical. Size range: `clamp(2.4rem, 5.2vw, 5.6rem)` for H1; `clamp(1.4rem, 2.8vw, 2.6rem)` for H2. **Body: [DM Sans](https://fonts.google.com/specimen/DM+Sans)** Weight 300 and 400. DM Sans is a geometric humanist that reads clean in long prose while carrying a faint warmth in its curves — the optical equivalent of a Frutiger-style clean grotesque without the Swiss austerity. Line height 1.75. Tracking 0.01em. Size: `clamp(0.95rem, 1.1vw, 1.1rem)`. **Marginalia / annotations: [DM Mono](https://fonts.google.com/specimen/DM+Mono)** Weight 300. Used only in the Work Room right column and in metadata lines. Size: 0.8rem. The monospace carries the idea of drafting notes, not code — a pencil in a different hand. **Palette — forest-green, muted, grounded:** - `#2f3a2a` — deep forest floor, primary text on light backgrounds, border accents - `#7a8a72` — mid-tone lichen, secondary text, hover-resting states - `#f0ece2` — aged parchment, primary background, paper-warm white - `#ddd8c4` — dry pressed-flower, subtle dividers, the 1px lines between marginalia items - `#b5a98c` — dried-grass amber, micro-interaction highlight (the star-glyph stroke, annotation dates) - `#1c231a` — night garden, used only for the wordmark and page-closing footer text **Color logic**: no gradients (overused at 77%). No warm palette in the conventional marketing sense (overused at 88%). The palette is cool-green-neutral, the color of objects that have been sitting on a windowsill for thirty years. Every hex is muted toward grey rather than saturated. ## Imagery and Motifs **The star-celestial motif** is the single recurring decorative element. It appears in three scales and three contexts: 1. **SVG constellation path** (Vestibule and Passage rooms): a hand-traced 7-point irregular star drawn with a single `` using a `stroke-dasharray` / `stroke-dashoffset` technique. On scroll entry into Passage, the stroke draws itself over 2.4 seconds, `easing: cubic-bezier(0.25, 0.1, 0.25, 1)`. Color: `#b5a98c` at 70% opacity. Stroke width: 0.6px. No fill. The irregularity is deliberate — the points are not equidistant, as if drawn freehand with a very sharp pencil. 2. **Embossed paper print** (Garden room background): an ultra-low-opacity (4–6%) star pattern used as a background texture layer. SVG `` element, 80px × 80px repeat tile. The stars are different sizes and rotations — the celestial-scatter idiom, not a grid. This creates the impression of paper that was once stored near a window and has faint watermarks. 3. **Closing glyph** (Foundation room): a single 12px × 12px star SVG inline in the footer, `#a0a898`, weight 1px stroke. No animation. It punctuates the page like a colophon mark in a hand-set book. **Photography — paper-aged treatment:** One photograph appears in the Garden room. It must be a still-life close-up — a cup on aged paper, a seed on bark, a compass on linen — shot at f/2.8 with visible grain. Processing: desaturated to near-monochrome, then duotone overlay in CSS using `mix-blend-mode: multiply` with `#2f3a2a` as shadow tone and `#f0ece2` as highlight tone. A `filter: sepia(12%) contrast(1.05)` on the `` element creates the foxing-edge quality. No other photographs on the page. **Texture layer:** A repeating SVG noise texture tile (180px × 180px, 3% opacity) applied as `::before` pseudo-element on the ``. This is not a JPEG grain overlay — it is a pure SVG `` filter exported as a base64 data URI, keeping the page at near-zero image weight while creating the felt presence of fibrous paper. **No photography grids. No icon libraries. No hero images. No abstract blob shapes (overused at 6%).** ## Prompts for Implementation Build xity.dev as a **single continuous scroll page** — one HTML file, one CSS file, one JS file. No frameworks, no bundlers, no React. The site should load in under 1 second on a 3G connection: total payload under 120KB (uncompressed), fonts loaded with `font-display: swap`, SVG assets inline. **Opening Vestibule — full-screen, centered-left layout:** Set `min-height: 100svh`. The wordmark `xity` is not centered — it sits at `padding-left: clamp(1.5rem, 6vw, 9rem)`, vertically at 42% from top (not 50%, because visual center sits slightly above geometric center on tall viewports). One subtitle line below in DM Sans 300, `#7a8a72`, `font-size: clamp(0.9rem, 1.3vw, 1.1rem)`, tracking 0.08em. The star-glyph SVG is positioned `position: absolute; top: 8%; right: 7%` with `width: clamp(2rem, 4vw, 4.4rem)`. **Micro-interactions (not overused at 5%):** - Star-glyph stroke-draw on Passage scroll-entry (IntersectionObserver, threshold: 0.4) - Archive-room list item left-shift on hover (`transform: translateX(-3px)`, `transition: 180ms ease`) - Body links: no underline at rest; on hover, a `::after` pseudo-element draws an underline from left using `scaleX(0) → scaleX(1)`, 200ms, `transform-origin: left`, color `#b5a98c` - NO parallax, NO stagger (overused at 49%), NO scroll-triggered fade-ins (overused at 36%) **Work Room layout (desktop: 8/4 columns):** Use CSS Grid: `grid-template-columns: 2fr 1fr; gap: clamp(2rem, 4vw, 5rem)`. The right column (marginalia) is set in DM Mono 300 at 0.8rem, `#7a8a72`, `padding-top: 0.4rem` to optically align the first line with the body text baseline. On mobile, right column collapses below the main content with `order: 2; margin-top: 2rem`. **Garden room photograph:** `position: relative; transform: rotate(-1.3deg)`. Parent div has `overflow: hidden; border-radius: 2px`. Image: `width: 62%; margin-left: 18%` on desktop, `width: 88%; margin-left: 6%` on mobile. The duotone effect is CSS-only: wrap in a container with `background-color: #2f3a2a`, apply `img { mix-blend-mode: multiply; filter: sepia(12%) contrast(1.05) grayscale(80%); }`. **Typography rhythm:** Set `--base: 1rem; --scale: 1.333` (Perfect Fourth). H3 = 1.333rem, H2 = 1.777rem, H1 = 2.369rem. Display uses Noto Serif JP; body uses DM Sans. Vertical rhythm: all block-level elements use `margin-bottom` that is a multiple of `1.6rem`. **Performance directive:** Load Noto Serif JP with `font-weight: 300` only, latin + japanese-kana subsets via Google Fonts `text=` parameter, scoped to only the characters actually used. DM Sans and DM Mono loaded from Google Fonts with `display=swap`. **Tone in copy:** Every section's text must be 1–3 sentences. No bullet lists on the page. No headers above H2. No bold within body copy. Prose breathes like a journal entry — first person if at all, present tense, no imperative mood. ## Uniqueness Notes 1. **Noto Serif JP for Latin display text — a structural inversion.** The frequency report shows `frutiger-clean` at 4% and `japanese-minimal` at 2%, both well below the dominant mono (74%) and humanist (32%) categories. xity.dev uses a Japanese serif designed primarily for CJK rendering as its *Latin display* face — exploiting the subtle calligraphic stroke endings that Noto Serif JP carries into its Latin glyphs. This is the opposite of a "Japanese design with Latin fallback"; the Latin wordmark *is* the Japanese letterform. Zero other designs in the 545-site corpus use this approach. 2. **Star-celestial motif at three-scale, zero-image implementation.** The frequency report shows `star-celestial` at 5% — underused and typically implemented as photography or icon libraries. xity.dev implements the star motif entirely in inline SVG: a freehand-irregular path, a ``-based texture tile, and a colophon glyph. Total star-motif weight is under 2KB. No PNG, no JPEG, no external icon font. The motif is structural — embedded in the page's semantic HTML — not decorative overlay. 3. **Micro-interactions as the *only* animation pattern (overused at 5% means rare, not common).** The dominant animation patterns in the corpus are parallax (73%), stagger (49%), scroll-triggered fades (36%), and spring physics (33%). xity.dev rejects all four and uses only micro-interactions — hover-state shifts of 3px, 180ms transitions, SVG stroke-draws under 2.5 seconds. The animations are *reactive to the user*, not autonomous scroll-theater. This is a deliberate anti-pattern choice: the page does not perform for the visitor; it responds to them. 4. **Paper-aged imagery realized through zero raster assets.** The `paper-aged` aesthetic is typically achieved with JPEG textures and photography post-processing. xity.dev achieves it through three CSS-only layers: `feTurbulence` SVG noise at 3% opacity on ``, a single duotone-blend photograph treated entirely with CSS `mix-blend-mode` and `filter`, and the ink-foxing impression created by the `#ddd8c4` divider lines at 1px. The page looks aged; its payload is fresh. 5. **Seed used:** aesthetic: japanese-minimal, layout: stacked-sections, typography: frutiger-clean, palette: forest-green, patterns: micro-interactions, imagery: paper-aged, motifs: star-celestial, tone: grounded-earthy. Avoided: parallax (73% overused), stagger (49%), scroll-triggered fades (36%), warm palette (88%), gradient (77%), photography-heavy (87%), mono typography (74%), hand-drawn (53%), editorial (50%).