ncode
091bdc2a96
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>
129 lines
7.1 KiB
HTML
129 lines
7.1 KiB
HTML
<!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>
|