Theme Variables

A comprehensive showcase of all design tokens and CSS custom properties used throughout the theme.

Colors

Brand & System Colors

Primary

--c-primary
#2F6AFD

Secondary

--c-secondary
#F8496F

Headlines

--c-headlines
#000000

Text

--c-text
#404040

Success

--c-success
#48C572

Warning

--c-warning
#FCC130

Danger

--c-danger
#C84630

Neutral & Background

White

--c-white

Light Gray

--c-lightest-gray

Dark BG

--c-bg-invert

Background Color Scales

Base Background Colors

Light

--c-bg
#FFFFFF

Dark

--c-bg-invert
#222222

Alpha Scale - Light Background (Transparency)

Nutzt Transparenz/Opazität von --c-bg, um verschiedene Intensitäten zu erzeugen. Perfekt für Overlays, Halos und Hover-Effekte.

100%

--c-bg-a100

90%

--c-bg-a90

75%

--c-bg-a75

50%

--c-bg-a50

25%

--c-bg-a25

10%

--c-bg-a10

--c-bg-a0

Alpha Scale - Dark Background (Transparency)

Transparenzvarianten von --c-bg-invert. Ideal für dunkle Overlays, Modals und atmosphärische Effekte.

100%

--c-bg-invert-a100

90%

--c-bg-invert-a90

75%

--c-bg-invert-a75

50%

--c-bg-invert-a50

25%

--c-bg-invert-a25

10%

--c-bg-invert-a10

--c-bg-invert-a0

Mix Scale - Light Background (Blend with Dark)

Mischt --c-bg additiv mit --c-bg-invert. Erzeugt subtile, harmonische Variationen für Zwischenebenen.

90%

--c-bg-m90

75%

--c-bg-m75

50%

--c-bg-m50

25%

--c-bg-m25

10%

--c-bg-m10

Mix Scale - Dark Background (Blend with Light)

Mischt --c-bg-invert mit --c-bg. Erzeugt harmonische Übergänge für Dark-Mode-Oberflächen.

90%

--c-bg-invert-m90

75%

--c-bg-invert-m75

50%

--c-bg-invert-m50

25%

--c-bg-invert-m25

10%

--c-bg-invert-m10

Fixed Scale - Light Background (Tint/Shade toward Black)

Abdunkelung von --c-bg in Richtung Schwarz. Perfekt für tiefe Hierarchie und Fokus-Zustände.

90%

--c-bg-f90

75%

--c-bg-f75

50%

--c-bg-f50

25%

--c-bg-f25

10%

--c-bg-f10

Fixed Scale - Dark Background (Tint/Shade toward White)

Aufhellung von --c-bg-invert in Richtung Weiß. Schafft klare Ebenen in Dark-Mode und subtile Kontextunterschiede.

90%

--c-bg-invert-f90

75%

--c-bg-invert-f75

50%

--c-bg-invert-f50

25%

--c-bg-invert-f25

10%

--c-bg-invert-f10