Design System v3 proposal
Mockup with sample data from the real inventory. Nothing here is wired to the API.
dev on dev today
feature feature branch only
API gap stored, not served
Add / Edit spool
Opens as a dialog over Filament. Pick a scenario to see each state.
Edit spool #47Add spool
Opened 09:32 at version 4 · created 2 Aug · label printed 3 AugNew spools carry no version: nobody could have read one yet.
⚠ This spool changed since you opened it. Nothing was saved.
Someone weighed it at 09:39, after you opened this form at 09:32 (version 4 → 5). Saving now would have put the old remaining weight back and lost that measurement.
| Field | When you opened (v4) | Now (v5) | Your edit |
|---|---|---|---|
| Remaining net | 860 g | 812 g · weighed | not changed |
| Empty spool (tare) | 262 g | 262 g | not changed |
| Location | Shelf A3 | Shelf A3 | A1 · AMS Lite · slot 1 |
| Cost per kg | $22.79 | $22.79 | not changed |
Your only change doesn't overlap theirs, so it's safe to reapply it to the new version.
Server said (409): this spool changed after you loaded it — reload it and reapply your edit, so a newer weigh-in is not overwritten (you loaded version 4, it is now version 5)
⚠ 2 fields need fixing. Nothing was saved.
Save is off until you choose how to handle the newer version.
Control states: v3 specimen
Every state changes something other than shadow direction. Switch themes with the toggle to check both.
Rest
raised + 1px border (3:1)
raised + 1px border (3:1)
Hover
border turns accent
border turns accent
Pressed / on
inset + wash fill + ✓ + accent border
inset + wash fill + ✓ + accent border
Focused
2px outline, 3px offset
2px outline, 3px offset
Disabled
flat + dashed border + muted text
flat + dashed border + muted text
Primary
ink on light violet (6.14:1 dark)
ink on light violet (6.14:1 dark)
Primary pressed
deeper fill + ✓ + ring
deeper fill + ✓ + ring
Danger
red text + red border
red text + red border
Input rest
inset + border
inset + border
Input focus
outline, border unchanged
outline, border unchanged
Input disabled
dashed, flat
dashed, flat
Too much
Input error2px red + ⚠ + message