Farben
Hausfarbe
.bg-blue {
background-color: #006AB2;
}Texte
.tx-gray-dark {
color: #4B4B4D;
}.tx-gray-light {
color: #878787;
}.tx-blue {
color: #006AB;
}.tx-white {
color: #FFFFFF;
}Hintergründe
.bg-white {
background-color: #FFFFFF;
}.bg-gray-light {
background-color: #F7F7F7;
}Buttons
.bg-blue {
background-color: #006AB2;
}.bg-blue-hover {
background-color: #2881BF;
}.bg-gray-light {
background-color: #F7F7F7;
}.bg-blue-light {
background-color: #7FB4D9;
}Rahmen & Linien
.bg-gray {
border: 1px solid #DBDBDB;
}Handshake-Boxen
.bg-champagne {
background-color: #FFF7EA;
}Sonderfarben
.bg-red {
background-color: #C9242C;
}.bg-red-hover {
background-color: #D1464D;
}.bg-green {
background-color: #79A000;
}.bg-green-hover {
background-color: #8EAF28;
}Success & Error
.bg-success {
background-color: #4BCA81;
}
.tx-success {
color: #4BCA81;
}.bg-error {
background-color: #FF5335;
}
.tx-error {
color: #FF5335;
}.bg-warning {
background-color: #F5A623;
}
.tx-warning {
color: #F5A623;
}Hausfarbe
Unser typisches SÜDKURIER-Blau wird vor allem als Schmuckfarbe verwendet. Das heißt für punktuelle Hervorhebungen, Lenkung des Nutzers, Call-to-Actions und ähnliches. Angelehnt an das Design der Zeitung, dominiert unser Blau niemals die Stimmung einer Seite.
Texte
Unsere Texte sind stets dunkelgrau, Schwarz wird im Design nicht verwendet. Einzelne Textstellen können blau hervorgehoben werden. Wenn Text im Negativ (z.B. auf Dunkelgrau oder Blau) ist dieser stets weiß.
Hintergründe
In unserem Design dominiert Weiß als Hintergrundfarbe. Bei Formular- und Login-Screens können hellgraue Hintergründe eingesetzt werden, um Formularfelder weiß zu halten.
Buttons
Die Farben der Buttons unterscheiden sich nach primärer und sekundärer Aktion. Für den Primär-Button verwenden wir das ausdrucksstarke SÜDKURIER-Blau, während der Sekundär-Button einen hellgrauen Hintergrund hat.
Rahmen & Linien
Rahmen und Linien geben unserem Design mehr Struktur und sind besonders wichtig für Header, Leisten und Formularfelder. Sie sollten stehts dünn und solid sein; mögliche Strichstärken sind 1 Pixel oder 2 Pixel.
Handshake-Boxen
Für die direkte Ansprache des Nutzers in redaktionellen Umfeldern verwenden wir sogenannte Handshake-Boxen mit einer besonderen Champagner-Farbe.
Sonderfarben
Sonderfarben werden vor allem in der Verkaufskommunikation verwendet, zum Beispiel für Störer, Badges oder besondere Buttons. In den meisten Fällen werden diese füllend eingesetzt.
Success & Error
Grün, Rot und Geld geben Nutzer eine klares visuelles Feedback, vor allem in Kombination mit passenden Icons und Text. Können füllend oder als Textfarbe eingesetzt werden.
Farben Redaktion
Eine gute Auswahl an Farben spielt auch in der redaktionellen Verwendung eine wichtige Rolle. Deshalb gibt es diese Palette zur Verwendung in Online-Grafiken, Thumbs, Illustrationen und Diagrammen.
Parteifarben
Bei Darstellung von Parteien in Grafiken und Diagrammen werden diese durch die jeweilige Parteifarbe repräsentiert. Diese wurden, der Einheitlichkeit halber, fest definiert.