brand/tokens.css at main · kcolbchain/brand · GitHub

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
/* kcolbchain — design tokens
 * One typeface. Three colors. A spacing scale.
 * Space is the design; restraint is the brand.
 */
:root {
  /* Surfaces — near-black, one elevation, hairline borders */
  --bg:        #0b0b0d;
  --bg-elev:   #131316;
  --line:      #1f1f24;

  /* Type — three weights of grey, nothing more */
  --fg:        #ededf0;
  --fg-muted:  #8a8a92;
  --fg-faint:  #5a5a62;

  /* The mark — used once per view, by intent */
  --mark:      #f5e03a;
  --mark-soft: rgba(245, 224, 58, 0.14);

  /* State — for status only, never branding. The mark stays the mark.
   * Desaturated on purpose so a status chip never out-shouts content. */
  --ok:        #6ec07a;
  --warn:      #d8b04d;
  --hot:       #d97171;
  --ok-soft:   rgba(110, 192, 122, 0.14);
  --warn-soft: rgba(216, 176, 77, 0.14);
  --hot-soft:  rgba(217, 113, 113, 0.14);

  /* Type system — JetBrains Mono, with system mono as fallback */
  --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-1:  11px;   /* labels, captions */
  --t-2:  13px;   /* body */
  --t-3:  15px;   /* emphasis */
  --t-4:  20px;   /* subhead */
  --t-5:  28px;   /* section heading */
  --t-6:  44px;   /* wordmark */

  /* Space — the brand. Scale roughly doubles. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 160px;

  /* Structure */
  --col:       720px;   /* prose-width column — the default */
  --col-wide:  1280px;  /* dashboard / wide-canvas — opt-in via .wide */
  --radius:    4px;
}