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
|
/* ============================================================
Pantograph — Spacing, radius, borders, shadow, motion
------------------------------------------------------------
A slide rule is a precision instrument: spacing is rigid and
gridded (4px base unit), corners are barely rounded (the body
has sharp machined edges), and shadows are shallow and warm,
like an object resting on a drafting table — never glassy
blue drop-shadows.
============================================================ */
:root {
/* Spacing scale (4px base) */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
/* Radius — machined, minimal. Nothing pill-shaped except by intent. */
--radius-none: 0;
--radius-xs: 2px; /* inputs, code chips */
--radius-sm: 3px; /* buttons, badges */
--radius-md: 5px; /* cards, panels */
--radius-lg: 8px; /* large surfaces, dialogs */
--radius-pill: 999px; /* tags, switches — use deliberately */
/* Border widths */
--border-thin: 1px;
--border-medium: 1.5px;
--border-thick: 2px;
/* Shadows — warm, low, like ink/paper on a table. Tinted with
ink, never neutral gray, never blue. Keep them shallow. */
--shadow-xs: 0 1px 0 rgba(30, 37, 51, 0.06);
--shadow-sm: 0 1px 2px rgba(30, 37, 51, 0.10);
--shadow-md: 0 2px 6px rgba(30, 37, 51, 0.12), 0 1px 0 rgba(30, 37, 51, 0.04);
--shadow-lg: 0 8px 24px rgba(30, 37, 51, 0.16);
--shadow-inset: inset 0 1px 2px rgba(30, 37, 51, 0.10);
/* Engraved-tick separator: THE standard section break.
A ruled scale — short ticks every --tick-pitch, with every
5th tick at DOUBLE height, all centered on a common axis.
The short ticks sit 20% shorter than a plain rule would, so
the tall ones stand out without making the whole rule tall.
Drive size with --tick-h-major (= the rule's height); the
short tick is exactly half of it. */
--tick-pitch: 8px; /* spacing between ticks */
--tick-h-major: 14px; /* tall (every-5th) tick = rule height */
--tick-h-minor: calc(var(--tick-h-major) / 2); /* short tick — half the tall one */
--tick-gradient:
repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px var(--tick-pitch))
0 50% / 100% var(--tick-h-minor) repeat-x,
repeating-linear-gradient(90deg, var(--rule-tick) 0 1px, transparent 1px calc(var(--tick-pitch) * 5))
0 50% / 100% var(--tick-h-major) repeat-x;
/* Motion — mechanical, precise, no bounce. Like a sliding cursor. */
--ease-slide: cubic-bezier(0.3, 0.0, 0.2, 1); /* @kind other */
--ease-out: cubic-bezier(0.2, 0.0, 0.0, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 320ms; /* @kind other */
/* Layout */
--container-prose: 720px; /* documentation reading column */
--container-wide: 1140px; /* app / marketing max width */
--sidebar-width: 264px;
}
|
