SPA: visual identity — brand-derived link colour, display optical size, two-colour mark (owner decisions)

[mforce]

Part of the SPA look-and-feel pass (design review 2026-09-02). Sibling slices: numeric typesetting, elevation hierarchy, all-caps labels, table layout, dashboard rework, empty states. Do this last — the other six are defects; this one is a point of view and needs an owner decision before work starts.

Problem

• The palette is Slack's, token for token: #4a154b primary, #1264a3 link blue, #611f69 press (web/DESIGN.md, adopted in UI design revamp — distinctive visual identity #52). Blue links are a second hue that fights the "chromatic monotheism" the stylesheet header claims, and they do not follow the farm accent palettes (Per-farm theme — curated accent palettes in farm settings (API + SPA) #149) — a forest or terracotta farm still gets Slack-blue links.
• Type is Inter everywhere at one optical size. Fine for a data app, but headings and stat figures have no voice of their own.
• The brand mark is a generic single-stroke egg outline that will not survive favicon / PWA icon sizes well.

Proposal (each an owner decision)

1. Links derive from the brand. --link: var(--brand) in light, --stat-accent in night; hover a step lighter/darker. Verify 4.5:1 on --surface for every palette × theme (styles test). Blue leaves the app.
2. Optical size for display text. Inter Variable ships an opsz axis; font-variation-settings: "opsz" 32 on h1, h2, .stat-value gives tighter, more characterful display cuts at zero download cost — check the installed @fontsource-variable/inter import actually carries the axis (the default entry ships wght only; the opsz entry is a separate CSS file). If it does not, decide between adding that entry and choosing one display face for headings + figures only.
3. Two-colour mark: egg + yolk in --on-brand-mute, re-exported through web/icons-src for favicon / PWA / splash.

Acceptance

• Owner decision recorded on each of the three points before implementation.
• Link colour passes 4.5:1 on --surface and --surface-2 in light and night for all four palettes — pinned in styles.test.ts.
• No new font download unless the owner chose a display face.
• Icons regenerated through the existing icons-src pipeline, npm run verify:sw still green.
• Screenshots of login, dashboard, a list screen in both themes.

Siblings: #650 #651 #652 #653 #654 #655 #657

[mforce]

Held deliberately until the revamp direction is chosen — owner decision, 2026-09-02.

This issue's own header says "do this last — the other six are defects; this one is a point of view." That is exactly why it is waiting: its three questions (link colour, display type, brand mark) are the visual-identity questions, and the owner has asked to see whole design directions before deciding them piecemeal against the current Slack-derived palette.

Its six siblings are being finished around it: #653 + #655 as one PR, and #660 + #662 + #663 + #664 as another.

One of the three questions is already answered, incidentally. This issue asks to "check the installed @fontsource-variable/inter import actually carries the opsz axis (the default entry ships wght only)". It does — web/node_modules/@fontsource-variable/inter/files/ contains inter-*-opsz-normal.woff2 and inter-*-opsz-italic.woff2 alongside the wght files. So proposal 2 costs no new font download; it needs the opsz CSS entry imported rather than a display face chosen. That removes the fallback branch this issue hedged against.

The other two — links deriving from the brand, and a two-colour mark — stay open decisions.

[mforce]

Direction chosen — owner decision, 2026-09-02.

Three rendered directions were put in front of the owner (same seeded dashboard data in each: four houses, 327/298/341 collected with House C not yet recorded, 63,122 eggs on hand by grade, the 14-day trend, four real orders). They differed in point of view, not palette:

• A — the ledger. The screen is the working record. Ruled rows, numerals first, no cards.
• B — field-first. The hen-house phone is primary; one task per screen, glove-sized targets; desktop is the same parts wider.
• C — operations console. Status before records; a persistent attention strip; built for the night check.

Decision: a combination — B on the phone, A on the desktop, C's attention strip reduced to one line on both.

• Phone (the hen house): B's shape. One task per screen, house cards with the collected figure large, a single glove-sized Record target, bottom tabs.
• Desktop (the farm office): A's shape. Ruled ledger tables, numerals first, no cards, warm paper surface. The data-dense list screens (Sales, Stock, History, Audit, Feed, Water, Expenses) are tables, and A is the direction built for tables.
• Both: C's status strip becomes a single attention line at the top ("1 house still to record"), not a persistent bar.

Rationale: the app has exactly two real contexts — a phone in a shed and a desk in an office — and the two renders that were each designed for one of those contexts were B-phone and A-desktop. Judged honestly: the A-phone and C-phone mockups reused their desktop tables at 390px and overflow, so they were not a fair phone render of those directions; B-phone was the only phone render designed as a phone.

What this settles for this issue's three questions: they are answered by the design doc for the chosen direction, not piecemeal here — link colour follows A/B's warm palette (blue leaves the app), display optical size uses the installed Inter opsz axis (present in @fontsource-variable/inter, zero download), and the mark is decided alongside the phone tab-bar icons. The design doc lands in docs/designs/ and is linked from here before any product code changes.

Sequencing: the revamp is paused behind #562 (open P1 on the tenant write guard), by owner decision today. Design doc → grill → slices on epic #15 follow once #562 is merged. This issue stays held until then.

[mforce]

#562 is merged (#671, 4d1dfa37). The revamp resumes from here: direction as recorded above (B phone + A desktop + C's attention line); next step is the design doc in docs/designs/ answering this issue's three questions plus the IA and layout-system questions.