Typography: tabular numerals, date prominence, panel hierarchy #103

Closed
opened 2026-07-28 06:03:11 +00:00 by claude-bot · 1 comment

Severity: LOW (but high identity return)

The assessment

From the design review, quoted directly:

"Nothing is ugly; nothing is considered either — it reads as a competent generic admin panel
wearing cream."

The palette itself is sound and appropriately archival: warm neutrals, a restrained blue accent,
semantic colours used semantically, and a near-black canvas that correctly lets photographs
dominate — the one place the interface genuinely recedes, as it should. The execution around it is
default-depth.

Specific gaps

  • A Windows system font stack (styles.css:8: "Segoe UI", Tahoma, …) carrying an
    "archival" identity.
  • No tabular numerals anywhere, despite docs/circa-ui-spec.md §6.3 explicitly requiring them.
    Dates are the product's central data type, and they are set in proportional figures — so evidence
    rows, version numbers, and any future histogram misalign.
  • No typographic hierarchy in the panel. Every section heading is the same 10.5px uppercase
    grey whisper, so the panel has labels but no structure.
  • The effective date has no visual rank. It is body-size <strong> — the single most important
    datum on screen.
  • The signature element is absent. The histogram and filmstrip band that
    docs/circa-wireframes.md calls "the most distinctive part of the interface" exists only as dead
    CSS.

Scope, in order of return

  1. font-variant-numeric: tabular-nums on evidence values, dates, and stats. One line, spec-required.
  2. Make the effective date the largest text in the right panel.
  3. A deliberate type pairing — for example a humanist text face for UI plus a slab or old-style
    serif reserved for the effective date and photo dates, making the dates the typographic
    protagonists of an application about dating photographs.
  4. Genuine heading hierarchy in the panel.

The histogram is tracked separately, since it needs Phase 2 data.

Substance versus taste

Items 1 and 2 are substance — spec-backed and about legibility and rank. Items 3 and 4 are taste,
offered as a recommendation.

Done when

  • Numerals are tabular wherever dates or figures are shown
  • The effective date is visually dominant in the panel
  • Section headings form a real hierarchy

References

  • frontend/src/styles.css:6-44
  • docs/circa-ui-spec.md §6.3
  • docs/circa-wireframes.md §7.3
## Severity: LOW (but high identity return) ## The assessment From the design review, quoted directly: > "Nothing is ugly; nothing is *considered* either — it reads as a competent generic admin panel > wearing cream." The palette itself is sound and appropriately archival: warm neutrals, a restrained blue accent, semantic colours used semantically, and a near-black canvas that correctly lets photographs dominate — the one place the interface genuinely recedes, as it should. The execution around it is default-depth. ## Specific gaps - **A Windows system font stack** (`styles.css:8`: `"Segoe UI", Tahoma, …`) carrying an "archival" identity. - **No tabular numerals anywhere**, despite `docs/circa-ui-spec.md` §6.3 explicitly requiring them. Dates are the product's central data type, and they are set in proportional figures — so evidence rows, version numbers, and any future histogram misalign. - **No typographic hierarchy in the panel.** Every section heading is the same 10.5px uppercase grey whisper, so the panel has labels but no structure. - **The effective date has no visual rank.** It is body-size `<strong>` — the single most important datum on screen. - **The signature element is absent.** The histogram and filmstrip band that `docs/circa-wireframes.md` calls "the most distinctive part of the interface" exists only as dead CSS. ## Scope, in order of return 1. `font-variant-numeric: tabular-nums` on evidence values, dates, and stats. One line, spec-required. 2. Make the effective date the largest text in the right panel. 3. A deliberate type pairing — for example a humanist text face for UI plus a slab or old-style serif reserved for the effective date and photo dates, making *the dates* the typographic protagonists of an application about dating photographs. 4. Genuine heading hierarchy in the panel. The histogram is tracked separately, since it needs Phase 2 data. ## Substance versus taste Items 1 and 2 are substance — spec-backed and about legibility and rank. Items 3 and 4 are taste, offered as a recommendation. ## Done when - [ ] Numerals are tabular wherever dates or figures are shown - [ ] The effective date is visually dominant in the panel - [ ] Section headings form a real hierarchy ## References - `frontend/src/styles.css:6-44` - `docs/circa-ui-spec.md` §6.3 - `docs/circa-wireframes.md` §7.3
claude-bot added this to the v0.3.0 milestone 2026-07-28 06:03:11 +00:00
Author

Done in afdafdd, alongside #97, #102 and #104. CI run #59 green.

Done when:

  • Numerals are tabular wherever dates or figures are shown
  • The effective date is visually dominant in the panel
  • Section headings form a real hierarchy

All four scope items landed, including the two the issue marked as taste. @rbrooks chose a pairing from a rendered specimen rather than from a description — four candidates drawn in the real panel, in Circa's real palette, with only the type varying.

Source Sans 3 + Source Serif Pro, one Adobe superfamily, 49.1 KB of Latin WOFF2, self-hosted with both OFL 1.1 licences and a provenance record in frontend/src/assets/fonts/README.md.

Self-hosting is a privacy decision here before it is a performance one, and the README says so: a CDN font request would tell a third party that someone is reviewing family photographs, when, and from which address. That is not a thing this application should emit.

The sans is the variable cut and the serif a static instance, which looks inconsistent and is deliberate. The interface uses three sans weights, so one variable file at 28.1 KB replaces three statics at roughly 60 KB. The serif is used at one weight for dates, where the variable cut measured 50.6 KB to deliver exactly what a 21.0 KB static delivers. Measured, both times, rather than assumed — the first serif vendored was the variable one and it was swapped after weighing it.

Tabular figures are set once at the root rather than per component. §6.3 requires them, and the failure they prevent — a column of dates that does not line up — occurs everywhere digits do, so opting in component by component guarantees somewhere gets missed.

The effective date now uses the serif at 2rem, and is the only place in the interface that face appears. That is what makes a date read as a date rather than as another field; it was previously body-size <strong>, ranked no higher than the filename beside it.

On the tension with #102, since these landed together. #102 asked for real headings "styled to look exactly as they do now" while this issue diagnosed that uniform styling as the defect — "the same 10.5px uppercase grey whisper". Building them separately would have meant #102 shipping deliberately-identical styling for #103 to rewrite days later. Done together, the headings became real elements and gained rank in one pass.

The histogram and filmstrip band remain absent, as the issue notes — it needs Phase 2 data and is tracked separately. Nothing here pretends otherwise.

Done in afdafdd, alongside #97, #102 and #104. CI run [#59](https://git.rhoving.com/rbrooks/Circa/actions/runs/59) green. **Done when:** - [x] Numerals are tabular wherever dates or figures are shown - [x] The effective date is visually dominant in the panel - [x] Section headings form a real hierarchy **All four scope items landed, including the two the issue marked as taste.** @rbrooks chose a pairing from a rendered specimen rather than from a description — four candidates drawn in the real panel, in Circa's real palette, with only the type varying. **Source Sans 3 + Source Serif Pro**, one Adobe superfamily, **49.1 KB** of Latin WOFF2, self-hosted with both OFL 1.1 licences and a provenance record in `frontend/src/assets/fonts/README.md`. Self-hosting is a **privacy** decision here before it is a performance one, and the README says so: a CDN font request would tell a third party that someone is reviewing family photographs, when, and from which address. That is not a thing this application should emit. The sans is the **variable** cut and the serif a **static** instance, which looks inconsistent and is deliberate. The interface uses three sans weights, so one variable file at 28.1 KB replaces three statics at roughly 60 KB. The serif is used at one weight for dates, where the variable cut measured 50.6 KB to deliver exactly what a 21.0 KB static delivers. Measured, both times, rather than assumed — the first serif vendored was the variable one and it was swapped after weighing it. Tabular figures are set **once at the root** rather than per component. §6.3 requires them, and the failure they prevent — a column of dates that does not line up — occurs everywhere digits do, so opting in component by component guarantees somewhere gets missed. The effective date now uses the serif at 2rem, and is the only place in the interface that face appears. That is what makes a date read as a date rather than as another field; it was previously body-size `<strong>`, ranked no higher than the filename beside it. **On the tension with #102, since these landed together.** #102 asked for real headings "styled to look exactly as they do now" while this issue diagnosed that uniform styling as the defect — "the same 10.5px uppercase grey whisper". Building them separately would have meant #102 shipping deliberately-identical styling for #103 to rewrite days later. Done together, the headings became real elements *and* gained rank in one pass. **The histogram and filmstrip band remain absent**, as the issue notes — it needs Phase 2 data and is tracked separately. Nothing here pretends otherwise.
Sign in to join this conversation.
No description provided.