Mercurial

comparison design_system/COLORS.md @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents
children 60a876c4587a
comparison
equal deleted inserted replaced
253:fdf3816959cb 254:2b6e732087ff
1 # Zenbu UI color
2
3 The Zenbu palette is warm, quiet, and material-oriented. Paper neutrals carry
4 most surfaces; restrained natural colors provide emphasis without making the
5 interface feel synthetic or overly saturated.
6
7 ## Primitive ramps
8
9 Each family has `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`,
10 `900`, and `950` steps:
11
12 - `--zen-color-neutral-*`: warm paper, linen, charcoal, and ink;
13 - `--zen-color-red-*`: brick and iron oxide;
14 - `--zen-color-orange-*`: persimmon;
15 - `--zen-color-amber-*`: straw and ochre;
16 - `--zen-color-green-*`: matcha and moss;
17 - `--zen-color-teal-*`: aged copper and patina;
18 - `--zen-color-blue-*`: faded workwear and indigo;
19 - `--zen-color-violet-*`: muted plum;
20 - `--zen-color-rose-*`: clay and dusty rose;
21 - `--zen-color-brown-*`: kraft paper and wood.
22
23 Use a primitive when an application needs a precise ramp step. Primitive values
24 do not change between light and dark themes.
25
26 ## Material aliases
27
28 Material aliases make one-off composition readable:
29
30 ```css
31 var(--zen-color-paper)
32 var(--zen-color-washi)
33 var(--zen-color-linen)
34 var(--zen-color-sumi)
35 var(--zen-color-brick)
36 var(--zen-color-persimmon)
37 var(--zen-color-ochre)
38 var(--zen-color-moss)
39 var(--zen-color-patina)
40 var(--zen-color-indigo)
41 var(--zen-color-plum)
42 var(--zen-color-clay)
43 var(--zen-color-wood)
44 ```
45
46 ## Semantic aliases
47
48 Components should prefer semantic tokens because these adapt to the current
49 theme:
50
51 - surfaces: `canvas`, `surface`, `surface-raised`, `surface-muted`,
52 `surface-sunken`, and `surface-overlay`;
53 - text: `text`, `text-muted`, `text-subtle`, and `text-inverse`;
54 - borders: `border`, `border-muted`, and `border-strong`;
55 - action: `accent`, `accent-hover`, `accent-muted`, `focus`, `disabled`, and
56 `selection`;
57 - status: `info`, `success`, `warning`, `danger`, their `on-*` foregrounds,
58 and their `*-muted` surfaces.
59
60 All names use the `--zen-color-` prefix.
61
62 Component and catalog styles may not contain raw color literals. Add or reuse a
63 token in `tokens.css`, then reference it with `var()`. The Bazel target
64 `//design_system/test:design_system_policy_test` rejects hex, functional, or
65 named colors anywhere else in the design-system source.
66
67 ## Data colors
68
69 `--zen-color-data-1` through `--zen-color-data-10` form a categorical palette.
70 They deliberately vary in both hue and lightness. Keep adjacent series in
71 numerical order and provide labels or patterns; color alone must never carry
72 meaning.
73
74 ## Usage
75
76 ```css
77 .repository-summary {
78 border: 1px solid var(--zen-color-border-muted);
79 background: var(--zen-color-surface-muted);
80 color: var(--zen-color-text);
81 }
82
83 .repository-summary strong {
84 color: var(--zen-color-indigo);
85 }
86 ```