# Design Language for xity.quest ## Aesthetics and Tone xity.quest is an **isometric city-cartography atlas** — a living blueprint world rendered at a fixed 30-degree dimetric angle, the way old strategy games and architectural axonometric drawings show a metropolis. The site reads like the planning table of a benevolent city-builder: drafting vellum pinned under glass, district tiles laid out on a grid, little roads and rails connecting "quests" the way a transit map connects neighborhoods. The tone is **playful-cartographic and quietly systemic** — wonder at scale, the joy of watching a small block of pixels grow into a borough. Not retro-nostalgic kitsch and not corporate SaaS; closer to the calm authority of an Ordnance Survey sheet crossed with the toy-like clarity of an isometric voxel diorama. Light is flat and even, like an overcast technical render — no drama, just legibility and the satisfying click of one tile snapping next to another. ## Layout Motifs and Structure - **Dimetric tile-bed background.** The whole page sits on a faint isometric grid (2:1 rhombus cells, ~64px wide) drawn as 1px hairlines in ink-blue at 8% opacity — it scrolls slightly slower than content (gentle parallax) so the "ground plane" feels physical. - **Districts, not sections.** Each content block is a *district card* — a parallelogram-skewed slab (CSS `transform: skewX/skewY` composites approximating the iso angle) with a thin "elevation" side-face in a darker tint, giving every panel a 3D-block-on-a-map look. Districts are connected by drawn SVG "roads": dashed double-line paths that animate in as you scroll, literally routing the eye from one block to the next. - **The Atlas Rail.** A persistent left margin behaves like a map legend / route index: a vertical list of district names with tiny isometric glyph-stamps (a cube, a bridge, a tower, a park) that highlight as their section enters view. - **Broken iso grid for the hero.** The opening screen is a near-full-bleed isometric "founding plot" — a single glowing tile in an otherwise empty grid, with the wordmark set as if it were a street sign standing on that tile. Scrolling "builds" outward: tiles fade and rise into place around it with a short stagger. - **No dashboards, no stat-grids, no pricing tables.** Where lesser sites would put a 3-column feature grid, xity.quest puts a *small animated city block* you can hover to inspect. ## Typography and Palette **Typefaces (all Google Fonts):** - Display / wordmark & district titles: **"Climate Crisis"** — a chunky, blocky display face whose heavy slab forms read like extruded buildings. Used sparingly, large. - Headings & legend labels: **"Space Grotesk"** — geometric, slightly quirky, sits well with technical line art; used in medium and semibold. - Body & captions: **"IBM Plex Sans"** — humanist-but-precise, the "survey sheet annotation" voice. - Coordinates, tile IDs, micro-labels: **"Space Mono"** — for grid references like `TILE 04·12` and route numbers. **Palette:** - `#F4F1E8` — Vellum (primary background; warm drafting-paper off-white) - `#13233F` — Deep Ink Blue (text, hairlines, primary structure) - `#2E5A7A` — Survey Slate Blue (district side-faces, secondary lines, legend ink) - `#E2603E` — Signal Vermilion (the "active tile" glow, route highlights, the one accent that pops on the map) - `#7FA98C` — Park Sage (greenspace tiles, success/positive flecks) - `#E8C46A` — Lamplight Ochre (warm fills for "built" tiles, hover tints) - `#FBFAF5` — Raised Tile (near-white top faces of cards, sits a hair above Vellum) ## Imagery and Motifs - **Isometric tile vocabulary:** roads (asphalt grey with white dashes), rails, river segments, plaza tiles, low buildings, towers, parks, a tiny windmill — all drawn as flat-shaded SVG dimetric blocks with a top face + two side faces, 3 tints each. Reused as section icons, list bullets, and decorative scatter. - **Drafting marks:** corner crop ticks, faint dimension lines with arrowheads, a "north arrow" compass rose in the iso plane (rotated 30°), a scale bar reading in "blocks." - **Pin & flag markers:** quests and links appear as little surveyor's flags planted on tiles, casting a tiny flat shadow; the active one flutters subtly. - **Connective roads:** animated dashed double-line SVG paths between districts; intersections get a small node-dot that pulses Signal Vermilion when its target enters view. - **Texture:** very subtle paper fiber noise on the Vellum (2–3% opacity), and a faint blueprint-grid watermark behind the hero only. - **Cursor:** a small isometric cube cursor-companion that nudges toward whatever tile/flag you hover (magnetic), as if you're placing it. ## Prompts for Implementation - Build a **full-screen narrative "city growing" scroll**: open on the lone founding tile + standing wordmark; as the user scrolls, tiles `translateY`-rise + fade into the grid in staggered waves, roads draw between districts via `stroke-dashoffset` animation, and the camera (background grid) parallaxes slowly. Each district enters with a short spring-settle (the "tile snap"). - Render the iso plane in **CSS transforms / SVG**, not WebGL — keep it crisp and lightweight. District cards: a top face (`#FBFAF5`) plus a pseudo-element side face (`#2E5A7A` tint) offset down-right; on hover the card "lifts" 4–6px with the shadow lengthening, ochre tint washing the top face. - **Legend rail** is `position: sticky`; each entry's iso-glyph fills with Signal Vermilion when its section is active; clicking smooth-scrolls and briefly draws the connecting road. - **Micro-interactions:** flags flutter on hover; the cube-cursor companion eases toward hovered targets; route-intersection node-dots pulse; numbers/coordinates do a brief mono "type-in" when revealed (sparingly — this is a map, not a terminal). - **Headlines:** set in Climate Crisis, oversized, sometimes placed as a "street sign" standing perpendicular on a tile (slight skew + drop shadow on the ground). - Keep motion **purposeful and physical** — everything should feel like placing or connecting pieces on a board. Respect `prefers-reduced-motion` by snapping tiles in instantly and freezing parallax. - **AVOID:** CTA-stacked hero buttons, pricing blocks, 3-up stat grids, glassmorphism frost panels, generic full-bleed photography, cards-in-a-grid marketing layout, dark-mode neon. This is paper + ink + tiles, in daylight. ## Uniqueness Notes - **Differentiator 1 — Fixed dimetric world as the layout system itself:** content blocks are *iso city-block slabs* connected by animated roads, not stacked rectangular sections. Almost nothing in the corpus uses isometric (~13%) as the literal page geometry, and none pair it with a "city is growing as you scroll" narrative. - **Differentiator 2 — Cartographic, not corporate, not retro-game:** drafting vellum + survey blues + a single vermilion "active tile" accent, with Ordnance-Survey-style dimension lines, north arrow, and scale-bar-in-blocks. No neon, no photography, no glass. - **Differentiator 3 — Climate Crisis "street-sign" display type** standing perpendicular on tiles — an extruded-letter headline treatment tied to the iso plane that I haven't seen elsewhere; paired with Space Grotesk + IBM Plex Sans + Space Mono coordinate labels. - **Differentiator 4 — A "tile-placing" interaction model:** isometric cube cursor-companion, surveyor's-flag link markers that flutter, road-draw-on-scroll, tile-snap spring entrances. Motion serves the metaphor of construction, not decoration. - Chosen seed/style: **isometric technical docs** (extended toward an isometric city-cartography atlas). - Frequency analysis avoided: glassmorphism (85%), hand-drawn (94%), card-grid layout (93%), warm-gradient palette (92%), photography imagery (98%), cursor-follow as a generic gimmick, dashboard/stat-grid structures, dopamine-neon. Leaned into the underused: isometric aesthetic, line-illustration imagery, broken-grid + layered-depth layout, monochrome-ish ink palette, and a calm cartographic tone.