01 · Design Tokens
Die neue Farbwelt
Originalfarben aus dem Julikat-Relaunch-PDF. Die Beschriftungen zeigen jeweils den vorgesehenen Einsatz.
Creme
#FBF8F2
SeitenhintergrundLeinen
#EAE2D0
Abschnitte und KartenOliv hell
#E3E5D7
Zarte AkzenteOliv
#778265
MarkenflächeOliv tief
#626D52
Buttons und LinksFlächen mit Textfarben
Leinen
Alternative Fläche
Ein ruhiger Abschnitt zwischen zwei Inhaltsbereichen.
Oliv tief
Dunkler Hintergrund
Cremefarbene Schrift mit ausreichendem Kontrast für längere Texte.
Mittleres Oliv: Hier demonstriert die CSS bewusst dunkle Schrift. Cremeweiß auf diesem Farbton eignet sich nicht für kleinen Fließtext.
02 · Bootstrap-Komponenten
Buttons, Status und Navigation
Buttons
Badges
PrimarySecondarySuccessWarningDangerLightDark
Alerts
Primary – Ein ruhiger Hinweis im Julikat-Theme.
Secondary – Zusätzliche Informationen.
Success – Aktion erfolgreich abgeschlossen.
Danger – Bitte Eingaben überprüfen.
Accordion
Creme und Leinen schaffen ruhige Leseflächen, während Oliv für die Navigation und interaktive Elemente eingesetzt wird.
Buttons und Formulare können hier direkt per Maus oder Tastatur getestet werden.
Fortschritt und Pagination
Modal und Popover
Modal, Dropdown, Tooltip und Accordion benötigen Bootstrap-JavaScript (CDN).
03 · Formular-Test
Formularfelder und Zustände
Validierungszustände
Sieht gut aus.
Dieses Feld muss ausgefüllt werden.
04 · Anwendung
Artikelkarten und redaktionelles Layout
Bildfläche
Menorca · Slow Travel
Inselglück Menorca
Orte, an denen es sich lohnt, länger zu bleiben.
Artikel lesenBildfläche
Spanien · Natur & Draußen
Menorca entspannt entdecken
Küstenwege, Naturparks und versteckte Buchten.
Artikel lesenBildfläche
Beispiel Artikelseite
Menorca entspannt entdecken
Sieben Aktivitäten und Ausflugstipps für eure Reise.
Die ruhigen Hintergründe geben langen Texten Raum. Dieses Muster demonstriert den redaktionellen Text neben einer Sidebar.
Mein Tipp: Plant lieber ein paar entspannte Stunden als eine vollgepackte Sightseeing-Runde.
Inhaltsbereich
Zusätzliche Informationen lassen sich in abgesetzten Bereichen darstellen.
05 · Tabellen
Table-Varianten
| Element | Farbe | Verwendung | Status |
|---|---|---|---|
| Primary | #626D52 | CTA-Buttons | Aktiv |
| Secondary | #778265 | Markenakzente | Aktiv |
| Light | #FBF8F2 | Hintergründe | Aktiv |