Farben
Guppy folgt einem strukturierten Farbsystem. Alle Farben sind über die Theme-Konfiguration anpassbar, Änderungen wirken sich direkt auf die kompilierte Storefront aus.
Brand-Farben
Die zwei zentralen Farben deines Themes:
| Feld | Default | Verwendung |
|---|---|---|
Primärfarbe (sw-color-brand-primary) | #215AFF | Buttons, Links, Akzente |
Sekundärfarbe (sw-color-brand-secondary) | #0B1845 | Header (default), Sekundär-Akzente |
Brand-Farbe ändern
Eine geänderte Primärfarbe propagiert automatisch in Buttons, Links, Focus-Outlines und Hover-Zustände. Sekundärfarbe wirkt vor allem auf Header und Sekundär-Buttons.
System-Status-Farben
Verwendet in Alerts und Status-Indikatoren:
| Status | Default-Hintergrund |
|---|---|
| Success | #D3F2E7 |
| Info | #CEEDFE |
| Warning | #FFEFD4 |
| Danger | #FDE2E7 |
Pro Status lässt sich zusätzlich die Textfarbe (hell/dunkel) und ein Outline-Toggle steuern.
Graustufen
Eine 9-Stufen-Skala (gray-100 bis gray-900) für Hintergründe, Rahmen, Trenner, Sekundärtext.
| Stufe | Default | Typische Verwendung |
|---|---|---|
| 100 | #F9F9F9 | Hintergründe, Footer |
| 200 | #EEEEEE | deaktivierte Elemente |
| 300 | #BCC1C7 | Rahmen |
| 400 | #CED4DA | Input-Rahmen |
| 500 | #ADB5BD | Platzhalter |
| 600 | #798490 | Sekundärtext |
| 700 | #495057 | Text |
| 800 | #4A545B | Überschriften |
| 900 | #212529 | Haupttext |
eCommerce-Farben
Spezifisch für Lieferstatus und Order-Status, definiert in den Theme-Tabs für Detailpage und Productcard.
| Status | Hintergrund | Textfarbe |
|---|---|---|
| Versandkostenfrei | #CEEDFE | #023B5A |
| Verfügbar | #D3F2E7 | #154634 |
| Nachbestellt | #FFEFD4 | #5D3B00 |
| Ausverkauft | #EEEEEE | #303030 |
Badges
Die Produktkarten-Badges (Neu, Top-Seller, Discount) lassen sich pro Badge separat einfärben:
| Badge | Default-Hintergrund |
|---|---|
| Neu | #22C087 |
| Top-Seller | #F89C00 |
| Discount | #E10036 |
Hinweise
Kontraste prüfen
Bei eigener Farbwahl unbedingt WCAG-Kontraste prüfen (mindestens 4.5:1 für normalen Text). Tools: WebAIM Contrast Checker.
Vollständige Referenz
Alle Farb-Felder mit Defaults: Konfigurationsschema.