Colori
Colori
Nessun componente nomina un colore. Il colore vive nella palette, come scale di dodici tonalità date per la faccia chiara e quella scura; lo schema dei colori sceglie quale faccia legge la pagina; un componente legge un ruolo — una superficie, un bordo, un testo — che è un posto su una scala. La pelle non dice mai un colore. Cambia lo schema dall'intestazione e ogni campione sottostante si sposta senza che nessuno venga ridefinito.
Scale
Una palette è un neutro, un accento — il marchio — e i quattro stati, ognuno una scala di dodici tonalità, disposti come Radix Themes e Material 3 dispongono un colore. Un posto su una scala significa lo stesso su ogni scala e su entrambe le facce: a cosa servono i numeri qui sotto. Un'app porta la sua palette dando il suo accento; ogni scala segue.
--neutral-*
1
2
3
4
5
6
7
8
9
10
11
12
--accent-*
1
2
3
4
5
6
7
8
9
10
11
12
--info-*
1
2
3
4
5
6
7
8
9
10
11
12
--success-*
1
2
3
4
5
6
7
8
9
10
11
12
--warning-*
1
2
3
4
5
6
7
8
9
10
11
12
--error-*
1
2
3
4
5
6
7
8
9
10
11
12
- 1 il terreno di una regione di lavoro
- 2 il terreno della pagina, intorno e tra le regioni
- 3 il terreno di un campo; il terreno tenue su cui si trova uno stato
- 4 un controllo sollevato; un terreno sovrapposto
- 5 una scheda, un blocco — e il suo bordo discreto
- 6 un bordo
- 7 un bordo tra due regioni
- 8 un bordo forte, un anello di messa a fuoco
- 9 il colore intero, riempiendo ciò che segna
- 10 lo stesso, sovrapposto
- 11 il colore come inchiostro, leggibile sui terreni
- 12 inchiostro forte — per il neutro, il testo stesso
Superfici
I terreni, dalla regione verso l'esterno — ognuno un posto sulla scala neutra. La faccia chiara della dashboard li ordina per luminosità fino al bianco, la faccia scura in base a quanto ognuno è sollevato da terra.
--surface-zoneIl terreno su cui si trova una regione di una pagina--surface-pageLa pagina stessa e ciò che si mostra tra le zone--surface-shellMenu, intestazione, piè di pagina--surface-1Input e campi--surface-2Pulsanti, barre degli strumenti--surface-3Blocchi, schede, modali--surface-invertUn controllo che si distingue prendendo il colore del testoTesto
Tre livelli di attenzione — neutro 12, 11 e 9: ciò che viene letto, ciò che lo qualifica e ciò che è presente solo se cercato.
--text-color-default — Ciò che viene letto
--text-color-muted — Etichette, meta, sottotitoli
--text-color-subtle — Separatori e stati vuoti
Bordi
Quattro pesi, distinti da ciò che separano — neutro 5 a 8: due cose dentro una regione, un campo da ciò che è dietro di esso, due regioni di una pagina e l'anello di ciò che ha il focus.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Categorie
Tredici colori che non significano nulla se non "non quello accanto": la serie di un grafico, i segmenti di una distribuzione, le fasi di un flusso di lavoro. Nominati, non numerati — un'app sceglie `cat-mint` perché assomiglia alla menta — e ognuno una scala come gli altri, quindi una categoria è indossata come uno stato: il suo terreno a 3, il suo inchiostro a 11, riempito a 9.
--cat-ruby-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grapefruit-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-bittersweet-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-sunflower-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-straw-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grass-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-mint-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-teal-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-aqua-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-blue-jeans-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-plum-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-lavender-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-pink-rose-*
1
2
3
4
5
6
7
8
9
10
11
12