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 <noreply@anthropic.com>
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -18,3 +18,6 @@ android/.idea/
|
|||||||
*.aab
|
*.aab
|
||||||
*.keystore
|
*.keystore
|
||||||
!debug.keystore
|
!debug.keystore
|
||||||
|
|
||||||
|
# Seeded design canvas — regenerated from design/canvas/*.dc.html
|
||||||
|
design/canvas/sp404-layers-redesign.html
|
||||||
|
|||||||
155
design/canvas/BlueprintDrill.dc.html
Normal file
155
design/canvas/BlueprintDrill.dc.html
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
<!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:transparent; border:1px solid #FFFFFF; color:#FFFFFF; font-size:8px; line-height:1.05;
|
||||||
|
letter-spacing:.04em; padding:2px 1px; box-sizing:border-box; font-weight:400; }
|
||||||
|
.lit { background:#FF4A00; border-color:#FF4A00; color:#000000; font-weight:700; }
|
||||||
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:400; color:#6E6E69; }
|
||||||
|
.row { display:flex; gap:4px; flex:1; }
|
||||||
|
.cap { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em;
|
||||||
|
border:1px solid #FF4A00; color:#FF4A00; padding:2px 6px; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#000000; color:#FFFFFF;
|
||||||
|
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;
|
||||||
|
border:1px solid #FFFFFF; padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="font-size:12px; font-weight:500; letter-spacing:.08em;">SHIFT + PADS</span>
|
||||||
|
<span style="font-size:9px; color:#8A8A85;">▼</span>
|
||||||
|
</div>
|
||||||
|
<div style="flex:0 0 118px; display:flex; align-items:center; gap:8px;
|
||||||
|
border:1px solid #FFFFFF; padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="display:flex; align-items:flex-end; gap:2px; height:18px;">
|
||||||
|
<span style="width:6px; height:14px; background:#FFFFFF;"></span>
|
||||||
|
<span style="width:6px; height:9px; background:#FFFFFF;"></span>
|
||||||
|
<span style="width:6px; height:5px; background:#FFFFFF;"></span>
|
||||||
|
<span style="width:6px; height:3px; background:#FFFFFF;"></span>
|
||||||
|
<span style="width:6px; height:6px; background:#FF4A00;"></span>
|
||||||
|
</span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:11px; font-weight:700;">4/16</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:485px; flex:0 0 auto; border:1px solid #FFFFFF; box-sizing:border-box; padding:8px;
|
||||||
|
display:flex; flex-direction:column; gap:7px;">
|
||||||
|
|
||||||
|
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">VOLUME</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 1</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 2</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
||||||
|
<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>
|
||||||
|
<div style="border:1px solid #FFFFFF; border-radius:50%/42%;
|
||||||
|
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:500; line-height:1.1; margin:2px 0;">Fixed velocity</div>
|
||||||
|
<div style="font-size:9px; color:#FF4A00; letter-spacing:.1em;">CORRECT</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
||||||
|
<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="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
||||||
|
<div class="row"><div class="k">EXIT</div><div class="k">COPY</div><div class="k">REMAIN</div></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="row">
|
||||||
|
<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:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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 class="row">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:194px; display:grid; grid-template-columns:repeat(4,1fr) .9fr; grid-auto-rows:1fr; gap:5px;">
|
||||||
|
<div class="k lit" style="font-size:10px;">FIX VEL</div>
|
||||||
|
<div class="k"><span class="num">2</span></div>
|
||||||
|
<div class="k"><span class="num">3</span></div>
|
||||||
|
<div class="k"><span class="num">4</span></div>
|
||||||
|
<div class="k">BUS FX</div>
|
||||||
|
<div class="k"><span class="num">5</span></div>
|
||||||
|
<div class="k"><span class="num">6</span></div>
|
||||||
|
<div class="k"><span class="num">7</span></div>
|
||||||
|
<div class="k"><span class="num">8</span></div>
|
||||||
|
<div class="k">HOLD</div>
|
||||||
|
<div class="k"><span class="num">9</span></div>
|
||||||
|
<div class="k"><span class="num">10</span></div>
|
||||||
|
<div class="k"><span class="num">11</span></div>
|
||||||
|
<div class="k"><span class="num">12</span></div>
|
||||||
|
<div class="k">EXT SOURCE</div>
|
||||||
|
<div class="k"><span class="num">13</span></div>
|
||||||
|
<div class="k"><span class="num">14</span></div>
|
||||||
|
<div class="k"><span class="num">15</span></div>
|
||||||
|
<div class="k"><span class="num">16</span></div>
|
||||||
|
<div class="k">SUB PAD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:116px; flex:0 0 auto; border:1px solid #FFFFFF; box-sizing:border-box; padding:8px 10px;
|
||||||
|
display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||||||
|
<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:#8A8A85; letter-spacing:.08em;">P.24</span>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; align-items:center; gap:5px;">
|
||||||
|
<span class="cap">SHIFT</span>
|
||||||
|
<span style="font-size:10px; color:#8A8A85;">+</span>
|
||||||
|
<span class="cap">PAD 1</span>
|
||||||
|
<span style="margin-left:auto; background:#FF4A00; color:#000000; font-size:10px; font-weight:700;
|
||||||
|
letter-spacing:.08em; padding:6px 12px;">NEXT →</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:11px; line-height:1.3; color:#BDBDB8; text-wrap:pretty; overflow:hidden;">
|
||||||
|
Every hit plays at 127. Stored per sample; same combo turns it off.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:58px; flex:0 0 auto; display:flex; border:1px solid #FFFFFF; box-sizing:border-box;">
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center;
|
||||||
|
color:#8A8A85; font-size:11px; letter-spacing:.08em;">EXPLORE</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid #FFFFFF;
|
||||||
|
background:#FF4A00; color:#000000; font-size:11px; font-weight:700; letter-spacing:.08em;">DRILL</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid #FFFFFF;
|
||||||
|
color:#8A8A85; font-size:11px; letter-spacing:.08em;">FIND</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid #FFFFFF;
|
||||||
|
color:#8A8A85; font-size:11px; letter-spacing:.08em;">RULES</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
145
design/canvas/BlueprintExplore.dc.html
Normal file
145
design/canvas/BlueprintExplore.dc.html
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
<!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:transparent; border:1px solid #FFFFFF; color:#FFFFFF; font-size:8px; line-height:1.05;
|
||||||
|
letter-spacing:.04em; padding:2px 1px; box-sizing:border-box; font-weight:400; }
|
||||||
|
.lit { background:#FF4A00; border-color:#FF4A00; color:#000000; font-weight:700; }
|
||||||
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:400; color:#6E6E69; }
|
||||||
|
.row { display:flex; gap:4px; flex:1; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#000000; color:#FFFFFF;
|
||||||
|
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;
|
||||||
|
border:1px solid #FFFFFF; padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="font-size:12px; font-weight:500; letter-spacing:.08em;">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;
|
||||||
|
border:1px solid #FFFFFF; padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="font-size:12px; font-weight:500; letter-spacing:.08em;">NO MODIFIER</span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:10px; color:#FF4A00;">3</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- the unit, drawn as a dimensioned plan -->
|
||||||
|
<div style="height:485px; flex:0 0 auto; border:1px solid #FFFFFF; box-sizing:border-box; padding:8px;
|
||||||
|
display:flex; flex-direction:column; gap:7px; position:relative;">
|
||||||
|
|
||||||
|
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">VOLUME</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 1</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 2</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
||||||
|
<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>
|
||||||
|
<div style="border:1px solid #FFFFFF; border-radius:50%/42%;
|
||||||
|
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:500; line-height:1.1; margin:2px 0;">—</div>
|
||||||
|
<div style="font-size:9px; color:#8A8A85;">3 functions here</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
||||||
|
<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="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
||||||
|
<div class="row"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="row">
|
||||||
|
<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:1px solid #FFFFFF;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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 class="row">
|
||||||
|
<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 style="height:194px; display:grid; grid-template-columns:repeat(4,1fr) .9fr; grid-auto-rows:1fr; gap:5px;">
|
||||||
|
<div class="k"><span class="num">1</span></div>
|
||||||
|
<div class="k"><span class="num">2</span></div>
|
||||||
|
<div class="k"><span class="num">3</span></div>
|
||||||
|
<div class="k"><span class="num">4</span></div>
|
||||||
|
<div class="k">BUS FX</div>
|
||||||
|
<div class="k"><span class="num">5</span></div>
|
||||||
|
<div class="k"><span class="num">6</span></div>
|
||||||
|
<div class="k"><span class="num">7</span></div>
|
||||||
|
<div class="k"><span class="num">8</span></div>
|
||||||
|
<div class="k">HOLD</div>
|
||||||
|
<div class="k"><span class="num">9</span></div>
|
||||||
|
<div class="k"><span class="num">10</span></div>
|
||||||
|
<div class="k"><span class="num">11</span></div>
|
||||||
|
<div class="k"><span class="num">12</span></div>
|
||||||
|
<div class="k">EXT SOURCE</div>
|
||||||
|
<div class="k"><span class="num">13</span></div>
|
||||||
|
<div class="k"><span class="num">14</span></div>
|
||||||
|
<div class="k"><span class="num">15</span></div>
|
||||||
|
<div class="k"><span class="num">16</span></div>
|
||||||
|
<div class="k">SUB PAD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:116px; flex:0 0 auto; border:1px solid #FFFFFF; box-sizing:border-box; padding:8px 10px;
|
||||||
|
display:flex; flex-direction:column; gap:4px;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.12em; color:#8A8A85;">TOP SCREEN, PADS ORANGE</span>
|
||||||
|
<span style="border:1px solid #FFFFFF; padding:2px 6px; font-size:9px; 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 style="margin-top:auto; display:flex; gap:6px; align-items:center;">
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#8A8A85; letter-spacing:.1em;">LAYER</span>
|
||||||
|
<span style="height:1px; flex:1; background:#4A4A46;"></span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:9px; color:#FF4A00; letter-spacing:.1em;">3 FUNCTIONS</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:58px; flex:0 0 auto; display:flex; border:1px solid #FFFFFF; box-sizing:border-box;">
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; background:#FF4A00;
|
||||||
|
color:#000000; 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:1px solid #FFFFFF;
|
||||||
|
color:#8A8A85; font-size:11px; letter-spacing:.08em;">DRILL</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid #FFFFFF;
|
||||||
|
color:#8A8A85; font-size:11px; letter-spacing:.08em;">FIND</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid #FFFFFF;
|
||||||
|
color:#8A8A85; font-size:11px; letter-spacing:.08em;">RULES</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
156
design/canvas/Current.dc.html
Normal file
156
design/canvas/Current.dc.html
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
<!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=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&display=swap">
|
||||||
|
<style>
|
||||||
|
body { margin: 0; }
|
||||||
|
a { color: #ff7a1a; } a:hover { color: #ffa05c; }
|
||||||
|
.k { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; text-align:center;
|
||||||
|
background:#3d4145; border:0; border-radius:6px; color:#c3c8cc;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8.5px; line-height:1.05;
|
||||||
|
letter-spacing:.02em; padding:3px 2px; box-sizing:border-box; }
|
||||||
|
.pad { background:#34383c; font-size:11px; }
|
||||||
|
.num { font-family:'Barlow',sans-serif; font-size:17px; font-weight:700; color:#7b8288; }
|
||||||
|
.target { background:#5a3a22; color:#ffe3cc; box-shadow:inset 0 0 0 1px #ff7a1a, 0 0 12px rgba(255,122,26,.22); }
|
||||||
|
.row { display:flex; gap:4px; flex:1; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#151719; color:#e3e6e9;
|
||||||
|
font-family:'Barlow',system-ui,sans-serif; font-size:16px; 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:#1d2023; border:1px solid #30353a; border-radius:10px; padding:8px 12px;
|
||||||
|
box-sizing:border-box; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">
|
||||||
|
<span>Sample mode</span><span style="color:#8f979e; font-size:11px;">▼</span>
|
||||||
|
</div>
|
||||||
|
<div style="flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between;
|
||||||
|
background:#1d2023; border:1px solid #30353a; border-radius:10px; padding:8px 12px;
|
||||||
|
box-sizing:border-box; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">
|
||||||
|
<span>No modifier</span><span style="color:#8f979e; font-size:11px;">▼</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:485px; flex:0 0 auto; background:#26292c; border-radius:16px; box-sizing:border-box;
|
||||||
|
padding:8px; display:flex; flex-direction:column; gap:7px;">
|
||||||
|
|
||||||
|
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 6px;">
|
||||||
|
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
|
||||||
|
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">VOLUME</div>
|
||||||
|
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
|
||||||
|
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">CTRL 1</div>
|
||||||
|
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
|
||||||
|
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">CTRL 2</div>
|
||||||
|
<div style="width:36px; height:36px; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
|
||||||
|
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:8px;">CTRL 3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="k" style="border-radius:14px;">FILTER +DRIVE</div>
|
||||||
|
<div class="k" style="border-radius:14px;">RESONATOR</div>
|
||||||
|
<div class="k" style="border-radius:14px;">DELAY</div>
|
||||||
|
</div>
|
||||||
|
<div style="background:#06080a; border-radius:50%/42%; color:#e4eef2;
|
||||||
|
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||||||
|
text-align:center; padding:6px 10px; box-sizing:border-box; font-family:'Barlow Condensed',sans-serif;">
|
||||||
|
<div style="font-size:11px; opacity:.7; letter-spacing:.06em;">SAMPLE MODE</div>
|
||||||
|
<div style="font-size:19px; font-weight:700; line-height:1.05; margin:2px 0;">—</div>
|
||||||
|
<div style="font-size:11px; opacity:.75;">3 functions here</div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="k" style="border-radius:14px;">ISOLATOR</div>
|
||||||
|
<div class="k" style="border-radius:14px;">DJFX LOOPER</div>
|
||||||
|
<div class="k" style="border-radius:14px;">MFX</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
||||||
|
<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="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
||||||
|
<div class="row"><div class="k target">STOP ×4</div><div class="k">COPY</div><div class="k target">INFO</div></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="k">START /END</div><div class="k">PITCH /SPEED</div><div class="k target">SKIPBACK</div>
|
||||||
|
<div style="width:32px; flex:0 0 auto; border-radius:50%; background:#1b1d1f; box-shadow:inset 0 0 0 3px #34383b;
|
||||||
|
display:flex; align-items:center; justify-content:center; color:#c3c8cc;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:7px;">VALUE</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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 class="row">
|
||||||
|
<div class="k" style="font-size:8px;">A/F</div><div class="k" style="font-size:8px;">B/G</div>
|
||||||
|
<div class="k" style="font-size:8px;">C/H</div><div class="k" style="font-size:8px;">D/I</div>
|
||||||
|
<div class="k" style="font-size:8px;">E/J</div><div class="k" style="font-size:8px;">SHIFT</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:194px; display:grid; grid-template-columns:repeat(4,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="font-size:10px;">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="font-size:10px;">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="font-size:10px;">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="font-size:10px;">SUB PAD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:116px; flex:0 0 auto; background:#1d2023; border-radius:10px; box-sizing:border-box;
|
||||||
|
padding:10px 12px; display:flex; flex-direction:column; gap:4px;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:8px;">
|
||||||
|
<span style="color:#8f979e; font-size:15px;">Top screen, pads orange.</span>
|
||||||
|
<span style="flex:0 0 auto; border-radius:8px; box-shadow:inset 0 0 0 1px #30353a; padding:5px 12px;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px;">List 3</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:15px; line-height:1.45;">
|
||||||
|
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:58px; flex:0 0 auto; display:flex; background:#1f2225; border-top:1px solid #30353a; box-sizing:border-box;">
|
||||||
|
<div style="flex:1; position:relative; display:flex; align-items:center; justify-content:center;
|
||||||
|
color:#e3e6e9; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">
|
||||||
|
<span style="position:absolute; top:0; left:30%; right:30%; height:3px; background:#ff7a1a; border-radius:0 0 3px 3px;"></span>
|
||||||
|
Explore
|
||||||
|
</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; color:#8f979e;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">Drill</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; color:#8f979e;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">Find</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; color:#8f979e;
|
||||||
|
font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px;">Rules</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
161
design/canvas/Main.dc.html
Normal file
161
design/canvas/Main.dc.html
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
<!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: #C43900; }
|
||||||
|
.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;
|
||||||
|
letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
|
||||||
|
.lit { background:#FF4A00; color:#111111; }
|
||||||
|
.pad { background:#1B1B1B; border:2px solid #111111; color:#EDEDEB; font-size:9px; }
|
||||||
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
|
||||||
|
.row { display:flex; gap:4px; flex:1; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#E9E9E6; color:#111111;
|
||||||
|
font-family:'Space Grotesk',system-ui,sans-serif; padding:8px 8px 0; display:flex;
|
||||||
|
flex-direction:column; gap:8px;">
|
||||||
|
|
||||||
|
<!-- pickers -->
|
||||||
|
<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:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
||||||
|
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:#6E6E69;">▼</span>
|
||||||
|
</div>
|
||||||
|
<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;
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- the unit -->
|
||||||
|
<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;
|
||||||
|
display:flex; flex-direction:column; gap:7px;">
|
||||||
|
|
||||||
|
<!-- knobs -->
|
||||||
|
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">VOLUME</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 1</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 2</div>
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px; letter-spacing:.02em;">CTRL 3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- fx + screen -->
|
||||||
|
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
||||||
|
<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>
|
||||||
|
<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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- control block -->
|
||||||
|
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
||||||
|
<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="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
||||||
|
<div class="row"><div class="k lit">STOP ×4</div><div class="k">COPY</div><div class="k lit">INFO</div></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="row">
|
||||||
|
<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;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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 class="row">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- pads -->
|
||||||
|
<div style="height:194px; display:grid; grid-template-columns:repeat(4,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">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">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">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">SUB PAD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- info -->
|
||||||
|
<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:8px 10px;
|
||||||
|
display:flex; flex-direction:column; gap:4px;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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.
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- tabs -->
|
||||||
|
<div style="height:58px; 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;
|
||||||
|
color:#6E6E69; 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 #111111;
|
||||||
|
color:#6E6E69; 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 #111111;
|
||||||
|
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">RULES</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
163
design/canvas/ManualDrill.dc.html
Normal file
163
design/canvas/ManualDrill.dc.html
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
<!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: #C43900; }
|
||||||
|
.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;
|
||||||
|
letter-spacing:.03em; padding:2px 1px; box-sizing:border-box; font-weight:500; }
|
||||||
|
.lit { background:#FF4A00; color:#111111; font-weight:700; }
|
||||||
|
.pad { background:#1B1B1B; border:2px solid #111111; color:#EDEDEB; font-size:9px; }
|
||||||
|
.num { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:#6E6E69; }
|
||||||
|
.row { display:flex; gap:4px; flex:1; }
|
||||||
|
.cap { font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.04em;
|
||||||
|
background:#111111; color:#EDEDEB; padding:2px 6px; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:360px; height:735px; box-sizing:border-box; background:#E9E9E6; color:#111111;
|
||||||
|
font-family:'Space Grotesk',system-ui,sans-serif; padding:8px 8px 0; display:flex;
|
||||||
|
flex-direction:column; gap:8px;">
|
||||||
|
|
||||||
|
<!-- deck + progress -->
|
||||||
|
<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:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
||||||
|
padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">SHIFT + PADS</span>
|
||||||
|
<span style="font-size:9px; color:#6E6E69;">▼</span>
|
||||||
|
</div>
|
||||||
|
<div style="flex:0 0 118px; display:flex; align-items:center; gap:8px;
|
||||||
|
background:#F5F5F2; border:2px solid #111111; box-shadow:3px 3px 0 #111111;
|
||||||
|
padding:0 10px; box-sizing:border-box;">
|
||||||
|
<span style="display:flex; align-items:flex-end; gap:2px; height:18px;">
|
||||||
|
<span style="width:6px; height:14px; background:#111111;"></span>
|
||||||
|
<span style="width:6px; height:9px; background:#111111;"></span>
|
||||||
|
<span style="width:6px; height:5px; background:#111111;"></span>
|
||||||
|
<span style="width:6px; height:3px; background:#111111;"></span>
|
||||||
|
<span style="width:6px; height:6px; background:#FF4A00;"></span>
|
||||||
|
</span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:11px; font-weight:700;">4/16</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- the unit, answer revealed -->
|
||||||
|
<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;
|
||||||
|
display:flex; flex-direction:column; gap:7px;">
|
||||||
|
|
||||||
|
<div style="height:36px; display:flex; justify-content:space-between; align-items:center; padding:0 2px;">
|
||||||
|
<div style="width:34px; height:34px; border-radius:50%; border:2px solid #111111; background:#F5F5F2;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">CTRL 3</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:100px; display:grid; grid-template-columns:64px 1fr 64px; gap:6px;">
|
||||||
|
<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>
|
||||||
|
<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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:118px; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,5fr); gap:6px;">
|
||||||
|
<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="row"><div class="k">DEL</div><div class="k">REC</div><div class="k">RESAMPLE</div></div>
|
||||||
|
<div class="row"><div class="k">EXIT</div><div class="k">COPY</div><div class="k">REMAIN</div></div>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div class="row">
|
||||||
|
<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;
|
||||||
|
display:flex; align-items:center; justify-content:center; font-size:7px;">VALUE</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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 class="row">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:194px; display:grid; grid-template-columns:repeat(4,1fr) .9fr; grid-auto-rows:1fr; gap:5px;">
|
||||||
|
<div class="k lit" style="font-size:10px;">FIX VEL</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">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">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">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">SUB PAD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- verdict -->
|
||||||
|
<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:8px 10px;
|
||||||
|
display:flex; flex-direction:column; gap:5px;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:baseline;">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div style="display:flex; align-items:center; gap:5px;">
|
||||||
|
<span class="cap">SHIFT</span>
|
||||||
|
<span style="font-size:10px; color:#6E6E69;">+</span>
|
||||||
|
<span class="cap">PAD 1</span>
|
||||||
|
<span style="margin-left:auto; background:#111111; color:#EDEDEB; font-size:10px; font-weight:700;
|
||||||
|
letter-spacing:.08em; padding:6px 12px;">NEXT →</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:11px; line-height:1.3; color:#3A3A36; text-wrap:pretty; overflow:hidden;">
|
||||||
|
Every hit plays at 127. Stored per sample; same combo turns it off.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="height:58px; 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;
|
||||||
|
background:#FF4A00; color:#111111; font-size:11px; font-weight:700; letter-spacing:.08em;">DRILL</div>
|
||||||
|
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:2px solid #111111;
|
||||||
|
color:#6E6E69; 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 #111111;
|
||||||
|
color:#6E6E69; font-size:11px; font-weight:500; letter-spacing:.08em;">RULES</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
128
design/canvas/Specimen.dc.html
Normal file
128
design/canvas/Specimen.dc.html
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<!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&family=Martian+Mono:wght@400;700&family=Archivo:wght@400;500;700&family=Barlow:wght@400;600&family=Barlow+Condensed:wght@600;700&display=swap">
|
||||||
|
<style>
|
||||||
|
body { margin: 0; }
|
||||||
|
a { color: #FF4A00; } a:hover { color: #C43900; }
|
||||||
|
.sw { height:44px; border:2px solid #111111; display:flex; align-items:flex-end; padding:3px 5px;
|
||||||
|
box-sizing:border-box; font-family:'Space Mono',monospace; font-size:8px; }
|
||||||
|
.lab { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em; color:#6E6E69; }
|
||||||
|
.cell { border:2px solid #111111; padding:10px 12px; box-sizing:border-box; }
|
||||||
|
</style>
|
||||||
|
</helmet>
|
||||||
|
|
||||||
|
<div style="width:880px; height:640px; box-sizing:border-box; background:#E9E9E6; color:#111111;
|
||||||
|
font-family:'Space Grotesk',system-ui,sans-serif; padding:24px; display:grid;
|
||||||
|
grid-template-columns:320px minmax(0,1fr); gap:24px;">
|
||||||
|
|
||||||
|
<!-- colour -->
|
||||||
|
<div style="display:flex; flex-direction:column; gap:14px; min-width:0;">
|
||||||
|
<div class="lab">COLOUR</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style="font-size:13px; font-weight:700; letter-spacing:.06em; margin-bottom:6px;">A · MANUAL</div>
|
||||||
|
<div style="display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;">
|
||||||
|
<div class="sw" style="background:#E9E9E6;">E9E9E6</div>
|
||||||
|
<div class="sw" style="background:#D2D2CE;">D2D2CE</div>
|
||||||
|
<div class="sw" style="background:#1B1B1B; color:#EDEDEB;">1B1B1B</div>
|
||||||
|
<div class="sw" style="background:#FF4A00; color:#111111;">FF4A00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style="font-size:13px; font-weight:700; letter-spacing:.06em; margin-bottom:6px;">B · BLUEPRINT</div>
|
||||||
|
<div style="display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;">
|
||||||
|
<div class="sw" style="background:#000000; color:#EDEDEB;">000000</div>
|
||||||
|
<div class="sw" style="background:#FFFFFF;">FFFFFF</div>
|
||||||
|
<div class="sw" style="background:#8A8A85; color:#111111;">8A8A85</div>
|
||||||
|
<div class="sw" style="background:#FF4A00; color:#111111;">FF4A00</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style="font-size:13px; font-weight:700; letter-spacing:.06em; margin-bottom:6px;">ACCENT — WHICH ORANGE?</div>
|
||||||
|
<div style="display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;">
|
||||||
|
<div class="sw" style="background:#FF4A00; color:#111111; height:60px;">FF4A00 TE</div>
|
||||||
|
<div class="sw" style="background:#ff7a1a; color:#111111; height:60px;">FF7A1A CURRENT</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size:11px; line-height:1.35; color:#3A3A36; margin-top:6px; text-wrap:pretty;">
|
||||||
|
The current orange is lighter and softer. TE's is redder and hits harder against both
|
||||||
|
a light body and pure black.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top:auto;">
|
||||||
|
<div class="lab" style="margin-bottom:6px;">FEEDBACK, WITHOUT GREEN AND RED</div>
|
||||||
|
<div style="display:flex; gap:6px;">
|
||||||
|
<div style="flex:1; background:#FF4A00; color:#111111; border:2px solid #111111; padding:8px;
|
||||||
|
font-size:11px; font-weight:700; letter-spacing:.08em; text-align:center;">CORRECT</div>
|
||||||
|
<div style="flex:1; background:#E9E9E6; color:#111111; border:2px dashed #111111; padding:8px;
|
||||||
|
font-size:11px; font-weight:700; letter-spacing:.08em; text-align:center;">NOT QUITE</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- type -->
|
||||||
|
<div style="display:flex; flex-direction:column; gap:10px; min-width:0;">
|
||||||
|
<div class="lab">TYPE — SAME STRINGS, FOUR FACES</div>
|
||||||
|
|
||||||
|
<div class="cell" style="background:#F5F5F2;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;">
|
||||||
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">SPACE GROTESK + SPACE MONO</span>
|
||||||
|
<span class="lab">USED IN THESE MOCKUPS</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:700;">Fixed velocity</div>
|
||||||
|
<div style="display:flex; gap:14px; align-items:baseline; margin-top:3px;">
|
||||||
|
<span style="font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.06em;">REC SET · BPM SYNC · SUB PAD</span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:11px; color:#6E6E69;">500 501 502 · P.24</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell" style="background:#F5F5F2;">
|
||||||
|
<div style="font-size:12px; font-weight:700; letter-spacing:.06em; margin-bottom:5px;">MARTIAN MONO</div>
|
||||||
|
<div style="font-family:'Martian Mono',monospace; font-size:17px; font-weight:700;">Fixed velocity</div>
|
||||||
|
<div style="display:flex; gap:14px; align-items:baseline; margin-top:3px; flex-wrap:wrap;">
|
||||||
|
<span style="font-family:'Martian Mono',monospace; font-size:9px;">REC SET · BPM SYNC</span>
|
||||||
|
<span style="font-family:'Martian Mono',monospace; font-size:9px; color:#6E6E69;">500 501 · P.24</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell" style="background:#F5F5F2;">
|
||||||
|
<div style="font-size:12px; font-weight:700; letter-spacing:.06em; margin-bottom:5px;">ARCHIVO + SPACE MONO</div>
|
||||||
|
<div style="font-family:'Archivo',sans-serif; font-size:21px; font-weight:700;">Fixed velocity</div>
|
||||||
|
<div style="display:flex; gap:14px; align-items:baseline; margin-top:3px;">
|
||||||
|
<span style="font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:.06em;">REC SET · BPM SYNC · SUB PAD</span>
|
||||||
|
<span style="font-family:'Space Mono',monospace; font-size:11px; color:#6E6E69;">500 501 502 · P.24</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell" style="background:#E2E2DE; border-style:dashed;">
|
||||||
|
<div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;">
|
||||||
|
<span style="font-size:12px; font-weight:700; letter-spacing:.06em;">BARLOW + BARLOW CONDENSED</span>
|
||||||
|
<span class="lab">CURRENT — WHAT YOU DISLIKE</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:700;">Fixed velocity</div>
|
||||||
|
<div style="display:flex; gap:14px; align-items:baseline; margin-top:3px;">
|
||||||
|
<span style="font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600;">REC SET · BPM SYNC · SUB PAD</span>
|
||||||
|
<span style="font-family:'Barlow',sans-serif; font-size:12px; color:#6E6E69;">500 501 502 · p.24</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="font-size:11px; line-height:1.4; color:#3A3A36; text-wrap:pretty;">
|
||||||
|
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.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-dc>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
design/canvas/canvas.json
Normal file
41
design/canvas/canvas.json
Normal file
@@ -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" }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user