Tokens

A token is a name for a decision. --flaeche-karte says what a colour is for. The value behind it may change, the name stays. Components know only names, never values.

Names

Tokens are named in German, by design. Each name describes a role, never a step on a scale: „Karte“ (card), not „Beige 200“.

A component reaches for a semantic role whenever one exists. Using --grund directly is allowed, but --flaeche-seite says more.

A few words you will meet in names:

Light and dark

Dark mode redefines the roles; it is not a second design. It hangs on one attribute on the root element:

<html data-modus="dunkel">

The roles then take different values. No component asks which mode is on. Person notes, pink, yellow and blue stay light surfaces at night. Text on them uses --person-text, --text-auf-gelb, --text-auf-blau or --text-auf-rosa, which stay dark.

With reduced motion every duration is 0 ms. tokens/motion.css emits that as its own block for prefers-reduced-motion.

The files

On the web

Inside the monorepo everything comes from the workspace package. Order matters: tokens first, then component states.

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

With Tailwind, import the theme after Tailwind. It switches off Tailwind’s own colours, shadows and radii.

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

Then you have bg-grund, text-tinte, rounded-karte, p-raum-2, h-ziel-finger and font-schrift-titel. The dark: variant follows data-modus.

Outside the monorepo: download tokens.css and fonts.css, put the font files from the package next to them and include both files.

In Swift

Copy Tokens.swift into the target or add it to a Swift package. Colours are dynamic and follow the system appearance.

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

In token tools

tokens.dtcg.json follows the W3C Design Tokens Community Group format. Tools such as Tokens Studio read it directly. Themes live in $themes: Hell (light) uses farben-hell, Dunkel (dark) layers farben-dunkel on top. $metadata sets the order of the sets.

All tokens

Clicking a name copies var(--name). Meanings are given in German, as in the source.

Download