UI redesign: condensed-sans ledger style with logo in the zero hero #17

New issue

Closed

opened 2026-04-17 16:52:09 -06:00 by claude-code · 0 comments

claude-code commented

2026-04-17 16:52:09 -06:00

Collaborator

Goal

Port the condensed-sans mockup (docs/mockups/month-condensed-sans.html) into the real app. The current UI reads as a generic CRUD scaffold; the new look is distinctive, denser, and anchored to the Quartermaster logo.

Changes

Typography

Swap system-ui / Inter-era stack for Barlow Condensed throughout (weights 300-800 with italic)
Single family for everything: UI chrome, headings, body, numbers
Numbers use lining + tabular figures (font-feature-settings: "lnum" 1, "tnum" 1 and font-variant-numeric: tabular-nums)
Italic body for notes and tagline; uppercase tracked labels for section titles, state badges, add-button hints

Colour palette

Warm cream paper background (#f5efe0) with subtle layered radial gradients for warmth
Warm near-black ink (#1a1814)
Burgundy accent (#732629) sampled directly from the logo shield
Sage, ochre, indigo for balanced / positive / negative / new-in-month states

Layout

Drop the existing top header block ("Quartermaster / Household budget")
Month page: month nav line → back-link → zero hero → groups → colophon
Budget page: month nav / picker → zero hero → groups → colophon
Zero hero carries the logo on the left. Big zero number in the centre, applied / planned flanking on month page; single number on budget page
Groups rendered as <details> with hairline chevron rotating via CSS on [open]
Sections live tight inside groups, with dashed separators between siblings
Entry rows are dense: name + planned + applied + delete on one row, progress bar riding the bottom border, notes collapsed into the row and hidden when empty (revealed on hover)
Primary Debt Target rendered as a single highlighted row with a burgundy left bar and ↳ margin glyph
Mobile: zero hero collapses to a single stacked column; entry rows narrow

Assets

Move cleaned logo assets from docs/mockups/assets/ to src/quartermaster/static/
Use logo-full.png as the primary brand mark

Deferred state-aware touches

Edit-locked closed month: replace the current disabled-inputs treatment with a desaturated paper tone and an "Archived" watermark. Out of scope here.
Progress bars on the budget page: the budget has no applied column, so bars do not render there.

Acceptance criteria

src/quartermaster/static/app.css carries the condensed-sans design
src/quartermaster/templates/base.html loads Barlow Condensed from Google Fonts
Month page, budget page, and month create-flow all render in the new language
Logo appears in the zero hero on both pages
Existing functionality (HTMX edits, OOB swaps, deviation tags, state badges, close gate) works unchanged
Full pytest suite passes after selector / markup tweaks
Live smoke walks Planning → Active → Close → Reopen on throwaway DB

Out of scope

Any functional changes (routes, service layer, DB)
Active → Planning reverse transition
Closed-month archived tone (follow-up)

## Goal Port the condensed-sans mockup (`docs/mockups/month-condensed-sans.html`) into the real app. The current UI reads as a generic CRUD scaffold; the new look is distinctive, denser, and anchored to the Quartermaster logo. ## Changes ### Typography * Swap system-ui / Inter-era stack for **Barlow Condensed** throughout (weights 300-800 with italic) * Single family for everything: UI chrome, headings, body, numbers * Numbers use lining + tabular figures (`font-feature-settings: "lnum" 1, "tnum" 1` and `font-variant-numeric: tabular-nums`) * Italic body for notes and tagline; uppercase tracked labels for section titles, state badges, add-button hints ### Colour palette * Warm cream paper background (`#f5efe0`) with subtle layered radial gradients for warmth * Warm near-black ink (`#1a1814`) * Burgundy accent (`#732629`) sampled directly from the logo shield * Sage, ochre, indigo for balanced / positive / negative / new-in-month states ### Layout * Drop the existing top header block ("Quartermaster / Household budget") * Month page: month nav line → back-link → zero hero → groups → colophon * Budget page: month nav / picker → zero hero → groups → colophon * **Zero hero** carries the logo on the left. Big zero number in the centre, applied / planned flanking on month page; single number on budget page * Groups rendered as `<details>` with hairline chevron rotating via CSS on `[open]` * Sections live tight inside groups, with dashed separators between siblings * Entry rows are dense: name + planned + applied + delete on one row, progress bar riding the bottom border, notes collapsed into the row and hidden when empty (revealed on hover) * Primary Debt Target rendered as a single highlighted row with a burgundy left bar and `↳` margin glyph * Mobile: zero hero collapses to a single stacked column; entry rows narrow ### Assets * Move cleaned logo assets from `docs/mockups/assets/` to `src/quartermaster/static/` * Use `logo-full.png` as the primary brand mark ### Deferred state-aware touches * Edit-locked closed month: replace the current disabled-inputs treatment with a desaturated paper tone and an "Archived" watermark. Out of scope here. * Progress bars on the budget page: the budget has no applied column, so bars do not render there. ## Acceptance criteria * [ ] `src/quartermaster/static/app.css` carries the condensed-sans design * [ ] `src/quartermaster/templates/base.html` loads Barlow Condensed from Google Fonts * [ ] Month page, budget page, and month create-flow all render in the new language * [ ] Logo appears in the zero hero on both pages * [ ] Existing functionality (HTMX edits, OOB swaps, deviation tags, state badges, close gate) works unchanged * [ ] Full pytest suite passes after selector / markup tweaks * [ ] Live smoke walks Planning → Active → Close → Reopen on throwaway DB ## Out of scope * Any functional changes (routes, service layer, DB) * Active → Planning reverse transition * Closed-month archived tone (follow-up)