2026-09-19 11:31:50 -04:00
|
|
|
|
# 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`).
|
|
|
|
|
|
|
2026-09-19 11:35:53 -04:00
|
|
|
|
## 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.
|
|
|
|
|
|
|
2026-09-19 11:31:50 -04:00
|
|
|
|
## Start here
|
|
|
|
|
|
|
|
|
|
|
|
| Open | What it is |
|
|
|
|
|
|
|---|---|
|
|
|
|
|
|
| [`iteration-3/screens/index.html`](iteration-3/screens/index.html) | **Final design.** Flow map, every screen, 14 guided flows |
|
|
|
|
|
|
| [`iteration-3/screens/devices.html`](iteration-3/screens/devices.html) | Every screen in live phone (390 × 844) and tablet (820 × 1180, 1180 × 820) frames |
|
|
|
|
|
|
| [`design-system-v3.md`](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`](design-system-v3.css) | The v3 token set (light + dark), to publish as the v3.0 guide |
|
|
|
|
|
|
| [`iteration-3/00-changes.md`](iteration-3/00-changes.md) | Latest decisions, code-verified behaviors, the responsive spec, terminology ("empty spool weight") |
|
|
|
|
|
|
| [`iteration-2/00-ux-review.md`](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.
|
