From 091bdc2a963579c640ffdc7652f01f1e3364eb33 Mon Sep 17 00:00:00 2001 From: ncode Date: Wed, 16 Sep 2026 23:56:04 +0300 Subject: [PATCH] Add design canvas: two TE-inspired directions before the React port Design inspiration is the Teenage Engineering EP-133 manual: flat fills, heavy outlines, hard zero-blur offset shadows, one orange accent, uppercase technical type, monospaced numerals. Six artboards drawn at the real measured 360x735 with the actual vertical budget (44px pickers, 485px panel, 116px info, 58px tabs), so a mockup cannot fit in a way the device won't: - Current the app as it stands, for comparison - A Manual light ground, 2px black outlines, black pads - B Blueprint pure black, 1px white hairlines, no fills - Specimen type candidates and palette, incl. which orange Type is identical across both directions so the light/dark choice is not confounded with the font choice. Green/red drill feedback is replaced by orange fill vs dashed outline - neither exists in this palette. The seeded canvas payload is gitignored; these files are its source. Co-Authored-By: Claude Opus 5 --- .gitignore | 3 + design/canvas/BlueprintDrill.dc.html | 155 +++++++++++++++++++++++ design/canvas/BlueprintExplore.dc.html | 145 ++++++++++++++++++++++ design/canvas/Current.dc.html | 156 +++++++++++++++++++++++ design/canvas/Main.dc.html | 161 ++++++++++++++++++++++++ design/canvas/ManualDrill.dc.html | 163 +++++++++++++++++++++++++ design/canvas/Specimen.dc.html | 128 +++++++++++++++++++ design/canvas/canvas.json | 41 +++++++ 8 files changed, 952 insertions(+) create mode 100644 design/canvas/BlueprintDrill.dc.html create mode 100644 design/canvas/BlueprintExplore.dc.html create mode 100644 design/canvas/Current.dc.html create mode 100644 design/canvas/Main.dc.html create mode 100644 design/canvas/ManualDrill.dc.html create mode 100644 design/canvas/Specimen.dc.html create mode 100644 design/canvas/canvas.json diff --git a/.gitignore b/.gitignore index efb33d7..4a795d9 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,6 @@ android/.idea/ *.aab *.keystore !debug.keystore + +# Seeded design canvas — regenerated from design/canvas/*.dc.html +design/canvas/sp404-layers-redesign.html diff --git a/design/canvas/BlueprintDrill.dc.html b/design/canvas/BlueprintDrill.dc.html new file mode 100644 index 0000000..a32452c --- /dev/null +++ b/design/canvas/BlueprintDrill.dc.html @@ -0,0 +1,155 @@ + + + + + + + + + + + + + +
+ +
+
+ SHIFT + PADS + ▼ +
+
+ + + + + + + + 4/16 +
+
+ +
+ +
+
VOLUME
+
CTRL 1
+
CTRL 2
+
CTRL 3
+
+ +
+
+
FILTER +DRIVE
RESONATOR
DELAY
+
+
+
SAMPLE MODE
+
Fixed velocity
+
CORRECT
+
+
+
ISOLATOR
DJFX LOOPER
MFX
+
+
+ +
+
+
PTN SEL
PTN EDIT
REC SET
+
DEL
REC
RESAMPLE
+
EXIT
COPY
REMAIN
+
+
+
+
START /END
PITCH /SPEED
MARK
+
VALUE
+
+
+
BPM SYNC
GATE
LOOP
REVERSE
ROLL
+
+
+
A/F
B/G
C/H
D/I
E/J
+
SHIFT
+
+
+
+ +
+
FIX VEL
+
2
+
3
+
4
+
BUS FX
+
5
+
6
+
7
+
8
+
HOLD
+
9
+
10
+
11
+
12
+
EXT SOURCE
+
13
+
14
+
15
+
16
+
SUB PAD
+
+
+ +
+
+ CORRECT + P.24 +
+
+ SHIFT + + + PAD 1 + NEXT → +
+
+ Every hit plays at 127. Stored per sample; same combo turns it off. +
+
+ +
+
EXPLORE
+
DRILL
+
FIND
+
RULES
+
+
+ + + diff --git a/design/canvas/BlueprintExplore.dc.html b/design/canvas/BlueprintExplore.dc.html new file mode 100644 index 0000000..eb5ec9f --- /dev/null +++ b/design/canvas/BlueprintExplore.dc.html @@ -0,0 +1,145 @@ + + + + + + + + + + + + + +
+ +
+
+ SAMPLE MODE + ▼ +
+
+ NO MODIFIER + 3 +
+
+ + +
+ +
+
VOLUME
+
CTRL 1
+
CTRL 2
+
CTRL 3
+
+ +
+
+
FILTER +DRIVE
RESONATOR
DELAY
+
+
+
SAMPLE MODE
+
—
+
3 functions here
+
+
+
ISOLATOR
DJFX LOOPER
MFX
+
+
+ +
+
+
PTN SEL
PTN EDIT
REC SET
+
DEL
REC
RESAMPLE
+
STOP ×4
COPY
INFO
+
+
+
+
START /END
PITCH /SPEED
SKIPBACK
+
VALUE
+
+
+
BPM SYNC
GATE
LOOP
REVERSE
ROLL
+
+
+
A/F
B/G
C/H
D/I
E/J
SHIFT
+
+
+
+ +
+
1
+
2
+
3
+
4
+
BUS FX
+
5
+
6
+
7
+
8
+
HOLD
+
9
+
10
+
11
+
12
+
EXT SOURCE
+
13
+
14
+
15
+
16
+
SUB PAD
+
+
+ +
+
+ TOP SCREEN, PADS ORANGE + LIST 3 +
+
+ Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it. +
+
+ LAYER + + 3 FUNCTIONS +
+
+ +
+
EXPLORE
+
DRILL
+
FIND
+
RULES
+
+
+ + + diff --git a/design/canvas/Current.dc.html b/design/canvas/Current.dc.html new file mode 100644 index 0000000..9af9a99 --- /dev/null +++ b/design/canvas/Current.dc.html @@ -0,0 +1,156 @@ + + + + + + + + + + + + + +
+ +
+
+ Sample mode▼ +
+
+ No modifier▼ +
+
+ +
+ +
+
VOLUME
+
CTRL 1
+
CTRL 2
+
CTRL 3
+
+ +
+
+
FILTER +DRIVE
+
RESONATOR
+
DELAY
+
+
+
SAMPLE MODE
+
—
+
3 functions here
+
+
+
ISOLATOR
+
DJFX LOOPER
+
MFX
+
+
+ +
+
+
PTN SEL
PTN EDIT
REC SET
+
DEL
REC
RESAMPLE
+
STOP ×4
COPY
INFO
+
+
+
+
START /END
PITCH /SPEED
SKIPBACK
+
VALUE
+
+
+
BPM SYNC
GATE
LOOP
REVERSE
ROLL
+
+
+
A/F
B/G
+
C/H
D/I
+
E/J
SHIFT
+
+
+
+ +
+
1
+
2
+
3
+
4
+
BUS FX
+
5
+
6
+
7
+
8
+
HOLD
+
9
+
10
+
11
+
12
+
EXT SOURCE
+
13
+
14
+
15
+
16
+
SUB PAD
+
+
+ +
+
+ Top screen, pads orange. + List 3 +
+
+ Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it. +
+
+ +
+
+ + Explore +
+
Drill
+
Find
+
Rules
+
+
+ + + diff --git a/design/canvas/Main.dc.html b/design/canvas/Main.dc.html new file mode 100644 index 0000000..3f9de36 --- /dev/null +++ b/design/canvas/Main.dc.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + + +
+ + +
+
+ SAMPLE MODE + ▼ +
+
+ NO MODIFIER + 3 +
+
+ + +
+ + +
+
VOLUME
+
CTRL 1
+
CTRL 2
+
CTRL 3
+
+ + +
+
+
FILTER +DRIVE
+
RESONATOR
+
DELAY
+
+
+
SAMPLE MODE
+
—
+
3 functions here
+
+
+
ISOLATOR
+
DJFX LOOPER
+
MFX
+
+
+ + +
+
+
PTN SEL
PTN EDIT
REC SET
+
DEL
REC
RESAMPLE
+
STOP ×4
COPY
INFO
+
+
+
+
START /END
PITCH /SPEED
SKIPBACK
+
VALUE
+
+
+
BPM SYNC
GATE
LOOP
REVERSE
ROLL
+
+
+
A/F
B/G
C/H
D/I
E/J
SHIFT
+
+
+
+ + +
+
1
+
2
+
3
+
4
+
BUS FX
+
5
+
6
+
7
+
8
+
HOLD
+
9
+
10
+
11
+
12
+
EXT SOURCE
+
13
+
14
+
15
+
16
+
SUB PAD
+
+
+ + +
+
+ TOP SCREEN, PADS ORANGE + LIST 3 +
+
+ Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it. +
+
+ LAYER + + 3 FUNCTIONS +
+
+ + +
+
EXPLORE
+
DRILL
+
FIND
+
RULES
+
+
+ + + diff --git a/design/canvas/ManualDrill.dc.html b/design/canvas/ManualDrill.dc.html new file mode 100644 index 0000000..d2c4c8b --- /dev/null +++ b/design/canvas/ManualDrill.dc.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + + +
+ + +
+
+ SHIFT + PADS + ▼ +
+
+ + + + + + + + 4/16 +
+
+ + +
+ +
+
VOLUME
+
CTRL 1
+
CTRL 2
+
CTRL 3
+
+ +
+
+
FILTER +DRIVE
RESONATOR
DELAY
+
+
+
SAMPLE MODE
+
Fixed velocity
+
CORRECT
+
+
+
ISOLATOR
DJFX LOOPER
MFX
+
+
+ +
+
+
PTN SEL
PTN EDIT
REC SET
+
DEL
REC
RESAMPLE
+
EXIT
COPY
REMAIN
+
+
+
+
START /END
PITCH /SPEED
MARK
+
VALUE
+
+
+
BPM SYNC
GATE
LOOP
REVERSE
ROLL
+
+
+
A/F
B/G
C/H
D/I
E/J
+
SHIFT
+
+
+
+ +
+
FIX VEL
+
2
+
3
+
4
+
BUS FX
+
5
+
6
+
7
+
8
+
HOLD
+
9
+
10
+
11
+
12
+
EXT SOURCE
+
13
+
14
+
15
+
16
+
SUB PAD
+
+
+ + +
+
+ CORRECT + P.24 +
+
+ SHIFT + + + PAD 1 + NEXT → +
+
+ Every hit plays at 127. Stored per sample; same combo turns it off. +
+
+ +
+
EXPLORE
+
DRILL
+
FIND
+
RULES
+
+
+ + + diff --git a/design/canvas/Specimen.dc.html b/design/canvas/Specimen.dc.html new file mode 100644 index 0000000..43e3bd4 --- /dev/null +++ b/design/canvas/Specimen.dc.html @@ -0,0 +1,128 @@ + + + + + + + + + + + + + +
+ + +
+
COLOUR
+ +
+
A · MANUAL
+
+
E9E9E6
+
D2D2CE
+
1B1B1B
+
FF4A00
+
+
+ +
+
B · BLUEPRINT
+
+
000000
+
FFFFFF
+
8A8A85
+
FF4A00
+
+
+ +
+
ACCENT — WHICH ORANGE?
+
+
FF4A00  TE
+
FF7A1A  CURRENT
+
+
+ The current orange is lighter and softer. TE's is redder and hits harder against both + a light body and pure black. +
+
+ +
+
FEEDBACK, WITHOUT GREEN AND RED
+
+
CORRECT
+
NOT QUITE
+
+
+
+ + +
+
TYPE — SAME STRINGS, FOUR FACES
+ +
+
+ SPACE GROTESK + SPACE MONO + USED IN THESE MOCKUPS +
+
Fixed velocity
+
+ REC SET · BPM SYNC · SUB PAD + 500 501 502 · P.24 +
+
+ +
+
MARTIAN MONO
+
Fixed velocity
+
+ REC SET · BPM SYNC + 500 501 · P.24 +
+
+ +
+
ARCHIVO + SPACE MONO
+
Fixed velocity
+
+ REC SET · BPM SYNC · SUB PAD + 500 501 502 · P.24 +
+
+ +
+
+ BARLOW + BARLOW CONDENSED + CURRENT — WHAT YOU DISLIKE +
+
Fixed velocity
+
+ REC SET · BPM SYNC · SUB PAD + 500 501 502 · p.24 +
+
+ +
+ All four are on Google Fonts and can be self-hosted for offline use, as Barlow is now. + Teenage Engineering's own face is proprietary, so these are the closest open substitutes + rather than a match. Martian Mono is the most instrument-like but eats horizontal room — + a real constraint on 8px key labels. +
+
+
+ + + diff --git a/design/canvas/canvas.json b/design/canvas/canvas.json new file mode 100644 index 0000000..dc84e25 --- /dev/null +++ b/design/canvas/canvas.json @@ -0,0 +1,41 @@ +{ + "artboards": [ + { "file": "Current.dc.html", "x": 0, "y": 0, "w": 360, "h": 735, "title": "Current — Explore" }, + { "file": "Main.dc.html", "x": 440, "y": 0, "w": 360, "h": 735, "title": "A · Manual — Explore" }, + { "file": "ManualDrill.dc.html", "x": 880, "y": 0, "w": 360, "h": 735, "title": "A · Manual — Drill" }, + { "file": "BlueprintExplore.dc.html", "x": 1320, "y": 0, "w": 360, "h": 735, "title": "B · Blueprint — Explore" }, + { "file": "BlueprintDrill.dc.html", "x": 1760, "y": 0, "w": 360, "h": 735, "title": "B · Blueprint — Drill" }, + { "file": "Specimen.dc.html", "x": 0, "y": 855, "w": 880, "h": 640, "title": "Type & colour" } + ], + "annotations": [ + { + "id": "note-current", + "x": 0, + "y": -190, + "w": 360, + "text": "CURRENT — for comparison.\nBarlow, soft filled greys, rounded corners, green/red drill feedback. Everything is a slightly different grey, so nothing leads." + }, + { + "id": "note-a", + "x": 440, + "y": -190, + "w": 800, + "text": "A · MANUAL (light) — the EP-133 manual and product page.\nLight body, black 2px outlines, hard offset shadows, black pads, solid orange for lit keys.\nMost faithful to what you pointed at, and the most distinctive. Tradeoff: a bright screen in a dim studio, and it's the bigger departure from what's there now." + }, + { + "id": "note-b", + "x": 1320, + "y": -190, + "w": 800, + "text": "B · BLUEPRINT (dark) — the dimensions page.\nPure black, 1px white hairlines, no fills at all, orange only where something is lit.\nStays dark for studio use and keeps the panel legible at a glance. Tradeoff: hairlines are less forgiving on a phone than in print, and it has less of the manual's warmth." + }, + { + "id": "note-spec", + "x": 960, + "y": 855, + "w": 420, + "text": "Type is deliberately the SAME in both directions, so the light/dark choice isn't tangled up with the font choice. Pick them separately.\n\nGreen and red have no place in this palette — the bottom-left block shows the alternative: fill for correct, dashed outline for not-quite." + } + ], + "launch": { "view": "canvas" } +}