admin/linkder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Demo page: the running product beside the case for it"

Browse Source 
This reverts commit 7567aa4e75.
This commit is contained in:
serfa
2026-08-21 07:32:41 -04:00
parent 7567aa4e75
commit 5086a238ea
6 changed files with 59 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+15 -28
View File
@@ -300,38 +300,25 @@ Overlay stamps: `SEND JOB` in `go-600`, `PASS` in `stop-500`, 4px border, ±12°
**The action row** is five circles, in one fixed order:
| | Action | Size | Fill | Icon |
|---|---|---|---|---|
| 1 | Rewind — bring the last card back | 44px | `inset` | `ink-600` |
| 2 | Pass | **64px** | `stop-500` | white |
| 3 | Watch — tell me when they are free | 44px | `inset` | `ink-600` |
| 4 | Send this job | **64px** | `go-600` | white |
| 5 | Ask a question | 44px | `inset` | `ink-600` |
| | Action | Size | Ink |
|---|---|---|---|
| 1 | Rewind — bring the last card back | 44px | `ink-600` |
| 2 | Pass | **64px** | `stop-500` |
| 3 | Watch — tell me when they are free | 44px | `brand-500` |
| 4 | Send this job | **64px** | `go-600` |
| 5 | Ask a question | 44px | `ink-950` |
Three rules make this row, and they are worth stating because the first version
broke all three — five hues, five shadows, five outlined rings:
Two sizes, and the size *is* the hierarchy: the two decisions that end the card
are 64px and reach the thumb first; the three that do not are 44px — still the
minimum target from §8, never smaller. Gaps are 16px between a small and a large,
24px between the two larges, so the pair still reads as the pair.
- **Two colours, not five.** Only the two actions that decide the card carry
colour, and they take the exact hues of the drag stamps they mirror. The three
helpers are ink. A helper competing with a decision is noise.
- **No elevation.** §5 already lists three shadows on a screen as a Don't, and
the first version gave all five their own. Flat discs, every one — a shadow
under a tinted circle muddies the colour it is meant to sit on. Size and hue
carry the hierarchy; nothing needs to float.
- **Solid, not ring and not tint.** A filled disc with a white glyph is
unambiguous at a glance and holds its weight above a full-bleed photo. An
outlined ring reads as a diagram of a button; a pastel tint reads as a sticker.
Size is the hierarchy: 64px for the two decisions, 44px for the helpers — the
§8 floor, never smaller. Gaps are 20px, widest around the pair so it reads as a
pair rather than as items 2 and 4 of five.
Watch is the one control whose state persists, and inverts to a solid `accent`
disc when on. Its label changes with it — selection is never carried by fill
alone (§8).
All five are 2px bordered circles on `ink-0`. A control whose state persists —
watch — fills with its own colour when active, and its label changes with it;
selection is never carried by fill alone (§8).
Rewind is `disabled` with nothing to undo rather than hidden. A row that changes
length as you swipe moves the two big buttons out from under your thumb.
length as you swipe moves the two buttons underneath your thumb.
---