Die Design-Tokens des Portfolios

Wer Abstände nach Gefühl wählt, hat am Ende 14 hier, 18 dort und 22 an der dritten Stelle. Jede Zahl ist für sich plausibel. Zusammen ergeben sie kein Muster.

Einheiten, Farben, clamp() und Custom Properties hast du jetzt beisammen. Was noch fehlt, ist die Entscheidung, welche Werte es überhaupt geben soll. Diese festgelegten Werte heißen Tokens. Das sind Custom Properties für die Abstände, Farben und Größen, die es auf der Seite geben darf, und sonst keine.

In den Synthesen am Ende jedes Abschnitts stehen diese Tokens schon im Startcode, und dort schreibst du var(). In den Aufgaben dazwischen stehen weiter Zahlen, denn dort übst du eine einzelne Eigenschaft und keine Skala. Im eigenen Projekt nehme ich auch an diesen Stellen die Tokens.

01 / 05Warum eine Skala

Die übliche Art, Abstände zu wählen, ist hinschauen, Zahl schätzen, nachjustieren.

<div class="gruppe frei">
  <h3>Frei gewählt</h3>
  <p>Abstände von 14, 18 und 22 Pixeln. Jeder für sich plausibel.</p>
  <p>Zusammen ergibt das ein unruhiges Bild ohne erkennbaren Rhythmus.</p>
</div>

<div class="gruppe skala">
  <h3>Von der Skala</h3>
  <p>Abstände von 8, 16 und 24 Pixeln.</p>
  <p>Dieselbe Menge Luft, aber in nachvollziehbaren Schritten.</p>
</div>

.gruppe {
  border: 1px solid #d4d4d8;
  margin-bottom: 24px;
}

.gruppe h3 {
  margin-top: 0;
}

.frei {
  padding: 22px;
}

.frei h3 {
  margin-bottom: 14px;
}

.frei p {
  margin: 0 0 18px 0;
}

.skala {
  padding: 24px;
}

.skala h3 {
  margin-bottom: 8px;
}

.skala p {
  margin: 0 0 16px 0;
}

Der Unterschied im Beispiel ist klein, und du siehst ihn trotzdem. Die untere Gruppe wirkt ruhiger, weil ihre Abstände in nachvollziehbaren Schritten zueinander stehen.

Die Skala dieses Kurses ist 4, 8, 16, 24, 32, 48. Bis 16 verdoppeln sich die Zahlen, danach wachsen sie langsamer. Der Sprung zwischen zwei Stufen ist aber immer groß genug, dass man ihn sieht. Sechs Stufen reichen für eine Seite dieser Größe. Wer eine siebte braucht, hängt sie oben an, bei 64. Eine Zwischenstufe erlaube ich mir trotzdem, nämlich 12px für Lücken innerhalb einer Komponente, etwa zwischen zwei Buttons. Innenabstände und Abstände zwischen Bauteilen bleiben auf der Skala.

Der größere Gewinn ist die Geschwindigkeit. Eine Skala nimmt einem Entscheidungen ab. Du fragst dich nicht mehr „18 oder 20“, sondern „eine Stufe größer oder nicht“, und das ist in einer Sekunde beantwortet.

02 / 05Farbrollen statt Farbnamen

Bei Farben gilt dasselbe Prinzip, aber die Fallen liegen anders.

<div class="hinweis">
  <h3>Gut zu wissen</h3>
  <p>Tokens heißen nach ihrer Aufgabe, nicht nach ihrem Aussehen.</p>
</div>

:root {
  /* Nach Aufgabe benannt: was ist das für ein Ding? */
  --farbe-text: #1e3a8a;
  --farbe-gedaempft: #1d4ed8;
  --farbe-flaeche: #eff6ff;
  --farbe-linie: #93c5fd;

  /* Nach Aussehen benannt wäre --grau-900 und --weiss.
     Beim Dunkelmodus stünde dann --weiss: #18181b
     im Stylesheet, und das liest sich wie ein Fehler. */
}

.hinweis {
  color: var(--farbe-text);
  background-color: var(--farbe-flaeche);
  border: 2px solid var(--farbe-linie);
  border-radius: 8px;
  padding: 16px;
}

.hinweis p {
  color: var(--farbe-gedaempft);
  margin-bottom: 0;
}

Ich benenne Tokens nach ihrer Aufgabe, nicht nach ihrem Aussehen. --farbe-text und nicht --grau-900, --farbe-flaeche und nicht --weiss.

Der Grund zeigt sich spätestens beim Dunkelmodus in Lektion 12.6. Dort tauschst du die Werte aus. Heißen deine Tokens nach ihrem Aussehen, steht danach --weiss: #18181b in deinem Stylesheet. Jeder, der später hineinschaut, hält das für einen Fehler.

Mit Rollennamen ändert sich beim Umschalten nur, was hinter dem Doppelpunkt steht. Der ganze Rest der Datei bleibt unangetastet, weil dort nie eine Farbe stand, sondern immer nur eine Rolle.

03 / 05Formeln bekommen auch einen Namen

clamp() ist schwer zu lesen. Drei Formeln, über eine Datei verteilt, sind drei Stellen, an denen man nachrechnen muss.

<h1>Eine Überschrift</h1>
<h2>Eine kleinere Überschrift</h2>
<p>Der Fließtext bleibt, wie er ist.</p>

/* Die Formel steht einmal oben und trägt einen Namen.
   Im Regelblock unten sieht man ihr das nicht mehr an,
   dort steht nur noch, welche Größe gemeint ist. */
:root {
  --schrift-2xl: clamp(28px, 5vw, 40px);
  --schrift-xl: clamp(22px, 3vw, 28px);
  --schrift-m: 16px;
}

h1 {
  font-size: var(--schrift-2xl);
}

h2 {
  font-size: var(--schrift-xl);
}

p {
  font-size: var(--schrift-m);
}

Als Token steht die Formel einmal oben und heißt danach --schrift-2xl. Im Regelblock siehst du nur noch, welche Größenstufe gemeint ist, und mehr gehört dort auch nicht hin.

04 / 05Das Namensschema

Vier Präfixe reichen für dieses Projekt: --farbe-*, --abstand-*, --schrift-* und --radius-*.

Innerhalb der Gruppe heißen sie nach Stufe (-xs bis -2xl) oder nach Rolle (-text, -linie). Hauptsache, eines davon gilt in der ganzen Datei. Eine Datei mit --abstand-m und --abstand-24 nebeneinander ist schlimmer als eine ganz ohne Tokens, denn beim Lesen musst du jedes Mal überlegen, welches Schema hier gerade gilt.

Übertreiben lässt sich das auch. Ein Token für jede Zahl, die zweimal vorkommt, ergibt eine Liste, die niemand mehr überblickt. Ich fange mit den vier Gruppen an und lege ein neues Token erst an, wenn ich einen Wert zum dritten Mal schreibe.

05 / 05Was du davon hast

In den Synthesen ab hier arbeitest du mit diesen Tokens weiter, und der Unterschied wird schnell spürbar.

Beim Hero in Abschnitt 7 stehen Farben und Abstände nicht noch einmal da, sie kommen von hier. Der Dunkelmodus in Abschnitt 12 ist eine Handvoll geänderter Zeilen statt einer zweiten Datei. Und wirkt die Seite in Abschnitt 16 zu eng, änderst du eine Zahl, und die ganze Seite atmet auf.

In der Aufgabe legst du die Tokens an, und eine verdrehte Projektkarte bekommt darüber ihre Werte zurück.