Extrudex Design V3.0

The approved redesign of Extrudex in Design System v3 (Soft UI / neumorphism). It covers the token set, interactive mockups of every screen (phone, tablet and desktop), and the design and UX notes behind them. It's a design proposal only; none of it is wired to the Extrudex API. Implementation is tracked in Maestro feature UI Refresh - V3.0 (224b72a1-8d84-4970-97ea-5dafa4d8ea3b).

How this repo relates to Extrudex

This is the design working repo: new design rounds start here. The copy that implementation builds against is design/v3/ in the Extrudex repo on dev. It was imported by PR 323 and has since picked up agent terminology edits (PR 325). An approved round reaches Extrudex only through a normal import PR. Nothing syncs automatically, and differences in display text between the two copies are expected.

Start here

Open	What it is
iteration-3/screens/index.html	Final design. Flow map, every screen, 14 guided flows
iteration-3/screens/devices.html	Every screen in live phone (390 × 844) and tablet (820 × 1180, 1180 × 820) frames
design-system-v3.md	Tokens changed or added vs v2.0 with reasons, state matrix, dark-mode approach, contrast tables (54/54 WCAG AA)
design-system-v3.css	The v3 token set (light + dark), to publish as the v3.0 guide
iteration-3/00-changes.md	Latest decisions, code-verified behaviors, the responsive spec, terminology ("empty spool weight")
iteration-2/00-ux-review.md	Navigation model, interaction patterns, data-display rules

The screens are self-contained HTML. Open them straight from a clone (no server needed) and they render identically offline: JetBrains Mono is embedded, and there are no CDN or network requests. ?theme=light or ?theme=dark forces a theme.

Layout

design-system-v3.css / .md   v3 tokens + documentation
fonts/                       JetBrains Mono 400/500/700/800 woff2 (@fontsource 5.3.0) + OFL license
00-understanding.md          what the app showed and stored before the redesign (2026-09-18)
SUMMARY.md                   what was built in each iteration, open questions, task lists
screens/, source/            iteration 1 (history)
iteration-2/                 iteration 2: navigation + data display (history)
iteration-3/                 iteration 3: final screens, tablet/phone, terminology
  screens/                   built pages (index, devices, 01–10)
  source/                    build inputs: data.js, app.js, components.css, pages/, build.py

Iterations 1 and 2 are kept for comparison. They still say "tare"; iteration 3 says "empty spool weight".

Rebuilding the screens

python3 iteration-3/source/build.py     # writes iteration-3/screens/*.html
python3 iteration-2/source/build.py     # iteration 2 (optional)
python3 source/checks/table.py          # regenerates the contrast table

The build inlines design-system-v3.css (fonts as base64), source/app.css, the iteration's components.css, data.js, app.js and each page into one file. It needs Python 3 and nothing else.

Data

All data in the mockups is sample data shaped on the real inventory (105 spools, 18 brands, 3 printers) and the 2026-08-12 production snapshot. People, emails, serials and tokens are placeholders.