Design canvas, second pass: direction A settled, drawn from the hardware
Feedback: direction A (light manual) is right; the control block reads as busy; the screen should match the real assembly; the dark option was flat because it had no shadows. Screen — the hardware's actual arrangement: a black circular housing with a small rectangular positive LCD inset (dark text on pale grey-green), status line top and bottom, replacing the ellipse with floating text. Control block — grouped as the device is silkscreened (PATTERN SEQUENCER, SAMPLING, SAMPLE EDIT, BANK), each group a hairline bracket caption over its row, with 10px between the two blocks and 7px between groups instead of three undifferentiated rows. FX buttons are now dark with orange text, as on the unit. Dark mode replaces Blueprint: A's counterpart with filled bodies and hard black offset shadows, the panel lighter than the ground so the shadows read. Blueprint and the current app move to an 'Earlier' page. Room came from trimming the info card 116->88 and the tab bar 58->54, so the panel grows 485->517 and pad rows stay at exactly 44px: 8 + 44 + 8 + 517 + 8 + 88 + 8 + 54 = 735 8 + 38 + 8 + 104 + 10 + 140 + 10 + 191 + 8 = 517 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
185
design/canvas/DarkExplore.dc.html
Normal file
185
design/canvas/DarkExplore.dc.html
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="./support.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<x-dc>
|
||||||
|
<helmet>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap">
|
||||||
|
<style>
|
||||||
|
body { margin: 0; }
|
||||||
|
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; }
|
||||||
|
.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; }
|
||||||
|
.fxk { flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
|
||||||
|
background:#0E0E0C; border:2px solid #000000; border-radius:10px; color:#FF4A00;
|
||||||
|
font-size:7.5px; font-weight:700; letter-spacing:.04em; line-height:1.05; padding:2px; box-sizing:border-box; }
|
||||||
|
.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; }
|
||||||
|
.col { display:flex; flex-direction:column; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#1A1A17; color:#EDEDEB;
|
||||||
|
font-family:'Space Grotesk',system-ui,sans-serif; padding:8px 8px 0; display:flex;
|
||||||
|
flex-direction:column; gap:8px;">
|
||||||
|
|
||||||
|
<div style="height:44px; display:flex; gap:8px; flex:0 0 auto;">
|
||||||
|
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
||||||
|
background:#2E2E2A; border:2px solid #000000; box-shadow:3px 3px 0 #000000;
|
||||||
|
padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">SAMPLE MODE</span>
|
||||||
|
<span style="font-size:9px; color:#8A8A85;">▼</span>
|
||||||
|
</div>
|
||||||
|
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
||||||
|
background:#2E2E2A; border:2px solid #000000; box-shadow:3px 3px 0 #000000;
|
||||||
|
padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">NO MODIFIER</span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:10px; color:#FF4A00;">3</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:517px; 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;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
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="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 MODE</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; text-align:center; line-height:1;">—</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>
|
||||||
|
</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 class="grp">
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="cap">PATTERN SEQUENCER</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="cap">SAMPLE EDIT</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k lit">SKIPBACK</div>
|
||||||
|
<div style="width:30px; flex:0 0 auto; border-radius:50%; border:2px solid #000000; background:#0E0E0C;
|
||||||
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:6.5px;">VALUE</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grp">
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="rule"></span></div>
|
||||||
|
<div class="btnrow"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="cap">BANK</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow">
|
||||||
|
<div class="k">A/F</div><div class="k">B/G</div><div class="k">C/H</div><div class="k">D/I</div><div class="k">E/J</div><div class="k">SHIFT</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:191px; 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>
|
||||||
|
<div class="k pad"><span class="num">3</span></div>
|
||||||
|
<div class="k pad"><span class="num">4</span></div>
|
||||||
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">BUS FX</div>
|
||||||
|
<div class="k pad"><span class="num">5</span></div>
|
||||||
|
<div class="k pad"><span class="num">6</span></div>
|
||||||
|
<div class="k pad"><span class="num">7</span></div>
|
||||||
|
<div class="k pad"><span class="num">8</span></div>
|
||||||
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">HOLD</div>
|
||||||
|
<div class="k pad"><span class="num">9</span></div>
|
||||||
|
<div class="k pad"><span class="num">10</span></div>
|
||||||
|
<div class="k pad"><span class="num">11</span></div>
|
||||||
|
<div class="k pad"><span class="num">12</span></div>
|
||||||
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">EXT SOURCE</div>
|
||||||
|
<div class="k pad"><span class="num">13</span></div>
|
||||||
|
<div class="k pad"><span class="num">14</span></div>
|
||||||
|
<div class="k pad"><span class="num">15</span></div>
|
||||||
|
<div class="k pad"><span class="num">16</span></div>
|
||||||
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">SUB PAD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:88px; 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;">
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#8A8A85;">TOP SCREEN, PADS ORANGE</span>
|
||||||
|
<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;">
|
||||||
|
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="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;
|
||||||
|
color:#8A8A85; font-size:11px; font-weight:500; letter-spacing:.08em;">DRILL</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #000000;
|
||||||
|
color:#8A8A85; font-size:11px; font-weight:500; letter-spacing:.08em;">FIND</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #000000;
|
||||||
|
color:#8A8A85; font-size:11px; font-weight:500; letter-spacing:.08em;">RULES</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -12,12 +12,20 @@
|
|||||||
body { margin: 0; }
|
body { margin: 0; }
|
||||||
a { color: #FF4A00; } a:hover { color: #C43900; }
|
a { color: #FF4A00; } a:hover { color: #C43900; }
|
||||||
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
||||||
background:#F5F5F2; border:2px solid #111111; color:#111111; font-size:8px; line-height:1.05;
|
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
|
||||||
letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
|
line-height:1.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
|
||||||
.lit { background:#FF4A00; color:#111111; }
|
.lit { background:#FF4A00; color:#111111; font-weight:700; }
|
||||||
.pad { background:#1B1B1B; border:2px solid #111111; color:#EDEDEB; font-size:9px; }
|
.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; }
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
|
||||||
.row { display:flex; gap:4px; flex:1; }
|
.fxk { flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
|
||||||
|
background:#1B1B1B; border:2px solid #111111; border-radius:10px; color:#FF4A00;
|
||||||
|
font-size:7.5px; font-weight:700; letter-spacing:.04em; line-height:1.05; padding:2px; box-sizing:border-box; }
|
||||||
|
.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; }
|
||||||
|
.col { display:flex; flex-direction:column; }
|
||||||
</style>
|
</style>
|
||||||
</helmet>
|
</helmet>
|
||||||
|
|
||||||
@@ -42,110 +50,142 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- the unit -->
|
<!-- the unit -->
|
||||||
<div style="height:485px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
|
<div style="height:517px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
|
||||||
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
|
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
|
||||||
display:flex; flex-direction:column; gap:7px;">
|
display:flex; flex-direction:column;">
|
||||||
|
|
||||||
<!-- knobs -->
|
<!-- knobs -->
|
||||||
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
<div style="height:38px; 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:#F5F5F2;
|
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">VOLUME</div>
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
|
||||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
letter-spacing:.02em;">VOLUME</div>
|
||||||
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;
|
||||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 2</div>
|
letter-spacing:.02em;">CTRL 1</div>
|
||||||
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 3</div>
|
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>
|
</div>
|
||||||
|
|
||||||
<!-- fx + screen -->
|
<!-- fx + circular screen housing with a rectangular LCD -->
|
||||||
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
<div style="height:104px; 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 style="display:flex; flex-direction:column; gap:5px;">
|
||||||
<div class="k">FILTER +DRIVE</div>
|
<div class="fxk">FILTER<br>+DRIVE</div>
|
||||||
<div class="k">RESONATOR</div>
|
<div class="fxk">RESONATOR</div>
|
||||||
<div class="k">DELAY</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 MODE</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; text-align:center; line-height:1;">—</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>
|
||||||
</div>
|
</div>
|
||||||
<div style="background:#111111; border:2px solid #111111; border-radius:50%/42%; color:#EDEDEB;
|
|
||||||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
|
||||||
text-align:center; padding:6px 10px; box-sizing:border-box;">
|
|
||||||
<div style="font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.14em; color:#8A8A85;">SAMPLE MODE</div>
|
|
||||||
<div style="font-size:20px; font-weight:700; line-height:1.1; margin:2px 0;">—</div>
|
|
||||||
<div style="font-size:9px; color:#BDBDB8;">3 functions here</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
<div class="k">ISOLATOR</div>
|
<div class="fxk">ISOLATOR</div>
|
||||||
<div class="k">DJFX LOOPER</div>
|
<div class="fxk">DJFX<br>LOOPER</div>
|
||||||
<div class="k">MFX</div>
|
<div class="fxk">MFX</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- control block -->
|
<!-- control block, grouped the way the hardware silkscreens it -->
|
||||||
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
<div style="height:140px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
|
||||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
|
||||||
<div class="row"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
<div class="grp">
|
||||||
<div class="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
<div class="col">
|
||||||
<div class="row"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
<div class="caprow"><span class="cap">PATTERN SEQUENCER</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="caprow"><span class="cap">SAMPLE EDIT</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow">
|
||||||
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k lit">SKIPBACK</div>
|
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k lit">SKIPBACK</div>
|
||||||
<div style="width:32px; flex:0 0 auto; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
<div style="width:30px; flex:0 0 auto; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:6.5px;">VALUE</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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">REVERSE</div><div class="k">ROLL</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grp">
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="rule"></span></div>
|
||||||
|
<div class="btnrow"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="cap">BANK</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow">
|
||||||
<div class="k">A/F</div><div class="k">B/G</div><div class="k">C/H</div><div class="k">D/I</div><div class="k">E/J</div><div class="k">SHIFT</div>
|
<div class="k">A/F</div><div class="k">B/G</div><div class="k">C/H</div><div class="k">D/I</div><div class="k">E/J</div><div class="k">SHIFT</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- pads -->
|
<!-- pads -->
|
||||||
<div style="height:194px; display:grid; grid-template-columns:repeat(4,1fr) .9fr; grid-auto-rows:1fr; gap:5px;">
|
<div style="height:191px; 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">1</span></div>
|
||||||
<div class="k pad"><span class="num">2</span></div>
|
<div class="k pad"><span class="num">2</span></div>
|
||||||
<div class="k pad"><span class="num">3</span></div>
|
<div class="k pad"><span class="num">3</span></div>
|
||||||
<div class="k pad"><span class="num">4</span></div>
|
<div class="k pad"><span class="num">4</span></div>
|
||||||
<div class="k">BUS FX</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">BUS FX</div>
|
||||||
<div class="k pad"><span class="num">5</span></div>
|
<div class="k pad"><span class="num">5</span></div>
|
||||||
<div class="k pad"><span class="num">6</span></div>
|
<div class="k pad"><span class="num">6</span></div>
|
||||||
<div class="k pad"><span class="num">7</span></div>
|
<div class="k pad"><span class="num">7</span></div>
|
||||||
<div class="k pad"><span class="num">8</span></div>
|
<div class="k pad"><span class="num">8</span></div>
|
||||||
<div class="k">HOLD</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">HOLD</div>
|
||||||
<div class="k pad"><span class="num">9</span></div>
|
<div class="k pad"><span class="num">9</span></div>
|
||||||
<div class="k pad"><span class="num">10</span></div>
|
<div class="k pad"><span class="num">10</span></div>
|
||||||
<div class="k pad"><span class="num">11</span></div>
|
<div class="k pad"><span class="num">11</span></div>
|
||||||
<div class="k pad"><span class="num">12</span></div>
|
<div class="k pad"><span class="num">12</span></div>
|
||||||
<div class="k">EXT SOURCE</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">EXT SOURCE</div>
|
||||||
<div class="k pad"><span class="num">13</span></div>
|
<div class="k pad"><span class="num">13</span></div>
|
||||||
<div class="k pad"><span class="num">14</span></div>
|
<div class="k pad"><span class="num">14</span></div>
|
||||||
<div class="k pad"><span class="num">15</span></div>
|
<div class="k pad"><span class="num">15</span></div>
|
||||||
<div class="k pad"><span class="num">16</span></div>
|
<div class="k pad"><span class="num">16</span></div>
|
||||||
<div class="k">SUB PAD</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">SUB PAD</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- info -->
|
<!-- info -->
|
||||||
<div style="height:116px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
|
<div style="height:88px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
|
||||||
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:8px 10px;
|
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:7px 10px;
|
||||||
display:flex; flex-direction:column; gap:4px;">
|
display:flex; flex-direction:column; gap:4px;">
|
||||||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
<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="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#6E6E69;">TOP SCREEN, PADS ORANGE</span>
|
||||||
<span style="border:2px solid #111111; padding:2px 6px; font-size:9px; font-weight:700; letter-spacing:.06em;">LIST 3</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>
|
||||||
<div style="font-size:13px; line-height:1.3; text-wrap:pretty;">
|
<div style="font-size:13px; 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.
|
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="margin-top:auto; display:flex; gap:6px; align-items:center;">
|
|
||||||
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#6E6E69; letter-spacing:.1em;">LAYER</span>
|
|
||||||
<span style="height:2px; flex:1; background:#111111;"></span>
|
|
||||||
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#FF4A00; letter-spacing:.1em;">3 FUNCTIONS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- tabs -->
|
<!-- tabs -->
|
||||||
<div style="height:58px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
|
<div style="height:54px; 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;
|
<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>
|
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;
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
|
||||||
|
|||||||
@@ -12,13 +12,21 @@
|
|||||||
body { margin: 0; }
|
body { margin: 0; }
|
||||||
a { color: #FF4A00; } a:hover { color: #C43900; }
|
a { color: #FF4A00; } a:hover { color: #C43900; }
|
||||||
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
||||||
background:#F5F5F2; border:2px solid #111111; color:#111111; font-size:8px; line-height:1.05;
|
background:#F5F5F2; border:2px solid #111111; border-radius:3px; color:#111111; font-size:8px;
|
||||||
letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
|
line-height:1.05; letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
|
||||||
.lit { background:#FF4A00; color:#111111; font-weight:700; }
|
.lit { background:#FF4A00; color:#111111; font-weight:700; }
|
||||||
.pad { background:#1B1B1B; border:2px solid #111111; color:#EDEDEB; font-size:9px; }
|
.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; }
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
|
||||||
.row { display:flex; gap:4px; flex:1; }
|
.fxk { flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
|
||||||
.cap { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em;
|
background:#1B1B1B; border:2px solid #111111; border-radius:10px; color:#FF4A00;
|
||||||
|
font-size:7.5px; font-weight:700; letter-spacing:.04em; line-height:1.05; padding:2px; box-sizing:border-box; }
|
||||||
|
.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; }
|
||||||
|
.col { display:flex; flex-direction:column; }
|
||||||
|
.chip { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em;
|
||||||
background:#111111; color:#EDEDEB; padding:2px 6px; }
|
background:#111111; color:#EDEDEB; padding:2px 6px; }
|
||||||
</style>
|
</style>
|
||||||
</helmet>
|
</helmet>
|
||||||
@@ -27,7 +35,6 @@
|
|||||||
font-family:'Space Grotesk',system-ui,sans-serif; padding:8px 8px 0; display:flex;
|
font-family:'Space Grotesk',system-ui,sans-serif; padding:8px 8px 0; display:flex;
|
||||||
flex-direction:column; gap:8px;">
|
flex-direction:column; gap:8px;">
|
||||||
|
|
||||||
<!-- deck + progress -->
|
|
||||||
<div style="height:44px; display:flex; gap:8px; flex:0 0 auto;">
|
<div style="height:44px; display:flex; gap:8px; flex:0 0 auto;">
|
||||||
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
||||||
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
||||||
@@ -35,7 +42,7 @@
|
|||||||
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">SHIFT + PADS</span>
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">SHIFT + PADS</span>
|
||||||
<span style="font-size:9px; color:#6E6E69;">▼</span>
|
<span style="font-size:9px; color:#6E6E69;">▼</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex:0 0 118px; display:flex; align-items:center; gap:8px;
|
<div style="flex:0 0 112px; display:flex; align-items:center; gap:8px;
|
||||||
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
||||||
padding:0 10px; box-sizing:border-box;">
|
padding:0 10px; box-sizing:border-box;">
|
||||||
<span style="display:flex; align-items:flex-end; gap:2px; height:18px;">
|
<span style="display:flex; align-items:flex-end; gap:2px; height:18px;">
|
||||||
@@ -49,105 +56,130 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- the unit, answer revealed -->
|
<div style="height:517px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
|
||||||
<div style="height:485px; flex:0 0 auto; background:#D2D2CE; border:2px solid #111111;
|
|
||||||
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
|
box-shadow:4px 4px 0 #111111; box-sizing:border-box; padding:8px;
|
||||||
display:flex; flex-direction:column; gap:7px;">
|
display:flex; flex-direction:column;">
|
||||||
|
|
||||||
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
<div style="height:38px; 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:#F5F5F2;
|
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
|
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:#F5F5F2;
|
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
|
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:#F5F5F2;
|
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
|
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:#F5F5F2;
|
<div style="width:36px; height:36px; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
<div style="height:104px; 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 style="display:flex; flex-direction:column; gap:5px;">
|
||||||
<div class="k">FILTER +DRIVE</div><div class="k">RESONATOR</div><div class="k">DELAY</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div style="background:#111111; border:2px solid #111111; border-radius:50%/42%; color:#EDEDEB;
|
|
||||||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
|
||||||
text-align:center; padding:6px 10px; box-sizing:border-box;">
|
|
||||||
<div style="font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.14em; color:#8A8A85;">SAMPLE MODE</div>
|
|
||||||
<div style="font-size:17px; font-weight:700; line-height:1.1; margin:2px 0;">Fixed velocity</div>
|
|
||||||
<div style="font-size:9px; color:#FF4A00; letter-spacing:.1em;">CORRECT</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
<div class="k">ISOLATOR</div><div class="k">DJFX LOOPER</div><div class="k">MFX</div>
|
<div class="fxk">ISOLATOR</div><div class="fxk">DJFX<br>LOOPER</div><div class="fxk">MFX</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
<div style="height:140px; margin-top:10px; display:flex; flex-direction:column; gap:7px;">
|
||||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
<div class="grp">
|
||||||
<div class="row"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
<div class="col">
|
||||||
<div class="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
<div class="caprow"><span class="cap">PATTERN SEQUENCER</span><span class="rule"></span></div>
|
||||||
<div class="row"><div class="k">EXIT</div><div class="k">COPY</div><div class="k">REMAIN</div></div>
|
<div class="btnrow"><div class="k">PTN SEL</div><div class="k">PTN EDIT</div><div class="k">REC SET</div></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display:flex; flex-direction:column; gap:5px;">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="caprow"><span class="cap">SAMPLE EDIT</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow">
|
||||||
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k">MARK</div>
|
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k">MARK</div>
|
||||||
<div style="width:32px; flex:0 0 auto; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
<div style="width:30px; flex:0 0 auto; border-radius:50%; border:2px solid #111111; background:#1B1B1B;
|
||||||
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
color:#EDEDEB; display:flex; align-items:center; justify-content:center; font-size:6.5px;">VALUE</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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">REVERSE</div><div class="k">ROLL</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<div class="col">
|
||||||
|
<div class="caprow"><span class="cap">BANK</span><span class="rule"></span></div>
|
||||||
|
<div class="btnrow">
|
||||||
<div class="k">A/F</div><div class="k">B/G</div><div class="k">C/H</div><div class="k">D/I</div><div class="k">E/J</div>
|
<div class="k">A/F</div><div class="k">B/G</div><div class="k">C/H</div><div class="k">D/I</div><div class="k">E/J</div>
|
||||||
<div class="k lit">SHIFT</div>
|
<div class="k lit">SHIFT</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="height:194px; display:grid; grid-template-columns:repeat(4,1fr) .9fr; grid-auto-rows:1fr; gap:5px;">
|
<div style="height:191px; margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) .9fr;
|
||||||
<div class="k lit" style="font-size:10px;">FIX VEL</div>
|
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>
|
<div class="k pad"><span class="num">2</span></div>
|
||||||
<div class="k pad"><span class="num">3</span></div>
|
<div class="k pad"><span class="num">3</span></div>
|
||||||
<div class="k pad"><span class="num">4</span></div>
|
<div class="k pad"><span class="num">4</span></div>
|
||||||
<div class="k">BUS FX</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">BUS FX</div>
|
||||||
<div class="k pad"><span class="num">5</span></div>
|
<div class="k pad"><span class="num">5</span></div>
|
||||||
<div class="k pad"><span class="num">6</span></div>
|
<div class="k pad"><span class="num">6</span></div>
|
||||||
<div class="k pad"><span class="num">7</span></div>
|
<div class="k pad"><span class="num">7</span></div>
|
||||||
<div class="k pad"><span class="num">8</span></div>
|
<div class="k pad"><span class="num">8</span></div>
|
||||||
<div class="k">HOLD</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">HOLD</div>
|
||||||
<div class="k pad"><span class="num">9</span></div>
|
<div class="k pad"><span class="num">9</span></div>
|
||||||
<div class="k pad"><span class="num">10</span></div>
|
<div class="k pad"><span class="num">10</span></div>
|
||||||
<div class="k pad"><span class="num">11</span></div>
|
<div class="k pad"><span class="num">11</span></div>
|
||||||
<div class="k pad"><span class="num">12</span></div>
|
<div class="k pad"><span class="num">12</span></div>
|
||||||
<div class="k">EXT SOURCE</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">EXT SOURCE</div>
|
||||||
<div class="k pad"><span class="num">13</span></div>
|
<div class="k pad"><span class="num">13</span></div>
|
||||||
<div class="k pad"><span class="num">14</span></div>
|
<div class="k pad"><span class="num">14</span></div>
|
||||||
<div class="k pad"><span class="num">15</span></div>
|
<div class="k pad"><span class="num">15</span></div>
|
||||||
<div class="k pad"><span class="num">16</span></div>
|
<div class="k pad"><span class="num">16</span></div>
|
||||||
<div class="k">SUB PAD</div>
|
<div class="k pad" style="color:#FF4A00; font-weight:700;">SUB PAD</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- verdict -->
|
<div style="height:88px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
|
||||||
<div style="height:116px; flex:0 0 auto; background:#F5F5F2; border:2px solid #111111;
|
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:7px 10px;
|
||||||
box-shadow:3px 3px 0 #111111; box-sizing:border-box; padding:8px 10px;
|
|
||||||
display:flex; flex-direction:column; gap:5px;">
|
display:flex; flex-direction:column; gap:5px;">
|
||||||
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
<div style="display:flex; align-items:center; gap:6px;">
|
||||||
<span style="font-size:11px; font-weight:700; letter-spacing:.12em; color:#FF4A00;">CORRECT</span>
|
<span style="font-size:11px; font-weight:700; letter-spacing:.12em; color:#FF4A00;">CORRECT</span>
|
||||||
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#6E6E69; letter-spacing:.08em;">P.24</span>
|
<span class="chip">SHIFT</span>
|
||||||
</div>
|
|
||||||
<div style="display:flex; align-items:center; gap:5px;">
|
|
||||||
<span class="cap">SHIFT</span>
|
|
||||||
<span style="font-size:10px; color:#6E6E69;">+</span>
|
<span style="font-size:10px; color:#6E6E69;">+</span>
|
||||||
<span class="cap">PAD 1</span>
|
<span class="chip">PAD 1</span>
|
||||||
<span style="margin-left:auto; background:#111111; color:#EDEDEB; font-size:10px; font-weight:700;
|
<span style="margin-left:auto; background:#111111; color:#EDEDEB; font-size:10px; font-weight:700;
|
||||||
letter-spacing:.08em; padding:6px 12px;">NEXT →</span>
|
letter-spacing:.08em; padding:6px 12px;">NEXT →</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="font-size:11px; line-height:1.3; color:#3A3A36; text-wrap:pretty; overflow:hidden;">
|
<div style="font-size:12px; line-height:1.3; color:#3A3A36; text-wrap:pretty;">
|
||||||
Every hit plays at 127. Stored per sample; same combo turns it off.
|
Every hit plays at 127. Stored per sample; same combo turns it off.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="height:58px; flex:0 0 auto; display:flex; border:2px solid #111111; background:#F5F5F2; box-sizing:border-box;">
|
<div style="height:54px; 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;
|
<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>
|
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;
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
|
||||||
|
|||||||
@@ -1,41 +1,48 @@
|
|||||||
{
|
{
|
||||||
|
"pages": [
|
||||||
|
{ "id": "page-1", "name": "Direction A" },
|
||||||
|
{ "id": "page-2", "name": "Earlier" }
|
||||||
|
],
|
||||||
"artboards": [
|
"artboards": [
|
||||||
{ "file": "Current.dc.html", "x": 0, "y": 0, "w": 360, "h": 735, "title": "Current — Explore" },
|
{ "file": "Main.dc.html", "x": 0, "y": 0, "w": 360, "h": 735, "title": "A · Explore", "page": "page-1" },
|
||||||
{ "file": "Main.dc.html", "x": 440, "y": 0, "w": 360, "h": 735, "title": "A · Manual — Explore" },
|
{ "file": "ManualDrill.dc.html", "x": 440, "y": 0, "w": 360, "h": 735, "title": "A · Drill", "page": "page-1" },
|
||||||
{ "file": "ManualDrill.dc.html", "x": 880, "y": 0, "w": 360, "h": 735, "title": "A · Manual — Drill" },
|
{ "file": "DarkExplore.dc.html", "x": 880, "y": 0, "w": 360, "h": 735, "title": "A · Dark mode", "page": "page-1" },
|
||||||
{ "file": "BlueprintExplore.dc.html", "x": 1320, "y": 0, "w": 360, "h": 735, "title": "B · Blueprint — Explore" },
|
{ "file": "Specimen.dc.html", "x": 0, "y": 855, "w": 880, "h": 640, "title": "Type & colour", "page": "page-1" },
|
||||||
{ "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" }
|
{ "file": "Current.dc.html", "x": 0, "y": 0, "w": 360, "h": 735, "title": "Current app", "page": "page-2" },
|
||||||
|
{ "file": "BlueprintExplore.dc.html", "x": 440, "y": 0, "w": 360, "h": 735, "title": "B · Blueprint — Explore", "page": "page-2" },
|
||||||
|
{ "file": "BlueprintDrill.dc.html", "x": 880, "y": 0, "w": 360, "h": 735, "title": "B · Blueprint — Drill", "page": "page-2" }
|
||||||
],
|
],
|
||||||
"annotations": [
|
"annotations": [
|
||||||
{
|
{
|
||||||
"id": "note-current",
|
"id": "note-a2",
|
||||||
"x": 0,
|
"x": 0,
|
||||||
"y": -190,
|
"y": -210,
|
||||||
|
"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."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "note-dark",
|
||||||
|
"x": 880,
|
||||||
|
"y": -210,
|
||||||
"w": 360,
|
"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."
|
"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."
|
||||||
},
|
|
||||||
{
|
|
||||||
"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",
|
"id": "note-spec",
|
||||||
"x": 960,
|
"x": 960,
|
||||||
"y": 855,
|
"y": 855,
|
||||||
"w": 420,
|
"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."
|
"text": "Still open: which typeface, and which orange.\n\nThe mockups use Space Grotesk + Space Mono and TE's FF4A00. Pad numbers are grey rather than the device's orange, so that orange means exactly one thing in the app: this control is live."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "note-earlier",
|
||||||
|
"x": 0,
|
||||||
|
"y": -150,
|
||||||
|
"w": 800,
|
||||||
|
"page": "page-2",
|
||||||
|
"text": "Superseded, kept for reference: the current app, and the first Blueprint pass — white outlines on black with no shadows, which is the version that read as flat."
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"launch": { "view": "canvas" }
|
"launch": { "view": "canvas", "page": "page-1" }
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user