Kleuren
Kleuren
Geen enkele component noemt een kleur. Kleur leeft in het palet, als schalen van twaalf tinten gegeven voor de lichte en de donkere variant; het kleurenpalet kiest welke kant de pagina leest; een component leest een rol — een oppervlak, een rand, een tekst — wat een plek op een schaal is. De huid zegt nooit een kleur. Wissel het schema vanuit de kop en elke kleurstaal hieronder beweegt zonder dat er ook maar één opnieuw gedefinieerd wordt.
Schalen
Een palet is een neutraal, een accent — het merk — en de vier toestanden, elk een schaal van twaalf tinten, uitgestald zoals Radix Themes en Material 3 een kleur uitstallen. Een plek op een schaal betekent hetzelfde op elke schaal en op beide zijden: waarvoor de nummers hieronder zijn. Een applicatie brengt zijn palet door zijn accent te geven; elke schaal volgt.
--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 de grond van een werkgebied
- 2 de grond van de pagina, rondom en tussen regio's
- 3 de grond van een veld; de vage grond waar een staat op zit
- 4 een verhoogde bediening; een zwevende grond
- 5 een kaart, een blok — en zijn discrete rand
- 6 een rand
- 7 een rand tussen twee regio's
- 8 een sterke rand, een focusring
- 9 de kleur geheel, vul wat het markeert
- 10 dezelfde, zwevend
- 11 de kleur als inkt, leesbaar op de gronden
- 12 sterke inkt — voor de neutrale, de tekst zelf
Oppervlakken
De gronden, van de regio naar buiten — elk een plek op de neutrale schaal. De lichte kant van het dashboard ordent ze op basis van lichtheid tot wit, de donkere kant op basis van hoe ver elk ervan van de grond is geheven.
--surface-zoneDe grond waarop een gebied van een pagina staat--surface-pageDe pagina zelf, en wat tussen de zones zichtbaar is--surface-shellMenu, kop, voettekst--surface-1Invoervelden en velden--surface-2Knoppen, werkbalken--surface-3Blokken, kaarten, modals--surface-invertEen bediening die opvalt door de kleur van de tekst te nemenTekst
Drie niveaus van aandacht — neutraal 12, 11 en 9: wat wordt gelezen, wat het kwalificeert, en wat alleen te vinden is wanneer ernaar gekeken wordt.
--text-color-default — Wat gelezen wordt
--text-color-muted — Labels, meta, ondertitels
--text-color-subtle — Scheidingstekens en lege toestanden
Randen
Vier gewichten, onderscheiden door wat ze scheiden — neutraal 5 tot 8: twee dingen binnen één regio, een veld van wat erachter ligt, twee regio's van een pagina, en de rand van wat de focus heeft.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Categorieën
Dertien kleuren die niets betekenen behalve "niet de kleur ernaast": de reeks van een diagram, de segmenten van een distributie, de fasen van een workflow. Genoemd, niet genummerd — een app kiest `cat-mint` omdat het eruitziet als munt — en elk een schaal zoals de anderen, zodat een categorie gedragen wordt zoals een staat is: zijn grond op 3, zijn inkt op 11, gevuld op 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