# Design Language for namu.systems ## Aesthetics and Tone namu.systems is a **Scandinavian urban kinetics lab** — imagine a Copenhagen agency that designs public transit infrastructure by day and throws underground warehouse parties by night. The aesthetic is the least-exploited corner of Scandinavian design: not the quiet white shelving of IKEA, not the hygge-candle warmth of a cozy living room, but **Scandinavian-after-dark** — functionalist bones lit from below by sodium-vapor streetlamps, where a perfectly spaced grid is animated by the restless energy of a city that never fully sleeps. The surfaces are raw but considered: warm concrete (#2B2520), aged brass hardware (#C49A3C), and the bone-white of freshly poured pavement (#F0EBE3). The tone is **kinetic authority** — not aggressive, not loud, but purposeful and relentless, like a tram arriving exactly on time at 2 AM. Every element moves with intention. Nothing drifts; everything cuts. The visitor feels the friction of warm pavement underfoot and the cool air off the harbor simultaneously. The conceit: namu.systems is a systems-design studio that understands cities the way a body understands breath — as a living rhythm, not an engineering problem. The page is their manifesto-as-city-map: districts of content, each one a neighborhood, navigated not by clicking but by physically moving through space (cursor drives the experience). ## Layout Motifs and Structure The structure is a **masonry canvas** — not Pinterest-style equal-column masonry, but **cartographic masonry**: irregular card-blocks laid out like city blocks on a surveyor's map, each one a different footprint but all snapping to an underlying 8px urban grid. The canvas spans 1440px at full width, with cards ranging from 160px to 680px wide and 120px to 480px tall. No two adjacent cards share both dimensions. **The city-block anatomy:** - Cards have no drop-shadows, no rounded corners. Sharp 1px borders in `#C49A3C` (brass) on a `#2B2520` (warm concrete) background — like the ruled lines on an old city planning document. - Card interiors use a strict internal typographic grid: 24px margin on all sides, no exceptions. Content overflows intentionally in 3 designated "overflow cards" where text bleeds past the card edge, clipped by CSS overflow, like a building facade that's too tall for the photo frame. - **Cursor-follow architecture** is the primary navigation mechanic. The entire masonry canvas translates on the X/Y axis by up to ±80px as the cursor moves — not a parallax depth effect but a literal panning of the city-map as though the visitor is holding the map and tilting it. Cards move as one unified plane. - A brass `#C49A3C` crosshair cursor replaces the default pointer: a minimal `+` glyph, 24×24px, with 1px arms extending to 10px from center, drawn as inline SVG in the cursor CSS. - One full-width card — the "boulevard card" — spans the entire 1440px at 200px tall, positioned vertically at the 40% mark of the page, functioning as a horizontal city boulevard that divides the composition into "upper district" and "lower district." **Spatial hierarchy:** - Upper district: 3–5 irregular cards carrying the studio identity, the core proposition, and 2–3 project thumbnails (illustrated, not photographic). - Boulevard card: a horizontal running ticker of city names (Oslo / Copenhagen / Stockholm / Reykjavik / Helsinki) in Bebas Neue at 96px, scrolling left at 40px/s, color `#C49A3C` on `#2B2520`. - Lower district: 4–6 smaller cards carrying methodology fragments, a contact card, and 1 "live card" with a CSS-animated water-bubble field. ## Typography and Palette **Type system — three voices, no redundancy:** - **Primary display — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)** (weight 400, all-caps only): The load-bearing voice for all headlines, card titles, the boulevard ticker, and the wordmark. Used at a fluid scale: `clamp(3.2rem, 8vw, 9.6rem)` for hero text, `clamp(1.8rem, 3.2vw, 3.6rem)` for card titles. Letter-spacing: `0.08em` always. Never italic, never lowercase. This is the city signage voice. - **Secondary body — [DM Sans](https://fonts.google.com/specimen/DM+Sans)** (weight 300 and 500, variable): The functional voice for all paragraph text, captions, and metadata. Used at 16px/28px leading for body, 13px/20px for captions. Weight 300 for descriptive prose, 500 for fragment labels and short declarative statements. DM Sans has the clean humanist warmth that complements Bebas without competing — it is the pedestrian infrastructure to Bebas Neue's city signage. - **Accent mono — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** (weight 400): Used exclusively for system-layer details: coordinates (e.g., `59.9139° N, 10.7522° E`), version strings, timestamp fragments, and the crosshair readout that follows the cursor showing normalized X/Y position as `[0.47, 0.62]`. Size: 11px/16px, color `#8A7F74`. **Palette — warm concrete after dark:** | Role | Hex | Name | |------|-----|------| | Page background | `#1C1815` | Charcoal asphalt | | Card surface | `#2B2520` | Warm concrete | | Card border / brass accent | `#C49A3C` | Aged brass | | Body text | `#F0EBE3` | Bone white | | Secondary text | `#A89B8E` | Worn limestone | | Metadata / mono text | `#8A7F74` | Faded chalk | | Hover glow | `#E8B84B` | Sodium-vapor amber | | Water bubble fill | `#3D3028` | Deep shadow warm | | Water bubble edge | `#C49A3C33` | Brass translucent | **No gradients. No drop shadows. No glassmorphism.** All depth comes from solid-color layering and 1px brass borders. ## Imagery and Motifs **Zero photography. Zero stock images. Zero icon fonts.** The visual vocabulary is built from two bespoke motif systems rendered entirely in inline SVG and CSS animation: **1. Water-bubble field (the living motif — the "live card").** One card in the lower district contains a full-card CSS/SVG water-bubble simulation: 18–24 circles of varying radii (8px to 60px), each with: - Fill: `#3D3028` (slightly warmer than card background, creating a subtle raised-bubble read) - Stroke: 1px `#C49A3C33` (brass at 20% opacity — barely visible, like a surface-tension membrane) - Animation: each bubble drifts upward at a unique velocity (12s–28s per cycle), oscillating horizontally ±6px on a sine curve, fading to 0 opacity as it nears the card top (simulating surfacing) - No new bubbles enter from outside; the pool is finite and recirculates — each bubble that exits the top re-enters from a random X position at the bottom with a new random radius - Cursor proximity: bubbles within 80px of the cursor increase stroke opacity to `#C49A3CB3` (70%) and slow their drift by 40% — they notice the visitor **2. City-urban line-drawing motifs (decorative SVG, not photographs).** Three cards in the upper district carry bespoke single-weight (1.5px stroke, `#C49A3C`, no fill) architectural line-drawings of urban infrastructure details: - **Card A:** A tram overhead wire intersection — 6 converging wire lines meeting at a single junction point, drawn as radiating strokes from a small circle - **Card B:** A manhole cover pattern — concentric circles with radial dividers, like a city utilities map symbol - **Card C:** A bridge cable detail — parallel diagonal strokes crossing a single horizontal at rhythmic intervals, like a suspension bridge deck seen from below These are not icons — they are **plan-view infrastructure fragments**, the kind found on engineering drawings, treated as art objects. Each fits within a 200×200px viewport with 20px internal margin. **3. Crosshair cursor motif.** The custom `+` crosshair (24×24px, inline SVG, `#C49A3C`) leaves no trail but its coordinates are reported in JetBrains Mono in the page's bottom-right corner: `[0.47, 0.62]` updating in real-time. This makes the visitor feel like a surveyor measuring the city-map. ## Prompts for Implementation Build namu.systems as **a city-map you hold in your hands** — a single HTML document where the masonry canvas is the entirety of the experience. There is no scroll hierarchy. There is no hero-to-footer journey. The visitor arrives at the map, moves through it, and leaves. **Structural blueprint:** 1. **Page arrival (0 → 500ms).** Background `#1C1815` paints immediately. Cards appear one by one in a staggered entrance — not from invisible to visible, but from `transform: scale(0.92)` and `opacity: 0` to `scale(1)` and `opacity: 1`, 60ms offset per card, `ease-out` cubic-bezier(0.22, 1, 0.36, 1). The cursor crosshair appears last, at 500ms, announcing that the navigation mechanic is now active. 2. **Cursor-follow canvas pan.** The entire `.masonry-canvas` element listens to `mousemove` on `document`. Target X/Y translation is computed as `(cursor.x / viewport.width - 0.5) * -160` for X and `(cursor.y / viewport.height - 0.5) * -160` for Y — creating a ±80px pan range. Apply via `requestAnimationFrame` with lerp factor 0.06 (slow, weighty, like holding a heavy paper map). On mobile / touch: disable entirely, canvas is static. 3. **Boulevard ticker card.** A `
` at 200px tall, full viewport width, `overflow: hidden`. Inner `` contains the city names repeated 4× with `—` separators, absolute positioned, animated with CSS `@keyframes ticker` from `translateX(0)` to `translateX(-50%)` at 40px/s. No JS required. Cities: `OSLO — COPENHAGEN — STOCKHOLM — REYKJAVIK — HELSINKI`. 4. **Water-bubble live card.** One `
` in the lower district. Contains an `` with 20 `` elements. Each circle gets a unique CSS animation via `animation-name: bubble-drift-N` (where N is 1–20), with `animation-duration` between 14s and 28s, `animation-delay` between -0s and -20s (negative for pre-started state), `animation-timing-function: linear`, `animation-iteration-count: infinite`. JS mousemove listener on the card tracks cursor proximity per-bubble and mutates `stroke-opacity` and `animation-play-rate` (via `el.style.animationPlaybackRate`) for nearby bubbles. 5. **Card hover state.** On `mouseenter`, each card border transitions from `#C49A3C` to `#E8B84B` over 120ms. The card's Bebas Neue title simultaneously transitions from `color: #F0EBE3` to `color: #E8B84B` — the sodium-vapor amber bleeds from border into text, as though the card is lit from within. 6. **Coordinate readout.** Bottom-right corner, fixed position, `z-index: 1000`. A `
` with JetBrains Mono 11px, color `#8A7F74`. Updated via JS `mousemove` to show `[0.47, 0.62]` format (2 decimal places, normalized 0–1 range). On mobile: show `[—, —]`. 7. **No scroll indicator. No "back to top." No footer.** The map has no top or bottom — it is navigated laterally via cursor. The experience ends when the visitor closes the tab. **CSS architecture:** - Single CSS custom properties block at `:root` with all palette values as `--color-*` variables - No CSS framework. Masonry layout via CSS `columns` property with `column-gap: 0` and `break-inside: avoid` on cards, OR via absolute positioning with a JS masonry calculation on load (preferred for precise block-placement control) - Transition only `transform`, `opacity`, `color`, `border-color` — never `width`, `height`, or `layout` properties **AVOID:** CTAs, pricing tables, testimonial carousels, stat counters, newsletter forms, social proof badges, "Learn More" buttons, hamburger menus. This is a manifesto, not a landing page. ## Uniqueness Notes **Chosen seed (per assignment):** - aesthetic: **scandinavian** (3% corpus frequency — underused, distinctive) - layout: **masonry** (extremely low corpus frequency — rare, differentiating) - typography: **bebas-bold** (5% corpus frequency — low, well-matched to urban signage) - palette: **warm** (88% corpus frequency — common, but subverted here: warm-on-dark rather than warm-on-white, flipping the usual connotation) - patterns: **cursor-follow** (not measurably present in corpus — essentially novel) - imagery: **water-bubbles** (not present in corpus frequency report — first use) - motifs: **city-urban** (not present in corpus frequency report — first use) - tone: **energetic** (not present in corpus frequency — distinct from dominant "friendly/professional/authoritative" triad) **Differentiators against the 336-design corpus:** 1. **Cursor-as-navigation, not cursor-as-pointer.** The corpus has 77% parallax and 54% stagger — both passive scroll-triggered patterns. namu.systems uses cursor position as the primary spatial navigation: moving the mouse pans the entire masonry city-map. This is the first site in the corpus where the visitor's cursor is the joystick, not just a click mechanism. 2. **Scandinavian-after-dark, not Scandinavian-minimal.** Scandinavian design in the corpus (3%) defaults to white backgrounds, clean spacing, and soft neutrals. namu.systems runs Scandinavian functionalism on a `#1C1815` charcoal-asphalt background with brass-hardware accents — the same DNA, a completely opposite chromatic register. The warm palette seed is fulfilled not through beige-and-cream but through sodium-vapor amber and aged brass on dark concrete. 3. **City-block masonry with a living district.** The corpus's masonry uses (where they appear) are decorative grid variations. namu.systems makes masonry structural and narrative: the canvas *is* a city, the cards *are* districts, the boulevard ticker *is* a street, and the bubble-field card *is* a harbor. The spatial metaphor drives every layout decision, not just aesthetics. 4. **Avoided corpus overuse:** hand-drawn (59%), editorial (51%), terminal (30%), botanical (27%), centered layout (86%), parallax (77%), warm-on-white palette, mono typography (76%). None of these appear in namu.systems.