GESTALTUNG / UTILITY-REFERENZ

Farben, Rahmen & Effekte

Gestalte mit semantischen Farbrollen statt verstreuten Einzelwerten. Dieselben Rollen werden von allen normalen und Business-Farbwelten gefüllt und lassen sich pro Bereich überschreiben.

Ausprobieren und übernehmen

Die Vorschauen verwenden die aktuell gewählten Demo-Einstellungen. Direkt unter jedem Beispiel steht das dazugehörige HTML.

Farbrollen kombinieren

bg-accent setzt zugleich den vorgesehenen Akzenttext. Die Farbschemata liefern passende Kombinationen.

Oberfläche

Subtile Fläche

Akzent

HTML

<div class="grid md:grid-cols-3 gap-3">
  <div class="bg-surface text-text border rounded p-4">Oberfläche</div>
  <div class="bg-subtle text-text rounded p-4">Subtile Fläche</div>
  <div class="bg-accent rounded p-4 font-medium">Akzent</div>
</div>

Rahmen, Rundungen und Schatten

Varianten können gemeinsam eingesetzt werden. Größere Schatten oder Filter sollten Informationen nicht verdecken.

Gestrichelt

Ruhiger Schatten

HTML

<div class="grid md:grid-cols-2 gap-4">
  <div class="border-2 border-dashed rounded-lg p-6 bg-surface">Gestrichelt</div>
  <div class="border rounded-xl shadow p-6 bg-surface">Ruhiger Schatten</div>
</div>

Unterstützte Klassen

Diese Tabellen werden direkt aus den vorhandenen Utility-Regeln erzeugt. Sie zeigen Basisklassen; responsive und Zustandsvarianten sind unter Responsive Layouts & Zustände erklärt.

Semantische Farbrollen

bg-*, text-* und border-* beziehen ihre Werte aus den Designvariablen. Einzelne Rollen sind keine vollständigen Farbskalen.

Semantische Farbrollen: Klassen und erzeugtes CSS
Klasse	CSS
`bg-bg`	`background-color:var(--r-bg)`
`text-bg`	`color:var(--r-bg)`
`border-bg`	`border-color:var(--r-bg)`
`bg-surface`	`background-color:var(--r-surface)`
`text-surface`	`color:var(--r-surface)`
`border-surface`	`border-color:var(--r-surface)`
`bg-subtle`	`background-color:var(--r-subtle)`
`text-subtle`	`color:var(--r-subtle)`
`border-subtle`	`border-color:var(--r-subtle)`
`bg-text`	`background-color:var(--r-text)`
`text-text`	`color:var(--r-text)`
`border-text`	`border-color:var(--r-text)`
`bg-muted`	`background-color:var(--r-muted)`
`text-muted`	`color:var(--r-muted)`
`border-muted`	`border-color:var(--r-muted)`
`bg-accent`	`background-color:var(--r-accent);color:var(--r-on-accent)`
`text-accent`	`color:var(--r-accent)`
`border-accent`	`border-color:var(--r-accent)`
`bg-on-accent`	`background-color:var(--r-on-accent)`
`text-on-accent`	`color:var(--r-on-accent)`
`border-on-accent`	`border-color:var(--r-on-accent)`
`bg-success`	`background-color:var(--r-success)`
`text-success`	`color:var(--r-success)`
`border-success`	`border-color:var(--r-success)`
`bg-warning`	`background-color:var(--r-warning)`
`text-warning`	`color:var(--r-warning)`
`border-warning`	`border-color:var(--r-warning)`
`bg-danger`	`background-color:var(--r-danger)`
`text-danger`	`color:var(--r-danger)`
`border-danger`	`border-color:var(--r-danger)`

30 unterstützte Basisklassen in dieser Gruppe.

Rahmen, Ringe und Rundungen

Border-Breiten/-Stile lassen sich kombinieren. Ringe nutzen die Fokusfarbe.

Rahmen, Ringe und Rundungen: Klassen und erzeugtes CSS
Klasse	CSS
`rounded-none`	`border-radius:0`
`rounded`	`border-radius:var(--r-radius)`
`rounded-sm`	`border-radius:4px`
`rounded-lg`	`border-radius:16px`
`rounded-full`	`border-radius:9999px`
`border`	`border:1px solid var(--r-border)`
`border-0`	`border-width:0px;border-style:solid`
`border-t`	`border-top:1px solid var(--r-border)`
`border-bg`	`border-color:var(--r-bg)`
`border-surface`	`border-color:var(--r-surface)`
`border-subtle`	`border-color:var(--r-subtle)`
`border-text`	`border-color:var(--r-text)`
`border-muted`	`border-color:var(--r-muted)`
`border-accent`	`border-color:var(--r-accent)`
`border-on-accent`	`border-color:var(--r-on-accent)`
`border-success`	`border-color:var(--r-success)`
`border-warning`	`border-color:var(--r-warning)`
`border-danger`	`border-color:var(--r-danger)`
`ring-0`	`box-shadow:0 0 0 0px var(--r-focus)`
`border-2`	`border-width:2px;border-style:solid`
`ring-2`	`box-shadow:0 0 0 2px var(--r-focus)`
`border-4`	`border-width:4px;border-style:solid`
`ring-4`	`box-shadow:0 0 0 4px var(--r-focus)`
`border-8`	`border-width:8px;border-style:solid`
`ring-8`	`box-shadow:0 0 0 8px var(--r-focus)`
`border-solid`	`border-style:solid`
`border-dashed`	`border-style:dashed`
`border-dotted`	`border-style:dotted`
`border-b`	`border-bottom:1px solid var(--r-border)`
`border-s`	`border-inline-start:1px solid var(--r-border)`
`border-e`	`border-inline-end:1px solid var(--r-border)`
`rounded-md`	`border-radius:8px`
`rounded-xl`	`border-radius:24px`

33 unterstützte Basisklassen in dieser Gruppe.

Schatten und Transparenz

opacity-* betrifft das gesamte Element einschließlich seiner Kinder.

Schatten und Transparenz: Klassen und erzeugtes CSS
Klasse	CSS
`shadow-sm`	`box-shadow:0 2px 6px #0001`
`shadow`	`box-shadow:0 8px 24px #0002`
`shadow-none`	`box-shadow:none`
`opacity-0`	`opacity:0`
`opacity-25`	`opacity:0.25`
`opacity-50`	`opacity:0.5`
`opacity-75`	`opacity:0.75`
`opacity-100`	`opacity:1`

8 unterstützte Basisklassen in dieser Gruppe.

Filter und Transformation

Filterklassen setzen aktuell jeweils die ganze filter-Eigenschaft; mehrere Filterklassen addieren sich nicht. translate, scale und rotate verwenden getrennte CSS-Eigenschaften.

Filter und Transformation: Klassen und erzeugtes CSS
Klasse	CSS
`scale-100`	`scale:1`
`scale-105`	`scale:1.05`
`rotate-0`	`rotate:0deg`
`rotate-3`	`rotate:3deg`
`translate-x-0`	`translate:0 0`
`translate-y-0`	`translate:0 0`
`translate-x-1`	`translate:calc(0.25rem * var(--r-density)) 0`
`translate-y-1`	`translate:0 calc(0.25rem * var(--r-density))`
`translate-x-2`	`translate:calc(0.5rem * var(--r-density)) 0`
`translate-y-2`	`translate:0 calc(0.5rem * var(--r-density))`
`translate-x-3`	`translate:calc(0.75rem * var(--r-density)) 0`
`translate-y-3`	`translate:0 calc(0.75rem * var(--r-density))`
`translate-x-4`	`translate:calc(1rem * var(--r-density)) 0`
`translate-y-4`	`translate:0 calc(1rem * var(--r-density))`
`translate-x-5`	`translate:calc(1.25rem * var(--r-density)) 0`
`translate-y-5`	`translate:0 calc(1.25rem * var(--r-density))`
`translate-x-6`	`translate:calc(1.5rem * var(--r-density)) 0`
`translate-y-6`	`translate:0 calc(1.5rem * var(--r-density))`
`translate-x-8`	`translate:calc(2rem * var(--r-density)) 0`
`translate-y-8`	`translate:0 calc(2rem * var(--r-density))`
`translate-x-10`	`translate:calc(2.5rem * var(--r-density)) 0`
`translate-y-10`	`translate:0 calc(2.5rem * var(--r-density))`
`translate-x-12`	`translate:calc(3rem * var(--r-density)) 0`
`translate-y-12`	`translate:0 calc(3rem * var(--r-density))`
`translate-x-16`	`translate:calc(4rem * var(--r-density)) 0`
`translate-y-16`	`translate:0 calc(4rem * var(--r-density))`
`translate-x-20`	`translate:calc(5rem * var(--r-density)) 0`
`translate-y-20`	`translate:0 calc(5rem * var(--r-density))`
`translate-x-24`	`translate:calc(6rem * var(--r-density)) 0`
`translate-y-24`	`translate:0 calc(6rem * var(--r-density))`
`translate-x-32`	`translate:calc(8rem * var(--r-density)) 0`
`translate-y-32`	`translate:0 calc(8rem * var(--r-density))`
`translate-x-40`	`translate:calc(10rem * var(--r-density)) 0`
`translate-y-40`	`translate:0 calc(10rem * var(--r-density))`
`translate-x-48`	`translate:calc(12rem * var(--r-density)) 0`
`translate-y-48`	`translate:0 calc(12rem * var(--r-density))`
`translate-x-64`	`translate:calc(16rem * var(--r-density)) 0`
`translate-y-64`	`translate:0 calc(16rem * var(--r-density))`
`blur-none`	`filter:blur(0)`
`blur-sm`	`filter:blur(4px)`
`blur`	`filter:blur(8px)`
`brightness-90`	`filter:brightness(.9)`
`brightness-110`	`filter:brightness(1.1)`
`contrast-125`	`filter:contrast(1.25)`
`grayscale`	`filter:grayscale(1)`
`filter-none`	`filter:none`
`origin-center`	`transform-origin:center`
`origin-top`	`transform-origin:top`
`origin-bottom`	`transform-origin:bottom`
`-translate-x-1/2`	`translate:-50% 0`
`-translate-y-1/2`	`translate:0 -50%`

51 unterstützte Basisklassen in dieser Gruppe.

Übergänge

Transition-Dauer und Verzögerung steuern Zustandswechsel. Die Bewegungspräferenz des Systems bleibt wirksam.

Übergänge: Klassen und erzeugtes CSS
Klasse	CSS
`transition`	`transition:color var(--r-duration) var(--r-ease),background-color var(--r-duration) var(--r-ease),border-color var(--r-duration) var(--r-ease),opacity var(--r-duration) var(--r-ease),transform var(--r-duration) var(--r-ease)`
`transition-none`	`transition:none`
`duration-75`	`transition-duration:75ms`
`delay-75`	`transition-delay:75ms`
`duration-150`	`transition-duration:150ms`
`delay-150`	`transition-delay:150ms`
`duration-200`	`transition-duration:200ms`
`delay-200`	`transition-delay:200ms`
`duration-300`	`transition-duration:300ms`
`delay-300`	`transition-delay:300ms`
`duration-500`	`transition-duration:500ms`
`delay-500`	`transition-delay:500ms`
`duration-700`	`transition-duration:700ms`
`delay-700`	`transition-delay:700ms`
`duration-1000`	`transition-duration:1000ms`
`delay-1000`	`transition-delay:1000ms`

16 unterstützte Basisklassen in dieser Gruppe.

Individuell kombinieren

Klassen lassen sich mit Komponenten, eigenen CSS-Regeln und den gemeinsamen --r-*-Variablen kombinieren. Dichte und Schriftgröße bleiben unabhängig. Die Syntax frei formulierter Klassen wie p-[13px] ist noch nicht implementiert.

Zur durchsuchbaren Gesamtübersicht · Farben und eigene Variablen