Repository navigation
Expand file tree
/
Copy pathDESIGN.html
More file actions
875 lines (865 loc) · 91.4 KB
/
Copy pathDESIGN.html
File metadata and controls
875 lines (865 loc) · 91.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
<!-- SPDX-License-Identifier: AGPL-3.0-only -->
<!-- Copyright (c) 2026 Egor Khindikaynen (Nota). See LICENSES/ for license terms. -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Studio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap">
<style>
/* ============================================================================
Studio — Nota's design system, documented in its own palette.
The colour and shadow variables below are generated from the colour themes in
src/managed/Nota.App/Theme/Themes/ (Studio Dark → :root, every other theme →
[data-variant=…]).
Generated by scripts/design-html.py — edit that, then rerun it. Every specimen on the page
is painted through these variables — nothing uses a raw hex.
========================================================================= */
:root {
--r-docked: 0px; --r-bar: 1px; --r-clip: 2px; --r-badge: 2px;
--r-control: 3px; --r-tile: 3px; --r-panel: 3px; --r-body: 3px;
--r-pill: 3px; --r-modal: 4px;
--font-ui: "Geist", system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
:root {
--surface-abyss: #17181A;
--gutter: #141517;
--bg-sunken: #17181A;
--chrome-bg: #17181A;
--bg-app: #1E1F22;
--lane-b: #222326;
--panel: #2B2D31;
--track-off: #17181A;
--surface-card: #2B2D31;
--surface-raised: #34363B;
--surface-inset: #232427;
--surface-hover: #393C41;
--surface-active: #17181A;
--surface-selected: #393C41;
--grid-beat: #2A2C30;
--grid-bar: #3A3C41;
--hairline: #45484E;
--text-heading: #F4F5F6;
--text-primary: #E8E9EB;
--text-strong: #D4D6DA;
--text-secondary: #C0C4C9;
--text-muted: #A4A9B0;
--text-tertiary: #92969D;
--text-disabled: #82868C;
--text-axis: #82868C;
--text-on-accent: #17181A;
--border-default: #141517;
--border-strong: #45484E;
--border-brass: #BF7D22;
--accent: #FF9F1C;
--accent-hover: #FFB547;
--accent-bright: #FFB547;
--accent-deep: #C77612;
--accent-dim: #C77612;
--accent-edge: #BF7D22;
--accent-subtle: #4D3F2E;
--record: #F06A6E;
--record-ink: #17181A;
--success: #6CC673;
--success-ink: #17181A;
--success-dim: #3F8A45;
--warning: #F2B53C;
--danger: #F06A6E;
--danger-hover: #F48386;
--danger-bright: #F58F92;
--chroma-teal: #5FB3A8;
--chroma-teal-light: #86C9C0;
--chroma-rose: #D77A8F;
--chroma-rose-light: #E49EAE;
--chroma-steel: #6A9FD8;
--seam: #141517;
--rule: #45484E;
--text-faint: #82868C;
--mute: #F2B53C;
--solo: #6A9FD8;
--viz-ink: #D7D8DA;
--viz-grid: #2E2F32;
--track1: #7FB87A;
--track2: #5FB3A8;
--track3: #5AA6C4;
--track4: #6A9FD8;
--track5: #E0A84A;
--track6: #9D90C9;
--track7: #D77A8F;
--track8: #B3B45E;
--track9: #8E9DB0;
--return-a: #8E9DB0;
--return-b: #7A889A;
--master: #A4A9B0;
--surface-hover-clear: rgba(57,60,65,0.000);
--danger-subtle: rgba(240,106,110,0.200);
--shadow-raised: inset 0 1px 0 0 rgba(255,255,255,0.071);
--shadow-sunken: inset 0 0 0 1px #45484E;
--shadow-popover: 0 0 0 1px #141517, 0 10px 28px 0 rgba(0,0,0,0.420);
--shadow-modal: 0 0 0 1px #141517, 0 24px 64px 0 rgba(0,0,0,0.502);
--ink-on-mute: #17181A;
--ink-on-solo: #17181A;
--ink-on-record: #17181A;
--t0-body: #7FB87A; --t0-band: #5F885D; --t0-ink: #17181A; --t0-cont: #425B42;
--t1-body: #5FB3A8; --t1-band: #49847D; --t1-ink: #FFFFFF; --t1-cont: #355955;
--t2-body: #5AA6C4; --t2-band: #457B91; --t2-ink: #FFFFFF; --t2-cont: #335361;
--t3-body: #6A9FD8; --t3-band: #51769F; --t3-ink: #FFFFFF; --t3-cont: #395069;
--t4-body: #E0A84A; --t4-band: #A37C3B; --t4-ink: #17181A; --t4-cont: #6B542E;
--t5-body: #9D90C9; --t5-band: #746C94; --t5-ink: #FFFFFF; --t5-cont: #4F4A63;
--t6-body: #D77A8F; --t6-band: #9D5C6B; --t6-ink: #FFFFFF; --t6-cont: #67414B;
--t7-body: #B3B45E; --t7-band: #848549; --t7-ink: #17181A; --t7-cont: #585936;
--t8-body: #8E9DB0; --t8-band: #6A7583; --t8-ink: #FFFFFF; --t8-cont: #484F59;
color-scheme: dark;
}
:root[data-variant="light"] {
--surface-abyss: #D6D8DB;
--gutter: #9DA0A6;
--bg-sunken: #D6D8DB;
--chrome-bg: #D6D8DB;
--bg-app: #C9CBCF;
--lane-b: #C4C6CA;
--panel: #E4E5E7;
--track-off: #D6D8DB;
--surface-card: #E4E5E7;
--surface-raised: #EEEFF1;
--surface-inset: #DCDEE0;
--surface-hover: #F7F8F9;
--surface-active: #D6D8DB;
--surface-selected: #F7F8F9;
--grid-beat: #BDC0C4;
--grid-bar: #ADB0B5;
--hairline: #B3B6BB;
--text-heading: #0E0F11;
--text-primary: #16171A;
--text-strong: #282A2E;
--text-secondary: #3A3D42;
--text-muted: #4F535A;
--text-tertiary: #65696F;
--text-disabled: #797C81;
--text-axis: #797C81;
--text-on-accent: #17181A;
--border-default: #9DA0A6;
--border-strong: #B3B6BB;
--border-brass: #ECA54E;
--accent: #EF8A0C;
--accent-hover: #C46A00;
--accent-bright: #C46A00;
--accent-deep: #D47800;
--accent-dim: #F7C27A;
--accent-edge: #ECA54E;
--accent-subtle: #E6D6C4;
--record: #B3262C;
--record-ink: #FFFFFF;
--success: #22692B;
--success-ink: #FFFFFF;
--success-dim: #79B880;
--warning: #7A4F00;
--danger: #B3262C;
--danger-hover: #C2343A;
--danger-bright: #9C1F24;
--chroma-teal: #3A8A7F;
--chroma-teal-light: #2E7067;
--chroma-rose: #B4566B;
--chroma-rose-light: #93404F;
--chroma-steel: #3F78B8;
--seam: #9DA0A6;
--rule: #B3B6BB;
--text-faint: #797C81;
--mute: #7A4F00;
--solo: #3F78B8;
--viz-ink: #252629;
--viz-grid: #C0C3C6;
--track1: #4A7F46;
--track2: #3A8A7F;
--track3: #357C99;
--track4: #3F78B8;
--track5: #B8862F;
--track6: #7363A8;
--track7: #B4566B;
--track8: #7E7F2F;
--track9: #5D6C80;
--return-a: #5D6C80;
--return-b: #4E5B6D;
--master: #4F535A;
--surface-hover-clear: rgba(247,248,249,0.000);
--danger-subtle: rgba(179,38,44,0.200);
--shadow-raised: inset 0 1px 0 0 rgba(255,255,255,0.702);
--shadow-sunken: inset 0 0 0 1px #B3B6BB;
--shadow-popover: 0 0 0 1px #9DA0A6, 0 10px 28px 0 rgba(30,32,36,0.220);
--shadow-modal: 0 0 0 1px #9DA0A6, 0 24px 64px 0 rgba(30,32,36,0.251);
--ink-on-mute: #FFFFFF;
--ink-on-solo: #FFFFFF;
--ink-on-record: #FFFFFF;
--t0-body: #4A7F46; --t0-band: #3A5F38; --t0-ink: #FFFFFF; --t0-cont: #2B422C;
--t1-body: #3A8A7F; --t1-band: #2F6760; --t1-ink: #FFFFFF; --t1-cont: #254744;
--t2-body: #357C99; --t2-band: #2B5D72; --t2-ink: #FFFFFF; --t2-cont: #23414F;
--t3-body: #3F78B8; --t3-band: #325A88; --t3-ink: #FFFFFF; --t3-cont: #273F5C;
--t4-body: #B8862F; --t4-band: #876428; --t4-ink: #FFFFFF; --t4-cont: #5A4522;
--t5-body: #7363A8; --t5-band: #574C7D; --t5-ink: #FFFFFF; --t5-cont: #3D3655;
--t6-body: #B4566B; --t6-band: #844352; --t6-ink: #FFFFFF; --t6-cont: #58313C;
--t7-body: #7E7F2F; --t7-band: #5E5F28; --t7-ink: #FFFFFF; --t7-cont: #414222;
--t8-body: #5D6C80; --t8-band: #475261; --t8-ink: #FFFFFF; --t8-cont: #333A44;
color-scheme: light;
}
:root[data-variant="ember-graphite"] {
--surface-abyss: #0A0908;
--gutter: #0C0B09;
--bg-sunken: #100F0D;
--chrome-bg: #100F0D;
--bg-app: #0B0A09;
--lane-b: #131210;
--panel: #141310;
--track-off: #26231E;
--surface-card: #171613;
--surface-raised: #1C1A16;
--surface-inset: #1A1815;
--surface-hover: #252219;
--surface-active: #100F0D;
--surface-selected: #241F17;
--grid-beat: #1E1C18;
--grid-bar: #2A2721;
--hairline: #221F1A;
--text-heading: #F2EDE1;
--text-primary: #E9E4D8;
--text-strong: #C7C0B0;
--text-secondary: #A39D8F;
--text-muted: #8F897C;
--text-tertiary: #716D60;
--text-disabled: #646054;
--text-axis: #65614F;
--text-on-accent: #171613;
--border-default: #2C2923;
--border-strong: #3A362D;
--border-brass: #6B5326;
--accent: #D8A03D;
--accent-hover: #E9BE6A;
--accent-bright: #F0C060;
--accent-deep: #B08536;
--accent-dim: #8A6B2E;
--accent-edge: #5E4A22;
--accent-subtle: #241F17;
--record: #BE563E;
--record-ink: #FFFFFF;
--success: #58B368;
--success-ink: #171613;
--success-dim: #7FB069;
--warning: #D9C34C;
--danger: #C2554A;
--danger-hover: #D0685C;
--danger-bright: #E08A72;
--chroma-teal: #5B9E9C;
--chroma-teal-light: #7FC0BE;
--chroma-rose: #B57286;
--chroma-rose-light: #D79BAB;
--chroma-steel: #6D8FB5;
--seam: #0C0B09;
--rule: #3A362D;
--text-faint: #646054;
--mute: #D9C34C;
--solo: #6D8FB5;
--viz-ink: #D8D3C8;
--viz-grid: #232019;
--track1: #58B368;
--track2: #4E9E7A;
--track3: #3E8E8E;
--track4: #5AA0B8;
--track5: #C77F55;
--track6: #7A6FB0;
--track7: #B05A7A;
--track8: #9AA64A;
--track9: #7FA88E;
--return-a: #7FA88E;
--return-b: #6B907B;
--master: #8D8779;
--surface-hover-clear: rgba(37,34,25,0.000);
--danger-subtle: rgba(194,85,74,0.200);
--shadow-raised: inset 0 1px 0 0 rgba(255,255,255,0.031);
--shadow-sunken: inset 0 0 0 1px #3A362D;
--shadow-popover: 0 0 0 1px #0C0B09, 0 10px 28px 0 rgba(0,0,0,0.420);
--shadow-modal: 0 0 0 1px #0C0B09, 0 24px 64px 0 rgba(0,0,0,0.502);
--ink-on-mute: #17181A;
--ink-on-solo: #17181A;
--ink-on-record: #FFFFFF;
--t0-body: #58B368; --t0-band: #43824D; --t0-ink: #FFFFFF; --t0-cont: #305534;
--t1-body: #4E9E7A; --t1-band: #3C745A; --t1-ink: #FFFFFF; --t1-cont: #2C4C3C;
--t2-body: #3E8E8E; --t2-band: #316868; --t2-ink: #FFFFFF; --t2-cont: #254644;
--t3-body: #5AA0B8; --t3-band: #457585; --t3-ink: #FFFFFF; --t3-cont: #314D56;
--t4-body: #C77F55; --t4-band: #915E40; --t4-ink: #FFFFFF; --t4-cont: #5F3F2C;
--t5-body: #7A6FB0; --t5-band: #5B5380; --t5-ink: #FFFFFF; --t5-cont: #3E3953;
--t6-body: #B05A7A; --t6-band: #81445A; --t6-ink: #FFFFFF; --t6-cont: #55303C;
--t7-body: #9AA64A; --t7-band: #717938; --t7-ink: #FFFFFF; --t7-cont: #4C5028;
--t8-body: #7FA88E; --t8-band: #5E7B68; --t8-ink: #FFFFFF; --t8-cont: #405144;
color-scheme: dark;
}
:root[data-variant="ember-paper"] {
--surface-abyss: #D8D1BE;
--gutter: #E0DAC9;
--bg-sunken: #E4DFD1;
--chrome-bg: #E4DFD1;
--bg-app: #DCD6C5;
--lane-b: #E7E2D4;
--panel: #EAE5D7;
--track-off: #DBD4C0;
--surface-card: #EFEADE;
--surface-raised: #F8F5EC;
--surface-inset: #E9E4D6;
--surface-hover: #E7E1D0;
--surface-active: #D5CEBB;
--surface-selected: #F2E4C4;
--grid-beat: #DED8C8;
--grid-bar: #CFC8B4;
--hairline: #D5CFBE;
--text-heading: #1A150E;
--text-primary: #241F17;
--text-strong: #3E382C;
--text-secondary: #5E5849;
--text-muted: #625B50;
--text-tertiary: #7E786C;
--text-disabled: #8D866F;
--text-axis: #8D8669;
--text-on-accent: #FFFBF2;
--border-default: #D5CEBB;
--border-strong: #BDB5A0;
--border-brass: #C9A254;
--accent: #AD7716;
--accent-hover: #8F6110;
--accent-bright: #744D07;
--accent-deep: #7A5008;
--accent-dim: #9C8034;
--accent-edge: #D3B173;
--accent-subtle: #F2E4C4;
--record: #B54A32;
--record-ink: #FFF4EE;
--success: #2C7A3E;
--success-ink: #FFFBF2;
--success-dim: #609548;
--warning: #837010;
--danger: #B13E33;
--danger-hover: #C64A36;
--danger-bright: #A3391B;
--chroma-teal: #2F7472;
--chroma-teal-light: #3E8A88;
--chroma-rose: #86465B;
--chroma-rose-light: #7F2D43;
--chroma-steel: #3E6288;
--seam: #E0DAC9;
--rule: #BDB5A0;
--text-faint: #8D866F;
--mute: #837010;
--solo: #3E6288;
--viz-ink: #332E26;
--viz-grid: #DDD7C6;
--track1: #328140;
--track2: #306F53;
--track3: #256464;
--track4: #317187;
--track5: #985127;
--track6: #4B4082;
--track7: #7F3450;
--track8: #6C752C;
--track9: #598C69;
--return-a: #598C69;
--return-b: #3E6A4D;
--master: #746D5C;
--surface-hover-clear: rgba(231,225,208,0.000);
--danger-subtle: rgba(177,62,51,0.200);
--shadow-raised: inset 0 1px 0 0 rgba(255,255,255,0.400);
--shadow-sunken: inset 0 0 0 1px #BDB5A0;
--shadow-popover: 0 0 0 1px #E0DAC9, 0 10px 28px 0 rgba(26,21,14,0.220);
--shadow-modal: 0 0 0 1px #E0DAC9, 0 24px 64px 0 rgba(26,21,14,0.251);
--ink-on-mute: #FFFFFF;
--ink-on-solo: #FFFFFF;
--ink-on-record: #FFFFFF;
--t0-body: #328140; --t0-band: #346938; --t0-ink: #FFFFFF; --t0-cont: #365331;
--t1-body: #306F53; --t1-band: #335C45; --t1-ink: #FFFFFF; --t1-cont: #354B39;
--t2-body: #256464; --t2-band: #2B5551; --t2-ink: #FFFFFF; --t2-cont: #314740;
--t3-body: #317187; --t3-band: #335E6A; --t3-ink: #FFFFFF; --t3-cont: #364C4F;
--t4-body: #985127; --t4-band: #7B4727; --t4-ink: #FFFFFF; --t4-cont: #613F27;
--t5-body: #4B4082; --t5-band: #453B66; --t5-ink: #FFFFFF; --t5-cont: #41374D;
--t6-body: #7F3450; --t6-band: #6A3343; --t6-ink: #FFFFFF; --t6-cont: #563238;
--t7-body: #6C752C; --t7-band: #5D602A; --t7-ink: #FFFFFF; --t7-cont: #4F4E29;
--t8-body: #598C69; --t8-band: #4F7155; --t8-ink: #FFFFFF; --t8-cont: #475742;
color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-app);color:var(--text-primary);font:400 12px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
code{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
a{color:var(--accent-bright)}
.page{max-width:1120px;margin:0 auto;padding:0 20px 80px}
header.mast{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;height:44px;padding:0 20px;margin:0 -20px 12px;background:var(--panel);border-bottom:1px solid var(--seam)}
.mast h1{font:600 13px/1 var(--font-ui);color:var(--text-heading);margin:0}
.mast .eyebrow{margin:0 0 3px}
.mast nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:8px}
.mast nav a{color:var(--text-secondary);text-decoration:none;font-size:12px;font-weight:500}
.mast nav a:hover{color:var(--text-primary)}
.spacer{flex:1}
.eyebrow{font:400 10px/1 var(--font-mono);color:var(--text-muted);margin:0 0 8px}
section{background:var(--panel);border:1px solid var(--seam);border-radius:var(--r-control);padding:20px;margin:12px 0}
h2{font:600 13px/1.3 var(--font-ui);color:var(--text-heading);margin:0 0 8px}
h3{font:600 11px/1 var(--font-ui);color:var(--text-muted);margin:22px 0 10px}
p{color:var(--text-secondary);max-width:72ch;margin:0 0 10px}
.lead{color:var(--text-secondary)}
/* segmented group: raised keys butted on 1px seams; only the outer corners round */
.seg{display:inline-flex;gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r-control);overflow:hidden;vertical-align:middle}
.seg button{all:unset;cursor:pointer;height:24px;padding:0 10px;background:var(--surface-raised);box-shadow:var(--shadow-raised);font:500 12px/24px var(--font-ui);color:var(--text-secondary)}
.seg button:hover{background:var(--surface-hover)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--text-on-accent);font-weight:600;box-shadow:none}
/* device segments: a well strip with a rule edge */
.seg--device{gap:0;padding:1px;background:var(--bg-sunken);border-color:var(--rule)}
.seg--device button{height:18px;line-height:18px;padding:0 7px;font-size:9px;background:transparent;box-shadow:none;border-radius:var(--r-badge)}
/* rules */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}
.rule{background:var(--surface-raised);border:1px solid var(--seam);border-radius:var(--r-control);padding:10px 12px}
.rule b{display:block;color:var(--text-primary);font-weight:600;margin-bottom:3px}
.rule span{color:var(--text-secondary)}
/* swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.sw{all:unset;cursor:pointer;display:grid;grid-template-columns:36px 1fr auto;grid-template-areas:"chip name hex" "chip key key" "chip use use";column-gap:10px;padding:8px;border-radius:var(--r-control);background:var(--surface-raised);border:1px solid var(--seam)}
.sw:hover{background:var(--surface-hover)}
.sw__chip{grid-area:chip;border-radius:var(--r-clip);box-shadow:0 0 0 1px var(--rule);min-height:48px}
.sw__name{grid-area:name;font-weight:600;color:var(--text-primary)}
.sw__key{grid-area:key;font-size:10px;color:var(--text-muted)}
.sw__hex{grid-area:hex;font-size:10px;color:var(--text-secondary)}
.sw__use{grid-area:use;font-size:11px;color:var(--text-muted)}
.sw.copied .sw__hex{color:var(--accent-bright)}
/* tables */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12px}
th{text-align:left;font:600 11px/1 var(--font-ui);color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--rule)}
td{padding:7px 10px;border-bottom:1px solid var(--rule);color:var(--text-secondary);vertical-align:middle}
td:first-child{color:var(--text-primary)}
/* type */
.spec{display:grid;grid-template-columns:220px 1fr;gap:6px 16px;align-items:baseline}
.spec .k{font:400 10px/1.4 var(--font-mono);color:var(--text-muted)}
/* geometry */
.radii{display:flex;flex-wrap:wrap;gap:14px}
.radius{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}
.radius i{display:block;width:56px;height:40px;background:var(--surface-raised);border:1px solid var(--seam);box-shadow:var(--shadow-raised)}
.depth{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding:18px;background:var(--bg-app);border:1px solid var(--seam);border-radius:var(--r-control)}
.depth div{height:84px;padding:10px;font-size:11px;color:var(--text-secondary)}
/* controls */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:6px 0}
.demo{background:var(--panel);border:1px solid var(--seam);border-radius:var(--r-body);padding:16px}
.knob{display:block}
.knobs{display:flex;gap:22px;align-items:flex-end}
.knobs figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.cell{display:flex;flex-direction:column;align-items:center;width:53px}
.cell__label{font:500 8px/9px var(--font-ui);color:var(--text-secondary);white-space:nowrap}
.cell__value{font-size:8px;line-height:10px;color:var(--text-primary)}
.cell--mod .cell__label{color:var(--text-primary)}
.cell--dim .cell__label,.cell--dim .cell__value{color:var(--text-disabled)}
.switch{display:inline-flex;align-items:center;gap:5px;font:500 8px/1 var(--font-ui);color:var(--text-secondary)}
.switch i{position:relative;width:18px;height:10px;border-radius:var(--r-clip);background:var(--track-off)}
.switch i::after{content:"";position:absolute;top:1.5px;left:1.5px;width:7px;height:7px;border-radius:1.5px;background:var(--text-tertiary)}
.switch.on i{background:var(--accent)}
.switch.on i::after{left:9.5px;background:var(--panel)}
.switch.on{color:var(--text-primary)}
.chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px;border-radius:var(--r-pill);border:1px solid var(--seam);background:var(--surface-raised);box-shadow:var(--shadow-raised);font:400 11px/1 var(--font-ui);color:var(--text-primary)}
.chip i{width:6px;height:6px;border-radius:50%}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);box-shadow:none}
.slider{display:grid;grid-template-columns:70px 1fr 42px;align-items:center;gap:8px;width:280px;height:18px}
.slider span:first-child{font:500 9px/1 var(--font-ui);color:var(--text-secondary)}
.slider span:last-child{font:400 9px/1 var(--font-mono);color:var(--text-primary);text-align:right}
.track{position:relative;height:3px;border-radius:var(--r-clip);background:var(--bg-sunken)}
.track b{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-clip);background:var(--viz-ink)}
.track u{position:absolute;top:-2px;width:6px;height:7px;border-radius:var(--r-clip);background:var(--text-primary);margin-left:-3px}
.slider.live .track b{background:var(--accent)} .slider.live .track u{background:var(--accent-bright)}
.slider.dim .track b{background:var(--rule)} .slider.dim .track u{background:var(--text-tertiary)} .slider.dim span{color:var(--text-disabled)}
.btn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-control);border:1px solid var(--seam);background:var(--surface-raised);box-shadow:var(--shadow-raised);font:500 12px/1 var(--font-ui);color:var(--text-primary)}
.btn.hover{background:var(--surface-hover)}
.btn.pressed{background:var(--bg-sunken);box-shadow:none}
.btn.on{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);box-shadow:none}
.btn.primary{background:var(--surface-hover);color:var(--text-heading);font-weight:600}
.btn.off{background:var(--panel);color:var(--text-disabled);box-shadow:none}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.field{display:inline-flex;align-items:center;gap:8px;height:26px;width:220px;padding:0 8px;border-radius:var(--r-control);background:var(--bg-sunken);box-shadow:var(--shadow-sunken);font-size:12px;color:var(--text-tertiary)}
.field.focus{box-shadow:inset 0 0 0 1px var(--accent);color:var(--text-primary)}
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.states figure{margin:0;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--text-muted)}
.states figure>*:first-child{align-self:flex-start}
.listrow{display:flex;align-items:center;gap:8px;width:150px;height:26px;padding:0 8px;font-size:12px;color:var(--text-secondary);border-radius:var(--r-clip)}
.listrow.sel{background:var(--surface-selected);color:var(--text-primary);box-shadow:inset 2px 0 0 var(--accent)}
.tabs{display:flex;gap:14px;height:26px;align-items:stretch}
.tabs span{display:flex;align-items:center;font:500 12px/1 var(--font-ui);color:var(--text-secondary)}
.tabs span.sel{color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--accent)}
.toggles{display:inline-flex;gap:3px}
.toggles b{display:grid;place-items:center;width:20px;height:18px;border-radius:var(--r-badge);border:1px solid var(--seam);background:var(--surface-raised);box-shadow:var(--shadow-raised);font:600 9px/1 var(--font-ui);color:var(--text-secondary)}
.toggles b.m{background:var(--mute);border-color:var(--mute);box-shadow:none}
.toggles b.s{background:var(--solo);border-color:var(--solo);box-shadow:none}
.toggles b.r{background:var(--record);border-color:var(--record);box-shadow:none}
.toggles .disc{width:7px;height:7px;border-radius:50%;background:var(--record)}
/* menu: a raised popover with a seam ring; hover a full accent fill */
.menu{display:inline-flex;flex-direction:column;width:200px;padding:4px;background:var(--surface-raised);border:1px solid var(--seam);border-radius:var(--r-control)}
.menu span{display:flex;justify-content:space-between;height:24px;align-items:center;padding:0 8px;border-radius:var(--r-clip);font-size:12px;color:var(--text-primary)}
.menu span small{font-size:12px;color:var(--text-muted)}
.menu span.hot{background:var(--accent);color:var(--text-on-accent)} .menu span.hot small{color:var(--text-on-accent)}
.menu hr{border:0;height:1px;background:var(--rule);margin:4px}
.menu span small.k{font-family:var(--font-mono);font-size:11px}
.menu span.danger{color:var(--danger)} .menu span.danger.hot{color:var(--text-on-accent)}
.menu span.head{font-weight:600;color:var(--text-heading)} .menu span.head small{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.menu .sw{display:grid;grid-template-columns:repeat(9,16px);gap:2px;padding:4px 8px}.menu .sw i{width:12px;height:12px;margin:2px;border-radius:var(--r-badge)}.menu .sw i.on{outline:1px solid var(--text-primary);outline-offset:1px}
/* transport */
.transport{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px;background:var(--panel);border-bottom:1px solid var(--seam);overflow-x:auto}
.transport .name{flex:none;font:600 13px/1 var(--font-ui);color:var(--text-primary)}
.console{flex:none;display:flex;align-items:center;gap:10px;height:30px;padding:0 8px 0 2px;background:var(--bg-sunken);box-shadow:var(--shadow-sunken);border-radius:var(--r-control)}
.keys{display:flex;gap:1px}
.tp{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-tile);background:var(--surface-raised);border:1px solid var(--seam);box-shadow:var(--shadow-raised)}
.tp.play{width:36px}
.tp.on{background:var(--accent);border-color:var(--accent);box-shadow:none}
.tp .stop{width:9px;height:9px;border-radius:1px;background:var(--text-strong)}
.tp .play-tri{width:0;height:0;border-left:10px solid var(--text-strong);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.tp.on .play-tri{border-left-color:var(--text-on-accent)}
.tp .rec{width:10px;height:10px;border-radius:50%;background:var(--record)}
.tp.rec-on{background:var(--record);border-color:var(--record);box-shadow:none} .tp.rec-on .rec{background:var(--record-ink)}
.tp .met{width:10px;height:12px;border:1.5px solid var(--text-strong);border-bottom-width:2px;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.tp.on .met{border-color:var(--text-on-accent)}
.pos{display:flex;align-items:center;gap:6px}
.pos b{font:400 14px/1 var(--font-mono);letter-spacing:.02em;color:var(--text-primary)}
.unit{font:500 10px/1 var(--font-ui);color:var(--text-muted)}
.well{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 8px;background:var(--bg-sunken);box-shadow:var(--shadow-sunken);border-radius:var(--r-control)}
.well b{font:400 13px/1 var(--font-mono);color:var(--text-primary)}
.loop{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-control);background:var(--accent);color:var(--text-on-accent);font:400 11px/1 var(--font-mono)}
.loop .unit{color:var(--text-on-accent)}
.vr{flex:none;width:1px;height:18px;background:var(--rule)}
/* graph window */
.graph{background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--rule);border-radius:var(--r-control);position:relative}
.graph .axis{position:absolute;font:400 7.5px/1 var(--font-mono);color:var(--text-axis)}
.graph .title{position:absolute;left:6px;top:5px;font:500 8px/1 var(--font-ui);color:var(--text-muted)}
.meters{display:flex;gap:5px;align-items:flex-end;height:120px}
.meter{position:relative;width:11px;height:120px;border-radius:var(--r-clip);background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--rule);overflow:hidden}
.meter i{position:absolute;left:0;right:0;bottom:0}
/* clips */
.lane{display:flex;gap:2px;align-items:center;height:64px;padding:0 6px;background:var(--bg-app);border:1px solid var(--seam);border-radius:var(--r-control);overflow-x:auto;position:relative}
.clip{position:relative;flex:none;height:60px;border-radius:var(--r-clip);background:var(--c-body);overflow:hidden}
.clip b{display:block;height:12px;padding:0 5px;background:var(--c-band);color:var(--c-ink);font:600 9.5px/12px var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip i{position:absolute;width:8px;height:3px;border-radius:1px;background:var(--c-cont)}
.clip.sel b{background:var(--accent);color:var(--text-on-accent)}
.clip.sel{box-shadow:inset 0 0 0 1px var(--accent)}
.playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--accent)}
/* card */
.card{width:700px;height:260px;background:var(--panel);border:1px solid var(--seam);border-radius:var(--r-body);overflow:hidden;display:grid;grid-template-rows:22px 1fr}
.card__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 8px;border-bottom:1px solid var(--seam);background:var(--surface-raised);box-shadow:var(--shadow-raised)}
.card__name{font:600 12px/1 var(--font-ui);color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preset{display:inline-flex;align-items:stretch;height:18px;border-radius:var(--r-control);background:var(--bg-sunken);box-shadow:var(--shadow-sunken);overflow:hidden;font-size:11px}
.preset i{font-style:normal;width:18px;display:grid;place-items:center;color:var(--text-tertiary)}
.preset b{font-weight:500;width:132px;padding:0 7px;border-left:1px solid var(--rule);border-right:1px solid var(--rule);display:flex;align-items:center;color:var(--text-primary)}
.card__badge{font:400 10px/1 var(--font-mono);color:var(--text-muted)}
.card__right{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.card__body{display:grid;grid-template-columns:150px 1fr 150px;gap:5px;padding:6px}
.sect{padding:6px 8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.sect+.sect{border-left:1px solid var(--rule)}
.sect h5{margin:0;font:600 10.5px/1 var(--font-ui);color:var(--text-muted)}
.scroll{overflow-x:auto;padding-bottom:4px}
.note{font-size:11px;color:var(--text-muted)}
/* shell */
.shell{display:grid;grid-template-rows:20px 28px 1fr 22px 70px 16px;gap:1px;height:300px;border:1px solid var(--seam);border-radius:var(--r-control);overflow:hidden;background:var(--seam);font:500 11px/1 var(--font-ui);color:var(--text-muted)}
.shell>div{display:flex;align-items:center;padding:0 10px}
.shell .h{background:var(--bg-app);justify-content:center;color:var(--text-primary);font-weight:600}
.shell .t{background:var(--panel)}
.shell .b{display:grid;grid-template-columns:170px 1fr;gap:1px;padding:0;align-items:stretch;background:var(--seam)}
.shell .b div{display:grid;place-items:center}
.shell .b div:first-child{background:var(--panel)} .shell .b div:last-child{background:var(--bg-app)}
.shell .d{background:var(--panel)}
.shell .db{background:var(--bg-app)}
.shell .s{background:var(--bg-app);font-weight:400;color:var(--text-secondary)}
ul.plain{margin:0;padding-left:18px;color:var(--text-secondary)} ul.plain li{margin:3px 0}
@media (max-width:760px){.spec{grid-template-columns:1fr} .mast nav{display:none}}
</style>
</head>
<body>
<div class="page">
<header class="mast">
<div><p class="eyebrow">Nota · design</p><h1>Studio</h1></div>
<nav><a href="#rules">Rules</a><a href="#colour">Colour</a><a href="#type">Type</a><a href="#geometry">Geometry</a><a href="#controls">Controls</a><a href="#states">States</a><a href="#graphs">Graphs</a><a href="#cards">Cards</a><a href="#shell">Shell</a></nav>
<span class="spacer"></span>
<div class="seg" role="group" aria-label="Colour theme"><button data-v="dark" aria-pressed="true">Studio Dark</button><button data-v="light" aria-pressed="false">Studio Light</button><button data-v="ember-graphite" aria-pressed="false">Ember Graphite</button><button data-v="ember-paper" aria-pressed="false">Ember Paper</button></div>
</header>
<section id="rules">
<p class="eyebrow">01 · Foundation</p>
<h2>Rules</h2>
<p class="lead">Nota's design language: the work carries the colour, the interface steps back, and one accent marks what is live or chosen. <a href="DESIGN.md">DESIGN.md</a> is the text version with every value, the tests that enforce it and the accepted exceptions.</p>
<div class="rules">
<div class="rule"><b>One accent: live or chosen</b><span>Orange is playing, selected, the playhead, the loop, a toggle that is on, menu hover, the power switch, and a value control while hovered or dragged. Nothing else.</span></div>
<div class="rule"><b>Resting values are neutral</b><span>Knob arcs, fader fills, curves and waveforms at rest are viz ink. A modulation arc keeps its source chroma.</span></div>
<div class="rule"><b>Semantics by purpose</b><span>Mute amber, solo blue, arm and record red. Green is positive status and the meter's safe range.</span></div>
<div class="rule"><b>Derived ink on solid fills</b><span>Text on an accent, mute, solo, arm or track-colour fill takes the ink with the higher contrast.</span></div>
<div class="rule"><b>Seam between, rule within</b><span>Panels and keys meet on the dark seam; items inside a panel are divided by the lighter rule.</span></div>
<div class="rule"><b>Flat docked, blur only floating</b><span>Depth is a tone step, a 1px seam and a faint top bevel. Only floating layers cast a blurred shadow.</span></div>
<div class="rule"><b>2 · 3 · 4 corners</b><span>2 for inner keys, rows, clips; 3 for controls and cards; 4 for modals; 0 for docked panels.</span></div>
<div class="rule"><b>Two faces, one split</b><span>Geist for words, Geist Mono for every number a user reads. Nothing under 7 px.</span></div>
<div class="rule"><b>No shouting</b><span>Sentence case, letter-spacing 0. Acronyms and units keep their case: LFO rate, Gain dB.</span></div>
<div class="rule"><b>State changes colour only</b><span>Never size, border width or position. Nothing moves on hover.</span></div>
<div class="rule"><b>Real time is not animated</b><span>Meters, playhead and spectra jump to the value.</span></div>
<div class="rule"><b>Opacity is not a state</b><span>Muted and disabled take the next ink step.</span></div>
<div class="rule"><b>Numbers are set</b><span class="mono">−3.3 dB · 72 % · 3.2 k · 120.00</span></div>
</div>
</section>
<section id="colour">
<p class="eyebrow">02 · Colour</p>
<h2>Palette</h2>
<p>Click a swatch to copy its hex for the variant selected above. Values come straight from <code>NotaTheme.axaml</code>.</p>
<h3>Surfaces · well, ground, panel, raised</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#17181A", "light": "#D6D8DB", "ember-graphite": "#100F0D", "ember-paper": "#E4DFD1"}" title="Copy hex"><span class="sw__chip" style="background:var(--bg-sunken)"></span><span class="sw__name">Well</span><code class="sw__key">Brush.BgSunken</code><span class="sw__hex mono"></span><span class="sw__use">Graph windows, fields, readouts, the console; pressed keys sink here</span></button><button class="sw" data-hex="{"dark": "#1E1F22", "light": "#C9CBCF", "ember-graphite": "#0B0A09", "ember-paper": "#DCD6C5"}" title="Copy hex"><span class="sw__chip" style="background:var(--bg-app)"></span><span class="sw__name">Ground</span><code class="sw__key">Brush.BgApp</code><span class="sw__hex mono"></span><span class="sw__use">Window, title bar, arrangement, status line</span></button><button class="sw" data-hex="{"dark": "#222326", "light": "#C4C6CA", "ember-graphite": "#131210", "ember-paper": "#E7E2D4"}" title="Copy hex"><span class="sw__chip" style="background:var(--lane-b)"></span><span class="sw__name">Ground, alternate</span><code class="sw__key">Brush.LaneB</code><span class="sw__hex mono"></span><span class="sw__use">Alternate arrangement lane</span></button><button class="sw" data-hex="{"dark": "#2B2D31", "light": "#E4E5E7", "ember-graphite": "#141310", "ember-paper": "#EAE5D7"}" title="Copy hex"><span class="sw__chip" style="background:var(--panel)"></span><span class="sw__name">Panel</span><code class="sw__key">Brush.Panel</code><span class="sw__hex mono"></span><span class="sw__use">Transport row, browser, toolbars, device cards, mixer strips</span></button><button class="sw" data-hex="{"dark": "#34363B", "light": "#EEEFF1", "ember-graphite": "#1C1A16", "ember-paper": "#F8F5EC"}" title="Copy hex"><span class="sw__chip" style="background:var(--surface-raised)"></span><span class="sw__name">Raised</span><code class="sw__key">Brush.SurfaceRaised</code><span class="sw__hex mono"></span><span class="sw__use">Keys at rest, card header, menus, tooltips</span></button><button class="sw" data-hex="{"dark": "#393C41", "light": "#F7F8F9", "ember-graphite": "#252219", "ember-paper": "#E7E1D0"}" title="Copy hex"><span class="sw__chip" style="background:var(--surface-hover)"></span><span class="sw__name">Raised hover</span><code class="sw__key">Brush.SurfaceHover</code><span class="sw__hex mono"></span><span class="sw__use">Hover; the selected row, with an accent tick</span></button><button class="sw" data-hex="{"dark": "#4D3F2E", "light": "#E6D6C4", "ember-graphite": "#241F17", "ember-paper": "#F2E4C4"}" title="Copy hex"><span class="sw__chip" style="background:var(--accent-subtle)"></span><span class="sw__name">Accent soft</span><code class="sw__key">Brush.AccentSubtle</code><span class="sw__hex mono"></span><span class="sw__use">16 % accent over the panel; nothing at rest uses it</span></button></div>
<h3>Lines · seam and rule</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#141517", "light": "#9DA0A6", "ember-graphite": "#0C0B09", "ember-paper": "#E0DAC9"}" title="Copy hex"><span class="sw__chip" style="background:var(--seam)"></span><span class="sw__name">Seam</span><code class="sw__key">Brush.Seam</code><span class="sw__hex mono"></span><span class="sw__use">Between panels, around controls, between keys</span></button><button class="sw" data-hex="{"dark": "#45484E", "light": "#B3B6BB", "ember-graphite": "#3A362D", "ember-paper": "#BDB5A0"}" title="Copy hex"><span class="sw__chip" style="background:var(--rule)"></span><span class="sw__name">Rule</span><code class="sw__key">Brush.Rule</code><span class="sw__hex mono"></span><span class="sw__use">Within a panel: separators, field edges, graph frame</span></button><button class="sw" data-hex="{"dark": "#BF7D22", "light": "#ECA54E", "ember-graphite": "#6B5326", "ember-paper": "#C9A254"}" title="Copy hex"><span class="sw__chip" style="background:var(--border-brass)"></span><span class="sw__name">Accent line</span><code class="sw__key">Brush.BorderBrass</code><span class="sw__hex mono"></span><span class="sw__use">An accent stroke where a fill is too heavy</span></button><button class="sw" data-hex="{"dark": "#2A2C30", "light": "#BDC0C4", "ember-graphite": "#1E1C18", "ember-paper": "#DED8C8"}" title="Copy hex"><span class="sw__chip" style="background:var(--grid-beat)"></span><span class="sw__name">Grid</span><code class="sw__key">Brush.GridBeat</code><span class="sw__hex mono"></span><span class="sw__use">Beat grid, zero axis</span></button><button class="sw" data-hex="{"dark": "#3A3C41", "light": "#ADB0B5", "ember-graphite": "#2A2721", "ember-paper": "#CFC8B4"}" title="Copy hex"><span class="sw__chip" style="background:var(--grid-bar)"></span><span class="sw__name">Grid bar</span><code class="sw__key">Brush.GridBar</code><span class="sw__hex mono"></span><span class="sw__use">Bar lines</span></button><button class="sw" data-hex="{"dark": "#2E2F32", "light": "#C0C3C6", "ember-graphite": "#232019", "ember-paper": "#DDD7C6"}" title="Copy hex"><span class="sw__chip" style="background:var(--viz-grid)"></span><span class="sw__name">Viz grid</span><code class="sw__key">Brush.VizGrid</code><span class="sw__hex mono"></span><span class="sw__use">Grid inside a graph window</span></button></div>
<h3>Ink · by importance</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#F4F5F6", "light": "#0E0F11", "ember-graphite": "#F2EDE1", "ember-paper": "#1A150E"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-heading)"></span><span class="sw__name">Ink 0</span><code class="sw__key">Brush.TextHeading</code><span class="sw__hex mono"></span><span class="sw__use">Modal and section titles</span></button><button class="sw" data-hex="{"dark": "#E8E9EB", "light": "#16171A", "ember-graphite": "#E9E4D8", "ember-paper": "#241F17"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-primary)"></span><span class="sw__name">Primary</span><code class="sw__key">Brush.TextPrimary</code><span class="sw__hex mono"></span><span class="sw__use">Names, values, button text</span></button><button class="sw" data-hex="{"dark": "#D4D6DA", "light": "#282A2E", "ember-graphite": "#C7C0B0", "ember-paper": "#3E382C"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-strong)"></span><span class="sw__name">Ink 2</span><code class="sw__key">Brush.TextStrong</code><span class="sw__hex mono"></span><span class="sw__use">Toggle-key text, transport glyphs</span></button><button class="sw" data-hex="{"dark": "#C0C4C9", "light": "#3A3D42", "ember-graphite": "#A39D8F", "ember-paper": "#5E5849"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-secondary)"></span><span class="sw__name">Secondary</span><code class="sw__key">Brush.TextSecondary</code><span class="sw__hex mono"></span><span class="sw__use">Labels, idle icons, metadata</span></button><button class="sw" data-hex="{"dark": "#A4A9B0", "light": "#4F535A", "ember-graphite": "#8F897C", "ember-paper": "#625B50"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-muted)"></span><span class="sw__name">Muted</span><code class="sw__key">Brush.TextMuted</code><span class="sw__hex mono"></span><span class="sw__use">Section labels, units, badges</span></button><button class="sw" data-hex="{"dark": "#92969D", "light": "#65696F", "ember-graphite": "#716D60", "ember-paper": "#7E786C"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-tertiary)"></span><span class="sw__name">Ink 5</span><code class="sw__key">Brush.TextTertiary</code><span class="sw__hex mono"></span><span class="sw__use">Row tags, placeholders, empty states</span></button><button class="sw" data-hex="{"dark": "#82868C", "light": "#797C81", "ember-graphite": "#646054", "ember-paper": "#8D866F"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-faint)"></span><span class="sw__name">Faint</span><code class="sw__key">Brush.TextFaint</code><span class="sw__hex mono"></span><span class="sw__use">Disabled controls; axis labels in graphs</span></button><button class="sw" data-hex="{"dark": "#D7D8DA", "light": "#252629", "ember-graphite": "#D8D3C8", "ember-paper": "#332E26"}" title="Copy hex"><span class="sw__chip" style="background:var(--viz-ink)"></span><span class="sw__name">Viz ink</span><code class="sw__key">Brush.VizInk</code><span class="sw__hex mono"></span><span class="sw__use">A value at rest: arcs, fills, curves</span></button><button class="sw" data-hex="{"dark": "#17181A", "light": "#17181A", "ember-graphite": "#171613", "ember-paper": "#FFFBF2"}" title="Copy hex"><span class="sw__chip" style="background:var(--text-on-accent)"></span><span class="sw__name">On accent</span><code class="sw__key">Brush.TextOnAccent</code><span class="sw__hex mono"></span><span class="sw__use">Text on the accent</span></button></div>
<h3>Accent · the only one</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#FF9F1C", "light": "#EF8A0C", "ember-graphite": "#D8A03D", "ember-paper": "#AD7716"}" title="Copy hex"><span class="sw__chip" style="background:var(--accent)"></span><span class="sw__name">Accent</span><code class="sw__key">Brush.Accent</code><span class="sw__hex mono"></span><span class="sw__use">Playing, selected, playhead, loop, toggled on, live</span></button><button class="sw" data-hex="{"dark": "#FFB547", "light": "#C46A00", "ember-graphite": "#F0C060", "ember-paper": "#744D07"}" title="Copy hex"><span class="sw__chip" style="background:var(--accent-bright)"></span><span class="sw__name">Accent glow</span><code class="sw__key">Brush.AccentBright</code><span class="sw__hex mono"></span><span class="sw__use">The accent as a line or text</span></button><button class="sw" data-hex="{"dark": "#C77612", "light": "#D47800", "ember-graphite": "#B08536", "ember-paper": "#7A5008"}" title="Copy hex"><span class="sw__chip" style="background:var(--accent-deep)"></span><span class="sw__name">Pressed</span><code class="sw__key">Brush.AccentDeep</code><span class="sw__hex mono"></span><span class="sw__use">Pressed accent</span></button><button class="sw" data-hex="{"dark": "#C77612", "light": "#F7C27A", "ember-graphite": "#8A6B2E", "ember-paper": "#9C8034"}" title="Copy hex"><span class="sw__chip" style="background:var(--accent-dim)"></span><span class="sw__name">Accent dim</span><code class="sw__key">Brush.AccentDim</code><span class="sw__hex mono"></span><span class="sw__use">The soft accent</span></button></div>
<h3>Semantics</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#F06A6E", "light": "#B3262C", "ember-graphite": "#BE563E", "ember-paper": "#B54A32"}" title="Copy hex"><span class="sw__chip" style="background:var(--record)"></span><span class="sw__name">Record</span><code class="sw__key">Brush.Record</code><span class="sw__hex mono"></span><span class="sw__use">Record and arm, solid when on</span></button><button class="sw" data-hex="{"dark": "#17181A", "light": "#FFFFFF", "ember-graphite": "#FFFFFF", "ember-paper": "#FFF4EE"}" title="Copy hex"><span class="sw__chip" style="background:var(--record-ink)"></span><span class="sw__name">Record ink</span><code class="sw__key">Brush.RecordInk</code><span class="sw__hex mono"></span><span class="sw__use">Disc on an engaged record key</span></button><button class="sw" data-hex="{"dark": "#F06A6E", "light": "#B3262C", "ember-graphite": "#C2554A", "ember-paper": "#B13E33"}" title="Copy hex"><span class="sw__chip" style="background:var(--danger)"></span><span class="sw__name">Error</span><code class="sw__key">Brush.Danger</code><span class="sw__hex mono"></span><span class="sw__use">Overload, clipping, error text</span></button><button class="sw" data-hex="{"dark": "#F58F92", "light": "#9C1F24", "ember-graphite": "#E08A72", "ember-paper": "#A3391B"}" title="Copy hex"><span class="sw__chip" style="background:var(--danger-bright)"></span><span class="sw__name">Error light</span><code class="sw__key">Brush.DangerBright</code><span class="sw__hex mono"></span><span class="sw__use">Overload readout</span></button><button class="sw" data-hex="{"dark": "#F2B53C", "light": "#7A4F00", "ember-graphite": "#D9C34C", "ember-paper": "#837010"}" title="Copy hex"><span class="sw__chip" style="background:var(--mute)"></span><span class="sw__name">Mute</span><code class="sw__key">Brush.Mute</code><span class="sw__hex mono"></span><span class="sw__use">Mute on — amber</span></button><button class="sw" data-hex="{"dark": "#6A9FD8", "light": "#3F78B8", "ember-graphite": "#6D8FB5", "ember-paper": "#3E6288"}" title="Copy hex"><span class="sw__chip" style="background:var(--solo)"></span><span class="sw__name">Solo</span><code class="sw__key">Brush.Solo</code><span class="sw__hex mono"></span><span class="sw__use">Solo on — blue</span></button><button class="sw" data-hex="{"dark": "#F2B53C", "light": "#7A4F00", "ember-graphite": "#D9C34C", "ember-paper": "#837010"}" title="Copy hex"><span class="sw__chip" style="background:var(--warning)"></span><span class="sw__name">Warning</span><code class="sw__key">Brush.Warning</code><span class="sw__hex mono"></span><span class="sw__use">Meter −6…0 dB</span></button><button class="sw" data-hex="{"dark": "#6CC673", "light": "#22692B", "ember-graphite": "#58B368", "ember-paper": "#2C7A3E"}" title="Copy hex"><span class="sw__chip" style="background:var(--success)"></span><span class="sw__name">Green</span><code class="sw__key">Brush.Success</code><span class="sw__hex mono"></span><span class="sw__use">Meter safe range, positive status</span></button><button class="sw" data-hex="{"dark": "#17181A", "light": "#FFFFFF", "ember-graphite": "#171613", "ember-paper": "#FFFBF2"}" title="Copy hex"><span class="sw__chip" style="background:var(--success-ink)"></span><span class="sw__name">Green ink</span><code class="sw__key">Brush.SuccessInk</code><span class="sw__hex mono"></span><span class="sw__use">Glyph on a green key (Session play)</span></button><button class="sw" data-hex="{"dark": "#3F8A45", "light": "#79B880", "ember-graphite": "#7FB069", "ember-paper": "#609548"}" title="Copy hex"><span class="sw__chip" style="background:var(--success-dim)"></span><span class="sw__name">Green dim</span><code class="sw__key">Brush.SuccessDim</code><span class="sw__hex mono"></span><span class="sw__use">Input, metronome</span></button></div>
<h3>Graph chromas · inside graphs only, in this order</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#D7D8DA", "light": "#252629", "ember-graphite": "#D8D3C8", "ember-paper": "#332E26"}" title="Copy hex"><span class="sw__chip" style="background:var(--viz-ink)"></span><span class="sw__name">1 · Viz ink</span><code class="sw__key">Brush.VizInk</code><span class="sw__hex mono"></span><span class="sw__use">Primary: left, mid, main</span></button><button class="sw" data-hex="{"dark": "#5FB3A8", "light": "#3A8A7F", "ember-graphite": "#5B9E9C", "ember-paper": "#2F7472"}" title="Copy hex"><span class="sw__chip" style="background:var(--chroma-teal)"></span><span class="sw__name">2 · Teal</span><code class="sw__key">Brush.ChromaTeal</code><span class="sw__hex mono"></span><span class="sw__use">Lows, early, input, modulation</span></button><button class="sw" data-hex="{"dark": "#D77A8F", "light": "#B4566B", "ember-graphite": "#B57286", "ember-paper": "#86465B"}" title="Copy hex"><span class="sw__chip" style="background:var(--chroma-rose)"></span><span class="sw__name">3 · Rose</span><code class="sw__key">Brush.ChromaRose</code><span class="sw__hex mono"></span><span class="sw__use">Right, highs, tail</span></button><button class="sw" data-hex="{"dark": "#6A9FD8", "light": "#3F78B8", "ember-graphite": "#6D8FB5", "ember-paper": "#3E6288"}" title="Copy hex"><span class="sw__chip" style="background:var(--chroma-steel)"></span><span class="sw__name">4 · Blue</span><code class="sw__key">Brush.ChromaSteel</code><span class="sw__hex mono"></span><span class="sw__use">Rare fourth layer</span></button><button class="sw" data-hex="{"dark": "#86C9C0", "light": "#2E7067", "ember-graphite": "#7FC0BE", "ember-paper": "#3E8A88"}" title="Copy hex"><span class="sw__chip" style="background:var(--chroma-teal-light)"></span><span class="sw__name">Teal light</span><code class="sw__key">Brush.ChromaTealLight</code><span class="sw__hex mono"></span><span class="sw__use">Text on teal</span></button><button class="sw" data-hex="{"dark": "#E49EAE", "light": "#93404F", "ember-graphite": "#D79BAB", "ember-paper": "#7F2D43"}" title="Copy hex"><span class="sw__chip" style="background:var(--chroma-rose-light)"></span><span class="sw__name">Rose light</span><code class="sw__key">Brush.ChromaRoseLight</code><span class="sw__hex mono"></span><span class="sw__use">Text on rose</span></button></div>
<h3>Track palette · nine roles, returns, master</h3><div class="swatches"><button class="sw" data-hex="{"dark": "#7FB87A", "light": "#4A7F46", "ember-graphite": "#58B368", "ember-paper": "#328140"}" title="Copy hex"><span class="sw__chip" style="background:var(--track1)"></span><span class="sw__name">Drums</span><code class="sw__key">Brush.Track1</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#5FB3A8", "light": "#3A8A7F", "ember-graphite": "#4E9E7A", "ember-paper": "#306F53"}" title="Copy hex"><span class="sw__chip" style="background:var(--track2)"></span><span class="sw__name">Perc</span><code class="sw__key">Brush.Track2</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#5AA6C4", "light": "#357C99", "ember-graphite": "#3E8E8E", "ember-paper": "#256464"}" title="Copy hex"><span class="sw__chip" style="background:var(--track3)"></span><span class="sw__name">Bass</span><code class="sw__key">Brush.Track3</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#6A9FD8", "light": "#3F78B8", "ember-graphite": "#5AA0B8", "ember-paper": "#317187"}" title="Copy hex"><span class="sw__chip" style="background:var(--track4)"></span><span class="sw__name">Keys</span><code class="sw__key">Brush.Track4</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#E0A84A", "light": "#B8862F", "ember-graphite": "#C77F55", "ember-paper": "#985127"}" title="Copy hex"><span class="sw__chip" style="background:var(--track5)"></span><span class="sw__name">Texture</span><code class="sw__key">Brush.Track5</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#9D90C9", "light": "#7363A8", "ember-graphite": "#7A6FB0", "ember-paper": "#4B4082"}" title="Copy hex"><span class="sw__chip" style="background:var(--track6)"></span><span class="sw__name">FX</span><code class="sw__key">Brush.Track6</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#D77A8F", "light": "#B4566B", "ember-graphite": "#B05A7A", "ember-paper": "#7F3450"}" title="Copy hex"><span class="sw__chip" style="background:var(--track7)"></span><span class="sw__name">Brass</span><code class="sw__key">Brush.Track7</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#B3B45E", "light": "#7E7F2F", "ember-graphite": "#9AA64A", "ember-paper": "#6C752C"}" title="Copy hex"><span class="sw__chip" style="background:var(--track8)"></span><span class="sw__name">Vox</span><code class="sw__key">Brush.Track8</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#8E9DB0", "light": "#5D6C80", "ember-graphite": "#7FA88E", "ember-paper": "#598C69"}" title="Copy hex"><span class="sw__chip" style="background:var(--track9)"></span><span class="sw__name">Return</span><code class="sw__key">Brush.Track9</code><span class="sw__hex mono"></span><span class="sw__use"></span></button><button class="sw" data-hex="{"dark": "#8E9DB0", "light": "#5D6C80", "ember-graphite": "#7FA88E", "ember-paper": "#598C69"}" title="Copy hex"><span class="sw__chip" style="background:var(--return-a)"></span><span class="sw__name">Return A</span><code class="sw__key">Brush.ReturnA</code><span class="sw__hex mono"></span><span class="sw__use">Return bus</span></button><button class="sw" data-hex="{"dark": "#7A889A", "light": "#4E5B6D", "ember-graphite": "#6B907B", "ember-paper": "#3E6A4D"}" title="Copy hex"><span class="sw__chip" style="background:var(--return-b)"></span><span class="sw__name">Return B</span><code class="sw__key">Brush.ReturnB</code><span class="sw__hex mono"></span><span class="sw__use">Return bus</span></button><button class="sw" data-hex="{"dark": "#A4A9B0", "light": "#4F535A", "ember-graphite": "#8D8779", "ember-paper": "#746D5C"}" title="Copy hex"><span class="sw__chip" style="background:var(--master)"></span><span class="sw__name">Master</span><code class="sw__key">Brush.Master</code><span class="sw__hex mono"></span><span class="sw__use">Muted grey: the sum, not a track</span></button></div>
<h3>Elevation</h3>
<div class="tbl" style="margin-top:10px"><table>
<tr><th>Key</th><th>Dark</th><th>Light</th></tr>
<tr><td><code>Shadow.Raised</code></td><td class="mono">inset 0 1 0 0 #12FFFFFF</td><td class="mono">inset 0 1 0 0 #B3FFFFFF</td></tr><tr><td><code>Shadow.Sunken</code></td><td class="mono">inset 0 0 0 1 #45484E</td><td class="mono">inset 0 0 0 1 #B3B6BB</td></tr><tr><td><code>Shadow.Popover</code></td><td class="mono">0 0 0 1 #141517, 0 10 28 0 #6B000000</td><td class="mono">0 0 0 1 #9DA0A6, 0 10 28 0 #381E2024</td></tr><tr><td><code>Shadow.Modal</code></td><td class="mono">0 0 0 1 #141517, 0 24 64 0 #80000000</td><td class="mono">0 0 0 1 #9DA0A6, 0 24 64 0 #401E2024</td></tr>
</table></div>
<p class="note" style="margin-top:8px">Only <code>Shadow.Popover</code> and <code>Shadow.Modal</code> carry a blur. A raised control's seam ring is its own 1px seam border; <code>Shadow.Raised</code> is the top bevel.</p>
</section>
<section id="type">
<p class="eyebrow">03 · Type</p>
<h2>Geist and Geist Mono</h2>
<p>A proportional face for names and words; mono for every number a user reads, so digits keep their width as a knob turns. Nothing in the shell is larger than 13 except the position readout.</p>
<h3>Shell scale</h3>
<div class="spec">
<span class="k">Title · 600 · 13</span><span style="font:600 13px/1.35 var(--font-ui);color:var(--text-heading)">Export audio</span>
<span class="k">Heading · 600 · 13</span><span style="font:600 13px/1.35 var(--font-ui);color:var(--text-primary)">Northern Reverb Study</span>
<span class="k">Name · 500 · 12</span><span style="font:500 12px/1.35 var(--font-ui);color:var(--text-primary)">Stone Vault · Long Tail</span>
<span class="k">default · 500 · 12</span><span style="font:500 12px var(--font-ui)">Arrangement · Session · Modular</span>
<span class="k">Caption · 400 · 11</span><span style="font:400 11px/1.35 var(--font-ui);color:var(--text-secondary)">Load as an effect on the selected track</span>
<span class="k">SectionLabel · 600 · 11</span><span style="font:600 11px/1.35 var(--font-ui);color:var(--text-muted)">Recent samples</span>
<span class="k">CellLabel · 500 · 10</span><span style="font:500 10px/1.35 var(--font-ui);color:var(--text-muted)">BPM · Loop · Grid</span>
<span class="k">Readout · Mono 400 · 13</span><span style="font:400 13px/1.35 var(--font-mono);color:var(--text-primary)">120.00 · 12.3.04</span>
<span class="k">Value · Mono 400 · 11</span><span style="font:400 11px/1.35 var(--font-mono);color:var(--text-secondary)">−3.3 dB · 48 k · 2.4 MB</span>
<span class="k">Eyebrow · Mono 400 · 10</span><span style="font:400 10px/1.35 var(--font-mono);color:var(--text-muted)">Convolution · VST3</span>
</div>
<h3>Device scale · inside a 700 × 260 card</h3>
<div class="spec">
<span class="k">DeviceName · 600 · 12</span><span style="font:600 12px/1.35 var(--font-ui);color:var(--text-primary)">Nota Chamber</span>
<span class="k">DeviceSection · 600 · 10.5</span><span style="font:600 10.5px/1.35 var(--font-ui);color:var(--text-muted)">Early reflections</span>
<span class="k">RowLabel · 500 · 9</span><span style="font:500 9px/1.35 var(--font-ui);color:var(--text-secondary)">Pre-delay</span>
<span class="k">KnobLabel · 500 · 8</span><span style="font:500 8px/1.35 var(--font-ui);color:var(--text-secondary)">LFO rate</span>
<span class="k">KnobValue · Mono 400 · 8</span><span style="font:400 8px/1.35 var(--font-mono);color:var(--text-primary)">4.6 s</span>
<span class="k">Axis · Mono 400 · 7.5</span><span style="font:400 7.5px/1.35 var(--font-mono);color:var(--text-axis)">30 Hz — 18k</span>
</div>
<h3>Setting numbers and labels</h3>
<div class="tbl"><table>
<tr><th>Rule</th><th>Yes</th><th>No</th></tr>
<tr><td>Thin space before the unit</td><td class="mono">4.6 s · −3.3 dB · 72 %</td><td class="mono">4.6s · -3,3dB</td></tr>
<tr><td>Typographic minus; plus only where the sign matters</td><td class="mono">−18.0 dB · +0.8 dB</td><td class="mono">-18.0 dB</td></tr>
<tr><td>Fixed precision</td><td class="mono">dB 1 · tempo 2 · % 0 · 440 Hz · 3.2 k</td><td class="mono">3200 Hz · 72.4 %</td></tr>
<tr><td>Labels: sentence case, no tracking, acronyms kept</td><td>Feedback · Pre-delay · LFO rate · Gain dB</td><td>FEEDBACK · Fdbk: · Lfo Rate</td></tr>
</table></div>
</section>
<section id="geometry">
<p class="eyebrow">04 · Material</p>
<h2>Radii, sizes, depth</h2>
<h3>Radii · small, nearly square</h3>
<div class="radii">
<div class="radius"><i style="border-radius:var(--r-docked)"></i>0 · docked panel</div>
<div class="radius"><i style="border-radius:var(--r-bar)"></i>1 · bar in a plot</div>
<div class="radius"><i style="border-radius:var(--r-clip)"></i>2 · clip, row, menu item</div>
<div class="radius"><i style="border-radius:var(--r-control)"></i>3 · control, card, popover</div>
<div class="radius"><i style="border-radius:var(--r-modal)"></i>4 · modal</div>
</div>
<h3>Sizes and steps</h3>
<div class="tbl"><table>
<tr><th>Element</th><th>px</th><th>Token</th></tr>
<tr><td>Device card</td><td class="mono">700 × 260</td><td><code>DeviceCardKit.CardH</code></td></tr>
<tr><td>Transport row · console · keys · Play</td><td class="mono">44 · 30 · 26 · 36</td><td><code>Control.TransportBar / Console / Transport / Play</code></td></tr>
<tr><td>Shell button, field, readout well</td><td class="mono">26</td><td><code>Control.Shell</code></td></tr>
<tr><td>Tab segment · segment container</td><td class="mono">24 · 30</td><td><code>Control.Seg / SegGroup</code></td></tr>
<tr><td>Filter chip</td><td class="mono">20</td><td><code>Control.Chip</code></td></tr>
<tr><td>Title bar · panel toolbar · status · menu item</td><td class="mono">32 · 32 · 22 · 24</td><td></td></tr>
<tr><td>Knob · secondary / regular / main · inline</td><td class="mono">34 / 36 / 44 · 24</td><td><code>Control.Knob*</code></td></tr>
<tr><td>Parameter cell</td><td class="mono">53</td><td><code>Control.ParamCell</code></td></tr>
<tr><td>Switch · slider track · meter</td><td class="mono">18 × 10 · 3 · 11 / 5</td><td></td></tr>
<tr><td>Device steps · hair / gap / inset / wide</td><td class="mono">2 · 5 · 6 · 8</td><td><code>Space.Device*</code></td></tr>
<tr><td>Shell steps · tile / between panels (the seam) / inset</td><td class="mono">8 · 1 · 20</td><td><code>Space.Tile / Gutter / Inset</code></td></tr>
</table></div>
<h3>Depth · a tone step and a seam; blur only when it floats</h3>
<div class="depth">
<div style="background:var(--bg-sunken);box-shadow:var(--shadow-sunken);border-radius:var(--r-control)">Well · rule edge</div>
<div style="background:var(--bg-app);box-shadow:0 0 0 1px var(--seam)">Ground</div>
<div style="background:var(--panel);box-shadow:0 0 0 1px var(--seam)">Panel · docked, flat</div>
<div style="background:var(--surface-raised);border:1px solid var(--seam);box-shadow:var(--shadow-raised);border-radius:var(--r-control)">Raised · seam border · top bevel</div>
<div style="background:var(--panel);box-shadow:var(--shadow-modal);border-radius:var(--r-modal)">Floating · Shadow.Modal</div>
</div>
</section>
<section id="controls">
<p class="eyebrow">05 · Controls</p>
<h2>One implementation each</h2>
<p>Vertical drag, up increases, ~140 px for the full range; Shift for fine steps; double-click resets; left button only, so right-click reaches the modulation menu.</p>
<h3>Knob · 34 / 36 / 44</h3>
<div class="demo knobs">
<figure><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="54.4 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="28.0" y2="17.6" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg>secondary</figure>
<figure><svg class="knob" width="36" height="36" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="39.6 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="22.1" y2="18.3" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg>regular</figure>
<figure><svg class="knob" width="44" height="44" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="69.3 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="33.0" y2="20.9" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg>main</figure>
<figure><svg class="knob" width="36" height="36" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round" stroke-dasharray="49.5 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="26.0" y2="17.3" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg>live</figure>
<figure><svg class="knob" width="36" height="36" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--chroma-teal);stroke-width:5;stroke-linecap:round" stroke-dasharray="61.4 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="30.7" y2="18.7" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg>modulated</figure>
<figure><svg class="knob" width="36" height="36" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--rule);stroke-width:5;stroke-linecap:round" stroke-dasharray="39.6 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="22.1" y2="18.3" style="stroke:var(--text-disabled);stroke-width:2.4;stroke-linecap:round"/></svg>inactive</figure>
</div>
<p class="note">At rest the arc is viz ink; it turns accent only while the knob is hovered or dragged. A modulated arc takes its source's chroma.</p>
<h3>Parameter cell · 53 tall</h3>
<div class="demo row" style="gap:6px">
<div class="cell cell--mod"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="59.4 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="29.9" y2="18.3" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Decay</span><span class="cell__value mono">4.6 s</span></div>
<div class="cell"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="34.6 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="20.4" y2="19.4" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Size</span><span class="cell__value mono">31 m</span></div>
<div class="cell"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round" stroke-dasharray="41.6 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="22.8" y2="17.9" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Mix</span><span class="cell__value mono">42 %</span></div>
<div class="cell"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--chroma-teal);stroke-width:5;stroke-linecap:round" stroke-dasharray="29.7 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="19.0" y2="20.9" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">LFO rate</span><span class="cell__value mono">18 %</span></div>
<div class="cell cell--dim"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--rule);stroke-width:5;stroke-linecap:round" stroke-dasharray="0.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="19.9" y2="32.1" style="stroke:var(--text-disabled);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Width</span><span class="cell__value mono">off</span></div>
</div>
<p class="note">A parameter changed from its default lifts its name to primary ink — no accent, no dot. Names are sentence case at 8 px.</p>
<h3>Switch · segments · chips · track toggles</h3>
<div class="demo">
<div class="row"><span class="switch on"><i></i>True stereo</span><span class="switch"><i></i>Reverse IR</span>
<div class="seg seg--device"><button aria-pressed="false">Eco</button><button aria-pressed="true">Mid</button><button aria-pressed="false">High</button></div>
<div class="seg"><button aria-pressed="true">Arrangement</button><button aria-pressed="false">Session</button><button aria-pressed="false">Modular</button></div></div>
<div class="row"><span class="chip on">Favorites</span><span class="chip"><i style="background:var(--danger)"></i>bass</span><span class="chip"><i style="background:var(--track4)"></i>analog</span><span class="chip"><i style="background:var(--track2)"></i>clean</span><span class="chip mono">+2</span>
<span class="toggles"><b>M</b><b>S</b><b><i class="disc"></i></b></span><span class="toggles"><b class="m" style="color:var(--ink-on-mute)">M</b><b class="s" style="color:var(--ink-on-solo)">S</b><b class="r"><i class="disc" style="background:var(--record-ink)"></i></b></span></div>
</div>
<p class="note">Toggled on is a solid fill with derived ink: the accent for a chip or segment, amber for mute, blue for solo, red for arm.</p>
<h3>Slider row</h3>
<div class="demo">
<div class="slider"><span>Pre-delay</span><span class="track"><b style="width:30%"></b><u style="left:30%"></u></span><span>24 ms</span></div>
<div class="slider live"><span>Diffusion</span><span class="track"><b style="width:72%"></b><u style="left:72%"></u></span><span>72 %</span></div>
<div class="slider dim"><span>Damping</span><span class="track"><b style="width:55%"></b><u style="left:55%"></u></span><span>4.1 k</span></div>
</div>
<h3>Transport · shapes, not an icon font</h3>
<div class="transport">
<span class="name">Untitled</span>
<div class="seg"><button aria-pressed="true">Arrangement</button><button aria-pressed="false">Session</button><button aria-pressed="false">Modular</button></div>
<span class="console">
<span class="keys"><span class="tp"><i class="stop"></i></span><span class="tp play on"><i class="play-tri"></i></span><span class="tp"><i class="rec"></i></span></span>
<span class="vr"></span>
<span class="pos"><b>12.3.04</b><span class="unit">Bars</span></span>
<span class="vr"></span>
<span class="loop"><span class="unit">Loop</span>9.1 – 17.1</span>
</span>
<span class="well"><b>120.00</b><span class="unit">BPM</span></span><span class="well"><b>4/4</b></span><span class="well"><b>1/4</b><span class="unit">Grid</span></span>
<span class="keys" style="gap:4px"><span class="tp on"><i class="met"></i></span><span class="tp"><i class="met"></i></span></span>
</div>
<p class="note" style="margin-top:8px">A flat 44 px row on the panel tone with a seam under it. Stop, play, record, position and loop share one 30 px well; keys are 26, Play 36 wide and solid accent only while the transport runs. Record at rest is a raised key with a red disc; engaged it is solid red with a pale disc. Readouts are 26 px wells: a mono value and its muted unit on one line.</p>
</section>
<section id="states">
<p class="eyebrow">06 · States</p>
<h2>Colour changes, nothing moves</h2>
<div class="demo states">
<figure><span class="btn">Rest</span>Raised · seam · bevel</figure>
<figure><span class="btn hover">Hover</span>Raised hover, 120 ms</figure>
<figure><span class="btn pressed">Pressed</span>Well, bevel hidden</figure>
<figure><span class="btn on">Toggled on</span>Solid accent, derived ink</figure>
<figure><span class="btn primary">Export</span>Primary: weight and tone, not colour</figure>
<figure><span class="btn off">Disabled</span>Panel · faint ink, no opacity</figure>
<figure><span class="listrow sel">Stone Vault</span>Selected row: 2 px accent tick</figure>
<figure><span class="tabs"><span class="sel">Devices</span><span>Clip</span></span>Selected tab: 2 px underline</figure>
<figure><span class="menu"><span class="head">Vocals<small>Audio · 3</small></span><hr><span class="sw"><i style="background:var(--track1)"></i><i style="background:var(--track2)"></i><i class="on" style="background:var(--track3)"></i><i style="background:var(--track4)"></i><i style="background:var(--track5)"></i><i style="background:var(--track6)"></i><i style="background:var(--track7)"></i><i style="background:var(--track8)"></i><i style="background:var(--track9)"></i></span><hr><span>Record input<small>Ext ›</small></span><hr><span>Copy<small class="k">⌘C</small></span><span class="hot">Duplicate<small class="k">⌘D</small></span><hr><span class="danger">Delete<small class="k">⌫</small></span></span>Menu: object header, inline colour row, value column, shortcuts ⌘C not ⌘+C, accent hover, danger last</figure>
</div>
<div class="row" style="margin-top:12px"><span class="field">Search</span><span class="field focus">Stone Vault</span></div>
<p class="note">Fields and readouts are wells with a 1px rule edge; focus turns the edge accent, no ring. Empty state: one Ink 5 line, centred, no illustration, no call-to-action button.</p>
</section>
<section id="graphs">
<p class="eyebrow">07 · Visualisations</p>
<h2>One graph window</h2>
<p>Well ground, rule frame, radius 3, viz-grid lines, mono axis labels in the corners only. Primary curve 1.8 px in viz ink, others 1.2–1.6 px in their chroma; only the active node is the accent. No fills under curves.</p>
<div class="row" style="align-items:stretch">
<div class="graph" style="width:420px;height:150px">
<span class="title">Response</span>
<svg width="420" height="150" viewBox="0 0 420 150" aria-hidden="true">
<g style="stroke:var(--viz-grid);stroke-width:1"><line x1="70" y1="0" x2="70" y2="150"/><line x1="140" y1="0" x2="140" y2="150"/><line x1="210" y1="0" x2="210" y2="150"/><line x1="280" y1="0" x2="280" y2="150"/><line x1="350" y1="0" x2="350" y2="150"/><line x1="0" y1="75" x2="420" y2="75"/></g>
<path d="M0 75 C60 75 80 50 120 48 S170 75 210 75 S260 110 300 108 S360 75 420 75" style="fill:none;stroke:var(--chroma-teal);stroke-width:1.4"/>
<path d="M0 75 C50 75 90 40 130 38 S190 75 230 80 S300 100 330 96 S390 75 420 75" style="fill:none;stroke:var(--viz-ink);stroke-width:1.8;stroke-linecap:round"/>
<circle cx="130" cy="38" r="4.5" style="fill:var(--accent);stroke:var(--bg-sunken);stroke-width:2"/>
<circle cx="330" cy="96" r="4.5" style="fill:var(--text-secondary);stroke:var(--bg-sunken);stroke-width:2"/>
</svg>
<span class="axis" style="left:4px;bottom:4px">20</span><span class="axis" style="right:4px;bottom:4px">20k Hz</span>
</div>
<div class="graph" style="padding:12px 16px;display:flex;gap:18px;align-items:flex-end">
<div class="meters">
<div class="meter"><i style="height:62%;background:var(--success)"></i></div>
<div class="meter"><i style="height:62%;background:var(--success)"></i><i style="bottom:62%;height:16%;background:var(--warning)"></i></div>
</div>
<div class="mono" style="font-size:9px;color:var(--text-secondary);line-height:1.8">L −6.4 dB<br>R <span style="color:var(--danger-bright)">+0.8 dB</span></div>
</div>
</div>
<p class="note">Meters: 11 wide, 5 apart, zones green → −6 dB amber → 0 red. Peak hold stays until clicked.</p>
<h3>Clips · full-colour body, darker title band</h3>
<div class="lane">
<div class="clip" style="--c-body:var(--t0-body);--c-band:var(--t0-band);--c-ink:var(--t0-ink);--c-cont:var(--t0-cont);width:150px"><b>Kick loop</b><i style="left:8px;top:18px"></i><i style="left:19px;top:36px"></i><i style="left:30px;top:30px"></i><i style="left:41px;top:24px"></i><i style="left:52px;top:18px"></i><i style="left:63px;top:36px"></i><i style="left:74px;top:30px"></i><i style="left:85px;top:24px"></i><i style="left:96px;top:18px"></i><i style="left:107px;top:36px"></i><i style="left:118px;top:30px"></i><i style="left:129px;top:24px"></i></div><div class="clip sel" style="--c-body:var(--t3-body);--c-band:var(--t3-band);--c-ink:var(--t3-ink);--c-cont:var(--t3-cont);width:190px"><b>Chords</b><i style="left:8px;top:18px"></i><i style="left:19px;top:36px"></i><i style="left:30px;top:30px"></i><i style="left:41px;top:24px"></i><i style="left:52px;top:18px"></i><i style="left:63px;top:36px"></i><i style="left:74px;top:30px"></i><i style="left:85px;top:24px"></i><i style="left:96px;top:18px"></i><i style="left:107px;top:36px"></i><i style="left:118px;top:30px"></i><i style="left:129px;top:24px"></i><i style="left:140px;top:18px"></i><i style="left:151px;top:36px"></i><i style="left:162px;top:30px"></i><i style="left:173px;top:24px"></i></div><div class="clip" style="--c-body:var(--t4-body);--c-band:var(--t4-band);--c-ink:var(--t4-ink);--c-cont:var(--t4-cont);width:160px"><b>Pad texture</b><i style="left:8px;top:18px"></i><i style="left:19px;top:36px"></i><i style="left:30px;top:30px"></i><i style="left:41px;top:24px"></i><i style="left:52px;top:18px"></i><i style="left:63px;top:36px"></i><i style="left:74px;top:30px"></i><i style="left:85px;top:24px"></i><i style="left:96px;top:18px"></i><i style="left:107px;top:36px"></i><i style="left:118px;top:30px"></i><i style="left:129px;top:24px"></i><i style="left:140px;top:18px"></i></div><div class="clip" style="--c-body:var(--t6-body);--c-band:var(--t6-band);--c-ink:var(--t6-ink);--c-cont:var(--t6-cont);width:120px"><b>Lead</b><i style="left:8px;top:18px"></i><i style="left:19px;top:36px"></i><i style="left:30px;top:30px"></i><i style="left:41px;top:24px"></i><i style="left:52px;top:18px"></i><i style="left:63px;top:36px"></i><i style="left:74px;top:30px"></i><i style="left:85px;top:24px"></i><i style="left:96px;top:18px"></i></div>
<span class="playhead" style="left:250px"></span>
</div>
<p class="note" style="margin-top:8px">A flat 2 px rectangle in the track colour, a 12 px title band 30 % toward black with the name in derived ink, content in a deeper shade; selected, the band is the accent. The playhead is 1 px accent, no glow.</p>
</section>
<section id="cards">
<p class="eyebrow">08 · Device cards</p>
<h2>700 × 260, at true size</h2>
<p>Panel body, radius 3, seam frame. Header 22: a raised strip with the bevel, in fixed slots — name · the preset picker, centred between two equal halves · the muted mono badge · power, a slot every card reserves (A/B, move and delete are in the right-click menu). Body inset 6; sections have no fill and no frame, divided by a 1 px rule, titled in muted 600. Three columns: choice → work → output.</p>
<div class="scroll"><div class="card">
<div class="card__head"><span class="card__name">Nota Chamber</span><span class="preset"><i>‹</i><b>Stone Vault</b><i>›</i></span><span class="card__right"><span class="card__badge">Convolution</span><span class="switch on"><i></i></span></span></div>
<div class="card__body">
<div class="sect"><h5>Choice</h5><div class="field" style="width:100%;height:22px;font-size:10px;color:var(--text-primary)">Concert Hall</div>
<div class="seg seg--device" style="align-self:flex-start"><button aria-pressed="true">IR</button><button aria-pressed="false">Algo</button></div></div>
<div class="sect"><h5>Work</h5>
<div class="graph" style="height:96px"><span class="axis" style="left:4px;bottom:4px">0</span><span class="axis" style="right:4px;bottom:4px">2.6 s</span>
<svg width="100%" height="96" viewBox="0 0 360 96" preserveAspectRatio="none" aria-hidden="true"><path d="M0 20 C40 22 80 40 140 58 S260 84 360 88" style="fill:none;stroke:var(--viz-ink);stroke-width:1.8"/><path d="M0 34 C40 36 90 52 150 66 S260 86 360 90" style="fill:none;stroke:var(--chroma-teal);stroke-width:1.4"/></svg></div>
<div class="row" style="gap:4px;margin:0;justify-content:space-around"><div class="cell"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="29.7 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="19.0" y2="20.9" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Pre-delay</span><span class="cell__value mono">20.0 ms</span></div><div class="cell cell--mod"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="61.4 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="30.7" y2="18.7" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Size</span><span class="cell__value mono">100 %</span></div><div class="cell"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--viz-ink);stroke-width:5;stroke-linecap:round" stroke-dasharray="19.8 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="17.4" y2="24.6" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Attack</span><span class="cell__value mono">0.0 ms</span></div><div class="cell"><svg class="knob" width="34" height="34" viewBox="0 0 52 52" aria-hidden="true"><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--bg-sunken);stroke-width:5;stroke-linecap:round" stroke-dasharray="99.0 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="21" style="fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round" stroke-dasharray="54.4 131.9" transform="rotate(135 26 26)"/><circle cx="26" cy="26" r="14" style="fill:var(--surface-raised);stroke:var(--seam);stroke-width:1"/><line x1="26" y1="26" x2="28.0" y2="17.6" style="stroke:var(--text-primary);stroke-width:2.4;stroke-linecap:round"/></svg><span class="cell__label">Decay</span><span class="cell__value mono">2.60 s</span></div></div></div>
<div class="sect"><h5>Output</h5>
<div class="slider" style="width:100%;grid-template-columns:34px 1fr 36px"><span>Conv</span><span class="track"><b style="width:60%"></b><u style="left:60%"></u></span><span>−3.0</span></div>
<div class="slider" style="width:100%;grid-template-columns:34px 1fr 36px"><span>Dry</span><span class="track"><b style="width:80%"></b><u style="left:80%"></u></span><span>0.0</span></div>
<div class="slider" style="width:100%;grid-template-columns:34px 1fr 36px"><span>Wet</span><span class="track"><b style="width:45%"></b><u style="left:45%"></u></span><span>45 %</span></div></div>
</div>
</div></div>
<p class="note">Width exceptions by decision: Bass 1060, Physical 720, and the parameter-list stub; a hosted plug-in is S 260 or L 700.</p>
</section>
<section id="shell">
<p class="eyebrow">09 · Shell</p>
<h2>Docked panels on seams</h2>
<div class="shell">
<div class="h">Nota</div>
<div class="t">Project · view switch · console · tempo, signature, key, grid · switches · CPU · master</div>
<div class="b"><div>Browser</div><div>Canvas · arrangement, session, modular</div></div>
<div class="d">Panel toolbar · Devices · Pattern · Clip · track · Freeze</div>
<div class="db">Detail body · device cards</div>
<div class="s">Status</div>
</div>
<p class="note" style="margin-top:10px">Title 32 on ground · transport 44 on panel · browser, canvas and detail panel docked, radius 0, 1 px seams between them · the detail panel opens with a 32 px toolbar · status 22 on ground. List rows 26, one line: dot, name, mono metadata. Arrangement tracks 64, groups 26, header column 228. Menus are raised popovers with a seam ring and no blur — Avalonia draws each popup in its own window; the command palette is the in-window modal with <code>Shadow.Modal</code>.</p>
<h3>Accepted exceptions</h3>
<ul class="plain">
<li>Device cards keep 700 × 260, so device text sits at 7.5–10.5 px.</li>
<li>Nine track roles; transport 44 with Nota's layout and order; no in-window menubar row; title bar 32.</li>
<li>Menu popups carry a seam ring without a blur.</li>
<li>Play turns green in Session; data hues go through <code>Ink()</code>.</li>
</ul>
</section>
</div>
<script>
(() => {
const root = document.documentElement;
const buttons = document.querySelectorAll('.mast .seg button');
// A theme id or the Studio names dark / light; "graphite" and "paper" open the Ember themes.
const known = Array.from(buttons, b => b.dataset.v);
const norm = v => { v = ({ 'studio-dark': 'dark', 'studio-light': 'light', graphite: 'ember-graphite', paper: 'ember-paper' })[v] || v; return known.includes(v) ? v : 'dark'; };
function hexes() {
const v = root.dataset.variant || 'dark';
document.querySelectorAll('.sw').forEach(s => { s.querySelector('.sw__hex').textContent = JSON.parse(s.dataset.hex)[v]; });
}
function set(v) {
v = norm(v);
if (v === 'dark') delete root.dataset.variant; else root.dataset.variant = v;
buttons.forEach(b => b.setAttribute('aria-pressed', String(b.dataset.v === v)));
hexes();
try { localStorage.setItem('studio-variant', v); } catch (e) {}
}
buttons.forEach(b => b.addEventListener('click', () => set(b.dataset.v)));
let saved = null; try { saved = localStorage.getItem('studio-variant'); } catch (e) {}
const asked = new URLSearchParams(location.search).get('variant'); // ?variant=light, ?variant=ember-paper…
set(asked || saved || 'dark');
document.querySelectorAll('.sw').forEach(s => s.addEventListener('click', () => {
const hex = s.querySelector('.sw__hex').textContent;
const done = () => { s.classList.add('copied'); setTimeout(() => s.classList.remove('copied'), 900); };
if (navigator.clipboard) navigator.clipboard.writeText(hex).then(done, () => {});
}));
})();
</script>
</body>
</html>