forked from kshivang/BossTerm
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdesign-system.html
More file actions
946 lines (876 loc) · 65.2 KB
/
Copy pathdesign-system.html
File metadata and controls
946 lines (876 loc) · 65.2 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
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
<title>BOSS - Operator's Console Design System</title>
<meta name="description" content="The BOSS visual identity: tokens, type, and every UI element across BossConsole and BossTerm, built on one signal color and the character cell.">
<style>
:root {
/* ---- Core surface ---- */
--ink: #0E1217; /* base floor - host AND terminal share it */
--panel: #161D26; /* chrome / raised surface */
--raised: #1E2731; /* menus, popovers, elevated */
--line: #2A3744; /* hairline border / divider */
--line-2: #3A4B5C; /* stronger border */
/* ---- Ink on surface ---- */
--chalk: #E9EEF3; /* primary text */
--mist: #8593A3; /* secondary text */
--muted: #5C6977; /* tertiary / disabled */
/* ---- Signals ---- */
--signal: #F2A93B; /* AMBER - live / active / primary action */
--signal-dim: #C98A2E; /* pressed / variant */
--signal-wash:#2A2113; /* amber at home on ink */
--data: #56C7E0; /* cyan - links / info / data */
--ok: #6FD08C;
--warn: #F0B429;
--alert: #F2685F;
--mono: 'Berkeley Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--cell-w: 8.4px; /* terminal char cell, MesloLGS @14sp */
--cell-h: 17px;
--r-grid: 0px; --r-sm: 3px; --r-md: 5px; --r-lg: 8px;
--pad: clamp(16px, 4vw, 56px);
--ease: cubic-bezier(0.2, 0, 0, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ink);
color: var(--chalk);
font-family: var(--sans);
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* faint instrument grid - the character cell, made structural */
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: calc(var(--cell-w) * 8) calc(var(--cell-h) * 2),
calc(var(--cell-w) * 8) calc(var(--cell-h) * 2);
background-position: 0 0;
background-blend-mode: normal;
}
body::before {
/* dim the grid so it reads as texture, not a table */
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background: var(--ink); opacity: 0.93;
}
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
a { color: var(--data); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- type ---------- */
.eyebrow {
font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
}
.eyebrow::before {
content: ""; width: 9px; height: 15px; background: var(--signal);
display: inline-block; box-shadow: 0 0 12px -1px var(--signal);
}
h1, h2, h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 10px; }
h3 { font-size: 17px; margin: 0 0 4px; letter-spacing: 0; }
.lede { color: var(--mist); font-size: 16px; max-width: 60ch; }
.mono { font-family: var(--mono); }
code { font-family: var(--mono); font-size: 0.88em; color: var(--data); background: #0a0d11; padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--line); }
/* ---------- section scaffold ---------- */
section { padding: clamp(54px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: none; }
.sec-head { margin-bottom: 40px; }
/* =========================================================
HERO
========================================================= */
.hero { padding: clamp(70px, 12vh, 150px) 0 clamp(50px, 8vw, 90px); border-top: none; }
.hero h1 {
font-size: clamp(44px, 9vw, 104px); line-height: 0.92; margin: 0;
letter-spacing: -0.03em;
}
.hero h1 .amber { color: var(--signal); }
.hero .sub { margin-top: 26px; max-width: 56ch; font-size: clamp(17px, 2vw, 21px); color: var(--mist); line-height: 1.45; }
.hero .sub b { color: var(--chalk); font-weight: 600; }
/* the live cursor - signature */
.cursor {
display: inline-block; width: 0.62em; height: 1.05em; background: var(--signal);
transform: translateY(0.12em); margin-left: 0.06em;
box-shadow: 0 0 18px -2px var(--signal);
animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
/* hero terminal demo */
.term-demo {
margin-top: 46px; background: var(--ink); border: 1px solid var(--line-2);
border-radius: var(--r-lg); overflow: hidden; max-width: 680px;
box-shadow: 0 28px 80px -30px #000, 0 0 0 1px #00000060;
}
.term-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.term-bar .lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.term-bar .lamp.live { background: var(--signal); box-shadow: 0 0 8px -1px var(--signal); }
.term-bar .ttl { font-family: var(--mono); font-size: 12px; color: var(--mist); margin-left: 6px; }
.term-body { font-family: var(--mono); font-size: 14px; line-height: 1.55; padding: 18px 18px 26px; color: #D7DEE6; }
.prompt .u { color: var(--ok); } .prompt .p { color: var(--data); } .prompt .g { color: var(--signal); }
.term-body .out { color: var(--mist); }
#typed { color: var(--chalk); }
/* =========================================================
reusable layout
========================================================= */
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.specimen { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; }
.specimen .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
/* ---- color swatches ---- */
.sw { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.sw .chip { height: 78px; }
.sw .meta { padding: 10px 12px; }
.sw .nm { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.sw .hx { font-family: var(--mono); font-size: 11.5px; color: var(--mist); }
.sw .role { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
/* ANSI grid */
.ansi { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ansi .a { aspect-ratio: 1.6; border-radius: var(--r-sm); display: flex; align-items: flex-end; padding: 5px 6px; font-family: var(--mono); font-size: 9.5px; color: #00000099; font-weight: 700; }
/* ---- type scale ---- */
.type-row { display: flex; align-items: baseline; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.type-row:last-child { border-bottom: none; }
.type-row .tk { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 120px; letter-spacing: 0.04em; }
.type-row .spec { color: var(--mist); font-family: var(--mono); font-size: 11px; }
/* ---- spacing scale ---- */
.space-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.space-row .bar { height: 14px; background: var(--signal); border-radius: 2px; }
.space-row .v { font-family: var(--mono); font-size: 12px; color: var(--mist); }
/* =========================================================
component specimens (Compose approximations)
========================================================= */
/* buttons */
.btn { font-family: var(--sans); font-size: 13px; font-weight: 600; border-radius: var(--r-md);
padding: 9px 16px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
transition: background .09s var(--ease), border-color .09s var(--ease), transform .09s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--signal); color: #1a1206; }
.btn-primary:hover { background: #ffb84d; }
.btn-secondary { background: transparent; color: var(--chalk); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--mist); background: #ffffff08; }
.btn-ghost { background: transparent; color: var(--mist); }
.btn-ghost:hover { color: var(--chalk); background: #ffffff08; }
.btn-danger { background: transparent; color: var(--alert); border-color: #4a2522; }
.btn-danger:hover { background: var(--alert); color: #1a0a09; border-color: var(--alert); }
.gi { width: 14px; height: 14px; display: inline-block; }
/* field */
.field { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-sm);
padding: 9px 12px; font-family: var(--sans); font-size: 13px; color: var(--chalk); width: 100%; }
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px #f2a93b30; }
.flabel { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); display: block; margin-bottom: 7px; }
/* toggle */
.switch { width: 38px; height: 21px; border-radius: 11px; background: var(--line-2); position: relative; cursor: pointer; transition: background .14s var(--ease); flex: none; }
.switch.on { background: var(--signal); }
.switch .knob { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--chalk); transition: left .14s var(--ease); }
.switch.on .knob { left: 19.5px; background: #1a1206; }
/* slider */
.slider { height: 4px; background: var(--line-2); border-radius: 2px; position: relative; margin: 14px 0; }
.slider .fill { position: absolute; left: 0; top: 0; height: 100%; width: 62%; background: var(--signal); border-radius: 2px; }
.slider .thumb { position: absolute; top: 50%; left: 62%; width: 13px; height: 13px; border-radius: 50%; background: var(--signal); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px #f2a93b25; }
/* tabs */
.tabbar { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.tab { font-family: var(--sans); font-size: 13px; color: var(--mist); padding: 10px 16px; display: flex; align-items: center; gap: 9px;
border-right: 1px solid var(--line); position: relative; cursor: pointer; white-space: nowrap; }
.tab .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--mist); }
.tab.active { color: var(--chalk); background: var(--ink); }
.tab.active::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--signal); box-shadow: 0 0 10px -1px var(--signal); }
.tab.active .dot { background: var(--signal); }
.tab .x { color: var(--muted); font-size: 14px; line-height: 1; }
.tab .x:hover { color: var(--alert); }
/* context menu */
.menu { background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 5px; width: 230px; box-shadow: 0 18px 50px -20px #000; }
.mi { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); font-size: 13px; color: var(--chalk); cursor: pointer; }
.mi:hover { background: var(--signal-wash); }
.mi .k { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.mi.sel { background: var(--signal-wash); }
.mi.sel::before { content: ""; position: absolute; }
.msep { height: 1px; background: var(--line); margin: 5px 6px; }
.mi.danger { color: var(--alert); }
/* dialog */
.dialog { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; max-width: 400px; box-shadow: 0 30px 80px -30px #000; }
.dialog .dt { font-family: var(--mono); font-size: 16px; font-weight: 600; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.dialog .dtxt { color: var(--mist); font-size: 13px; margin-bottom: 20px; }
.dialog .drow { display: flex; justify-content: flex-end; gap: 10px; }
.warn-glyph { width: 18px; height: 18px; color: var(--warn); }
/* cards (dashboard) */
.pcard { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-lg); cursor: pointer; transition: border-color .12s var(--ease), background .12s var(--ease); }
.pcard:hover { border-color: var(--line-2); background: var(--raised); }
.badge { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--signal); color: #1a1206; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 15px; }
.pcard .nm { font-size: 13.5px; font-weight: 600; }
.pcard .pth { font-family: var(--mono); font-size: 11px; color: var(--muted); word-break: break-all; }
/* scrollbar demo */
.scroll-demo { position: relative; height: 132px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; padding: 12px 22px 12px 14px; font-family: var(--mono); font-size: 12px; color: var(--mist); }
.scroll-demo .track { position: absolute; right: 5px; top: 8px; bottom: 8px; width: 8px; }
.scroll-demo .thumb { position: absolute; right: 5px; top: 14px; width: 8px; height: 46px; background: #ffffff30; border-radius: 4px; }
.scroll-demo .mk { position: absolute; right: 4px; width: 10px; height: 2px; }
/* terminal big demo */
.terminal { background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.terminal .tb { display: flex; align-items: center; padding: 9px 13px; background: var(--panel); border-bottom: 1px solid var(--line); gap: 8px; }
.terminal .body { font-family: var(--mono); font-size: 13.5px; line-height: 1.55; padding: 16px; white-space: pre-wrap; position: relative; }
.sel { background: #21405A; border-radius: 2px; }
.match { background: #5a4a1c; color: #ffe9a8; border-radius: 2px; }
.blk { display: inline-block; width: 0.6em; height: 1.05em; background: var(--signal); transform: translateY(0.16em); animation: blink 1.06s steps(1) infinite; }
/* cursor styles row */
.cur-cell { background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; font-family: var(--mono); font-size: 22px; color: #D7DEE6; text-align: center; position: relative; }
.cur-cell .lab { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.cur-block { background: var(--signal); color: var(--ink); padding: 0 2px; }
.cur-ul { border-bottom: 3px solid var(--signal); }
.cur-bar { border-left: 3px solid var(--signal); padding-left: 1px; }
/* token table */
.tok-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.tok { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13px; }
table.tok th, table.tok td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); }
table.tok th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mist); background: var(--panel); }
table.tok td.k { font-family: var(--mono); color: var(--signal); }
table.tok td.v { font-family: var(--mono); color: var(--data); }
table.tok tr:last-child td { border-bottom: none; }
/* misc */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-family: var(--mono); font-size: 11px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 20px; color: var(--mist); }
.note { color: var(--muted); font-size: 12.5px; font-family: var(--mono); margin-top: 18px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.divider-h { height: 1px; background: var(--line); margin: 4px 0; }
hr.v { width: 1px; height: 22px; background: var(--line); border: none; margin: 0 2px; }
footer { border-top: 1px solid var(--line); padding: 40px 0 70px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
/* ===== 06 · In context - toggled full screens ===== */
.incontext .seg { display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; gap:4px; margin-bottom:28px; }
.incontext .seg button { font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--mist); background:transparent; border:none; padding:9px 20px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition: color .12s var(--ease), background .12s var(--ease); }
.incontext .seg button .pip { width:8px; height:13px; background:currentColor; opacity:.5; }
.incontext .seg button[aria-selected="true"] { color:var(--ink); background:var(--signal); font-weight:700; }
.incontext .seg button[aria-selected="true"] .pip { opacity:1; }
.incontext .seg button:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
.incontext .scr { display:none; }
.incontext .scr.show { display:block; animation: scrIn .26s var(--ease); }
@keyframes scrIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.incontext .cap { margin-top:16px; color:var(--muted); font-family:var(--mono); font-size:12px; line-height:1.65; }
.incontext .cap b { color:var(--mist); font-weight:600; }
.incontext .win { background:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 90px -42px #000; }
.incontext .winbar { display:flex; align-items:center; gap:11px; height:36px; padding:0 13px; background:var(--panel); border-bottom:1px solid var(--line); }
.incontext .tl { display:flex; gap:7px; }
.incontext .tl i { width:11px; height:11px; border-radius:50%; background:var(--line-2); display:block; }
.incontext .wt { font-family:var(--mono); font-size:12px; color:var(--mist); }
.incontext .wt .cur { display:inline-block; width:7px; height:12px; background:var(--signal); transform:translateY(2px); margin-right:8px; }
.incontext .winr { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); }
/* host */
.incontext .hostbody { display:flex; height:430px; }
.incontext .rail { width:46px; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding-top:10px; gap:4px; flex:none; }
.incontext .ri { width:30px; height:30px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--mist); font-size:15px; }
.incontext .ri.on { color:var(--signal); background:var(--signal-wash); }
.incontext .grow { flex:1; }
.incontext .hostmain { flex:1; display:flex; flex-direction:column; min-width:0; }
.incontext .hostsplit { flex:1; display:flex; min-height:0; }
.incontext .explorer { width:210px; background:#10151b; border-right:1px solid var(--line); padding:12px 0; flex:none; }
.incontext .eb { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:0 14px 9px; }
.incontext .frow { display:flex; align-items:center; gap:8px; padding:4px 14px; font-size:12.5px; color:var(--mist); font-family:var(--mono); white-space:nowrap; }
.incontext .frow .fd { width:7px; height:7px; border-radius:2px; flex:none; }
.incontext .frow.i1 { padding-left:28px; } .incontext .frow.i2 { padding-left:44px; }
.incontext .frow.active { color:var(--chalk); background:var(--signal-wash); box-shadow: inset 2px 0 0 var(--signal); }
.incontext .editor { flex:1; display:flex; flex-direction:column; min-width:0; }
.incontext .code { flex:1; padding:14px 16px; font-family:var(--mono); font-size:12.5px; line-height:1.7; overflow:hidden; }
.incontext .code .ln { color:var(--muted); display:inline-block; width:24px; user-select:none; }
.incontext .kw{color:#5C9FE0;} .incontext .st{color:#6FD08C;} .incontext .cm{color:var(--muted);} .incontext .nx{color:#C792EA;} .incontext .fn{color:#56C7E0;}
.incontext .am{color:var(--signal);} .incontext .ok{color:var(--ok);} .incontext .er{color:var(--alert);} .incontext .cy{color:var(--data);} .incontext .gn{color:var(--ok);} .incontext .mut{color:var(--mist);}
.incontext .hostterm { height:120px; border-top:1px solid var(--line); background:var(--ink); padding:10px 14px; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--mist); }
.incontext .hb { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.incontext .statusbar { display:flex; align-items:center; gap:16px; height:26px; padding:0 13px; background:var(--panel); border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--mist); }
.incontext .statusbar .sg { color:var(--signal); }
.incontext .statusbar .sr { margin-left:auto; }
/* terminal */
.incontext .btprog { height:4px; background:var(--signal); width:46%; box-shadow:0 0 10px -1px var(--signal); }
.incontext .bttabs { display:flex; gap:3px; padding:6px 8px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.incontext .bchip { font-family:var(--mono); font-size:12px; color:var(--mist); padding:6px 12px; border-radius:var(--r-sm); display:flex; align-items:center; gap:8px; border:1px solid transparent; }
.incontext .bchip .bd { width:7px;height:7px;border-radius:50%; background:var(--mist); }
.incontext .bchip.on { color:var(--chalk); background:var(--ink); border-color:var(--line); }
.incontext .bchip.on .bd { background:var(--signal); }
.incontext .bchip.rem { color:#4FC3F7; } .incontext .bchip.rem .bd{ background:#4FC3F7; }
.incontext .btbody { display:flex; height:384px; }
.incontext .btpane { flex:1; padding:14px 16px; font-family:var(--mono); font-size:13px; line-height:1.6; color:#D7DEE6; position:relative; overflow:hidden; }
.incontext .btpane.main { border-right:1px solid var(--line); flex:1.7; }
.incontext .btsearch { position:absolute; top:12px; right:14px; background:var(--raised); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:7px 11px; display:flex; align-items:center; gap:12px; font-size:12px; box-shadow:0 14px 34px -18px #000; }
.incontext .btsearch .q { color:var(--chalk); } .incontext .btsearch .nn { color:var(--muted); }
.incontext .cbk { padding-left:11px; margin:3px 0; }
.incontext .gut-ok{ box-shadow: inset 3px 0 0 var(--ok);} .incontext .gut-err{ box-shadow: inset 3px 0 0 var(--alert);} .incontext .gut-run{ box-shadow: inset 3px 0 0 var(--muted);}
@media (max-width: 760px){
.incontext .hostbody, .incontext .btbody { height:auto; min-height:300px; }
.incontext .explorer, .incontext .btpane.aux { display:none; }
}
@media (prefers-reduced-motion: reduce) {
.cursor, .blk { animation: none; }
.incontext .scr.show { animation: none; }
html { scroll-behavior: auto; }
}
</style>
<div class="wrap">
<!-- ================= HERO ================= -->
<header class="hero">
<div class="eyebrow">BOSS Design System · v1</div>
<h1>Operator's<br>Console<span class="cursor" aria-hidden="true"></span></h1>
<p class="sub">A single visual language for <b>BossConsole</b> and <b>BossTerm</b>. Built on the character cell and exactly one <b>signal</b> color - the lamp that tells an operator what is live, right now. This page renders in BOSS Operator; BOSS Blueprint is the shipping default.</p>
<div class="term-demo" role="img" aria-label="Terminal demo showing the amber block cursor">
<div class="term-bar">
<span class="lamp"></span><span class="lamp"></span><span class="lamp live"></span>
<span class="ttl">boss · ~/Development/Boss</span>
</div>
<div class="term-body">
<span class="prompt"><span class="u">operator</span><span class="out">@</span><span class="p">boss</span> <span class="g">~/Boss</span> <span class="out">$</span></span> <span id="typed"></span><span class="blk" aria-hidden="true"></span>
<span class="out" id="termout"></span></div>
</div>
</header>
<!-- ================= PRINCIPLES ================= -->
<section>
<div class="sec-head">
<div class="eyebrow">00 · Direction</div>
<h2>Three rules</h2>
<p class="lede">Everything below derives from these. When a choice is unclear, return here.</p>
</div>
<div class="grid cols-3">
<div class="specimen">
<h3 style="color:var(--signal)">The cell is the unit</h3>
<p style="color:var(--mist); font-size:14px; margin:8px 0 0">The terminal character cell (~8.4×17px at 14sp Meslo) is the grid the whole UI snaps to. Chrome borrows the terminal's discipline, not the other way around.</p>
</div>
<div class="specimen">
<h3 style="color:var(--signal)">Exactly one signal</h3>
<p style="color:var(--mist); font-size:14px; margin:8px 0 0">One color means <i>live / active / now</i> - the primary action, the focused field, the selected tab, the blinking cursor. Nothing else competes for it. A second color, <code>data</code>, carries data and links. <i>Which</i> hues those are is the theme's business - amber and cyan under BOSS Operator, electric blue under BOSS Blueprint (the default) - but a theme never gets three.</p>
</div>
<div class="specimen">
<h3 style="color:var(--signal)">Quiet everywhere else</h3>
<p style="color:var(--mist); font-size:14px; margin:8px 0 0">Surfaces separate by tint, not shadow. Borders are hairlines. Density is high and calm so the content - your output - is the loudest thing on screen.</p>
</div>
</div>
</section>
<!-- ================= COLOR ================= -->
<section id="color">
<div class="sec-head">
<div class="eyebrow">01 · Color</div>
<h2>Surface & signal</h2>
<p class="lede">Host chrome and terminal share one floor (<code>ink</code>), so a panel and the shell it wraps feel continuous. <code>signal</code> and <code>data</code> are the only saturated colors that appear in chrome.</p>
<p class="lede" style="margin-top:10px"><b style="color:var(--chalk)">This page renders in BOSS Operator.</b> Every hex below is an Operator value, kept as the reference definition of what each slot is <i>for</i>. The shipping default is <b style="color:var(--chalk)">BOSS Blueprint</b> - see <a href="#themes" style="color:var(--data)">the theme table</a> for its values. Components name slots, never hexes, so both themes drive the same components.</p>
</div>
<div class="grid cols-4" style="margin-bottom:16px">
<div class="sw"><div class="chip" style="background:#0E1217"></div><div class="meta"><div class="nm">ink</div><div class="hx">#0E1217</div><div class="role">Base floor - host + terminal</div></div></div>
<div class="sw"><div class="chip" style="background:#161D26"></div><div class="meta"><div class="nm">panel</div><div class="hx">#161D26</div><div class="role">Chrome, raised surface</div></div></div>
<div class="sw"><div class="chip" style="background:#1E2731"></div><div class="meta"><div class="nm">raised</div><div class="hx">#1E2731</div><div class="role">Menus, popovers, hover</div></div></div>
<div class="sw"><div class="chip" style="background:#2A3744"></div><div class="meta"><div class="nm">line</div><div class="hx">#2A3744</div><div class="role">Hairline border / divider</div></div></div>
</div>
<div class="grid cols-4" style="margin-bottom:16px">
<div class="sw"><div class="chip" style="background:#E9EEF3"></div><div class="meta"><div class="nm" style="color:#0E1217">chalk</div><div class="hx" style="color:#5C6977">#E9EEF3</div><div class="role">Primary text</div></div></div>
<div class="sw"><div class="chip" style="background:#8593A3"></div><div class="meta"><div class="nm">mist</div><div class="hx">#8593A3</div><div class="role">Secondary text</div></div></div>
<div class="sw"><div class="chip" style="background:#5C6977"></div><div class="meta"><div class="nm">muted</div><div class="hx">#5C6977</div><div class="role">Tertiary / disabled</div></div></div>
<div class="sw"><div class="chip" style="background:#3A4B5C"></div><div class="meta"><div class="nm">line-2</div><div class="hx">#3A4B5C</div><div class="role">Strong border, input edge</div></div></div>
</div>
<div class="grid cols-4">
<div class="sw"><div class="chip" style="background:#F2A93B; box-shadow:inset 0 0 30px -6px #fff6"></div><div class="meta"><div class="nm" style="color:#1a1206">signal</div><div class="hx" style="color:#7a5a18">#F2A93B</div><div class="role">Amber - live / primary action</div></div></div>
<div class="sw"><div class="chip" style="background:#56C7E0"></div><div class="meta"><div class="nm" style="color:#06222a">data</div><div class="hx" style="color:#1d5f70">#56C7E0</div><div class="role">Cyan - links / info</div></div></div>
<div class="sw"><div class="chip" style="background:#6FD08C"></div><div class="meta"><div class="nm" style="color:#06220f">ok</div><div class="hx" style="color:#1f5e36">#6FD08C</div><div class="role">Success / running clean</div></div></div>
<div class="sw"><div class="chip" style="background:#F2685F"></div><div class="meta"><div class="nm" style="color:#2a0a08">alert</div><div class="hx" style="color:#7a221d">#F2685F</div><div class="role">Error / destructive</div></div></div>
</div>
<div style="margin-top:40px" class="specimen">
<div class="label">BossTerm · "Operator" theme - ANSI 16 + terminal colors</div>
<div class="ansi" style="margin-bottom:16px">
<div class="a" style="background:#15202B; color:#888">0</div>
<div class="a" style="background:#F2685F">1</div>
<div class="a" style="background:#6FD08C">2</div>
<div class="a" style="background:#F2A93B">3</div>
<div class="a" style="background:#5C9FE0">4</div>
<div class="a" style="background:#C792EA">5</div>
<div class="a" style="background:#56C7E0">6</div>
<div class="a" style="background:#C7D1DB">7</div>
<div class="a" style="background:#3A4B5C">8</div>
<div class="a" style="background:#FF8A80">9</div>
<div class="a" style="background:#8FE0A6">10</div>
<div class="a" style="background:#FFC560">11</div>
<div class="a" style="background:#82B7F0">12</div>
<div class="a" style="background:#DDB0F5">13</div>
<div class="a" style="background:#7FD9EE">14</div>
<div class="a" style="background:#E9EEF3">15</div>
</div>
<div class="pills">
<span class="pill">fg #D7DEE6</span>
<span class="pill">bg #0E1217</span>
<span class="pill" style="border-color:var(--signal); color:var(--signal)">cursor #F2A93B</span>
<span class="pill">selection #21405A</span>
<span class="pill">search #F0B429</span>
<span class="pill" style="border-color:var(--data); color:var(--data)">link #56C7E0</span>
</div>
</div>
</section>
<!-- ================= THEMES ================= -->
<section id="themes">
<div class="sec-head">
<div class="eyebrow">01b · Themes</div>
<h2>Two identities, one slot set</h2>
<p class="lede">Every token above is a <i>slot</i>. A theme fills the slots; components only ever name slots, so adding a theme costs one palette and no component edits. <b style="color:var(--chalk)">BOSS Blueprint</b> is the default in both BossTerm and the BossConsole host, and matches <a href="https://bossconsole.ai" style="color:var(--data)">bossconsole.ai</a> - every value is lifted from that site's stylesheet or composited from it (a site alpha over the site's own floor).</p>
</div>
<div class="tok-tbl-wrap">
<table class="tok">
<thead><tr><th>Slot</th><th>BOSS Blueprint <span style="color:var(--muted); font-weight:400">(default)</span></th><th>BOSS Operator</th><th>Source on bossconsole.ai</th></tr></thead>
<tbody>
<tr><td class="k">ink</td><td class="v">#05070B</td><td class="v">#0E1217</td><td><code>--ink</code></td></tr>
<tr><td class="k">panel</td><td class="v">#080B11</td><td class="v">#161D26</td><td><code>.console-frame</code></td></tr>
<tr><td class="k">raised</td><td class="v">#0E141E</td><td class="v">#1E2731</td><td>near <code>--ink-2</code> #0b1019</td></tr>
<tr><td class="k">line</td><td class="v">#1C2432</td><td class="v">#2A3744</td><td><code>--line-dark</code> over ink</td></tr>
<tr><td class="k">line2 / lineStrong</td><td class="v">#2E3B4F</td><td class="v">#3A4B5C</td><td><code>#ffffff4d</code> over ink</td></tr>
<tr><td class="k">chalk / textPrimary</td><td class="v">#E7EDFA</td><td class="v">#E9EEF3</td><td>site <code>#e7edfa</code></td></tr>
<tr><td class="k">mist / textSecondary</td><td class="v">#9AA7BB</td><td class="v">#8593A3</td><td><code>.eyebrow</code></td></tr>
<tr><td class="k">muted / textMuted</td><td class="v">#69768B</td><td class="v">#5C6977</td><td><code>.console-topbar</code></td></tr>
<tr><td class="k">signal</td><td class="v">#0F5BFF</td><td class="v">#F2A93B</td><td><code>--blue</code></td></tr>
<tr><td class="k">signalDim</td><td class="v">#0A45C4</td><td class="v">#C98A2E</td><td>pressed / variant</td></tr>
<tr><td class="k">signalWash</td><td class="v">#0A1A3C</td><td class="v">#2A2113</td><td><code>.console-sidebar .selected</code></td></tr>
<tr><td class="k">onSignal</td><td class="v">#FFFFFF</td><td class="v">#0E1217</td><td><code>.button-light</code></td></tr>
<tr><td class="k">data</td><td class="v">#88A9FF</td><td class="v">#56C7E0</td><td><code>.audit-line svg</code> #8af</td></tr>
<tr><td class="k">ok</td><td class="v">#2FD98A</td><td class="v">#6FD08C</td><td>-</td></tr>
<tr><td class="k">warn</td><td class="v">#F0B429</td><td class="v">#F0B429</td><td>-</td></tr>
<tr><td class="k">alert</td><td class="v">#FF5D5D</td><td class="v">#F2685F</td><td>-</td></tr>
</tbody>
</table>
</div>
<div class="specimen" style="margin-top:18px">
<h3 style="color:var(--signal)">BOSS Blueprint - terminal</h3>
<div class="ansi" style="margin-top:12px">
<div class="a" style="background:#0B1019; color:#C3CCDA">0</div>
<div class="a" style="background:#FF5D5D">1</div>
<div class="a" style="background:#2FD98A">2</div>
<div class="a" style="background:#F0B429">3</div>
<div class="a" style="background:#2F74FF">4</div>
<div class="a" style="background:#B48CFF">5</div>
<div class="a" style="background:#56C7E0">6</div>
<div class="a" style="background:#C3CCDA">7</div>
<div class="a" style="background:#2E3B4F">8</div>
<div class="a" style="background:#FF8A8A">9</div>
<div class="a" style="background:#6BE8AC">10</div>
<div class="a" style="background:#FFD98A">11</div>
<div class="a" style="background:#7EA6FF">12</div>
<div class="a" style="background:#D0B6FF">13</div>
<div class="a" style="background:#8FDDEC">14</div>
<div class="a" style="background:#E7EDFA">15</div>
</div>
<div class="pills">
<span class="pill">fg #D5DBE5</span>
<span class="pill">bg #05070B</span>
<span class="pill" style="border-color:#2F74FF; color:#2F74FF">cursor #2F74FF</span>
<span class="pill">selection #123A7A</span>
<span class="pill">search #F1DF9E</span>
<span class="pill" style="border-color:#88A9FF; color:#88A9FF">link #88A9FF</span>
</div>
<p style="color:var(--mist); font-size:13px; margin:14px 0 0">The cursor is <code>--blue-bright</code> rather than <code>--blue</code> because a block cursor has to be visible against the <b>floor</b> - 4.8:1 versus <code>--blue</code>'s 3.8:1. Not against the glyph underneath: an opaque block repaints that character on top of itself in <code>cursorText</code>, so the pair that matters there is <code>cursorText</code>-on-<code>cursor</code> - for a theme-provided cursor. An app that sets its own cursor via OSC 12 overrides the fill but not the glyph colour, so that pairing is outside the theme's control. <code>onSignal</code> is white for a separate reason - <code>--blue</code> is too dark to carry ink-colored content.</p>
</div>
<div class="specimen" style="margin-top:14px">
<h3 style="color:var(--signal)">On Blueprint's signal contrast</h3>
<p style="color:var(--mist); font-size:14px; margin:8px 0 0"><code>--blue</code> sits at <b style="color:var(--chalk)">3.8:1</b> against <code>ink</code> - above the WCAG 3:1 floor for UI components, below any text floor. That is deliberate, and it is how the site behaves: emphasis comes from a <code>signalWash</code> fill plus a 2dp indicator, never from a hairline of <code>signal</code> alone. If a control reads as too quiet, thicken the indicator or lift the wash - do not brighten <code>signal</code>.</p>
</div>
</section>
<!-- ================= TYPE ================= -->
<section id="type">
<div class="sec-head">
<div class="eyebrow">02 · Type</div>
<h2>Mono speaks first</h2>
<p class="lede">Monospace is the brand voice - display headings, eyebrows, labels, every number and path. A humanist sans carries running UI copy where reading speed matters. The app bundles <b style="color:var(--chalk)">MesloLGS Nerd Font</b> for the mono role.</p>
</div>
<div class="specimen">
<div class="type-row"><span class="tk">display / L</span><span style="font-family:var(--mono); font-weight:600; font-size:34px; letter-spacing:-0.02em">Take command</span><span class="spec">mono · 28–34 · 600 · -2%</span></div>
<div class="type-row"><span class="tk">display / S</span><span style="font-family:var(--mono); font-weight:600; font-size:22px">Session restored</span><span class="spec">mono · 22 · 600</span></div>
<div class="type-row"><span class="tk">title</span><span style="font-family:var(--sans); font-weight:600; font-size:16px">Workspace settings</span><span class="spec">sans · 16 · 600</span></div>
<div class="type-row"><span class="tk">body</span><span style="font-family:var(--sans); font-size:13px">The quick brown fox prints to stdout.</span><span class="spec">sans · 13 · 400</span></div>
<div class="type-row"><span class="tk">data / mono</span><span style="font-family:var(--mono); font-size:14px; color:#D7DEE6">~/dev/boss · 1,284 ms · exit 0</span><span class="spec">mono · 14 · 400</span></div>
<div class="type-row"><span class="tk">label</span><span style="font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--signal)">Recent projects</span><span class="spec">mono · 11 · 600 · +14% · UPPER</span></div>
<div class="type-row"><span class="tk">micro</span><span style="font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted)">Auto-saved</span><span class="spec">mono · 10 · 500 · UPPER</span></div>
</div>
</section>
<!-- ================= SPACE / RADIUS / MOTION ================= -->
<section id="space">
<div class="sec-head">
<div class="eyebrow">03 · Space, shape, motion</div>
<h2>Measured in cells</h2>
</div>
<div class="grid cols-3">
<div class="specimen">
<div class="label">Spacing - 4px half-step, 8px base</div>
<div class="space-row"><span class="bar" style="width:2px"></span><span class="v">2 · hairline gap</span></div>
<div class="space-row"><span class="bar" style="width:4px"></span><span class="v">4 · icon padding</span></div>
<div class="space-row"><span class="bar" style="width:8px"></span><span class="v">8 · base unit</span></div>
<div class="space-row"><span class="bar" style="width:12px"></span><span class="v">12 · component gap</span></div>
<div class="space-row"><span class="bar" style="width:16px"></span><span class="v">16 · section pad</span></div>
<div class="space-row"><span class="bar" style="width:24px"></span><span class="v">24 · dialog pad</span></div>
<div class="space-row"><span class="bar" style="width:32px"></span><span class="v">32 · major gap</span></div>
</div>
<div class="specimen">
<div class="label">Radius & elevation</div>
<div class="row" style="gap:14px; margin-bottom:18px">
<div style="text-align:center"><div style="width:52px;height:40px;background:var(--ink);border:1px solid var(--line-2);border-radius:0"></div><div class="note" style="margin-top:6px">0 · grid/term</div></div>
<div style="text-align:center"><div style="width:52px;height:40px;background:var(--ink);border:1px solid var(--line-2);border-radius:3px"></div><div class="note" style="margin-top:6px">3 · inputs</div></div>
<div style="text-align:center"><div style="width:52px;height:40px;background:var(--ink);border:1px solid var(--line-2);border-radius:5px"></div><div class="note" style="margin-top:6px">5 · buttons</div></div>
<div style="text-align:center"><div style="width:52px;height:40px;background:var(--ink);border:1px solid var(--line-2);border-radius:8px"></div><div class="note" style="margin-top:6px">8 · dialogs</div></div>
</div>
<div class="divider-h"></div>
<div class="stack" style="margin-top:14px; gap:8px">
<div style="background:var(--ink); padding:8px 12px; border-radius:4px; font-family:var(--mono); font-size:11px; color:var(--mist)">e0 · ink (floor)</div>
<div style="background:var(--panel); padding:8px 12px; border-radius:4px; font-family:var(--mono); font-size:11px; color:var(--mist)">e1 · panel + 1px line</div>
<div style="background:var(--raised); padding:8px 12px; border-radius:4px; font-family:var(--mono); font-size:11px; color:var(--mist); box-shadow:0 12px 30px -16px #000">e2 · raised + soft shadow</div>
</div>
</div>
<div class="specimen">
<div class="label">Motion</div>
<table class="tok" style="min-width:0">
<tr><td class="k">instant</td><td class="v">0ms</td><td style="color:var(--mist); font-size:12px">cursor, key echo</td></tr>
<tr><td class="k">fast</td><td class="v">90ms</td><td style="color:var(--mist); font-size:12px">hover, press</td></tr>
<tr><td class="k">base</td><td class="v">160ms</td><td style="color:var(--mist); font-size:12px">menus, panels</td></tr>
<tr><td class="k">blink</td><td class="v">530ms</td><td style="color:var(--mist); font-size:12px">cursor cadence</td></tr>
</table>
<p class="note">Easing <code>cubic-bezier(.2,0,0,1)</code>. Motion respects <code>prefers-reduced-motion</code> - the cursor stops blinking, panels cut instead of slide.</p>
</div>
</div>
</section>
<!-- ================= COMPONENTS - HOST ================= -->
<section id="host">
<div class="sec-head">
<div class="eyebrow">04 · BossConsole - chrome</div>
<h2>Host elements</h2>
<p class="lede">The frame around the work: title bar, tabs, controls, overlays. The active item always wears the theme's <code>signal</code> - amber on this page, electric blue under the default BOSS Blueprint.</p>
</div>
<!-- title + tab bar -->
<div class="specimen" style="padding:0; overflow:hidden; margin-bottom:24px">
<div style="display:flex; align-items:center; height:30px; background:var(--panel); border-bottom:1px solid var(--line); padding:0 12px; gap:10px">
<span class="blk" style="height:13px; width:7px; animation:none; transform:none"></span>
<span style="font-family:var(--mono); font-size:12px; color:var(--mist)">BOSS - operator@boss</span>
<span style="margin-left:auto; color:var(--muted); font-family:var(--mono); font-size:13px">− ▢ ✕</span>
</div>
<div class="tabbar" style="border:none; border-radius:0">
<div class="tab active"><span class="dot"></span>terminal - zsh<span class="x">✕</span></div>
<div class="tab"><span class="dot"></span>main.kt<span class="x">✕</span></div>
<div class="tab"><span class="dot" style="background:var(--ok)"></span>server · :8080<span class="x">✕</span></div>
<div class="tab" style="color:var(--muted)">＋</div>
</div>
<div style="background:var(--ink); padding:14px 16px; font-family:var(--mono); font-size:12px; color:var(--muted)">active tab marked by amber underline + amber cell-dot · panel content area</div>
</div>
<div class="grid cols-2">
<!-- buttons -->
<div class="specimen">
<div class="label">Buttons</div>
<div class="row" style="margin-bottom:12px">
<button class="btn btn-primary"><span class="gi">▶</span>Run</button>
<button class="btn btn-secondary">Cancel</button>
<button class="btn btn-ghost">Skip</button>
<button class="btn btn-danger">Delete</button>
</div>
<p class="note">Primary = amber, used once per view. Destructive stays outlined until hover, then commits to alert-red.</p>
</div>
<!-- fields -->
<div class="specimen">
<div class="label">Text field & focus</div>
<label class="flabel">Workspace name</label>
<input class="field" value="operator-console" />
<div style="height:12px"></div>
<label class="flabel">Search (focused)</label>
<input class="field" style="border-color:var(--signal); box-shadow:0 0 0 3px #f2a93b30" placeholder="type to filter…" value="" />
<p class="note">Focus ring is always amber - the field is "live."</p>
</div>
<!-- toggle + slider -->
<div class="specimen">
<div class="label">Toggle & slider</div>
<div class="row" style="justify-content:space-between; margin-bottom:8px"><span style="font-size:13px">Restore tabs on launch</span><span class="switch on"><span class="knob"></span></span></div>
<div class="row" style="justify-content:space-between; margin-bottom:6px"><span style="font-size:13px; color:var(--mist)">Telemetry</span><span class="switch"><span class="knob"></span></span></div>
<div class="divider-h" style="margin:14px 0"></div>
<label class="flabel">Font size - 14</label>
<div class="slider"><span class="fill"></span><span class="thumb"></span></div>
</div>
<!-- context menu -->
<div class="specimen">
<div class="label">Context menu</div>
<div class="menu">
<div class="mi"><span class="gi">⧉</span>Split right<span class="k">⌘D</span></div>
<div class="mi sel"><span class="gi">▦</span>Split down<span class="k">⌘⇧D</span></div>
<div class="mi"><span class="gi">⟳</span>Reload<span class="k">⌘R</span></div>
<div class="msep"></div>
<div class="mi"><span class="gi">⧉</span>Copy path</div>
<div class="mi danger"><span class="gi">🗑</span>Close tab<span class="k">⌘W</span></div>
</div>
</div>
</div>
<!-- dialog + cards + scrollbar -->
<div class="grid cols-2" style="margin-top:16px">
<div class="specimen">
<div class="label">Confirmation dialog</div>
<div class="dialog">
<div class="dt"><svg class="warn-glyph" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 1 21h22L12 2zm0 6 7 12H5l7-12zm-1 4h2v4h-2v-4zm0 5h2v2h-2v-2z"/></svg>Discard session?</div>
<div class="dtxt">This terminal has unsaved scrollback. Closing it can't be undone.</div>
<div class="drow"><button class="btn btn-secondary">Keep</button><button class="btn btn-danger" style="background:var(--alert); color:#1a0a09; border-color:var(--alert)">Discard</button></div>
</div>
</div>
<div class="specimen">
<div class="label">Project cards</div>
<div class="grid cols-2" style="gap:12px">
<div class="card pcard"><div class="badge">BC</div><div class="nm">BossConsole</div><div class="pth">~/Development/Boss/BossConsole</div></div>
<div class="card pcard"><div class="badge" style="background:var(--data); color:#06222a">BT</div><div class="nm">BossTerm</div><div class="pth">~/Development/Boss/BossTerm</div></div>
</div>
</div>
</div>
<div class="specimen" style="margin-top:16px">
<div class="label">Scrollbar - auto-hide, with markers</div>
<div class="scroll-demo">
$ grep -rn "signal" .<br>
<span style="color:var(--match, #ffe9a8)" class="match">src/Theme.kt:42</span>: val signal = Color(0xFFF2A93B)<br>
src/Tab.kt:18: // active marker uses signal<br>
<span class="match">docs/design.md:7</span>: the amber signal …<br>
build/out.log: done in 1.2s
<div class="thumb"></div>
<div class="mk" style="top:26px; background:var(--signal)"></div>
<div class="mk" style="top:64px; background:var(--warn)"></div>
<div class="mk" style="top:96px; background:var(--ok)"></div>
</div>
<p class="note">Thumb <code>#ffffff30</code> over a 12%-white track · search hits = amber markers · command-block status = ok/alert markers on the right gutter.</p>
</div>
</section>
<!-- ================= COMPONENTS - TERMINAL ================= -->
<section id="term">
<div class="sec-head">
<div class="eyebrow">05 · BossTerm - the surface</div>
<h2>Terminal elements</h2>
<p class="lede">Where the operator actually works. The cursor is amber; ANSI colors are tuned to sit calmly on the shared <code>ink</code> floor.</p>
</div>
<div class="terminal" style="margin-bottom:24px">
<div class="tb">
<span class="lamp" style="width:9px;height:9px;border-radius:50%;background:var(--signal); box-shadow:0 0 8px -1px var(--signal)"></span>
<span style="font-family:var(--mono); font-size:12px; color:var(--mist)">zsh - ~/Development/Boss</span>
<span style="margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted)">120×32</span>
</div>
<div class="body" style="color:#D7DEE6">
<span style="color:#6FD08C">operator</span>@<span style="color:#56C7E0">boss</span> <span style="color:#F2A93B">~/Boss</span> $ git status
<span style="color:#8593A3">On branch </span><span style="color:#56C7E0">dev</span>
Changes not staged: <span style="color:#F2685F">M BossColors.kt</span> <span style="color:#6FD08C">A BossDesignSystem.kt</span>
<span style="color:#F2A93B">⚠ 2 untracked files</span> · search hit → <span class="match">signal</span> · <span class="sel">selected range</span>
operator@boss ~/Boss $ <span class="blk" aria-hidden="true"></span>
</div>
</div>
<div class="grid cols-3">
<div class="specimen">
<div class="label">Cursor styles (× steady / blink)</div>
<div class="grid cols-3" style="gap:10px">
<div class="cur-cell"><span class="cur-block">A</span><div class="lab">Block</div></div>
<div class="cur-cell"><span class="cur-ul">A</span><div class="lab">Underline</div></div>
<div class="cur-cell"><span class="cur-bar">A</span><div class="lab">Bar</div></div>
</div>
<p class="note">Focused 0.7 alpha · unfocused 0.3 · blink 530ms.</p>
</div>
<div class="specimen">
<div class="label">Tab chips (BossTerm)</div>
<div class="stack" style="gap:8px">
<div class="row" style="gap:6px">
<span class="pill" style="border-color:var(--signal); color:var(--signal)">● zsh</span>
<span class="pill">● ssh prod</span>
<span class="pill" style="border-color:#4FC3F7; color:#4FC3F7">⇆ mirror</span>
</div>
<p class="note">7 color presets for grouping · cyan <code>#4FC3F7</code> marks mirrored / remote sessions · active chip wears the amber signal.</p>
</div>
</div>
<div class="specimen">
<div class="label">Command-block gutter & progress</div>
<div style="font-family:var(--mono); font-size:12px; line-height:1.7">
<div style="border-left:3px solid var(--ok); padding-left:10px; color:var(--mist)">npm run build <span style="color:var(--ok)">✓ exit 0</span></div>
<div style="border-left:3px solid var(--alert); padding-left:10px; color:var(--mist); margin-top:6px">npm test <span style="color:var(--alert)">✕ exit 1</span></div>
<div style="border-left:3px solid var(--muted); padding-left:10px; color:var(--mist); margin-top:6px">deploy … <span style="color:var(--mist)">running</span></div>
</div>
<div class="slider" style="margin-top:16px; height:6px"><span class="fill" style="width:44%; background:var(--signal)"></span></div>
<p class="note">OSC 9;4 progress bar - amber, 6dp, top or bottom edge.</p>
</div>
</div>
</section>
<!-- ================= IN CONTEXT (TOGGLE) ================= -->
<section id="context">
<div class="sec-head">
<div class="eyebrow">06 · In context</div>
<h2>The template, applied</h2>
<p class="lede">The same tokens composed into real product surfaces. Toggle between the two BOSS apps - each is a different screen built entirely from this design language.</p>
</div>
<div class="incontext">
<div class="seg" role="tablist" aria-label="Choose a surface">
<button type="button" role="tab" id="tab-console" aria-controls="scr-console" aria-selected="true" data-scr="console"><span class="pip"></span>BossConsole</button>
<button type="button" role="tab" id="tab-term" aria-controls="scr-term" aria-selected="false" data-scr="term"><span class="pip"></span>BossTerm</button>
</div>
<!-- ===== CONSOLE SCREEN ===== -->
<div class="scr show" id="scr-console" role="tabpanel" aria-labelledby="tab-console">
<div class="win">
<div class="winbar">
<span class="tl"><i></i><i></i><i></i></span>
<span class="wt"><span class="cur" aria-hidden="true"></span>BOSS - operator@boss · ~/Development/Boss</span>
<span class="winr">⌘K · RBAC: operator</span>
</div>
<div class="hostbody">
<div class="rail">
<span class="ri">▤</span>
<span class="ri on">⌗</span>
<span class="ri">⎇</span>
<span class="ri">▮</span>
<span class="grow"></span>
<span class="ri">⚙</span>
</div>
<div class="hostmain">
<div class="tabbar" style="border-radius:0; border:none; border-bottom:1px solid var(--line)">
<div class="tab active"><span class="dot"></span>BossDesignSystem.kt<span class="x">✕</span></div>
<div class="tab"><span class="dot" style="background:#5C9FE0"></span>BossTheme.kt<span class="x">✕</span></div>
<div class="tab"><span class="dot" style="background:var(--ok)"></span>terminal - zsh<span class="x">✕</span></div>
<div class="tab" style="color:var(--muted)">＋</div>
</div>
<div class="hostsplit">
<div class="explorer">
<div class="eb">Explorer · BOSS</div>
<div class="frow"><span class="fd" style="background:var(--mist)"></span>▾ BossConsole</div>
<div class="frow i1"><span class="fd" style="background:var(--mist)"></span>▾ plugin-ui-core</div>
<div class="frow i2 active"><span class="fd" style="background:var(--signal)"></span>BossDesignSystem.kt</div>
<div class="frow i2"><span class="fd" style="background:#5C9FE0"></span>BossColors.kt</div>
<div class="frow i1"><span class="fd" style="background:var(--mist)"></span>▸ composeApp</div>
<div class="frow"><span class="fd" style="background:var(--mist)"></span>▾ docs</div>
<div class="frow i1"><span class="fd" style="background:var(--data)"></span>DESIGN_SYSTEM.md</div>
</div>
<div class="editor">
<div class="code">
<div><span class="ln">38</span><span class="kw">object</span> <span class="fn">BossPalette</span> {</div>
<div><span class="ln">39</span> <span class="kw">val</span> ink = <span class="fn">Color</span>(<span class="nx">0xFF0E1217</span>) <span class="cm">// shared floor</span></div>
<div><span class="ln">40</span> <span class="kw">val</span> signal = <span class="fn">Color</span>(<span class="am">0xFFF2A93B</span>) <span class="cm">// the live signal</span></div>
<div><span class="ln">41</span> <span class="kw">val</span> data = <span class="fn">Color</span>(<span class="nx">0xFF56C7E0</span>)</div>
<div><span class="ln">42</span>}</div>
<div><span class="ln">43</span> </div>
<div><span class="ln">44</span><span class="cm">// amber = "now": primary action, focus, cursor</span></div>
</div>
<div class="hostterm">
<div class="hb">Terminal · split below editor</div>
<div><span class="gn">operator</span>@<span class="cy">boss</span> <span class="am">~/Boss</span> $ ./gradlew :composeApp:compileKotlinDesktop</div>
<div class="cbk gut-ok"><span class="ok">BUILD SUCCESSFUL</span> in 26s · design re-skin applied</div>
</div>
</div>
</div>
</div>
</div>
<div class="statusbar">
<span class="sg">⎇ design/operators-console</span>
<span>Kotlin</span>
<span>UTF-8</span>
<span class="sr">Ln 40 · Col 18 · ◆ amber #F2A93B</span>
</div>
</div>
<p class="cap"><b>Host UX</b> - left rail, file tree, an editor with semantic syntax colors, and a split terminal. The active tab, the selected file's marker, and the current rail tool all wear the amber signal; everything else stays graphite-quiet.</p>
</div>
<!-- ===== TERMINAL SCREEN ===== -->
<div class="scr" id="scr-term" role="tabpanel" aria-labelledby="tab-term" hidden>
<div class="win">
<div class="btprog"></div>
<div class="winbar">
<span class="tl"><i></i><i></i><i></i></span>
<span class="wt">zsh - ~/Development/Boss · 120×32</span>
<span class="winr">⌘F search · ⌘D split</span>
</div>
<div class="bttabs">
<span class="bchip on"><span class="bd"></span>zsh</span>
<span class="bchip"><span class="bd" style="background:var(--ok)"></span>server :8080</span>
<span class="bchip rem"><span class="bd"></span>⇆ ssh prod</span>
<span class="bchip" style="color:var(--muted)">＋</span>
</div>
<div class="btbody">
<div class="btpane main">
<div class="btsearch"><span>⌕ <span class="q">signal</span></span><span class="nn">2 / 5</span></div>
<div><span class="gn">operator</span>@<span class="cy">boss</span> <span class="am">~/Boss</span> $ git status</div>
<div class="mut">On branch <span class="cy">design/operators-console</span></div>
<div class="cbk gut-ok"><span class="ok">✓</span> <span class="mut">working tree clean</span></div>
<div><span class="gn">operator</span>@<span class="cy">boss</span> <span class="am">~/Boss</span> $ rg "<span class="match">signal</span>" -n</div>
<div class="mut">BossDesignSystem.kt:40: val <span class="match">signal</span> = …F2A93B</div>
<div class="mut">BossTabButton.kt:18: // marker uses <span class="match">signal</span></div>
<div class="cbk gut-err"><span class="er">✕</span> <span class="mut">npm test - 1 failing (exit 1)</span></div>
<div style="margin-top:2px"><span class="sel">selection highlight</span> <span class="mut">· the amber block cursor →</span></div>
<div><span class="gn">operator</span>@<span class="cy">boss</span> <span class="am">~/Boss</span> $ <span class="blk" aria-hidden="true"></span></div>
</div>
<div class="btpane aux">
<div class="hb">split · deploy log</div>
<div class="cbk gut-run mut">deploy … <span class="am">running</span></div>
<div class="mut">→ build image</div>
<div class="mut">→ push registry <span class="cy">94%</span></div>
<div class="mut" style="margin-top:10px">cpu <span class="ok">▆▆▃▂</span> 12%</div>
<div class="mut">mem <span class="am">▆▆▆▅</span> 61%</div>
</div>
</div>
</div>
<p class="cap"><b>Terminal UX</b> - tab chips (cyan marks a mirrored/remote session), a split pane, the floating search overlay with amber match highlights, command-block gutters (green ok / red error / running), selection, and the amber block cursor. Same <code>ink</code> floor as the host, so the window reads as one continuous surface.</p>
</div>
</div>
</section>
<!-- ================= TOKEN MAP ================= -->
<section id="tokens">
<div class="sec-head">
<div class="eyebrow">07 · Implementation</div>
<h2>Token → Kotlin</h2>
<p class="lede">These tokens ship as <code>BossDesignSystem.kt</code> (host, exposed via <code>BossTheme</code> CompositionLocals) and as builtin <code>Theme</code> + <code>ColorPalette</code> pairs in BossTerm - <b style="color:var(--chalk)">"BOSS Blueprint"</b> (the default) and <b style="color:var(--chalk)">"BOSS Operator"</b>. The values in this table are Operator's, matching the rest of this page.</p>
</div>
<div class="tok-tbl-wrap">
<table class="tok">
<thead><tr><th>Token</th><th>Value</th><th>Host (BossColors)</th><th>BossTerm</th></tr></thead>
<tbody>
<tr><td class="k">color.ink</td><td class="v">#0E1217</td><td>darkContentBackground</td><td>background</td></tr>
<tr><td class="k">color.panel</td><td class="v">#161D26</td><td>darkBackground / Surface</td><td>n/a</td></tr>
<tr><td class="k">color.raised</td><td class="v">#1E2731</td><td>contextMenuHover / raised</td><td>n/a</td></tr>
<tr><td class="k">color.line</td><td class="v">#2A3744</td><td>darkBorder</td><td>n/a</td></tr>
<tr><td class="k">color.chalk</td><td class="v">#E9EEF3</td><td>darkTextPrimary</td><td>foreground (#D7DEE6)</td></tr>
<tr><td class="k">color.mist</td><td class="v">#8593A3</td><td>darkTextSecondary</td><td>n/a</td></tr>
<tr><td class="k">color.signal</td><td class="v">#F2A93B</td><td>darkAccent</td><td>cursor</td></tr>
<tr><td class="k">color.data</td><td class="v">#56C7E0</td><td>(link)</td><td>hyperlink</td></tr>
<tr><td class="k">color.ok</td><td class="v">#6FD08C</td><td>darkSuccess / darkSecondary</td><td>ansi.green</td></tr>
<tr><td class="k">color.alert</td><td class="v">#F2685F</td><td>darkError</td><td>ansi.red</td></tr>
<tr><td class="k">radius.button</td><td class="v">5dp</td><td>RoundedCornerShape(5)</td><td>n/a</td></tr>
<tr><td class="k">font.mono</td><td class="v">MesloLGS NF</td><td>display + data</td><td>terminal</td></tr>
</tbody>
</table>
</div>
<p class="note">Full token set - spacing, elevation, motion, type scale - lives in the generated Kotlin alongside these colors.</p>
</section>
<footer>
BOSS Design System · "Operator's Console" · one floor, one signal, the cell as the unit. <span style="color:var(--signal)">█</span>
</footer>
</div>
<script>
(function () {
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var cmd = 'boss launch --workspace operator-console';
var out = '→ session live · amber means now';
var typed = document.getElementById('typed');
var termout = document.getElementById('termout');
if (!typed) return;
if (reduce) { typed.textContent = cmd; termout.textContent = out; return; }
var i = 0;
function step() {
typed.textContent = cmd.slice(0, i);
i++;
if (i <= cmd.length) { setTimeout(step, 46); }
else { setTimeout(function(){ termout.textContent = out; }, 360); }
}
setTimeout(step, 650);
})();
</script>
<script>
// In-context surface toggle (BossConsole / BossTerm)
(function () {
var tabs = Array.prototype.slice.call(document.querySelectorAll('.incontext .seg button'));
if (!tabs.length) return;
function select(name) {
tabs.forEach(function (b) {
b.setAttribute('aria-selected', b.getAttribute('data-scr') === name ? 'true' : 'false');
});
document.querySelectorAll('.incontext .scr').forEach(function (s) {
var on = s.id === 'scr-' + name;
s.classList.toggle('show', on);
if (on) s.removeAttribute('hidden'); else s.setAttribute('hidden', '');
});
}
tabs.forEach(function (b, i) {
b.addEventListener('click', function () { select(b.getAttribute('data-scr')); });
b.addEventListener('keydown', function (e) {
if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
e.preventDefault();
var n = e.key === 'ArrowRight' ? (i + 1) % tabs.length : (i - 1 + tabs.length) % tabs.length;
tabs[n].focus();
select(tabs[n].getAttribute('data-scr'));
});
});
})();
</script>