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>
38 lines
3.4 KiB
Markdown
38 lines
3.4 KiB
Markdown
# .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
|
|
1. **The treemap is the page.** Layout, type, color, and motion all serve the act of reading it. No competing focal points.
|
|
2. **Print logic first.** Asymmetric, typographic, quiet. If it could appear in a Sunday paper supplement, it's on track.
|
|
3. **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.
|
|
4. **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.
|
|
5. **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.
|