Farben

Farben

Keine Komponenten benennen eine Farbe. Die Farbe lebt in der Palette, als Skalen von zwölf Tönen, die für die helle und die dunkle Seite angegeben sind; das Farbschema wählt aus, welche Seite die Seite liest; eine Komponente hat eine Rolle — eine Fläche, einen Rand, einen Text — die einen Platz auf einer Skala darstellt. Die Haut sagt niemals eine Farbe. Wechselt das Schema im Header, bewegt sich jede Farbprobe darunter, ohne dass eine einzige neu definiert wird.

Skalen

Eine Palette ist neutral, ein Akzent — die Marke — und die vier Zustände, jeder eine Skala von zwölf Tönen, angeordnet wie Radix Themes und Material 3 eine Farbe anordnen. Ein Platz auf einer Skala bedeutet dasselbe auf jeder Skala und auf beiden Seiten: wofür die Zahlen unten stehen. Eine Anwendung bringt ihre Palette, indem sie ihren Akzent angibt; jede Skala folgt.
--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. 1 der Boden eines Arbeitsbereichs
  2. 2 der Boden der Seite, um und zwischen den Regionen
  3. 3 der Boden eines Feldes; der schwache Boden, auf dem ein Zustand sitzt
  4. 4 eine angehobene Steuerung; ein schwebender Boden
  5. 5 eine Karte, ein Block — und ihr diskreter Rand
  6. 6 ein Rand
  7. 7 ein Rand zwischen zwei Regionen
  8. 8 ein starker Rand, ein Fokusring
  9. 9 das gesamte Farbige, das das markiert, was es kennzeichnet
  10. 10 das gleiche, schwebend
  11. 11 die Farbe als Tinte, lesbar auf den Böden
  12. 12 starke Tinte — für das Neutrale, den Text selbst

Flächen

Die Böden, von der Region nach außen — jede ein Platz auf der neutralen Skala. Die helle Seite des Dashboards ordnet sie nach Helligkeit bis hin zu Weiß, die dunkle Seite danach, wie weit jede vom Boden angehoben ist.
--surface-zoneDer Boden, auf dem eine Region einer Seite steht
--surface-pageDie Seite selbst und das, was zwischen den Zonen angezeigt wird
--surface-shellMenü, Kopfzeile, Fußzeile
--surface-1Eingaben und Felder
--surface-2Schaltflächen, Werkzeugleisten
--surface-3Blöcke, Karten, Modals
--surface-invertEine Steuerung, die durch die Farbe des Textes hervorsticht

Text

Drei Ebenen der Aufmerksamkeit — neutral 12, 11 und 9: was gelesen wird, was es qualifiziert, und was nur dann gefunden wird, wenn danach gesucht wird.

--text-color-default — Was gelesen wird

--text-color-muted — Labels, Metadaten, Untertitel

--text-color-subtle — Trenner und leere Zustände

Ränder

Vier Gewichte, unterschieden durch das, was sie trennen — neutral 5 bis 8: zwei Dinge innerhalb einer Region, ein Feld von dem, was dahinter ist, zwei Regionen einer Seite und der Ring dessen, was den Fokus hat.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong

Kategorien

Dreizehn Farben, die nichts anderes bedeuten als "nicht die nebenan": die Reihe eines Diagramms, die Segmente einer Verteilung, die Phasen eines Workflows. Benannt, nicht nummeriert — eine App wählt `cat-mint`, weil es wie Minze aussieht — und jede eine Skala wie die anderen, so wird eine Kategorie so getragen, wie ein Zustand: ihr Boden bei 3, ihre Tinte bei 11, gefüllt bei 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
v1.0.29