Design review · 9 August 2026
Each critic reviewed the chosen direction independently, briefed on one lens only, and was told to report every finding including low-severity and uncertain ones — so that a synthesis step filters rather than the critic self-censoring. They had no access to each other's conclusions.
The craft critic counted seven redundant heraldic ornaments and called symbol count — not asset quality — the lever between “expensive” and “themed”. Hierarchy, briefed only on layout, independently said the greeting competes with the urgent item. Mobile, briefed only on 390px, independently said the masthead eats the top quarter of the screen. None of them saw the others' briefs.
Accessibility estimated brass small-caps on ivory at roughly 2:1 and called it a WCAG failure. Craft, reasoning purely about material, said flat mustard gold reads cheap at hairline width and wants a warmer, desaturated brass. Same fix, arrived at from contrast maths and from taste respectively.
The three row actions this page needs — done, snooze, dismiss — appear in none of the four renders, and three inline buttons will not fit at 390px.
And the good-day state is undesigned. Every render shows a manufactured urgent item, but “nothing needs you” is the common case on a page checked daily — and it is usually designed last, which is how a dashboard ends up with a hole where the alert used to be.
9 findings
Will this look genuinely well-made in CSS, or like cheap pastiche?
| Severity | Confidence | Problem | Fix |
|---|---|---|---|
| high | high | Seven distinct heraldic ornaments do the same job redundantly — ghost crest watermark, wax seal, laurel wreath, monogram ligature, quill, service bell and a handwritten concierge signature. This is what tips it into cosplay. | Cut all seven and replace them with nothing decorative. Let the brass hairline system and small-caps treatment carry the register alone. If a mark is truly needed, one flat geometric initial in a plain circle — no crest, wreath or seal imagery. |
| high | high | “Good morning, Mr James Harrington” and a signed note from “Arthur Pembroke, Head Concierge” personify a fictional staff member. The dashboard is talking as though a butler wrote it. | Drop the persona entirely. State facts plainly — “Renewal due today” — with no signed note block. |
| med | med | No real typeface had been named. | Display serif: Fraunces (variable, open source, has a soft optical setting that reads letterpress without effects) or Newsreader for something quieter; fallback Georgia, serif. Neither has true OpenType small caps at this weight — fake it with tracked-out true caps at reduced size. All numerals and data in Inter, which has real tabular lining figures, even inside serif cards. |
| high | high | Gold as a flat mustard hex reads cheap, especially at 1px hairline width. | Warm brass, not yellow — roughly #B08D3E to #C9A961, more orange-leaning and more desaturated than a typical “gold” pick. Reserve gradients for elements with real height (buttons, icon fills, rules ≥3px); on a 1px hairline a gradient is invisible and flat colour is the only lever. |
| high | med | The green risks going muddy if it is desaturated toward near-black to look “premium”. | Keep real chroma: hue 150–160°, saturation 30–40%, lightness 12–16% (about #14332A–#1B3D2E) against a genuinely warm ivory near #F5EEDD, not a grey-beige. Muddiness comes from killing saturation, not from darkness. |
| med | high | Letterpress deboss is a real risk, and the ghost-crest watermark is already a 2010s low-contrast-logo artefact. | Never apply a text-shadow emboss to headline type. Approximate ink-on-warm-paper with colour alone — dark green text at 85–90% opacity on ivory. Reserve inset shadow for true UI depressions such as input fields. |
| med | high | The rejected estate-ledger cousin sets big totals in a serif — decorative but harder to scan, and it is the clearest cautionary case (gold corner brackets, wax seal, script logotype, Latin mottoes). | In dense regions borrow the Instrument's discipline directly: numbered sections, a single grotesque for all numerals with tabular alignment, square indicator lamps in one accent, and fine grey hairlines rather than brass. Save brass for the calm regions. |
| low | high | Claret is used well as a single reserved urgent accent in both club-desk renders. Flagged only so it survives the ornament cull. | Keep as is. |
| high | high | The biggest single lever. Expensive brands under-decorate. The determinant of “expensive” versus “themed” is symbol count, not any individual asset's quality. | Every ornament cut should be replaced by negative space and rule discipline, never by a substitute icon. Cut to at most one quiet motif — brass hairline plus small caps — and let material and spacing do the rest. |
13 findings
WCAG 2.2 AA, and the practical reality that this page's job is signalling alarm.
| Severity | Confidence | Problem | Fix |
|---|---|---|---|
| high | med | Brass small-caps headings on ivory estimate at roughly 2:1 — a clear failure of SC 1.4.3, which needs 4.5:1 for normal text. | Darken to a bronze or olive that reaches 4.5:1, or restrict pale brass to large decorative labels only and keep functional headings near-black. |
| med | low | The same brass-on-green pattern in the sidebar estimates around 5.6:1 — clears AA but is marginal with thin small-caps letterforms. | Verify actual values against a contrast calculator and do not let the brass trend lighter or thinner. |
| med | med | On desktop, urgency is signalled by claret text colour alone with no icon — an SC 1.4.1 risk. The phone view already solves it with a filled circle and an exclamation glyph. | Carry the phone treatment onto desktop. |
| low | med | Priority squares pair colour with a text label today, which is correct, but the pattern is fragile if a condensed view ever drops the label and keeps the square. | Document that the text label is load-bearing, not decorative. |
| med | low | Square status lamps render at roughly 6–10px; orange on off-white estimates about 3.3:1, borderline against SC 1.4.11's 3:1 non-text minimum. A lighter flapping shade would drop below it. | Floor lamp size at 8×8 CSS px, hold ≥3:1, and differentiate adjacent states by shape or fill pattern as well as hue. |
| high | high | No focus-visible state appears in any render. A default blue ring would contrast poorly against green chrome and could merge visually with brass hairlines. | Design an explicit ring meeting SC 2.4.11's 3:1, tested against both the green and the ivory field. |
| low | med | Decorative brass hairlines sit in the same visual register as any future coloured status rule. | Reserve hairline-weight brass for structure only; status stays block- or icon-based. |
| med | med | Small caps at small sizes reduce x-height and legibility, compounding the contrast problem across a page with heavy label density. | Small caps only at ≥14px with the tracking already shown; all data values mixed-case at ≥16px. |
| high | med | The phone bottom navigation's icon-plus-label targets look under the 24×24 CSS px minimum for SC 2.5.8. | Confirm every tap target including padding is ≥24×24px — or remove the bar, which other critics recommend. |
| med | low | Row chevrons read as small standalone glyphs; it is unclear whether the row or only the glyph is tappable. | Make the entire row the hit target regardless. |
| high | med | A system-status row differentiating state by black-versus-orange square fill only, with no adjacent status word, is a likely SC 1.4.1 violation. | Add a text state or a shape/pattern difference — not fill colour alone. |
| med | med | Claret (concierge urgent) and orange (instrument alert) are two different alert hues. On a hybrid screen showing both, hue cannot be mapped to severity without labels. | Pick one alert-colour hierarchy system-wide rather than a per-region hue. |
| low | high | The claret badge on the phone view — maroon circle, white glyph — is high contrast and combines colour, shape and icon correctly. | Not a defect. This pattern should be the template rather than the desktop exception. |
10 findings
Does the layout make the right thing unmissable and everything else recede?
| Severity | Confidence | Problem | Fix |
|---|---|---|---|
| high | high | The sidebar carries eight club-app destinations, but this page has no other pages — it is one screen answering one question. | Cut the sidebar. A single-user page with no real navigation does not earn a rail. If identity is wanted, use a slim top band instead. |
| high | high | The greeting and date ornament share top billing with the urgent item, so decorative copy competes with the one thing that must be unmissable. | The urgent item occupies the top position alone. The greeting shrinks to a small label, not a headline-weight element. |
| high | high | Seventy-one automation rows rendered as bordered, padded concierge cards would run fifteen to twenty screens of card chrome. Neither render shows where the handoff to a dense grid happens. | Cards are reserved for ≤5 items needing a decision. Everything enumerable — automation, recent work, projects past “needs attention” — uses hairline-row tables immediately. No card-list middle ground. |
| high | med | Seven project status groups is over-classified for a glance view, and no render shows how they fold. | Collapse to three: Needs you (claret, always expanded), Active (dense list), Everything else (paused, idle, shipped, archived behind one disclosure, off the first screen). |
| med | high | A section that is permanently empty on real data still reserves layout space and shows an apologetic empty state. | Omit the section entirely — header and card both. A blank box is worse than no box. |
| high | med | One failure rendered four times is a data problem the layout is faithfully reproducing. Hiding the duplicates in layout alone risks hiding the failure from a surface the owner habitually scans. | Give every event exactly one home — the attention rail — and have the project row and automation row link to it (“1 issue →”) rather than restating the text. |
| high | med | None of the renders show the good-day state. All four show a manufactured urgent item, but on a page checked daily “nothing needs you” is the common case — and it is usually designed last. | Design the empty top slot explicitly: a quiet single-line confirmation in the ivory and forest palette, not claret at reduced opacity, sized so nothing shifts when a real alert appears. |
| med | med | Both phone renders stack every panel full-width at equal weight below the urgent card, with no mechanism for collapsing twelve today items, twenty-five recent rows and seventy-one automation rows. | On phone, active projects, recent work and automation each collapse to one tap-through count chip. The first screen is almost entirely attention plus today. |
| high | med | A flat automation list sorted by name buries the three failing rows among sixty-eight healthy ones. | Sub-group automation by status — failing, then unchecked, then healthy — so failures sort to the top of their own list. |
| med | med | Only automation is shown in the dense-grid idiom. If recent work stays in card language while automation switches to table language, the page ends up with three visual systems instead of two. | Apply the dense-grid handoff to anything list-shaped over roughly ten rows, not to automation specifically. |
11 findings
The 390px phone experience, where 23% of real requests come from.
| Severity | Confidence | Problem | Fix |
|---|---|---|---|
| high | high | The green masthead occupies roughly the top quarter of the first phone screen before any content. On a page whose whole job is “what needs me today”, that is prime space spent branding the owner already knows. | Cap the masthead at a single compact row of about 48–56px, or fold it into the greeting block entirely. |
| high | high | A five-destination bottom tab bar assumes a multi-section app. This product is one page, so the bar burns 80–90px of every screen on navigation that does not exist. | Drop it. Either nothing, or one small persistent action in a slim top bar. |
| high | high | The three row actions this page actually needs — done, snooze, dismiss — appear in no render. One direction is tap-to-chevron only; the other has static rows with no controls at all. | Design this before build. Swipe-to-reveal (snooze left, done right) with a small overflow for dismiss, because three inline buttons per row will not fit at 390px without crowding touch targets. |
| high | med | No render establishes a realistic target height. The current page is 7,331px — 8.7 screens — for light, quick-glance use. | Target 2–2.5 screens, roughly 1,800–2,100px: urgent item and today above the fold, everything else collapsed or behind a disclosure. |
| high | med | Neither render shows how seventy-one automation rows or twenty-two projects behave on a phone. One shows three rows plus “view all”; the other shows full tables inline with no collapse. | Collapse both to count and status chips by default with drill-in. Never paginate a page opened 1–20 times a day — that adds taps for no benefit. |
| med | med | The dense direction packs three columns side by side; at a true 390px each is roughly 120–140px, tight for two-line entries. | Require the grid to collapse to a single column below about 600px. |
| med | med | Small-caps serif with wide tracking is legible on short placeholder strings, but tracking eats horizontal space and real project and cron names are far longer. | Reserve small-caps serif for section labels only — short, controlled strings — never for user-generated row content. |
| med | med | The schedule row pattern squeezes its middle column once real strings are longer than “Tennis”. | Truncate the title to one line with an ellipsis, drop the subtitle on phone, or stack the trailing label beneath rather than right-aligning it. |
| med | med | PWA standalone mode gives back vertical space but removes the browser back-swipe. With no tab bar there is then no in-app back affordance either. | If any drill-in detail views exist, give them an explicit back arrow in a slim header. Do not rely on gesture navigation. |
| low | low | Small squares around 14px are used for a habit grid; if that lamp language extends to status indicators that are tappable, they fall under the 44px touch minimum. | Fine if lamps are status-only. If any lamp doubles as a control, enlarge to 32px plus padding. |
| med | low | Ten stacked numbered sections is itself a scroll-length driver independent of data volume — even with zero rows the skeleton is long. | Cut the section count, or make low-value sections collapsible or hidden on phone. |
9 findings
Will an elegant hospitality language make the truth-telling affordances quieter?
| Severity | Confidence | Problem | Fix |
|---|---|---|---|
| high | high | Six distinct evidence verdicts differentiated only by prose tone will be swallowed by a genteel register — “confirmed” and “stale” become similarly polite sentences. | A verdict is a labelled token with an icon glyph (check, hourglass, dash, question mark) in letter-spaced caps, never italic serif prose. Ban the softening voice from verdict copy specifically. |
| high | high | The dark forest-green card is used for calm, positive amenity content. If blind-spot banners inherit that chrome they read as another amenity, not an alarm. | Blind-spot banners must never sit inside dark-green chrome. Force them onto the ivory field with a filled claret or orange square lamp and all-caps sans — a deliberate stylistic break from the serif voice, so it reads as instrumentation intruding rather than hospitality speaking. |
| high | med | Flapping must read as neither healthy nor failing, but the current code already collapses flapping and blind-spot into the same amber, separated only by copy. A softer palette makes that harder, not easier. | Three lamp states: solid claret for failing, half-lit or hatched amber for flapping, empty outline for blind and unchecked. One hue family each, borrowed from the instrument's lamp system rather than the ornament system. |
| med | high | Unchecked risks being styled as just another graceful ivory-on-ivory pill, indistinguishable in weight from genuinely healthy content. | Hatch or outline only. Never brass foil, never a soft rounded card. |
| high | high | The concierge idiom softens bad news by design. Applied to “money unreadable” or “source broken” it reads as apology rather than fact. | Hard rule: the softening voice is banned from every error and unreadable string. Those stay terse sans-serif caps regardless of the rest of the page's voice. |
| med | med | Brass hairlines are decorative furniture throughout, so an amber staleness warning risks blending into ornament rather than reading as a warning. | Staleness amber must be a hue clearly distinct from the brass rule colour, not a tint of it. |
| med | high | Crests, seals and gold dots are exactly the “decorative dot” the reserved-green rule was written to stop. | Explicit palette rule: no ornament, crest or seal may use the reserved status green, and brass must sit visually far from green so a glance cannot confuse foil for status. |
| high | high | Claret alone cannot carry three simultaneous negative states. A single reserved urgent colour forces icon-only disambiguation, which fails at a glance. | Keep the existing three-hue grammar — claret for failing, amber for flapping and stale, ink-grey outline for blind and unchecked — and add the lamp shape system on top. Do not make claret do triple duty. |
| low | med | What to exploit rather than fight. The register's habit of direct, unhedged address — “your renewal is due today” — is plainer and more literal than most dashboard copy. | Keep that bluntness for verdict and blind-spot strings; strip only the softening adjectives around it. |
A synthesis pass resolves the six places where the critics genuinely conflict — status encoding, where brass may appear, how many negative hues, the permitted scope of small caps, the density threshold per breakpoint, and the masthead budget — and turns the survivors into design tokens and component rules. That spec drives the build.
Personal HQ redesign review · 8 August 2026 ·
built from branch worktree-redesign-2026-08-08. Nothing here is deployed;
the live dashboard is untouched.