# Design Language for xity.one ## Aesthetics and Tone xity.one is staged as **a municipal cartography bureau's master survey index — a "City of One" — rendered as a single, slowly-assembling isometric blueprint that the visitor watches being drafted in real time**. The conceit: there exists exactly one city in this jurisdiction, it has exactly one of everything (one street, one square, one bridge, one reservoir, one clocktower), and this site is the official isometric survey of that city, drawn on a drafting table by an unseen civil engineer who is narrating the survey as the lines are inked. The domain string `xity` is read three ways across the page — as **"city"** with its first letter struck out and re-set, as **"x-ity"** (the suffix of *complexity, infinity, density* — the qualities a city has), and as the Roman-numeral-adjacent **XI-ty** (eleven districts, eleven survey plates). The aesthetic is **skeu2morphic drafting-instrument realism fused with isometric technical-documentation precision** — not the glossy Aqua-button skeuomorphism of 2008, but the *tactile-tool* kind: the felt of a drafting-table surface, the milled aluminium of a parallel rule, the waxy translucency of vellum overlays, the slight emboss where a hard pencil has scored the paper. The tone is **grounded-earthy meeting scholarly-intellectual** — the calm, exact, faintly proud voice of a surveyor who has measured every kerbstone and wants you to see the work. Nothing here sells; the page *catalogues a place that does not exist with the seriousness of one that does*. The emotional target: the visitor should feel like they have been handed a real, heavy survey portfolio — leather corners, tissue interleaves — and are turning its plates one at a time while the draftsman talks them through what each line means. Stillness, weight, the smell of graphite. The opposite of a SaaS landing page. ## Layout Motifs and Structure The composition is built on a **hexagonal-honeycomb plate grid** — but used cartographically, not decoratively. The eleven survey plates are arranged as a honeycomb of flat-topped hexagonal cells, each cell a "map sheet" in the city atlas, and the visitor moves between them by panning across the honeycomb (the whole atlas is one continuous surface; scrolling/dragging slides the drafting table beneath a fixed viewport). Hexagonal-honeycomb sits at 2% in the frequency analysis — this design claims that near-empty room and gives it a *reason* (a hex grid is how real topographic atlases are tiled, and how hex-based survey reference systems work). - **The drafting-table viewport.** A fixed 16:10 "table surface" framed by a milled-aluminium parallel rule along the bottom edge (it slides as you scroll, like a real T-square). The honeycomb of plates lives on this surface; only 1–2 hexes are fully in frame at once, neighbours bleed in at the edges already half-drawn. - **Eleven plates, eleven city singularities.** Plate I: *The Street* (a single isometric road, kerb to kerb, drawn first). Plate II: *The Square*. Plate III: *The Bridge*. Plate IV: *The Reservoir*. Plate V: *The Clocktower*. Plate VI: *The Market Hall*. Plate VII: *The Allotments*. Plate VIII: *The Tramline*. Plate IX: *The Cemetery*. Plate X: *The Lighthouse* (the city has a coast — of length one). Plate XI: *The City Entire* (all ten previous singularities composited into one isometric whole, drawn last, as the closing plate). - **Isometric, true 30°.** Every structure is drawn in true isometric projection — 30° from horizontal, no perspective convergence. Buildings extrude upward as parallelogram stacks; the ground plane is a tinted isometric grid that runs *under* the vellum. - **Vellum overlay layers.** Each plate is built in 3–4 registered layers, the way real survey drawings stack: (1) the printed base grid, (2) the inked structure linework, (3) a translucent vellum "notes" sheet with handwritten dimensions and callouts, (4) an optional "construction" sheet showing the draftsman's setting-out arcs and centrelines in faint pencil. Layers fade in in order as the plate enters frame — base grid first, then ink, then notes, then construction lines erasing themselves. - **The margin block.** A persistent right-edge "title block" — the standardised box in the corner of every engineering drawing — holding the plate number (Roman), the plate name, the "scale" (1 : ∞, or 1 : 1, jokes that stay deadpan), the "surveyed by" line, and a tiny revision table. This block redraws its contents on each plate. - **No header nav, no footer.** Movement is the honeycomb pan plus a left-margin "plate index" — eleven tiny hexes you can click to jump, each filling in as you visit it. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with drafting-office discipline.** - **Zilla Slab** (display + plate titles, weights 400/500/700). The slab-serif voice of the survey — square, sturdy, the lettering of railway timetables and engineering title blocks. Used for every plate name and the `xity.one` wordmark. Set in **all caps, tracked +80**, in graphite ink colour. The wordmark sets `XITY` with the `X` drawn as a struck-through `C` (a C-glyph with a single 30°-raked strikethrough), so it literally reads "[c]ity" — the city that is and isn't there. Slab-serif typography is at 4% in the corpus; this design uses it as the load-bearing display voice. - **Spectral** (running survey prose + the draftsman's narration, weights 300/400/500 + italic). A transitional serif with a quiet, technical-document calm — the typeface of well-set manuals and survey reports. Body copy at 19px / 1.7, set in justified columns inside the vellum sheets (real survey notes are justified), with hanging punctuation. The draftsman's narration runs in **Spectral italic 300**, slightly smaller, as if pencilled in the margin. - **Cousine** (dimensions, callout numbers, the title-block fields, coordinate readouts). A monospaced face with a drafting-stencil flavour — every dimension annotation (`14.20 m`, `∠ 30°00′`, `R 3.5`), every coordinate (`E 0000.0 N 0000.0`), every title-block field is set in Cousine, small (12–13px), in a faded blueprint-cyan so the numbers read as *printed-then-photocopied*. Mono typography is at 93% in the corpus — near-universal — so here it is deliberately demoted to *annotation only*: it never carries a heading, never a paragraph, only the language of measurement. That restraint is itself a differentiator. **Palette — a drafting table at dusk, graphite and cyanotype.** - `#1E2A22` — **drafting-felt green-black**: the table surface, deepest text. The dominant dark. - `#F4EFE2` — **vellum cream**: the paper of every plate. The dominant light. - `#2C3A30` — **graphite ink**: structure linework, slab-serif headings. - `#3E6E7E` — **blueprint cyan**: the printed base grid, the title-block rules, all monospaced annotation. The "photocopied" colour. - `#B5462A` — **surveyor's red**: revision marks, the single accent — used only for "this was changed" callouts and the strikethrough in the wordmark's `X`. Never more than one red mark visible per plate. - `#C9A24B` — **brass instrument**: the parallel-rule highlight, compass-needle glints, the brass index hexes once visited. Metallic warmth against the cool grid. - `#9AA890` — **eraser-dust grey-green**: the faint "construction lines" that the draftsman draws and then partially erases. ## Imagery and Motifs **Everything is SVG, hand-built, isometric, and inked. No photography, no 3D renders, no stock illustration.** The visual vocabulary is the contents of a drafting drawer made literal. **The eleven isometric singularities (each is the entire content of its plate):** 1. **The Street** — one isometric road segment, kerbs, a single drain grate, three setting-out arcs showing the radius of its one bend, dimensioned end to end. 2. **The Square** — a paved isometric plaza, a single bollard, a single bench, a fountain reduced to one jet, with a survey traverse polygon dotted around its perimeter. 3. **The Bridge** — one single-span arch in isometric, voussoirs numbered, the construction-line catenary still visible behind the inked arch. 4. **The Reservoir** — an isometric water tank / open basin, water shown as a hatched plane, a single inlet pipe, level marks in Cousine. 5. **The Clocktower** — a tall isometric extrusion, one clock face, the hands frozen at the time the wordmark's strikethrough is drawn; gnomon-style construction lines for the tower's setting-out. 6. **The Market Hall** — an isometric truss-roofed shed, the trusses drawn as repeating parallelograms, one stall beneath. 7. **The Allotments** — an isometric grid of one-by-one garden plots, a single shed, rows hatched like crop-marking on a map. 8. **The Tramline** — one isometric rail pair curving across the plate, sleepers as a Cousine-numbered series, one overhead-wire pole. 9. **The Cemetery** — an isometric lawn with a single headstone, drawn with the same dimensional seriousness as everything else (deadpan, never morbid). 10. **The Lighthouse** — an isometric tapering tower on an isometric rock, one beam drawn as a translucent wedge sweeping a fixed arc. 11. **The City Entire** — Plates I–X composited into one isometric townscape, drawn line by line as the closing sequence, then captioned `1 : 1` in the title block. **Recurring drafting motifs (the "instruments"):** - **The parallel rule / T-square** — milled-aluminium bar along the viewport's lower edge, with brass thumbwheels, sliding as you scroll. It is the literal frame of the page. - **Setting-out arcs and centrelines** — faint eraser-dust-grey arcs, plus-mark stations, and dotted centrelines on every plate; they animate as if struck by an invisible compass, then half-erase. - **The title block** — the corner box, standardised, redrawn per plate, in cyan rule-lines with Cousine fields. - **Dimension witness-lines** — the little ticked extension lines and arrowheads of engineering dimensioning, in graphite, with the measurement floating in Cousine cyan. - **The north arrow** — one ornate isometric north arrow, brass, that rotates very slightly between plates (the city's "north" is unstable — a quiet joke). - **The tissue interleave** — between plates, a translucent cream tissue sheet wipes across the viewport, the way archival portfolios protect plates. ## Prompts for Implementation Build xity.one as **a single HTML document, one CSS file, one small ES module — no SPA, no router, no framework, no React, no build step beyond a single esbuild pass.** The page is one continuous honeycomb surface that the visitor pans across; the "drafting table" viewport is fixed, the atlas of eleven hexagonal plates slides beneath it. The visitor lands, pans/scrolls through the survey, watches each plate get drafted, and leaves. There is no second page. The page does not link out. There is **no CTA, no pricing block, no stat-grid, no testimonial row, no contact form, no email signup, no feature cards** — there is only the survey portfolio. **Storytelling is the organising principle, not navigation.** The eleven plates compose **one continuous monologue from the unseen surveyor of the City of One** — they introduce themself on Plate I ("There is one city in my charge. I have measured all of it. Let me show you."), narrate each singularity as its linework inks itself ("The street. One bend, radius three and a half metres. I set it out on a Tuesday."), and on Plate XI assemble everything into the whole city and sign the title block ("Surveyed entire. Scale: one to one. — the surveyor"). Narration runs in Spectral italic in the vellum margins; it should feel pencilled, personal, exact, faintly proud. **Drafting choreography (the load-bearing animation):** Each plate, on entering the viewport, *draws itself in the order a draftsman would*: (1) the cyan base grid fades up; (2) `stroke-dasharray` path-draw animates the graphite structure linework, line by line, with the setting-out arcs appearing *first* and then being partially erased (animate `stroke-dashoffset` in reverse on a grey-green over-stroke); (3) the vellum notes sheet slides in with dimensions counter-animating from `0.00 m` to their values in Cousine; (4) the title block redraws its fields with a quick typewriter tick. Between plates, the tissue-interleave wipe. Use **path-draw-svg** (50% in corpus — common, but here it is *literal ink on vellum*, which recontextualises it) and **counter-animate** for every dimension. **AVOID cursor-follow, magnetic, tilt-3d, spring overshoot** — instruments do not bounce; this page moves with the deliberate, slightly resistant feel of a heavy parallel rule. Motion easing should be near-linear with a tiny `ease-out` settle, never elastic. **Texture & material:** the felt table is a subtle noise+fibre CSS texture in green-black; the vellum is a faint warm paper grain with a 1px inner emboss shadow at plate edges; the parallel rule is a CSS gradient bar (brushed-aluminium: thin alternating light/dark vertical stripes) with two brass radial-gradient thumbwheels. Keep DOM light — SVG plates can be inline and shown/hidden; the honeycomb is CSS `clip-path: polygon()` flat-top hexes positioned with offset rows. **Interaction:** scroll (or drag) pans the atlas; a left-margin column of eleven tiny hex chips is the plate index — each is grid-cyan until visited, then fills brass. Clicking a chip pans smoothly to that plate. The north arrow in the corner rotates 2–3° each time a new plate centres. The wordmark `XITY` in the top-left margin: on hover, the red strikethrough on the `X`/`C` redraws itself with a path-draw, and the plate-V clock hands tick to match. **Tone discipline:** deadpan throughout. The jokes (one of everything; 1:∞ scale; unstable north; a dimensioned headstone) are delivered with total surveyor seriousness — never winked at, never explained. The reader should smile without the page ever smiling. ## Uniqueness Notes Five differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **Skeuomorphic-as-drafting-tools, not as glossy-UI.** Skeuomorphic sits at 4% in the corpus, and that 4% trends toward Aqua buttons / leather-stitched calendars. xity.one renders skeuomorphism as *the felt of a drafting table, the milled aluminium of a parallel rule, the wax of vellum* — a tactile-instrument recontextualisation that, as far as the corpus shows, is unique to this site. The parallel rule that is literally the page frame is the load-bearing signature; copying it would be plagiarism. 2. **Hexagonal-honeycomb used cartographically.** Honeycomb layout is at 2% — near-empty — and where it exists it is decorative (hex card grids). Here the honeycomb is an *atlas tiling*: eleven hexagonal map sheets on one continuous pannable surface, justified by how real topographic atlases and survey reference systems tile space. The pan-across-the-table viewport mechanic is part of this claim. 3. **Mono typography demoted to annotation-only.** Mono is at 93% — nearly universal, usually carrying headings and body. xity.one deliberately *forbids* monospace from headings and paragraphs and confines it to dimensions, coordinates, and title-block fields, in faded blueprint cyan — making the most common pattern in the corpus do the least visible job. The display voice is Zilla Slab (slab-serif, 4%) instead. 4. **The "City of One" conceit.** A jurisdiction containing exactly one city, which contains exactly one of every urban feature, surveyed with deadpan total seriousness. The eleven-singularity monologue and the closing 1:1 composite plate are the narrative spine and are specific to this domain (`xity` = `[c]ity`, the city that is and isn't). 5. **Anti-bounce, instrument-weighted motion.** Against a corpus where spring (83%), magnetic (76%), and cursor-follow (89%) dominate, xity.one explicitly bans overshoot, magnetism, and cursor-tracking in favour of near-linear, slightly-resistant motion — the feel of pushing a heavy T-square. Animation is path-draw ink and counter-animated dimensions only. Chosen seed/style: **"isometric technical docs"** (vocabulary: aesthetic: skeuomorphic + isometric, layout: hexagonal-honeycomb, typography: slab-serif, palette: muted/cool-grays + a cyanotype duotone, patterns: path-draw-svg + counter-animate, imagery: line-illustration + vector-art, motifs: grid-lines + city-urban, tone: scholarly-intellectual + grounded-earthy). Avoided patterns from the frequency analysis: hand-drawn (94%), glassmorphism (85%), photography (98%), card-grid (93%), warm gradient (98%/92%), cursor-follow (89%), parallax (87%), spring (83%), magnetic (76%), pastoral-romantic tone (30%), mono-as-everything (93% — here restricted to annotation).