# Design Language for monopole.city ## Aesthetics and Tone `monopole.city` is a **muji field guide to urban wireless infrastructure** — but stripped of every civic-bureaucratic coldness. Imagine a Japanese stationery brand decided to publish a walking guide to the cell towers, rooftop antennas, and signal monopoles that stitch a city together invisibly. The book is kraft-paper soft. The diagrams are ink-washed. The page is never loud but always precise. The mood is **grounded-earthy contemplative**: the kind of calm that comes from knowing where you are in a system. Think of a telecommunications surveyor's notebook: honest linen covers, mechanical pencil annotations, grid paper bleeding through translucent vellum overlays, a palette of undyed wool, raw clay, pencil graphite, and dried moss. The site is warm without being cozy, minimal without being cold, technical without being sterile. Tone is **conversational-curious** — the site speaks to you the way a knowledgeable colleague would while pointing up at a rooftop antenna: direct, unadorned, genuinely interested in showing you something you walk past every day without noticing. No marketing copy, no product pitches, no stat-grids selling infrastructure credibility. Just the quiet authority of someone who has mapped every monopole in the city and wants to show you why they matter. ## Layout Motifs and Structure The page uses a **persistent left sidebar** at `260px` fixed width. This is deliberate counter-programming: the registry shows `centered` at 86% and `full-bleed` at 71% — sidebar sits at 29% and has rarely been paired with a muji-earth aesthetic. The sidebar is not navigation in the conventional sense — it is a **field notebook margin**: a narrow vertical strip of linen-white (`#F5F0E8`) holding section markers, thin ink-rule dividers, and small annotated icon clusters that act as a running legend. The content area to the right is a **single reading column**, 680px wide, with generous `56px` vertical rhythm. The column is not centered — it anchors left against the sidebar's right edge, like a printed page that has been properly typeset. The negative space to the right of the column (roughly 200–400px at typical viewport widths) is not wasted: it holds **floating annotation cards** — small `240px` wide asides in kraft-paper tone (`#E8DFCC`) that drift at varying depths, connected to body text via single-pixel rule lines, the way a researcher annotates a manuscript in the margin. **Layered depth** is achieved without 3D transforms or parallax (avoided — 78% usage). Instead, depth is communicated through: - The sidebar sitting visually behind the content column via a `1px` right-border shadow in `#C4B89A` - Annotation cards floating at `z-index: 10` with a `2px solid #C4B89A` border and `box-shadow: 4px 4px 0 #C4B89A` - Section backgrounds alternating between `#F5F0E8` (linen) and `#EDE5D4` (warm parchment) — not a hard horizontal band but a diagonal `clip-path` slice at `2°`, like a paper fold - Pull-quotes set in a slightly larger `font-size` against a `#D9CDB8` background, with `2px` top/bottom rules in `#9E8E74` The header is **not sticky and not a navbar**. It is a single line of text at the very top of the sidebar — the domain name in small caps, pencil-weight (`font-weight: 200`), 11px, tracking `0.25em`. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Primary body — `Literata`** (variable, `opsz` 7–72, `wght` 300–900). Set at `opsz 14`, `wght 380`, `font-size: 17px`, `line-height: 1.75`. Literata is Google's editorial serif designed for long reading — it has the warmth of a printed page without the fussiness of Garamond. For the muji context, its ink-trap details read as intentional craft at small optical sizes. As viewport width grows past 1200px, `font-size` scales fluidly to `19px` via CSS `clamp(17px, 1.4vw, 19px)` — the variable axis does the optical work, not a breakpoint. - **Display headings — `DM Serif Display`** (regular 400, italic variant used for H1 only). `font-size: clamp(32px, 4vw, 52px)`, `letter-spacing: -0.02em`, `color: #3D3328`. DM Serif Display has low contrast strokes with a quiet authority — not the theatrical contrast of Didot, not the academic weight of Times. It fits the surveyor's-notebook fiction. - **Sidebar labels and annotations — `DM Mono`** (variable, `wght` 300–500). Set at `font-size: 11px`, `letter-spacing: 0.08em`, `text-transform: uppercase`, `color: #7A6E5F`. This is the pencil handwriting of the margin — technical, spare, legible at tiny sizes. - **Icon labels and UI microtype — `Noto Sans`** (variable). `font-size: 12px`, `wght: 400`, `color: #6B5E4F`. Noto Sans provides the neutral infrastructure label character — the kind of sans that belongs on a signal diagram. **Palette — earth-tones, ink-and-linen:** | Role | Name | Hex | |------|------|-----| | Page background (linen) | Undyed linen | `#F5F0E8` | | Section alt background | Warm parchment | `#EDE5D4` | | Annotation card | Kraft paper | `#E0D4BD` | | Primary text | Pencil graphite | `#3D3328` | | Secondary text / labels | Dried moss | `#7A6E5F` | | Tertiary / annotation text | Clay slip | `#9E8E74` | | Border / rule | Bone shadow | `#C4B89A` | | Accent — icon fill (active) | Terra cotta clay | `#A0614A` | | Accent — link underline | Oxidized copper | `#7D8B6A` | | Deep anchor (H1, strong) | Charcoal bark | `#2B2218` | No black. No white. The palette never goes to full contrast — the darkest tone is `#2B2218` and the lightest is `#F5F0E8`, giving a natural contrast ratio sufficient for readability without the harshness of `#000` on `#fff`. ## Imagery and Motifs The site is **icon-heavy** — the primary imagery language is a custom SVG icon set that depicts real telecommunications infrastructure objects: sectored antennas, ground-mount monopoles, rooftop tripods, coaxial cable spools, signal propagation cones, frequency spectrum diagrams. These are not decorative silhouettes — they are **semi-technical drawings** in the tradition of IEEE diagram symbols, but warmed by hand-drawn line quality: `1.5px` strokes with slight `stroke-linecap: round`, no fills except for the terra cotta accent (`#A0614A`) used sparingly to highlight the active element in a diagram. The sidebar holds a **persistent icon legend** — a vertical stack of 6–8 infrastructure icons at `24px` size, each with a DM Mono label at `9px`. When a section references that infrastructure type, the corresponding icon in the sidebar receives a subtle **bounce-enter** keyframe: it drops in from `translateY(-8px)` with `cubic-bezier(0.34, 1.56, 0.64, 1)` easing over `320ms`. This is the primary animation pattern — used only for icon state changes, never for page sections entering the viewport (which arrive statically, because stagger is at 54% and scroll-triggered at 36%). **Layered-depth motifs** are achieved through: - A `background-image` on the page using a subtle `repeating-linear-gradient` of `1px` horizontal rules at `28px` intervals in `rgba(60,45,30,0.06)` — grid paper bleeding through from beneath, visible only in the content area - Annotation cards connected to inline text anchors via an SVG `` element drawn in `#C4B89A`, `stroke-dasharray: 3 4`, giving the annotation-card-on-manuscript quality - Pull-quote backgrounds at `2px` diagonal clip-path offset, creating a paper-fold shadow without box-shadow abuse **No photography**. The registry shows photography/imagery overuse — this design opts for the muji principle: all imagery serves documentation, never decoration. ## Prompts for Implementation Build the site as **a single long-scroll field guide** organized into numbered sections that feel like pages of a physical notebook. The sidebar is `position: sticky; top: 0; height: 100vh` — it never moves, anchoring the reader while content scrolls past on the right. **Structure the scroll as five notebook sections:** 1. **Signal landscape** — what monopoles are, why they exist, told in second person, as if describing what the reader sees when they look up 2. **Anatomy of a monopole** — a tall SVG diagram in the content area with DM Mono annotations pointing to each component 3. **Urban placement logic** — a series of small infrastructure icons with annotated distances, written as field observations 4. **The invisible city** — frequency propagation as hand-drawn signal cones radiating from a city-block diagram 5. **Field notes** — a closing section in Literata italic, written as a personal field journal entry **Implementation priorities:** - The `bounce-enter` animation fires ONLY when the sidebar icon for the current section activates — implement as an `IntersectionObserver` that watches each section and applies the `bounceIn` class to the corresponding sidebar icon. `bounceIn` is: `@keyframes bounceIn { 0% { transform: translateY(-8px); opacity: 0; } 60% { transform: translateY(2px); opacity: 1; } 80% { transform: translateY(-2px); } 100% { transform: translateY(0); } }` with `animation: bounceIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards`. - Grid-paper texture: implement as a CSS `background-image: repeating-linear-gradient(transparent 0px, transparent 27px, rgba(60,45,30,0.06) 27px, rgba(60,45,30,0.06) 28px)` on the `.content-area` only — the sidebar stays linen-flat without the grid. - Annotation cards: use `position: absolute` within `position: relative` section containers, placed in the right negative space. On viewports below `1100px`, they collapse into inline `