File: 2026.10.27 - Lumenwire Audio - 04 Standards and Validation.md
Lumenwire Audio: Stage 4 Standards and Validation
Jennifer, 27-Oct-26. Dashboard: 02 - Deliverables/2026.10.27 - Lumenwire Audio - 04 Dashboard.html. Built from Viktor's Experimental A (dot swarm), which Adam chose. His five Stage 3 versions are untouched. Business Requirements v1.3 (updated at Stage 5), Calculation Pack v1.1, Sample data. Not published.
Story, KPIs, charts and numbers are unchanged. Stage 3 whitespace feedback (front page spacing, Why page spacing, fewer boxes) is kept as built.
1. Palette
Monochrome blue, as Viktor built it (dark by default, light on the toggle). No chart has 3 or more categories, so Charcoal and teal is not needed. Status colours (green, amber, red) stay semantic and always carry a word and an icon.
↑ Back to top2. What I fixed (clear-cut)
| # | What | Standard |
|---|---|---|
| 1 | Page title, eyebrow and footer no longer say "Experimental A" or "Built by Viktor". Title is now "Lumenwire Audio: board view". Footer reads Business Requirements v1.2, KPI Calculation Pack v1.1, Sample data | Web Build 1 (short title); Stage 4 brief |
| 2 | Design-win curve: invisible tap circles grew from 28px to 44px, so the 7 points are easy to tap | UX 2 (44px touch targets) |
| 3 | Bullet bars on the Back page: tap area 24px to 44px on touch screens and phones (mouse stays compact) | UX 2 |
| 4 | One visible keyboard focus ring on every Tab stop, including chart points, dots and bars | Web Build 2 (keyboard) |
| 5 | Each of the five tiles on the front page now says who owns it (CEO, VP Sales, CFO), in the empty row that was already there. Tile heights unchanged | Validation checklist 3 |
| 6 | noindex added, and a plain "needs JavaScript" message if scripts are blocked | Web Build 4 and 6 |
3. Standards review results
Both reviews were run by hand against the two standards files, then checked in the Browser pane.
| Check | Result |
|---|---|
| Re-run after Adam's decisions, both colour modes, all 6 pages: 0 sideways scroll, 0 controls under 44px on phones (bottom bar included), 0 console errors | Pass |
| Sideways scrolling at 320, 375, 568x320, 740x360, 768, 1100 and 1600 wide, all 6 pages, Back page sections open | 0 pages scroll sideways |
| Controls under 44px at 375 wide, all 6 pages | 0 (was 9 before fixes 2 and 3) |
| Console errors, loading and switching all pages and both colour modes | 0 |
| Browser zoom 200% (a 640px-wide window) | No sideways scroll |
| Contrast in dark mode (text, icons, lines, chart colours) | All 4.5:1 or better for text; chart colours 5.7:1 or better |
| Contrast in light mode, text | All 4.8:1 or better; chart colours 3.98:1 or better after decision 3 |
| Semantic HTML: one h1, h2 per page, header, nav, main, footer, details/summary, lang en-AU, viewport | Pass |
Reduced motion, colour tokens on :root, no alert(), storage in try/catch, fonts limited to the 4 weights used | Pass |
| Meaning carried by colour alone | Pass: status chips have a word and icon; bars are labelled and have a legend |
| Side summaries over the 30-word bullet limit | Not changed: Adam rated the summaries "good" |
Screenshots: taken in the Browser pane at desktop (1100 wide) and phone (375 wide) and reviewed on screen. The pane tool does not save image files, so none are written to disk.
Chart label collision check (added after Adam's phone review)
| Check | Result |
|---|---|
| Both waterfalls at phone widths: category names overlapped, and the first value label ("A$21.01m") was clipped or covered by the next bar | Fixed. Category names now angle at 40 degrees using the short names, value labels stack so they never sit on a bar or another label, and the full names stay in See data. Data, order and story unchanged |
| Other charts at 320 and 375: total revenue year labels, design-win curve notes, stock cover quarter labels and the forecast "Hardware step" note collided or clipped at 320 | Fixed by dropping alternate axis labels, moving one note above the line, and shortening one note on phones. All data stays in tooltips and See data |
| Automatic text-on-text, text-on-bar and clipping scan of every chart, 6 pages, light and dark, at 320 and 375 wide | 0 collisions. Sideways scroll 0, controls under 44px 0 at 375 |
About Lumenwire Audio info button (added on Adam's request)
A small "i" button on the eyebrow line of the masthead (no new row). Name: "About Lumenwire Audio". It opens a short note, and Esc, a tap outside, or pressing the button again closes it. Focus moves into the note and returns to the button on Esc.
Text, using only the Business Requirements v1.2 and the Meeting Script, with no new numbers and no OEM or customer named:
- Lumenwire Audio sells hardware through OEMs, who build it into their products, plus software licences and subscriptions. A design win is an OEM's commitment to build with Lumenwire, and it should turn into revenue once the product ships.
- Revenue fell by about a third, from A$118.4m in FY25 to A$80.6m in FY26. The board wants it back to A$115m within two years.
- This page is for the chair and the board, every month. It asks one question: are we still growing underneath the fall?
- Test case: a made-up company. Sample data.
Checks: tap area 44 x 44px; works by keyboard; light and dark mode text uses the page tokens; at 320, 375, 568x320 (left of the rail), 768 and 1100 wide the note never covers the bottom bar or rail, scrolls inside itself if short of height, and adds no sideways scroll; 0 console errors.
Action icons on page 4 (added on Adam's request)
One simple line icon (22px, single stroke in the accent blue, no fill, badge or circle, hidden from screen readers) beside each owner label on "What to do":
- CFO and CEO forecast and sales plan: line chart
- Software, product and sales effort: code window
- Design wins that ship: package
Not added to the front page's Top 3 actions: the front page is already the densest page, and Adam's standing feedback is less clutter there. Checks: 3 icons present, 22px, correct colour in light and dark, no sideways scroll and 0 console errors at 320, 375, 768 and 1100 wide; spacing unchanged.
Action icons moved above the owner label (Adam's follow-up)
Each icon now sits on its own line above the owner label, left-aligned with it, 44px on desktop and tablet and 38px on phones (640px wide or less), with a 10px gap. The stroke is held at 1.6px at every size so the icons stay light. Same three icons, accent blue, no fill or badge, hidden from screen readers. Spacing between actions unchanged. Checks, light and dark, at 320, 375, 768 and 1100 wide: sizes, 10px gap and left alignment correct on all three, no sideways scroll, 0 console errors.
Stage 5 quick fixes (Business Requirements v1.3, approved by Adam after Marcus's walk-through)
| # | Change | Result |
|---|---|---|
| 1 | "Proposed" marked, quietly, on every target except A$115m by 30-Jun-28: four Top 5 tiles, the Top 3 action cards (2 and 3), the What to do actions (2 and 3), chart legends (design-win curve, stock cover, forecast band), the side-summary target lines for new devices activated and stock cover, the software drill-down caption, gross margin, and the two front-page and forecast sentences that quote a target. Values unchanged. The note "Proposed: to be confirmed by the owner and the board by 6-Nov-26." sits at the top of Definitions. Header, page 4 and footer now say Business Requirements v1.3 | Done. The total revenue thresholds are not shown as figures anywhere on the page (only the status word), so nothing to mark there |
| 2 | Third finding on Why: Viktor's bonus wording, exactly as sent | Done |
| 3 | Status lines: each front-page action card shows a muted "○ No update" right-aligned on the owner line; each What to do action ends with "○ Status: no update yet. The CEO gives the first update at the next board meeting." (The VP Sales for action 3) | Done |
| 3b | Top 3 cards on phones: my version had no stacking rule, so I added one (single column at 640px and under) | Fixed, cards are full width at 375 |
Small layout adjustments made so the fix keeps the page tidy: the Proposed tag lets one tile line wrap, so tile row gap went from 3px to 1px to keep the Top 5 above the fold; the revenue chart's right margin grew 10px so its end label no longer overhangs the chart.
Re-run: at 1280 x 800 the Top 5 box ends at 788px (inside the 800px screen). 320, 375, 768 and 1100 wide, light and dark, all 6 pages: 0 sideways scroll, 0 controls under 44px on phones, 0 chart label collisions, 0 console errors. The revenue chart's end-label overhang was checked after the 10px margin fix at 1100 only. Validation checklist still 5 of 5; the footer version now matches the latest Business Requirements (v1.3).
↑ Back to top4. Validation checklist
| # | Check | Result |
|---|---|---|
| 1 | Every Must Have KPI is on the dashboard, calculated as documented | Pass. All five Top 5 KPIs are on the front page and the five sub-KPIs are on the Back page (10 in Definitions). Every number is generated from the Calculation Pack results, and Viktor's build script checks each figure quoted in the text against them |
| 2 | Every business objective shows actual, target, gap and pace needed | Pass. Revenue back to A$115m (tiles for total revenue and forecast accuracy), growing underneath the fall (new devices activated), software growing (software growth), design wins to shipping (design wins that ship): each tile shows target, gap, needs and trend |
| 3 | Every action owner can see their KPI's status at a glance | Pass after fix 5. CEO: total revenue and software growth. VP Sales: new devices activated and design wins that ship. CFO: forecast accuracy |
| 4 | The 30-second test | Pass. The headline and five tiles show where the business is (A$80.5m), the target (A$115m by 30-Jun-28) and the gap and monthly pace needed, without scrolling on desktop |
| 5 | Footer version matches the latest Business Requirements | Pass. Business Requirements v1.2 in the header and footer; v1.2 is the latest in the change log |
Validation: 5 of 5. Standards: 6 clear-cut fixes and Adam's 4 decisions applied (one a known exception).
↑ Back to top5. Adam's decisions (applied)
| # | Before | After | Status |
|---|---|---|---|
| 1 | Page changes by Previous and Next at the top only | Quiet bottom bar of six page names on phones (Front, Changed, Why, To do, Demand, Back), each 48px tall, with Previous and Next kept at the top. Page content has matching bottom padding (footer clears the bar by 64px). Held sideways, the bar becomes a left rail | Done |
| 2 | Always opened dark | Opens in the device's light or dark setting, follows it if it changes, and the Dark / Light switch overrides it and is remembered | Done |
| 3 | Light-mode pale blue #93bdf2 (hue 211, 1.8:1 on the light page) for Added revenue, Sales forecast and Software | Teal #0f8a7e from the saved Charcoal and teal palette (its light-mode accent), same value in both modes. Hue 174 against the main blue's 213 (dark) and 216 (light). Contrast: light page 3.98:1, white card 4.24:1, dark page 4.44:1, dark card 4.05:1, all above the 3:1 needed. It also colours the Software line on the hardware and software view, which is the second series there | Done. Saved palette colour, so no new colour proposed |
| 4 | Clicking a chart replays its animation; mouse and touch only | No change | Known exception, approved by Adam: replay is decoration, and all data stays in tooltips and the See data tables |
Also noted: the design-wins-per-quarter tap circles stay at 28px, because 44px circles would overlap at phone width. Those points have no keyboard stop, and every value is in the See data table.
↑ Back to top6. Content fix sent from Viktor (applied)
Viktor confirmed the list of six is right and the count was wrong, because the telemetry question was answered at v1.2.
| # | Before | After |
|---|---|---|
| 1 | Finding: "Three owners, three targets, and seven decisions that unlock them." | "Three owners, three targets, and six decisions that unlock them." |
| 2 | Story: "Seven open questions decide how the targets are read." | "Six open questions decide how the targets are read." |