Entwickeln

Tokens

Alle Werte der Marke als benannte Rollen, hell und dunkel. Wie sie heißen, wie ihr sie einbindet — im Web, in Swift, in Token-Werkzeugen — und die vollständige Tabelle.

Ein Token ist ein Name für eine Entscheidung. --flaeche-karte sagt, wofür eine Farbe da ist. Der Wert dahinter darf sich ändern, der Name bleibt. Bauteile kennen nur Namen, nie Werte.

Namen

Tokens heißen deutsch, mit Absicht. Jeder Name beschreibt eine Rolle, nie eine Stufe auf einer Leiter. „Karte“, nicht „Beige 200“.

Ebene	Beispiele	Wer sie benutzt
Grundfarben	`--grund`, `--karte`, `--tinte`, `--rosa`, `--gelb`, `--blau`	nur die semantischen Rollen
Semantische Rollen	`--flaeche-seite`, `--text-koerper`, `--linie-haar`, `--rand-offen`, `--akzent`	Bauteile und Seiten
Bauteil-Rollen	`--knopf-primaer-flaeche`, `--knopf-inaktiv-text`, `--leiste-ort-zeiger`	ein Bauteil und seine Zustände
Personen	`--person-1` bis `--person-8`, `--person-linie-1` bis `--person-linie-8`, `--person-text`	Klebezettel, Avatare, Spuren
Maße	`--raum-2`, `--karte-innen`, `--ziel-finger`, `--radius-karte`, `--strich-haar`	Abstand, Zielfläche, Form
Schrift	`--schrift-titel`, `--grad-karten-titel`, `--gewicht-text-fest`, `--laufweite-titel`	Typografie
Bewegung	`--dauer-kurz`, `--verlauf-ruhig`	Übergänge

Ein Bauteil greift zu einer semantischen Rolle, wenn es eine gibt. --grund direkt zu benutzen ist erlaubt, aber --flaeche-seite sagt mehr.

Hell und dunkel

Der dunkle Modus ist eine Neudefinition der Rollen, keine zweite Gestaltung. Er hängt an einem Attribut auf dem Wurzelelement:

<html data-modus="dunkel">

Die Rollen bekommen dann andere Werte. Kein Bauteil fragt nach dem Modus. Personen-Zettel, Rosa, Gelb und Blau bleiben auch nachts helle Flächen. Text darauf nimmt --person-text, --text-auf-gelb, --text-auf-blau oder --text-auf-rosa, die dunkel bleiben.

Bei reduzierter Bewegung stehen alle Dauern auf 0 ms. Das erzeugt tokens/motion.css als eigenen Block für prefers-reduced-motion.

Die Dateien

Datei	Inhalt	Für
`/tokens/tokens.json`	jeder Token aufgelöst: Name, CSS-Variable, hell, dunkel, Alias, Bedeutung	Agenten, Skripte, Prüfungen
`/tokens/tokens.dtcg.json`	die Quelle im W3C-Format, alle Sätze in einer Datei	Token-Werkzeuge, Style Dictionary
`/tokens/tokens.css`	CSS-Variablen hell und dunkel, Schrift, Raum, Form, Bewegung	jede Web-Oberfläche
`/tokens/fonts.css`	`@font-face` für die vier Schriften, lokal	Web, zusammen mit den Schriftdateien
`/tokens/tailwind.css`	Tailwind-v4-Theme: dieselben Rollen als Utilities	Next.js mit Tailwind
`/tokens/Tokens.swift`	`AlbertFarbe`, `AlbertRaum`, `AlbertSchrift`, `AlbertForm`, `AlbertBewegung`	SwiftUI
`/regeln.json`	Regeln, die keine Werte sind: Wörter, Register, Grenzen	Texte und Prüfungen

Einbinden im Web

Im Monorepo kommt alles aus dem Workspace-Paket. Die Reihenfolge zählt: Tokens zuerst, dann Bauteil-Zustände.

// app/layout.tsx
import "@hey-albert/design-system/styles.css";

Wer Tailwind benutzt, bindet das Theme nach Tailwind ein. Es schaltet Tailwinds eigene Farben, Schatten und Radien ab.

@import "tailwindcss";
@import "@hey-albert/design-system/tailwind/theme.css";
@import "@hey-albert/design-system/tailwind/shadcn.css";

Danach gibt es bg-grund, text-tinte, rounded-karte, p-raum-2, h-ziel-finger und font-schrift-titel. Den dunklen Modus erkennt die Variante dark: über data-modus.

Außerhalb des Monorepos: tokens.css und fonts.css herunterladen, die Schriften aus dem Paket daneben legen, beide Dateien einbinden.

Einbinden in Swift

Tokens.swift in das Ziel kopieren oder als Datei eines Swift-Pakets einbinden. Farben sind dynamisch und folgen dem Erscheinungsbild des Systems.

Text("Felix · Handball")
  .foregroundStyle(AlbertFarbe.textKoerper)
  .padding(AlbertRaum.karteInnen)
  .background(AlbertFarbe.flaecheKarte, in: RoundedRectangle(cornerRadius: AlbertForm.radiusKarte))

In Token-Werkzeugen

tokens.dtcg.json folgt dem Format der W3C Design Tokens Community Group. Werkzeuge wie Tokens Studio lesen es direkt. Die Themen stehen in $themes: Hell nimmt farben-hell, Dunkel legt farben-dunkel darüber. $metadata legt die Reihenfolge der Sätze fest.

Alle Tokens

Ein Klick auf einen Namen kopiert var(--name).

Farbe

Grundfarben (Notizbuch: warmes Papier, Tinte)
Hell	Dunkel	Bedeutung
`#F8F2E7`	`#14110D`	Seitenhintergrund, warmes Creme
`#EEE8DD`	`#2A2620`	Standardkarte (Termin), beige
`#FBF7EE`	`#201C17`	Tagesreiter, Menüs, Badges auf Karten, Suchfeld
`#EDE6D8`	`#322D26`	Segment-Regler inaktiv, sekundäre Knöpfe
`#171717`	`#0B0A08`	Leiste, primäre Knöpfe, heutiger Tag, aktive Auswahl
`#2C2C2C`	`#2C2C2C`	Schwarz unter dem Zeiger (Knopf, Kreis, heutiger Reiter)
`#3A3A3A`	`#3A3A3A`	Schwarz beim Drücken
`#1A1A1A`	`#F4EFE6`	Fließtext, Titel
`#6E6A63`	`#A9A297`	Zweittext, Zeiten, Beschriftungen
`#D8D0BF`	`#3D372E`	Haarlinien 1 px, Ränder von Feldern und Kreisen
`#F3B8DF`	`#F3B8DF`	Akzent: Plus, Jetzt-Zeit, aktiver Ort, Zähler, Lupe
`#F7CDE8`	`#F7CDE8`	Zustands-Pillen, Tageskreis mit Offenem
`#F5D95C`	`#F5D95C`	Familie und Rituale, Alberts Vorschlag (iPhone), Zahlen
`#E4C63A`	`#E4C63A`	Formen auf gelben Karten
`#BFD9A6`	`#BFD9A6`	Bewertung: gut (HQ)
`#F5D95C` → gelb	`#F5D95C`	Bewertung: Potenzial (HQ)
`#EBA7A0`	`#EBA7A0`	Bewertung: schwach (HQ)
`#2B2A25`	`#2B2A25`
`#BFCDF0`	`#BFCDF0`	Fahrten
`#9DB1E3`	`#9DB1E3`	Formen auf blauen Karten
`#B8467F`	`#F09CC6`	nur gestrichelter Rand für „ohne Zuständigen“
`#4A4530`	`#4A4530`	Zweittext auf gelben Flächen
`#F4EFE6`	`#F4EFE6`	Text und Zeichen auf Schwarz
`#C9A0BD`	`#B98CAD`	gedämpftes Rosa-Grau für den Sonntag

Semantische Rollen: Flächen
Hell	Dunkel	Bedeutung
`#F8F2E7` → grund	`#14110D`
`#FBF7EE` → hell	`#201C17`	was schwebt: Menü, Reiter, Feld
`#EEE8DD` → karte	`#2A2620`	Termin
`#BFCDF0` → blau	`#BFCDF0`	Fahrt
`#F5D95C` → gelb	`#F5D95C`	Familie und Ritual
`transparent`	`transparent`	Vorschlag: gestrichelt, ohne Füllung
`#171717` → schwarz	`#0B0A08`
`rgba(26, 26, 26, 0.32)`	`rgba(0, 0, 0, 0.56)`	dämpft, was dahinter liegt
`rgba(244, 239, 230, 0.08)`	`rgba(244, 239, 230, 0.08)`	Ort in der Leiste unter dem Zeiger
`rgba(244, 239, 230, 0.14)`	`rgba(244, 239, 230, 0.14)`	aktiver Ort in der Leiste unter dem Zeiger

Semantische Rollen: Text
Hell	Dunkel	Bedeutung
`#1A1A1A` → tinte	`#F4EFE6`
`#1A1A1A` → tinte	`#F4EFE6`
`#6E6A63` → grau	`#A9A297`
`#F4EFE6` → leistentext	`#F4EFE6`
`#9A948B`	`#8C857A`
`#4A4530` → auf-gelb	`#4A4530`
`#1A1A1A` → tinte	`#1A1A1A`
`#4A4F63`	`#4A4F63`	Zweittext auf blauen Flächen (Fahrt)
`#1A1A1A` → tinte	`#1A1A1A`
`#A29B8F`	`#7A7469`	gerechnet, keine Deckkraft

Semantische Rollen: Linien und Ränder
Hell	Dunkel	Bedeutung
`#D8D0BF` → linie	`#3D372E`
`#C2B8A2`	`#524A3D`	Kontur 1,5 px statt 1 px
`#E4DDCE`	`#2B2620`	gerechnet, keine Deckkraft
`#1A1A1A` → tinte	`#F4EFE6`	gestrichelte Jetzt-Achse
`#6E6A63` → grau	`#A9A297`	gestrichelt grau: Vorschlag von Albert
`#B8467F` → offen	`#F09CC6`	gestrichelt: ohne Zuständigen
`#B8467F` → offen	`#F09CC6`	:focus-visible Ring

Semantische Rollen: Akzent und Bedeutung
Hell	Dunkel	Bedeutung
`#F3B8DF` → rosa	`#F3B8DF`	Akzent und „jetzt“ – nie Fehler
`#F7CDE8` → rosa-hell	`#F7CDE8`
`#B8467F` → offen	`#F09CC6`
`#BFCDF0` → blau	`#BFCDF0`
`#9DB1E3` → blau-dunkel	`#9DB1E3`
`#F5D95C` → gelb	`#F5D95C`
`#E4C63A` → gelb-dunkel	`#E4C63A`
`#EEE8DD` → karte	`#2A2620`

Knöpfe
Hell	Dunkel	Bedeutung
`#171717` → schwarz	`#F4EFE6`
`#2C2C2C` → schwarz-zeiger	`#E2DACD`	Druck macht die Fläche nicht dunkler, sondern die Schrift ruhiger
`#3A3A3A` → schwarz-druck	`#CFC6B7`
`#F4EFE6` → leistentext	`#171717`
`#EDE6D8` → knopf-zweit	`#322D26`
`#1A1A1A` → tinte	`#F4EFE6`
`#E9E2D4`	`#2B2620`
`#A29B8F` → text-inaktiv	`#7A7469`

Personenfarben (Klebezettel). Text darauf ist immer Tinte. Acht Plätze; Familie Sonntag belegt fünf.
Hell	Dunkel	Bedeutung
`#D5F5C2`	`#D5F5C2`	Anna - Mint
`#A8E5E5`	`#A8E5E5`	Tobias - Türkis
`#F6D0FF`	`#F6D0FF`	Felix - Flieder
`#FFD6A5`	`#FFD6A5`	Lena - Pfirsich
`#AEBAFF`	`#AEBAFF`	Sofia - Himmel
`#C7EFD0`	`#C7EFD0`	frei
`#FFC9C9`	`#FFC9C9`	frei
`#E3DCA8`	`#E3DCA8`	frei
`#1A1A1A` → tinte	`#1A1A1A`
`#8FCF6E`	`#A6DE87`
`#62BFBF`	`#7FD6D6`
`#D28FE8`	`#E4A8F5`
`#E0A55F`	`#F0BE7C`
`#7B8BE0`	`#9AA8F0`
`#7FC993`	`#98DBAA`
`#E08F8F`	`#F0A8A8`
`#B7AE6A`	`#CFC57F`

Schrift

Schriften
Token	Hell	Bedeutung
Ag	`"Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif`
Ag	`Inter, system-ui, -apple-system, sans-serif`
Ag	`"Roboto Mono", ui-monospace, "SF Mono", monospace`
Ag	`"Reenie Beanie", "Bradley Hand", cursive`

Gewichte
Token	Hell	Bedeutung
	`800`
	`400`
	`500`
	`600`

Grade
Token	Hell	Bedeutung
	`40px`	„Guten Morgen, Anna.“ auf dem Mac
	`30px`	dieselbe Zeile auf dem iPhone
	`34px`	Zahl-Kachel: 8,7 h
	`22px`	Logo in der Leiste
	`17px`
	`14.5px`	Kartentitel
	`14px`
	`12px`	Zweitzeile, Zeiten
	`11px`
	`10px`	Wochentag im Tagesreiter

Laufweite
Token	Hell	Bedeutung
	`-0.03em`	eng, wie in den Screensets
	`0em`
	`0.08em`

Zeilen
Token	Hell	Bedeutung
	`1.02`
	`1.2`
	`1.45`

Ziffern
Token	Hell	Bedeutung
	`"tnum" 1, "lnum" 1`	Zahlen und Zeiten: tabellarische Ziffern

Raum

8-px-Raster
Token	Hell	Bedeutung
	`4px`
	`8px`
	`16px`
	`24px`
	`32px`
	`40px`
	`48px`
	`64px`

Abstände, wie in den Screensets gemessen
Token	Hell	Bedeutung
	`12px`
	`8px`
	`32px`
	`20px`

Zielflächen
Token	Hell	Bedeutung
	`28px`
	`44px`
	`56px`

Leisten
Token	Hell	Bedeutung
	`220px`
	`72px`
	`64px`
	`768px`	ab hier ist es ein Tisch, kein Handy (nur Tailwind-Breakpoint, nicht in spacing.css)

Form

Radien
Token	Hell	Bedeutung
	`16px`	Karten und Menüs
	`12px`	Tagesreiter, kleine Karten
	`24px`	iPhone-Leiste
	`22px`	Mac-Block
	`999px`	Pillen, Kreise, Knöpfe

Striche
Token	Hell	Bedeutung
	`1px`
	`1.5px`	Kontur wird stark, statt Schatten
	`1.5px`
	`5px 4px`

Kippung
Token	Hell	Bedeutung
	`0.3deg`	was liegt, ist leicht gekippt
	`0deg`	was schwebt, steht gerade

Schatten und Fokus
Token	Hell	Bedeutung
	`none`	nicht verhandelbar
	`2px`
	`2px`

Bewegung

Dauern
Token	Hell	Bedeutung
	`120ms`
	`200ms`
	`300ms`

Verläufe
Token	Hell	Bedeutung
	`cubic-bezier(0.2, 0, 0.2, 1)`
	`cubic-bezier(0.4, 0, 0.6, 1)`

Reduzierte Bewegung
Token	Hell	Bedeutung
	`0ms`
	`0ms`
	`0ms`

Herunterladen

Tokens: JSON, CSS, Tailwind, Swifthey-albert-tokens.zip