# Farben (/docs/farben)

Die Marke arbeitet zurückhaltend: eine Tintenfarbe auf weißem Grund. Farbe ist selten und hat immer eine Bedeutung. Konsumenten verwenden die Farbrolle, nie den Farbwert direkt.

## Rollen [#rollen]

Ein Klick auf einen Wert kopiert ihn.

| Farbrolle | Verwendung | CSS-Variable | Tailwind | Farbwert |
| --- | --- | --- | --- | --- |
| Ink | Tiefes Marineblau, die Farbe der Marke. Für allen primären Text, aktive Rahmen und gefüllte Flächen wie Buttons. | `var(--color-ink)` | `bg-ink` | `#13273F` |
| Body | Etwas wärmeres Dunkel für Fließtext und nachgeordnete Textelemente. | `var(--color-body)` | `bg-body` | `#2D2D2D` |
| Canvas | Reines Weiß als Hintergrund. | `var(--color-canvas)` | `bg-canvas` | `#FFFFFF` |
| Muted | Nachgeordneter Text, Zeitangaben, deaktivierte Zustände. | `var(--color-muted)` | `bg-muted` | `#6B7280` |
| Subtle | Hintergrund bei Hover. | `var(--color-subtle)` | `bg-subtle` | `#F4F5F7` |
| Online | Status- und Standortpunkt, die einzige Akzentfarbe. | `var(--color-online)` | `bg-online` | `#22C55E` |
| Border | Ausschließlich Haarlinien, nie für etwas Strukturelles. | `var(--color-border)` | `bg-border` | `#E8E9EB` |
| Error | Allgemeine Warn- und Fehlerfarbe, etwa für Formularmeldungen und fehlgeschlagene Zustände. | `var(--color-error)` | `bg-error` | `#E85346` |
| Placeholder | Neutrale Füllung für Bildflächen ohne Bild. Nie ein Gestaltungselement. | `var(--color-placeholder)` | `bg-placeholder` | `#D9D9D9` |
| Sand | Warmer Grund hinter Projektbildern. Die Bilder liegen darauf eingepasst, als Fläche taucht Sand sonst nirgends auf. | `var(--color-sand)` | `bg-sand` | `#DCD5CD` |