Liorith SystemColor System
Live Showcase
Showcase

Color System

Semantische Tokens, Markenfarben und Materialfamilien als gemeinsames Farbsystem.

Live-Specimen
Was sehe ich hier?

Interaktion vor Erklärung.

Dieses Showcase hält das bestehende Specimen bewusst frei von langen Anleitungen. Zustände, Varianten und Verhalten lassen sich direkt ausprobieren.

Zum Nachlesen

Arbeite in Produkten mit Rollen wie accent oder border, nicht mit direkten Hex-Werten.

Live-SpecimenUnveränderte Komponentenimplementierung

Backgrounds

bg-base
bg-surface
bg-elevated
bg-overlay
bg-inverted

Foregrounds

fg-base
fg-muted
fg-subtle
fg-disabled
fg-inverted
fg-on-accent

Borders

border
border-strong
border-focus

Accent

accent
accent-hover
accent-muted
accent-subtle

Interaction

hover
active
selected
focus-ring

Branding

gray
red
orange
yellow
green
cyan
blue
violet
magenta

Branding (light)

gray
red
orange
yellow
green
cyan
blue
violet
magenta

Branding (Metallic)

bronze
silver
gold
platinum
diamond