jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Design canvas, third pass: usable screen, fix label overflow

Browse Source 
RESAMPLE was overflowing its button and REMAIN was touching its
borders. Both lack a space, so unlike PTN EDIT or BPM SYNC they cannot
wrap. Restored the soft hyphens the reference already uses
(RE-SAMPLE, RE-MAIN, RE-VERSE) plus hyphens:manual on the key style.

The screen was faithful to the object but too small for the job it does
here. The circle no longer encloses the display: a 124px circle sits
behind a 168x84 LCD, so it reads as two 20px caps above and below with
no ring around the rectangle. Area goes up 2.4x, enough for the display
to name the layer and list what is on it, or show the card and verdict
when drilling.

Room came from the control rows (-6), knobs (-2), info card (-4) and
tab bar (-4):
  8 + 44 + 8 + 525 + 8 + 84 + 8 + 50 = 735
  8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525
Pad rows are 43px.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Georgi Durankiev
2026-09-17 00:15:45 +03:00
parent ae142cdf52
commit 12a86fb5db
4 changed files with 115 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
design/canvas/DarkExplore.dc.html
View File

@@ -13,7 +13,8 @@
a { color: #FF4A00; } a:hover { color: #FF7A45; }
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
background:#3E3E3A; border:2px solid #000000; border-radius:3px; color:#EDEDEB; font-size:8px;
line-height:1.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
hyphens:manual; overflow-wrap:break-word; }
.lit { background:#FF4A00; color:#111111; font-weight:700; }
.pad { background:#0E0E0C; border:2px solid #000000; border-radius:4px; color:#EDEDEB; font-size:9px; }
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
@@ -23,9 +24,12 @@
.cap { font-family:'Space Mono',monospace; font-size:6px; letter-spacing:.11em; color:#8A8A85; white-space:nowrap; }
.rule { flex:1; height:1px; background:#4A4A46; }
.caprow { height:8px; display:flex; align-items:center; gap:4px; }
.btnrow { height:34px; display:flex; gap:5px; }
.grp { height:42px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.btnrow { height:32px; display:flex; gap:5px; }
.grp { height:40px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.col { display:flex; flex-direction:column; }
.lcdrow { display:flex; justify-content:space-between; align-items:center;
font-family:'Space Mono',monospace; font-size:6.5px; letter-spacing:.06em; }
.inv { background:#111111; color:#C9D2C4; padding:1px 4px; }
</style>
</helmet>
@@ -48,47 +52,47 @@
</div>
</div>
<div style="height:517px; flex:0 0 auto; background:#2E2E2A; border:2px solid #000000;
<div style="height:525px; flex:0 0 auto; background:#2E2E2A; border:2px solid #000000;
box-shadow:5px 5px 0 #000000; box-sizing:border-box; padding:8px;
display:flex; flex-direction:column;">
<div style="height:38px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
</div>
<div style="height:104px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<div style="height:124px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">FILTER<br>+DRIVE</div><div class="fxk">RESONATOR</div><div class="fxk">DELAY</div>
</div>
<div style="display:flex; align-items:center; justify-content:center;">
<div style="width:104px; height:104px; border-radius:50%; background:#0E0E0C; border:2px solid #000000;
display:flex; align-items:center; justify-content:center; box-sizing:border-box;">
<div style="width:76px; height:48px; background:#C9D2C4; border:1px solid #000000; box-sizing:border-box;
padding:3px 5px; display:flex; flex-direction:column; justify-content:space-between;
font-family:'Space Mono',monospace; color:#111111;">
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>SAMPLE</span><span>S&nbsp;MODE</span>
</div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; text-align:center; line-height:1;">&#8212;</div>
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>LAYER</span><span>3 FN</span>
</div>
<div style="position:relative; display:flex; align-items:center; justify-content:center;">
<div style="position:absolute; left:50%; top:0; width:124px; height:124px; margin-left:-62px;
border-radius:50%; background:#0E0E0C; border:2px solid #000000; box-sizing:border-box;"></div>
<div style="position:relative; width:168px; height:84px; background:#C9D2C4; border:2px solid #000000;
box-sizing:border-box; padding:4px 6px; display:flex; flex-direction:column;
justify-content:space-between; color:#111111;">
<div class="lcdrow"><span>MODE:SAMPLE</span><span>LAYER:&#8212;</span></div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700;
text-align:center; line-height:1;">3 functions</div>
<div class="lcdrow" style="gap:3px;">
<span class="inv">STOP&#215;4</span><span class="inv">INFO</span><span class="inv">SKIPBACK</span>
</div>
</div>
</div>
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">ISOLATOR</div><div class="fxk">DJFX<br>LOOPER</div><div class="fxk">MFX</div>
</div>
</div>
<div style="height:140px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<div style="height:134px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<div class="grp">
<div class="col">
<div class="caprow"><span class="cap">PATTERN SEQUENCER</span><span class="rule"></span></div>
@@ -107,12 +111,13 @@
<div class="grp">
<div class="col">
<div class="caprow"><span class="cap">SAMPLING</span><span class="rule"></span></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RE&shy;SAMPLE</div></div>
</div>
<div class="col">
<div class="caprow"><span class="rule"></span></div>
<div class="btnrow">
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div><div class="k">REVERSE</div><div class="k">ROLL</div>
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div>
<div class="k">RE&shy;VERSE</div><div class="k">ROLL</div>
</div>
</div>
</div>
@@ -131,7 +136,7 @@
</div>
</div>
<div style="height:191px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
<div style="height:187px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
grid-auto-rows:1fr; gap:5px;">
<div class="k pad"><span class="num">1</span></div>
<div class="k pad"><span class="num">2</span></div>
@@ -156,7 +161,7 @@
</div>
</div>
<div style="height:88px; flex:0 0 auto; background:#2E2E2A; border:2px solid #000000;
<div style="height:84px; flex:0 0 auto; background:#2E2E2A; border:2px solid #000000;
box-shadow:3px 3px 0 #000000; box-sizing:border-box; padding:7px 10px;
display:flex; flex-direction:column; gap:4px;">
<div style="display:flex; justify-content:space-between; align-items:baseline; gap:8px;">
@@ -164,12 +169,12 @@
<span style="flex:0 0 auto; border:2px solid #000000; background:#3E3E3A; padding:2px 6px; font-size:9px;
font-weight:700; letter-spacing:.06em;">LIST 3</span>
</div>
<div style="font-size:13px; line-height:1.3; text-wrap:pretty; color:#E4E4E0;">
<div style="font-size:12.5px; line-height:1.3; text-wrap:pretty; color:#E4E4E0;">
Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it.
</div>
</div>
<div style="height:54px; flex:0 0 auto; display:flex; border:2px solid #000000; background:#2E2E2A; box-sizing:border-box;">
<div style="height:50px; flex:0 0 auto; display:flex; border:2px solid #000000; background:#2E2E2A; box-sizing:border-box;">
<div style="flex:1; display:flex; align-items:center; justify-content:center; background:#FF4A00;
color:#111111; font-size:11px; font-weight:700; letter-spacing:.08em;">EXPLORE</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #000000;

81
design/canvas/Main.dc.html
View File

@@ -13,7 +13,8 @@
a { color: #FF4A00; } a:hover { color: #C43900; }
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
line-height:1.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
hyphens:manual; overflow-wrap:break-word; }
.lit { background:#FF4A00; color:#111111; font-weight:700; }
.pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
@@ -23,9 +24,12 @@
.cap { font-family:'Space Mono',monospace; font-size:6px; letter-spacing:.11em; color:#6E6E69; white-space:nowrap; }
.rule { flex:1; height:1px; background:#B5B5B0; }
.caprow { height:8px; display:flex; align-items:center; gap:4px; }
.btnrow { height:34px; display:flex; gap:5px; }
.grp { height:42px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.btnrow { height:32px; display:flex; gap:5px; }
.grp { height:40px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.col { display:flex; flex-direction:column; }
.lcdrow { display:flex; justify-content:space-between; align-items:center;
font-family:'Space Mono',monospace; font-size:6.5px; letter-spacing:.06em; }
.inv { background:#111111; color:#C9D2C4; padding:1px 4px; }
</style>
</helmet>
@@ -50,49 +54,45 @@
</div>
<!-- the unit -->
<div style="height:517px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
<div style="height:525px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
display:flex; flex-direction:column;">
<!-- knobs -->
<div style="height:38px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">VOLUME</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">CTRL 1</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">CTRL 2</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
letter-spacing:.02em;">CTRL 3</div>
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
</div>
<!-- fx + circular screen housing with a rectangular LCD -->
<div style="height:104px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<!-- fx + screen: circle shows only as caps above and below the display -->
<div style="height:124px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">FILTER<br>+DRIVE</div>
<div class="fxk">RESONATOR</div>
<div class="fxk">DELAY</div>
</div>
<div style="display:flex; align-items:center; justify-content:center;">
<div style="width:104px; height:104px; border-radius:50%; background:#1B1B1B; border:2px solid #111111;
display:flex; align-items:center; justify-content:center; box-sizing:border-box;">
<div style="width:76px; height:48px; background:#C9D2C4; border:1px solid #111111; box-sizing:border-box;
padding:3px 5px; display:flex; flex-direction:column; justify-content:space-between;
font-family:'Space Mono',monospace; color:#111111;">
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>SAMPLE</span><span>S&nbsp;MODE</span>
</div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; text-align:center; line-height:1;">&#8212;</div>
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>LAYER</span><span>3 FN</span>
</div>
<div style="position:relative; display:flex; align-items:center; justify-content:center;">
<div style="position:absolute; left:50%; top:0; width:124px; height:124px; margin-left:-62px;
border-radius:50%; background:#1B1B1B; border:2px solid #111111; box-sizing:border-box;"></div>
<div style="position:relative; width:168px; height:84px; background:#C9D2C4; border:2px solid #111111;
box-sizing:border-box; padding:4px 6px; display:flex; flex-direction:column;
justify-content:space-between; color:#111111;">
<div class="lcdrow"><span>MODE:SAMPLE</span><span>LAYER:&#8212;</span></div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700;
text-align:center; line-height:1;">3 functions</div>
<div class="lcdrow" style="gap:3px;">
<span class="inv">STOP&#215;4</span><span class="inv">INFO</span><span class="inv">SKIPBACK</span>
</div>
</div>
</div>
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">ISOLATOR</div>
<div class="fxk">DJFX<br>LOOPER</div>
@@ -100,8 +100,8 @@
</div>
</div>
<!-- control block, grouped the way the hardware silkscreens it -->
<div style="height:140px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<!-- control block, grouped as the hardware is silkscreened -->
<div style="height:134px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<div class="grp">
<div class="col">
@@ -121,12 +121,13 @@
<div class="grp">
<div class="col">
<div class="caprow"><span class="cap">SAMPLING</span><span class="rule"></span></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RE&shy;SAMPLE</div></div>
</div>
<div class="col">
<div class="caprow"><span class="rule"></span></div>
<div class="btnrow">
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div><div class="k">REVERSE</div><div class="k">ROLL</div>
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div>
<div class="k">RE&shy;VERSE</div><div class="k">ROLL</div>
</div>
</div>
</div>
@@ -146,7 +147,7 @@
</div>
<!-- pads -->
<div style="height:191px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
<div style="height:187px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
grid-auto-rows:1fr; gap:5px;">
<div class="k pad"><span class="num">1</span></div>
<div class="k pad"><span class="num">2</span></div>
@@ -172,20 +173,20 @@
</div>
<!-- info -->
<div style="height:88px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
<div style="height:84px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:7px 10px;
display:flex; flex-direction:column; gap:4px;">
<div style="display:flex; justify-content:space-between; align-items:baseline; gap:8px;">
<span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#6E6E69;">TOP SCREEN, PADS ORANGE</span>
<span style="flex:0 0 auto; border:2px solid #111111; padding:2px 6px; font-size:9px; font-weight:700; letter-spacing:.06em;">LIST 3</span>
</div>
<div style="font-size:13px; line-height:1.3; text-wrap:pretty;">
<div style="font-size:12.5px; line-height:1.3; text-wrap:pretty;">
Hold a button to peek at its layer, tap it to lock, tap again to release. Tap a lit control to read it.
</div>
</div>
<!-- tabs -->
<div style="height:54px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
<div style="height:50px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
<div style="flex:1; display:flex; align-items:center; justify-content:center; background:#FF4A00;
color:#111111; font-size:11px; font-weight:700; letter-spacing:.08em;">EXPLORE</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;

63
design/canvas/ManualDrill.dc.html
View File

@@ -13,7 +13,8 @@
a { color: #FF4A00; } a:hover { color: #C43900; }
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
line-height:1.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
line-height:1.02; letter-spacing:.03em; padding:2px 2px; box-sizing:border-box; font-weight:500;
hyphens:manual; overflow-wrap:break-word; }
.lit { background:#FF4A00; color:#111111; font-weight:700; }
.pad { background:#1B1B1B; border:2px solid #111111; border-radius:4px; color:#EDEDEB; font-size:9px; }
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
@@ -23,9 +24,12 @@
.cap { font-family:'Space Mono',monospace; font-size:6px; letter-spacing:.11em; color:#6E6E69; white-space:nowrap; }
.rule { flex:1; height:1px; background:#B5B5B0; }
.caprow { height:8px; display:flex; align-items:center; gap:4px; }
.btnrow { height:34px; display:flex; gap:5px; }
.grp { height:42px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.btnrow { height:32px; display:flex; gap:5px; }
.grp { height:40px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:10px; }
.col { display:flex; flex-direction:column; }
.lcdrow { display:flex; justify-content:space-between; align-items:center;
font-family:'Space Mono',monospace; font-size:6.5px; letter-spacing:.06em; }
.inv { background:#111111; color:#C9D2C4; padding:1px 4px; }
.chip { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em;
background:#111111; color:#EDEDEB; padding:2px 6px; }
</style>
@@ -56,45 +60,47 @@
</div>
</div>
<div style="height:517px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
<div style="height:525px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
display:flex; flex-direction:column;">
<div style="height:38px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 4px;">
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
</div>
<div style="height:104px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<div style="height:124px; margin-top:8px; display:grid; grid-template-columns:62px minmax(0,1fr) 62px; gap:8px;">
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">FILTER<br>+DRIVE</div><div class="fxk">RESONATOR</div><div class="fxk">DELAY</div>
</div>
<div style="display:flex; align-items:center; justify-content:center;">
<div style="width:104px; height:104px; border-radius:50%; background:#1B1B1B; border:2px solid #111111;
display:flex; align-items:center; justify-content:center; box-sizing:border-box;">
<div style="width:76px; height:48px; background:#C9D2C4; border:1px solid #111111; box-sizing:border-box;
padding:3px 5px; display:flex; flex-direction:column; justify-content:space-between;
font-family:'Space Mono',monospace; color:#111111;">
<div style="font-size:5.5px; letter-spacing:.08em; display:flex; justify-content:space-between;">
<span>SAMPLE</span><span>P.24</span>
</div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; text-align:center; line-height:1.05;">Fixed<br>velocity</div>
<div style="font-size:5.5px; letter-spacing:.08em; text-align:center; background:#111111; color:#C9D2C4;">CORRECT</div>
<div style="position:relative; display:flex; align-items:center; justify-content:center;">
<div style="position:absolute; left:50%; top:0; width:124px; height:124px; margin-left:-62px;
border-radius:50%; background:#1B1B1B; border:2px solid #111111; box-sizing:border-box;"></div>
<div style="position:relative; width:168px; height:84px; background:#C9D2C4; border:2px solid #111111;
box-sizing:border-box; padding:4px 6px; display:flex; flex-direction:column;
justify-content:space-between; color:#111111;">
<div class="lcdrow"><span>MODE:SAMPLE</span><span>P.24</span></div>
<div style="font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:700;
text-align:center; line-height:1;">Fixed velocity</div>
<div class="lcdrow" style="gap:3px;">
<span class="inv">CORRECT</span><span>SHIFT + PAD 1</span>
</div>
</div>
</div>
<div style="display:flex; flex-direction:column; gap:5px;">
<div class="fxk">ISOLATOR</div><div class="fxk">DJFX<br>LOOPER</div><div class="fxk">MFX</div>
</div>
</div>
<div style="height:140px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<div style="height:134px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
<div class="grp">
<div class="col">
<div class="caprow"><span class="cap">PATTERN SEQUENCER</span><span class="rule"></span></div>
@@ -113,12 +119,13 @@
<div class="grp">
<div class="col">
<div class="caprow"><span class="cap">SAMPLING</span><span class="rule"></span></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
<div class="btnrow"><div class="k">DEL</div><div class="k">REC</div><div class="k">RE&shy;SAMPLE</div></div>
</div>
<div class="col">
<div class="caprow"><span class="rule"></span></div>
<div class="btnrow">
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div><div class="k">REVERSE</div><div class="k">ROLL</div>
<div class="k">BPM SYNC</div><div class="k">GATE</div><div class="k">LOOP</div>
<div class="k">RE&shy;VERSE</div><div class="k">ROLL</div>
</div>
</div>
</div>
@@ -126,7 +133,7 @@
<div class="grp">
<div class="col">
<div class="caprow"><span class="rule"></span></div>
<div class="btnrow"><div class="k">EXIT</div><div class="k">COPY</div><div class="k">REMAIN</div></div>
<div class="btnrow"><div class="k">EXIT</div><div class="k">COPY</div><div class="k">RE&shy;MAIN</div></div>
</div>
<div class="col">
<div class="caprow"><span class="cap">BANK</span><span class="rule"></span></div>
@@ -138,7 +145,7 @@
</div>
</div>
<div style="height:191px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
<div style="height:187px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
grid-auto-rows:1fr; gap:5px;">
<div class="k lit" style="border-radius:4px; font-size:10px;">FIX VEL</div>
<div class="k pad"><span class="num">2</span></div>
@@ -163,7 +170,7 @@
</div>
</div>
<div style="height:88px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
<div style="height:84px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:7px 10px;
display:flex; flex-direction:column; gap:5px;">
<div style="display:flex; align-items:center; gap:6px;">
@@ -179,7 +186,7 @@
</div>
</div>
<div style="height:54px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
<div style="height:50px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
<div style="flex:1; display:flex; align-items:center; justify-content:center;
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">EXPLORE</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;

8
design/canvas/canvas.json
View File

@@ -17,16 +17,16 @@
{
"id": "note-a2",
"x": 0,
"y": -210,
"y": -230,
"w": 800,
"text": "DIRECTION A, second pass.\n\nScreen — now the hardware's actual assembly: a black circular housing with a small rectangular positive LCD inset, dark text on pale grey-green, status line top and bottom.\n\nControl block — grouped the way the device is silkscreened (PATTERN SEQUENCER, SAMPLING, SAMPLE EDIT, BANK) with a hairline bracket and real air between groups, instead of three undifferentiated rows.\n\nFX buttons are dark with orange text, as on the unit.\n\nPaid for by trimming the info card 116 to 88 and the tab bar 58 to 54: the panel grows 485 to 517 and pads stay at exactly 44px."
"text": "DIRECTION A, third pass.\n\nScreen — the circle no longer encloses the display. A 124px circle sits behind a 168x84 LCD, so it reads only as two 20px caps above and below, with no ring around the rectangle. The display has 2.4x the area, which is enough to be useful: it now names the layer and lists the functions on it (STOP x4 / INFO / SKIPBACK), or the card and verdict when drilling.\n\nLabels — RESAMPLE, REMAIN and REVERSE carry soft hyphens again, as the reference does. They are the only labels with no space in them, so they were the only ones that could not wrap, and RESAMPLE was overflowing its button.\n\nRoom for the bigger screen came from the control rows (-6), knobs (-2), info card (-4) and tab bar (-4). Pad rows are 43px."
},
{
"id": "note-dark",
"x": 880,
"y": -210,
"y": -230,
"w": 360,
"text": "DARK MODE — A's counterpart, not the old Blueprint.\n\nFilled bodies and hard black offset shadows, with the panel lighter than the ground so the shadows actually read. The LCD stays pale, which is what the real unit does in a dark studio."
"text": "DARK MODE — A's counterpart, not the old Blueprint.\n\nFilled bodies and hard black offset shadows, with the panel lighter than the ground so the shadows actually read.\n\nThe LCD stays pale in both, which is what the real unit does: it is the one thing in the room that glows."
},
{
"id": "note-spec",