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
|
/* ============================================================
Pantograph — Color tokens
------------------------------------------------------------
Inspired by a 1970s Post Versalog slide rule: an eggshell
bamboo body printed in black, red, and green. There is NO
pure white and NO pure black anywhere in the system.
Base ramp = warm "paper" (eggshell) surfaces and "ink"
(deep blue-black) marks. Two engraved accents: instrument
red and instrument green. Use accents like a draftsman —
sparingly, for emphasis and meaning, never as fields.
============================================================ */
:root {
/* --- Paper (near-white surfaces, faint warm tint, lightest → deepest) --- */
--paper-0: #FCFAF5; /* raised cards, popovers, code surfaces */
--paper-1: #F8F4EB; /* default page background */
--paper-2: #EFE9DC; /* sunken / secondary fields, table stripes */
--paper-3: #DFD7C6; /* hairline rules, dividers, engraved ticks */
--paper-4: #C7BCA4; /* strong borders, disabled fills */
/* --- Ink (deep blue-black marks, darkest → lightest) --- */
--ink-0: #161B27; /* near-black blue ink: max-contrast headings */
--ink-1: #1E2533; /* primary body text, the default mark color */
--ink-2: #3B4456; /* secondary text, captions */
--ink-3: #6E6B5C; /* muted / warm-gray metadata */
--ink-4: #8C8470; /* faint hints, placeholder text */
/* --- Instrument Red (cursor line, warnings, the C/D scale) --- */
--red-deep: #8F2B22;
--red: #B23A2E; /* the canonical slide-rule red */
--red-soft: #E7C3BB; /* tinted backgrounds */
--red-wash: #EBD9D0; /* faintest red wash on paper */
/* --- Instrument Green (folded scales, success, positive) --- */
--green-deep: #245138;
--green: #2F6B4A; /* the canonical slide-rule green */
--green-soft: #BCD2BF; /* tinted backgrounds */
--green-wash: #D6DECB; /* faintest green wash on paper */
/* --- Brass (the cursor / hardware accent, used very rarely) --- */
--brass: #9A7B3F;
/* ============================================================
Semantic aliases — reference THESE in components, not the
raw ramp above.
============================================================ */
/* Surfaces */
--surface-page: var(--paper-1);
--surface-card: var(--paper-0);
--surface-sunken: var(--paper-2);
--surface-code: #F4EEE1; /* code blocks: a hair warmer than card */
--surface-inverse: var(--ink-1);
/* Text */
--text-strong: var(--ink-0);
--text-body: var(--ink-1);
--text-muted: var(--ink-2);
--text-faint: var(--ink-3);
--text-placeholder: var(--ink-4);
--text-on-ink: var(--paper-0);
--text-on-accent: var(--paper-0);
/* Lines */
--border-hairline: var(--paper-3);
--border-default: var(--paper-4);
--border-strong: var(--ink-3);
--rule-tick: var(--paper-4);
/* Accents */
--accent: var(--red); /* primary brand accent */
--accent-deep: var(--red-deep);
--link: var(--red-deep);
--link-hover: var(--red);
/* Status */
--status-danger: var(--red);
--status-danger-bg: var(--red-wash);
--status-success: var(--green);
--status-success-bg:var(--green-wash);
--status-info: var(--ink-2);
--status-info-bg: var(--paper-2);
/* Focus ring */
--focus-ring: var(--green);
}
|
