# 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.

Quelle: https://brand.heyalbert.family/tokens/ · Hey Albert Marke und Designsystem

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.

> **So**
>
> `background: var(--flaeche-karte-fahrt); color: var(--text-auf-blau);`

> **Nicht so**
>
> `background: var(--blau); color: var(--tinte);` — im dunklen Modus wird die Tinte creme, das Blau bleibt hell. Dann steht helle Schrift auf hellem Grund.

## Hell und dunkel

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

```html
<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`](/tokens/tokens.json) | jeder Token aufgelöst: Name, CSS-Variable, hell, dunkel, Alias, Bedeutung | Agenten, Skripte, Prüfungen |
| [`/tokens/tokens.dtcg.json`](/tokens/tokens.dtcg.json) | die Quelle im W3C-Format, alle Sätze in einer Datei | Token-Werkzeuge, Style Dictionary |
| [`/tokens/tokens.css`](/tokens/tokens.css) | CSS-Variablen hell und dunkel, Schrift, Raum, Form, Bewegung | jede Web-Oberfläche |
| [`/tokens/fonts.css`](/tokens/fonts.css) | `@font-face` für die vier Schriften, lokal | Web, zusammen mit den Schriftdateien |
| [`/tokens/tailwind.css`](/tokens/tailwind.css) | Tailwind-v4-Theme: dieselben Rollen als Utilities | Next.js mit Tailwind |
| [`/tokens/Tokens.swift`](/tokens/Tokens.swift) | `AlbertFarbe`, `AlbertRaum`, `AlbertSchrift`, `AlbertForm`, `AlbertBewegung` | SwiftUI |
| [`/regeln.json`](/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.

```tsx
// 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.

```css
@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.

```swift
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.

> **Hinweis**
>
> Ein Wert, der in einem Werkzeug geändert wird, gilt erst, wenn er in `packages/design-system/tokens/quelle` steht und `pnpm tokens` gelaufen ist. Die Quelle ist das Repository, nie das Werkzeug.

## Alle Tokens

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

#### Farbe · Grundfarben (Notizbuch: warmes Papier, Tinte)

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

#### Farbe · Semantische Rollen: Flächen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| flaeche-seite | var(--flaeche-seite) | #F8F2E7 (→ grund) | #14110D |  |
| flaeche-erhoben | var(--flaeche-erhoben) | #FBF7EE (→ hell) | #201C17 | was schwebt: Menü, Reiter, Feld |
| flaeche-karte | var(--flaeche-karte) | #EEE8DD (→ karte) | #2A2620 | Termin |
| flaeche-karte-fahrt | var(--flaeche-karte-fahrt) | #BFCDF0 (→ blau) | #BFCDF0 | Fahrt |
| flaeche-karte-familie | var(--flaeche-karte-familie) | #F5D95C (→ gelb) | #F5D95C | Familie und Ritual |
| flaeche-karte-vorschlag | var(--flaeche-karte-vorschlag) | transparent | transparent | Vorschlag: gestrichelt, ohne Füllung |
| flaeche-leiste | var(--flaeche-leiste) | #171717 (→ schwarz) | #0B0A08 |  |
| flaeche-schleier | var(--flaeche-schleier) | rgba(26, 26, 26, 0.32) | rgba(0, 0, 0, 0.56) | dämpft, was dahinter liegt |
| leiste-ort-zeiger | var(--leiste-ort-zeiger) | rgba(244, 239, 230, 0.08) | rgba(244, 239, 230, 0.08) | Ort in der Leiste unter dem Zeiger |
| leiste-ort-aktiv-zeiger | var(--leiste-ort-aktiv-zeiger) | rgba(244, 239, 230, 0.14) | rgba(244, 239, 230, 0.14) | aktiver Ort in der Leiste unter dem Zeiger |

#### Farbe · Semantische Rollen: Text

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| text-koerper | var(--text-koerper) | #1A1A1A (→ tinte) | #F4EFE6 |  |
| text-titel | var(--text-titel) | #1A1A1A (→ tinte) | #F4EFE6 |  |
| text-zweit | var(--text-zweit) | #6E6A63 (→ grau) | #A9A297 |  |
| text-auf-leiste | var(--text-auf-leiste) | #F4EFE6 (→ leistentext) | #F4EFE6 |  |
| text-auf-leiste-zweit | var(--text-auf-leiste-zweit) | #9A948B | #8C857A |  |
| text-auf-gelb | var(--text-auf-gelb) | #4A4530 (→ auf-gelb) | #4A4530 |  |
| text-auf-blau | var(--text-auf-blau) | #1A1A1A (→ tinte) | #1A1A1A |  |
| text-auf-blau-zweit | var(--text-auf-blau-zweit) | #4A4F63 | #4A4F63 | Zweittext auf blauen Flächen (Fahrt) |
| text-auf-rosa | var(--text-auf-rosa) | #1A1A1A (→ tinte) | #1A1A1A |  |
| text-inaktiv | var(--text-inaktiv) | #A29B8F | #7A7469 | gerechnet, keine Deckkraft |

#### Farbe · Semantische Rollen: Linien und Ränder

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| linie-haar | var(--linie-haar) | #D8D0BF (→ linie) | #3D372E |  |
| linie-stark | var(--linie-stark) | #C2B8A2 | #524A3D | Kontur 1,5 px statt 1 px |
| linie-inaktiv | var(--linie-inaktiv) | #E4DDCE | #2B2620 | gerechnet, keine Deckkraft |
| linie-jetzt | var(--linie-jetzt) | #1A1A1A (→ tinte) | #F4EFE6 | gestrichelte Jetzt-Achse |
| rand-vorschlag | var(--rand-vorschlag) | #6E6A63 (→ grau) | #A9A297 | gestrichelt grau: Vorschlag von Albert |
| rand-offen | var(--rand-offen) | #B8467F (→ offen) | #F09CC6 | gestrichelt: ohne Zuständigen |
| rand-fokus | var(--rand-fokus) | #B8467F (→ offen) | #F09CC6 | :focus-visible Ring |

#### Farbe · Semantische Rollen: Akzent und Bedeutung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| akzent | var(--akzent) | #F3B8DF (→ rosa) | #F3B8DF | Akzent und „jetzt“ – nie Fehler |
| akzent-hell | var(--akzent-hell) | #F7CDE8 (→ rosa-hell) | #F7CDE8 |  |
| akzent-tief | var(--akzent-tief) | #B8467F (→ offen) | #F09CC6 |  |
| bedeutung-fahrt | var(--bedeutung-fahrt) | #BFCDF0 (→ blau) | #BFCDF0 |  |
| bedeutung-fahrt-tief | var(--bedeutung-fahrt-tief) | #9DB1E3 (→ blau-dunkel) | #9DB1E3 |  |
| bedeutung-familie | var(--bedeutung-familie) | #F5D95C (→ gelb) | #F5D95C |  |
| bedeutung-familie-tief | var(--bedeutung-familie-tief) | #E4C63A (→ gelb-dunkel) | #E4C63A |  |
| bedeutung-termin | var(--bedeutung-termin) | #EEE8DD (→ karte) | #2A2620 |  |

#### Farbe · Knöpfe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| knopf-primaer-flaeche | var(--knopf-primaer-flaeche) | #171717 (→ schwarz) | #F4EFE6 |  |
| knopf-primaer-flaeche-zeiger | var(--knopf-primaer-flaeche-zeiger) | #2C2C2C (→ schwarz-zeiger) | #E2DACD | Druck macht die Fläche nicht dunkler, sondern die Schrift ruhiger |
| knopf-primaer-flaeche-druck | var(--knopf-primaer-flaeche-druck) | #3A3A3A (→ schwarz-druck) | #CFC6B7 |  |
| knopf-primaer-text | var(--knopf-primaer-text) | #F4EFE6 (→ leistentext) | #171717 |  |
| knopf-zweit-flaeche | var(--knopf-zweit-flaeche) | #EDE6D8 (→ knopf-zweit) | #322D26 |  |
| knopf-zweit-text | var(--knopf-zweit-text) | #1A1A1A (→ tinte) | #F4EFE6 |  |
| knopf-inaktiv-flaeche | var(--knopf-inaktiv-flaeche) | #E9E2D4 | #2B2620 |  |
| knopf-inaktiv-text | var(--knopf-inaktiv-text) | #A29B8F (→ text-inaktiv) | #7A7469 |  |

#### Farbe · Personenfarben (Klebezettel). Text darauf ist immer Tinte. Acht Plätze; Familie Sonntag belegt fünf.

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| person-1 | var(--person-1) | #D5F5C2 | #D5F5C2 | Anna - Mint |
| person-2 | var(--person-2) | #A8E5E5 | #A8E5E5 | Tobias - Türkis |
| person-3 | var(--person-3) | #F6D0FF | #F6D0FF | Felix - Flieder |
| person-4 | var(--person-4) | #FFD6A5 | #FFD6A5 | Lena - Pfirsich |
| person-5 | var(--person-5) | #AEBAFF | #AEBAFF | Sofia - Himmel |
| person-6 | var(--person-6) | #C7EFD0 | #C7EFD0 | frei |
| person-7 | var(--person-7) | #FFC9C9 | #FFC9C9 | frei |
| person-8 | var(--person-8) | #E3DCA8 | #E3DCA8 | frei |
| person-text | var(--person-text) | #1A1A1A (→ tinte) | #1A1A1A |  |
| person-linie-1 | var(--person-linie-1) | #8FCF6E | #A6DE87 |  |
| person-linie-2 | var(--person-linie-2) | #62BFBF | #7FD6D6 |  |
| person-linie-3 | var(--person-linie-3) | #D28FE8 | #E4A8F5 |  |
| person-linie-4 | var(--person-linie-4) | #E0A55F | #F0BE7C |  |
| person-linie-5 | var(--person-linie-5) | #7B8BE0 | #9AA8F0 |  |
| person-linie-6 | var(--person-linie-6) | #7FC993 | #98DBAA |  |
| person-linie-7 | var(--person-linie-7) | #E08F8F | #F0A8A8 |  |
| person-linie-8 | var(--person-linie-8) | #B7AE6A | #CFC57F |  |

#### Schrift · Schriften

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| schrift-titel | var(--schrift-titel) | "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif |  |  |
| schrift-text | var(--schrift-text) | Inter, system-ui, -apple-system, sans-serif |  |  |
| schrift-mono | var(--schrift-mono) | "Roboto Mono", ui-monospace, "SF Mono", monospace |  |  |
| schrift-hand | var(--schrift-hand) | "Reenie Beanie", "Bradley Hand", cursive |  |  |

#### Schrift · Gewichte

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| gewicht-titel | var(--gewicht-titel) | 800 |  |  |
| gewicht-text | var(--gewicht-text) | 400 |  |  |
| gewicht-text-halb | var(--gewicht-text-halb) | 500 |  |  |
| gewicht-text-fest | var(--gewicht-text-fest) | 600 |  |  |

#### Schrift · Grade

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| grad-anrede-mac | var(--grad-anrede-mac) | 40px |  | „Guten Morgen, Anna.“ auf dem Mac |
| grad-anrede-phone | var(--grad-anrede-phone) | 30px |  | dieselbe Zeile auf dem iPhone |
| grad-zahl-gross | var(--grad-zahl-gross) | 34px |  | Zahl-Kachel: 8,7 h |
| grad-block-titel | var(--grad-block-titel) | 22px |  | Logo in der Leiste |
| grad-abschnitt | var(--grad-abschnitt) | 17px |  |  |
| grad-karten-titel | var(--grad-karten-titel) | 14.5px |  | Kartentitel |
| grad-text | var(--grad-text) | 14px |  |  |
| grad-zweit | var(--grad-zweit) | 12px |  | Zweitzeile, Zeiten |
| grad-klein | var(--grad-klein) | 11px |  |  |
| grad-kapitaelchen | var(--grad-kapitaelchen) | 10px |  | Wochentag im Tagesreiter |

#### Schrift · Laufweite

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| laufweite-titel | var(--laufweite-titel) | -0.03em |  | eng, wie in den Screensets |
| laufweite-text | var(--laufweite-text) | 0em |  |  |
| laufweite-kapitaelchen | var(--laufweite-kapitaelchen) | 0.08em |  |  |

#### Schrift · Zeilen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| zeile-titel | var(--zeile-titel) | 1.02 |  |  |
| zeile-karten-titel | var(--zeile-karten-titel) | 1.2 |  |  |
| zeile-text | var(--zeile-text) | 1.45 |  |  |

#### Schrift · Ziffern

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziffern-tabellarisch | var(--ziffern-tabellarisch) | "tnum" 1, "lnum" 1 |  | Zahlen und Zeiten: tabellarische Ziffern |

#### Raum · 8-px-Raster

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| raum-halb | var(--raum-halb) | 4px |  |  |
| raum-1 | var(--raum-1) | 8px |  |  |
| raum-2 | var(--raum-2) | 16px |  |  |
| raum-3 | var(--raum-3) | 24px |  |  |
| raum-4 | var(--raum-4) | 32px |  |  |
| raum-5 | var(--raum-5) | 40px |  |  |
| raum-6 | var(--raum-6) | 48px |  |  |
| raum-8 | var(--raum-8) | 64px |  |  |

#### Raum · Abstände, wie in den Screensets gemessen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| karte-innen | var(--karte-innen) | 12px |  |  |
| karte-abstand | var(--karte-abstand) | 8px |  |  |
| flaeche-rand-mac | var(--flaeche-rand-mac) | 32px |  |  |
| flaeche-rand-phone | var(--flaeche-rand-phone) | 20px |  |  |

#### Raum · Zielflächen

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

#### Raum · Leisten

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| leiste-mac | var(--leiste-mac) | 220px |  |  |
| leiste-mac-eng | var(--leiste-mac-eng) | 72px |  |  |
| leiste-phone-hoehe | var(--leiste-phone-hoehe) | 64px |  |  |
| umbruch-tisch | var(--umbruch-tisch) | 768px |  | ab hier ist es ein Tisch, kein Handy (nur Tailwind-Breakpoint, nicht in spacing.css) |

#### Form · Radien

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| radius-karte | var(--radius-karte) | 16px |  | Karten und Menüs |
| radius-klein | var(--radius-klein) | 12px |  | Tagesreiter, kleine Karten |
| radius-leiste | var(--radius-leiste) | 24px |  | iPhone-Leiste |
| radius-block | var(--radius-block) | 22px |  | Mac-Block |
| radius-pille | var(--radius-pille) | 999px |  | Pillen, Kreise, Knöpfe |

#### Form · Striche

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| strich-haar | var(--strich-haar) | 1px |  |  |
| strich-stark | var(--strich-stark) | 1.5px |  | Kontur wird stark, statt Schatten |
| strich-gestrichelt | var(--strich-gestrichelt) | 1.5px |  |  |
| muster-gestrichelt | var(--muster-gestrichelt) | 5px 4px |  |  |

#### Form · Kippung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| kippung-zettel | var(--kippung-zettel) | 0.3deg |  | was liegt, ist leicht gekippt |
| kippung-null | var(--kippung-null) | 0deg |  | was schwebt, steht gerade |

#### Form · Schatten und Fokus

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| schatten | var(--schatten) | none |  | nicht verhandelbar |
| fokus-ring | var(--fokus-ring) | 2px |  |  |
| fokus-abstand | var(--fokus-abstand) | 2px |  |  |

#### Bewegung · Dauern

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 120ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 200ms |  |  |
| dauer-atem | var(--dauer-atem) | 300ms |  |  |

#### Bewegung · Verläufe

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| verlauf-ruhig | var(--verlauf-ruhig) | cubic-bezier(0.2, 0, 0.2, 1) |  |  |
| verlauf-atem | var(--verlauf-atem) | cubic-bezier(0.4, 0, 0.6, 1) |  |  |

#### Bewegung · Reduzierte Bewegung

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| dauer-kurz | var(--dauer-kurz) | 0ms |  |  |
| dauer-mittel | var(--dauer-mittel) | 0ms |  |  |
| dauer-atem | var(--dauer-atem) | 0ms |  |  |

## Herunterladen

- [Tokens: JSON, CSS, Tailwind, Swift](https://brand.heyalbert.family/downloads/hey-albert-tokens.zip)