Flo
9a958c0051
Editorial single-page viewer for the City of Münster's 2026/2027 budget draft, built as an Astro v6 SPA with a 4-level zoomable icicle (Produktbereich → Produktgruppe → Category → Breakdown). Highlights: - Multi-flow data layer over the official open-data CSVs (Aufwendungen + Erträge, 2008–2028) with overlap reconciliation across plan years. - Year slider as a 21-year mini-histogram of both flows; drag-to-scrub and click-to-jump, with bars morphing via CSS transitions on SVG geometry attributes. - Vertically centred icicle with year-outline rectangles framing each year's relative budget size, à la Bostock's animated treemap. - Headline "ausgibt / einnimmt" toggle; sidebar Aufwendungen/Erträge rows double as flow toggles. Active flow in Aufwendungen-purple / Erträge-orange (OKLCH). - Click-to-zoom via path-keyed lookup with ZOOM_COL_BOUNDS that reallocate the depth axis per zoom state. Zoomed item moves to the sidebar; canvas shows its descendants only (no adjacent-block leaks). - Sidebar shows path-specific Aufwendungen/Erträge/Saldo plus the source-PDF Beschreibung; Erläuterungen behind a collapsed details. - Build-time PDF extraction (scripts/extract-pg-sections.mjs) parses 68 Produktgruppen' Beschreibung + Erläuterungen sections from Band 1, including 10 cells of structured Mio.-€ breakdowns (Steuern, Transferaufwendungen, etc.) that drive the level-4 view. - URL state sync for path, year, and flow via history.replaceState so any zoom is shareable. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
3.4 KiB
.impeccable.md — Design Context for ms-haushalt
Design Context
Users
Engaged Münster citizens and journalists. Mixed audience: some have read the actual Haushaltsplan, most haven't. They arrive because the new 2026/2027 draft is news, or because they want to make sense of "where their tax money goes." They're intelligent, time-pressured, and German-speaking. Many will share specific findings on social media or cite them in articles, so deep-linking and quoteable numbers matter. They're not finance experts — but treat them like adults, not like they need pictograms of houses and books.
Brand Personality
Editorial, generous, opinionated. This is not a municipal portal and not a dashboard — it's a piece of civic data journalism, the kind of thing the SZ or ZEIT graphics desk would publish. It has a point of view about what's interesting in the data and uses generous space, strong typography, and confident hierarchy to make that view land.
Voice: composed, curious, never cute. Captions, not slogans. Numbers presented with precision and context, never as "look at this big number!" hero stats.
Aesthetic Direction
Print-rooted editorial. Strong serif (or strong slab) display type for headlines and section openers. Asymmetric grid — not the seven-equal-cards reflex. Generous whitespace and rhythmic spacing. Off-white "paper" background with one or two confident accent colors that come from the data, not from a default palette.
The treemap is the protagonist. Everything else — typography, captions, side annotations, the time slider — frames it like a magazine spread frames its lead photograph.
References to lean toward: NYT/SZ/ZEIT graphics desks; the Pudding's longer pieces; Christoph Niemann's editorial illustration restraint; Massimo Vignelli's NYC subway wayfinding (typographic confidence + clarity). Swiss-grid discipline applied to a warmer print sensibility.
Anti-references (do not look like):
- Generic SaaS dashboards (card grids, primary-action buttons everywhere)
- German municipal websites (boxy, default fonts, forms-first)
- AI-slop hero pages (gradient text, glassmorphism, purple-blue gradients, neon accents on dark, oversized rounded-icon-above-heading)
- PowerPoint infographics (cute icons, decorative chart junk, pie charts, clip art)
Theme
Light only, paper-feeling. Off-white background tinted slightly warm (think uncoated stock, not pure white). Treemap tiles carry the saturated color; the rest of the page is restrained.
Language
German only. Source data is German, audience is local, register matches the underlying budget docs (formal but not bureaucratic).
Design Principles
- The treemap is the page. Layout, type, color, and motion all serve the act of reading it. No competing focal points.
- Print logic first. Asymmetric, typographic, quiet. If it could appear in a Sunday paper supplement, it's on track.
- Numbers in context, never alone. Every figure is paired with what it's a share of, how it changed, or what it pays for. Bare figures are forbidden.
- Data does the talking. Where copy exists, it points at the data — it doesn't compete with it. No editorializing tone, no exclamation marks, no "did you know?" framings.
- Restraint is the accent. One serif display face, one body face, one or two functional sans usages, one accent color, one motion vocabulary. Variety comes from rhythm, not from adding more elements.