🎨 CI-System und Design-Tokens

Das Pleniofy-CI basiert auf CSS-Variablen (Custom Properties), die einheitliches Design über alle Seiten sicherstellen.

Farb-Tokens

VariableHexVerwendung
--violet#6C3FC5Primärfarbe, Buttons, Links
--violet-dark#4D2A9AHover-Zustand
--violet-deep#1A0A3CÜberschriften, dunkle Hintergründe
--violet-light#F3EFFEHelle Hintergründe, Info-Boxen
--mint#00C896Akzent, CTAs, Highlights
--slate#64748BFließtext, sekundärer Text
--border#E8E0FATrennlinien, Ränder

Typographie

Schrift: Plus Jakarta Sans (Gewichte 400/600/700/800). Code: JetBrains Mono.

Utility-Klassen

  • .wrap – Inhaltsbreite (max 1080px, zentriert)
  • .btn – Violetter Button; .btn-mint – Mint-Button
  • .card – Weisse Karte mit Schatten
  • .grid – Dreispaltiges Raster (responsive)
Diese Klassen kannst du direkt in Custom-Templates verwenden.