Brand board revisions, the five dashboard mockups with their verify
script and evidence, the slice 1 S5 design note (SLICE1-VIEWS.md, rev 3
plus the S2c section 10 update), the Console mockup of inbox, tasks,
agents and trail (mockups/slice1/) and checks/slice1-verify.mjs (16
checks; check 16 pinned to bus at d27042fa). Also the CHAT-03 progress
log and the 2026-09-26 dirty-tree manifest. Design and evidence only;
no package code. Row 40 (#1522), committed on its own at Sage's
direction, 2026-10-09.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
16 KiB
Brand-board verification
Author: Dewey. Date: 2026-09-08. Scope: local interactive brand prototype, ready for review, not an integrated product or approved identity.
Reproduce
From /mnt/storage/src/mosaic-stack:
node --check agents/dewey/work/wui/brand.js
node --check agents/dewey/work/wui/board.js
node agents/dewey/work/wui/checks/verify.mjs
node agents/dewey/work/wui/checks/detail-checks.mjs
node agents/dewey/work/wui/checks/final-checks.mjs
Environment used: Node 26.8.1, Chromium 152.0.7977.75 on Arch Linux. The CDP helper uses /usr/bin/chromium, or the CHROMIUM environment variable. Tests create a fresh temporary browser profile, open the entry page by file URL, save evidence here, and remove the profile at completion. No authenticated browser profile or Mosaic backend is used. There are no npm dependencies for this board or these tests.
checks/assets.mjs regenerates standalone SVGs and palette JSON from brand.js. checks/fetch-fonts.py refreshes the public Google Fonts WOFF2/OFL assets and needs network access. Neither is needed just to view or verify the current board. checks/references.mjs repeats the public reference-site inspection and also needs network access.
Results
| Requirement | Result | Evidence |
|---|---|---|
| Three distinct logo concepts | pass for review presentation | Assembly, Relay, Aperture rendered in identity cards, standalone SVGs, small monochrome samples, and selectable header/wordmark specimen. Author inspected screenshots. Recognition and final brand suitability are still Jason's decision. |
| Sans-serif alternatives and coherent icons | pass | Three locally loaded families with four weights each and license files. Eight labeled navigation icons use one original 24-unit/1.75-stroke family, shared with feedback symbols. |
| Ten theory-backed palettes, all three appearances | pass | Ten palettes carry named harmony relationships and explicit hue anchors in brand.js and the board. Thirty token sets generated. Palette/mode controls tested through their real change/click handlers. |
| Token contrast, A11Y-01/02 | pass for declared pairs | 840 unrounded ratio checks in verification.json. Normal text/action-label minimum observed 4.503925718129755:1, boundary/focus minimum 3.704773189325781:1. Checks cover normal/muted/action/accent/status text across canvas, surface, raised surfaces; borders/focus across those surfaces; on-action text on action. Decorative dividers and disabled controls use criterion exceptions. |
| Rendered text contrast | pass for sampled DOM text | 274 text/control samples per combination, 8,220 total. Computed foreground and solid ancestor backgrounds, qualifying large-text thresholds, minimum observed 4.504658476260286:1. This is not an image/gradient algorithm or a full accessibility audit. |
| Color-independent meaning, A11Y-03 | pass | Selection uses Selected labels and pressed/checked state. Status uses text plus icons. Author inspected the rendered component section. |
| Keyboard operation and focus, A11Y-05/06 | pass for tested flows | Native select and radio-arrow changes; Enter/Space selection buttons; Tab/Shift+Tab between sample fields; error recovery; skip link moves focus to main. Focus ring measured at 3 px solid. Short-screen sidebar focus stayed inside the 768 px viewport after adding sidebar scrolling. Chromium accessibility tree reports accessible names for all 60 interactive elements. This is not a screen-reader test. |
| Target size, A11Y-04 | pass for measured controls | Enabled buttons, fields, radio inputs, sidebar links, brand link and review link meet 24 px dimensions at 320 and 1440 widths. Inline footer/prose links use the inline-text exception. Most controls are at least 44 px tall. |
| Responsive/full-width layout, A11Y-07 | pass for measured layouts | All 30 combinations at 320, 390, 768, 960, 1440, 1920, 2560, 3440 CSS px. 240 layout checks, no page overflow. Ten additional checks cover both sides of the 700, 960, 1200, 1700, and 2400 breakpoints. Author inspected mobile, desktop, and 3440-wide screenshots; five palette columns use ultrawide space without unbounded prose. |
| Text enlargement/spacing, A11Y-07/08 | pass for tested overrides | 320 px reflow with WCAG text-spacing overrides, 200% root size, and separately doubling every element's computed font size including authored px values. Initial full-text expansion overflowed the review grid and small-size labels; minimum-width/wrapping fixes passed retest and screenshot inspection. Browser-native zoom was not exercised. |
| Reduced motion, A11Y-10 | pass | Emulated reduced-motion media preference; theme and keyboard controls remain usable. Board state changes do not rely on animation. |
| Loading/empty/error/success/disabled states | pass as labeled specimens | Tested all five selectable states, loading's disabled action, success button, preserved input after error. No actual request or project creation occurs. |
| Long content and failure fallback | pass for tested cases | Wrapped headings/labels and doubled text; font loads blocked and browser storage denied in isolated Chromium, with working controls and no page overflow at 320. Malformed saved preference JSON recovers to default. Input has a 160-character limit and native horizontal text-field scrolling. |
| Review notes and token downloads | pass | Browser downloads captured in evidence/downloads and contents checked. Note download contains test review text; palette JSON includes Light/Dim/Dark tokens. These files are author test fixtures, not Jason's decisions. |
| Offline resource/link integrity | pass | CDP resource tree showed 11 loaded resources, all local file URLs. Source asset links and internal anchors resolve. Three real font families load. No remote font/CDN/backend request belongs to the board. |
| Public site completeness | not applicable to this local review artifact | Single file with section anchors, no public deployment or app router. About/Contact/legal pages, HTTP 404 behavior, consent management, billing and account workflows are outside this prototype. Storage use is explained beside controls and notes. No legal compliance claim. |
| Reference sites | pass for public-page inspection, app behavior not verified | RESEARCH.md and reference screenshots. No v1 inspection. T3 application theme switching and Buzz's installed application wizard were not exercised. |
Visual fixes and test corrections
- Early reference screenshots captured entrance animations, not completed pages. Re-captured after a bounded animation allowance.
- CDP Enter needed its character value, and Shift uses modifier bit 8. Fixed the test driver rather than changing working controls to accommodate a faulty test.
- Added scrollable desktop preview controls so keyboard focus remains available on short screens.
- Doubled text exposed a review-column minimum-width problem and logo-size row wrapping. Fixed and rechecked.
- A 320 px screenshot exposed a clipped Conversations label. Changed narrow icon layout to two columns and allowed long labels to wrap. Rechecked the actual rendering.
- Corrected draft hue anchors so named complementary/triadic/split-complementary relationships match their stated angles. Regenerated assets and re-ran contrast/layout suites.
- File-URL resources did not populate the expected Performance entries. The final resource check uses Chromium's Page.getResourceTree instead; its resource URLs are all local.
Verification limits and remaining decisions
- Tested one installed desktop Chromium engine. Safari, Firefox, native mobile devices, touchscreen behavior, assistive technology, OS forced colors, and browser-native zoom are not verified.
- Browser viewport emulation and doubled text are useful evidence, not equivalent to testing every physical display and accessibility configuration.
- Contrast assertions and Chromium accessibility-tree names do not establish full WCAG conformance. They cover the listed cases.
- Only Latin font subsets are bundled. Multilingual typography and fallback coverage need a later product brief.
- Logos are original author studies, not independently reviewed, user-tested, trademark-cleared, or final production assets. Small-size optical refinements await selection.
- No independent technical review, issue lifecycle, repository delivery suites, integration, deployment, commits, or pushes were performed for this standalone design package. Those delivery gates remain separate if the prototype is promoted into product work.
- Jason has not approved branding. B09 and all dashboard tasks remain behind that human gate.
Dashboard mockup verification
Author: Dewey. Date: 2026-09-12. Scope: five navigable HTML dashboard mockups and a comparison page under mockups/. These are design prototypes for Jason's selection, not product code. Every action is simulated and labelled as such in the interface.
Reproduce
From /mnt/storage/src/mosaic-stack/agents/dewey/work/wui:
node --check mockups/shared/app.js
node --check mockups/shared/views.js
node --check mockups/shared/data.js
node checks/mockups-verify.mjs
Environment used: Node 26.8.1, Chromium at /usr/bin/chromium on Linux, headless, fresh temporary profile, file URLs only. No server, package, network, Mosaic backend, or credential is used. The script writes evidence/mockups/report.json and the screenshots listed below, and exits non-zero on any failed check.
Final run: 31 checks, 0 failed, 2 not verified. Report generated 2026-09-12T12:40Z.
Results
| Requirement | Result | Evidence |
|---|---|---|
| Five distinct navigable designs, one comparison page | pass | mockups/index.html links Rail, Deck, Console, Board, Stream. Each design renders 14 routes (control board, sessions, session detail x2, projects, project detail, agents, work, runs, messages, library, settings, launch, unknown route) from one shared data set. |
| Control board as landing view (MOSAIC-STACK-D-001) | pass as proposed design | Every design's #/ route lists running sessions across projects with status, controller, since, config state, and a waiting-on-you section. Labelled "proposed" in the interface because the page does not exist in the foundation yet. |
| Responsive, full width, ultrawide | pass for measured layouts | 14 routes x 8 widths (320, 390, 768, 960, 1440, 1920, 2560, 3440) per design: no script errors, no horizontal document overflow, main content present, unknown route shows the not-found page. Author inspected *-home-390.png, *-home-1440.png, *-home-3440.png, d4-board-home-1200.png, d1-rail-session-390.png, d3-console-work-390.png. |
| Manrope, ten palettes, three appearances | pass | Manrope WOFF2 loads from assets/fonts. 10 palettes x 3 modes apply through Brand tokens via ?palette=&mode= and the settings page. Sampled captures: palette-harbor-{light,dim,dark}.png, palette-graphite-dim.png, palette-grove-dark.png. |
| Text and control contrast, A11Y-01/02 | pass for sampled pairs | 600 computed text/background pairs (20 selectors x 30 palette/mode sets) at or above 4.5:1 for normal text and 3:1 for large text. Lowest observed 4.50:1 (Harbor Dim muted badge and count). Badge tints were reduced from 12 to 14 percent down to 8 percent and the current-nav tint to 9 percent during this pass to reach the threshold. Not an image or gradient check and not a full audit. |
| Loading, empty, error, success, disabled states | pass | Per design, `?state=loading |
| Primary flows | pass as simulations | Per design: launch into a retired workspace is refused and nothing launches; launch of an already running agent/workspace reports the conflict and offers observe or request control; a valid launch shows a simulated launch notice; composer with empty text is blocked with "Nothing was sent"; a session whose base config changed shows a non-blocking notice with Check now and Plan Fresh; settings choice Grove/Dim persists through reload. Capture: d2-deck-launch-refusal-1440.png. |
| Keyboard operation and focus, A11Y-05/06 | pass for tested paths | Skip link is the first Tab stop and Enter moves focus to main; focus rings are visible on links and buttons; Escape closes open menus, dialogs, and toasts. Design specific: Console Ctrl+K opens the command palette, arrow keys move through commands and through the session table, Enter opens the inspector, Escape closes it (d3-console-inspector-1440.png); Rail phone drawer opens from the Menu button and closes with Escape, rail collapses to icons with labels kept for assistive technology (d1-rail-drawer-390.png, d1-rail-collapsed-1440.png); Deck menu closes with Escape; Stream bottom bar exposes four tabs plus a More menu with the remaining pages (d5-stream-more-390.png). Not a screen-reader test. |
| Text enlargement and long content, A11Y-07/08 | pass | At 320 px with a 200 percent root font size and with long unbroken identifiers inserted, no route overflows the viewport. Captures: *-text-200-320.png. Native browser zoom was not exercised. |
| Secrets never rendered | pass | Account credentials appear only as "runtime mount, not shown"; no token-shaped strings exist in the sample data or in the rendered DOM across routes. |
| Simulated behaviour labelled | pass | All 70 data-action buttons across all routes and designs produce a toast that begins with "Simulated" and states that nothing changed. Each shell carries a prototype note. |
| Reduced motion | pass for declared rules | Shared stylesheet disables transitions and the spinner under prefers-reduced-motion. Behaviour does not rely on animation. |
| Forced colours | not verified | Rules exist in shared/app.css for forced-colors: active, but headless Chromium did not emulate Windows high contrast in this harness. |
| Screen reader announcements | not verified | Route changes and toasts update aria-live regions and aria-current; no screen reader was run. |
| Public site completeness | not applicable | Local prototype behind file URLs. No About, Contact, privacy, consent, or HTTP 404 behaviour is in scope. |
| Backend support | not applicable, recorded separately | FEATURES.md separates implemented, planned, and proposed capabilities. The mockups show proposed items (control board, steering queue, config drift notice, kanban work view) with a "proposed" mark; none of them assert backend support. |
Fixes made during verification
- Sticky navigation lists in Console and Board scrolled correctly, but visually hidden labels positioned absolutely inside them escaped the scroll box and widened the page at 320 px. Made the scroll containers positioned so hidden labels stay contained.
- Nav rows in Console and Board grew to their content width when the header wrapped at 960 px. Constrained them to the header width; Board now wraps its nav under the brand row deliberately below 1600 px.
- Breadcrumb separators had no break opportunity, so a long crumb pushed past 320 px at 200 percent text. Breadcrumbs now wrap.
- Kanban column headings and task cards used flex rows that could not shrink at 200 percent text. Columns now constrain children and task summaries wrap.
- Stream bottom tabs used equal columns that could not shrink; the More menu list could open past the viewport edge. Both constrained.
- Warning, success, and danger counters used white text on tinted backgrounds and failed contrast in Dim and Dark. They now use canvas-coloured text.
- The contrast sampler misread
color(srgb ...)values that Chromium reports for colour-mix backgrounds; the parser was fixed rather than the threshold. - Message thread avatars stretched after a min-width fix; excluded from the flex rule.
Limits
- One desktop Chromium engine, headless. Safari, Firefox, native mobile, touch, assistive technology, forced colours, and native zoom are not verified.
- Data is a hand-written sample (
shared/data.js) that mirrors the foundation's records and current sessions; it is not read from<dataRoot>. - Nothing here is integrated, committed, pushed, or reviewed independently. Selection of a design is Jason's decision and no design is approved.