Farben

Design
Entwicklung
Hausfarbe
.bg-blue
#006AB2
.bg-blue {
    background-color: #006AB2;
}
Texte
.tx-gray-dark
#4b4b4d
.tx-gray-dark {
    color: #4B4B4D;
}
.tx-gray-light
#878787
.tx-gray-light {
    color: #878787;
}
.tx-blue
#006AB2
.tx-blue {
    color: #006AB;
}
.tx-white
#ffffff
.tx-white {
    color: #FFFFFF;
}
Hintergründe
.bg-white
#ffffff
.bg-white {
    background-color: #FFFFFF;
}
.bg-gray-light
#f7f7f7
.bg-gray-light {
    background-color: #F7F7F7;
}
Buttons
.bg-blue
#006ab2
.bg-blue {
    background-color: #006AB2;
}
.bg-blue-hover
#2881bf
.bg-blue-hover {
    background-color: #2881BF;
}
.bg-gray-light
#f7f7f7
.bg-gray-light {
    background-color: #F7F7F7;
}
.bg-blue-light
#7fb4d9
.bg-blue-light {
    background-color: #7FB4D9;
}
Rahmen & Linien
.bg-gray
#DBDBDB
.bg-gray {
    border: 1px solid #DBDBDB;
}
Handshake-Boxen
.bg-champagne
#FFF7EA
.bg-champagne {
    background-color: #FFF7EA;
}
Sonderfarben
.bg-red
#c9242c
.bg-red {
    background-color: #C9242C;
}
.bg-red-hover
#d1464d
.bg-red-hover {
    background-color: #D1464D;
}
.bg-green
#79A000
.bg-green {
    background-color: #79A000;
}
.bg-green-hover
#8EAF28
.bg-green-hover {
    background-color: #8EAF28;
}
Success & Error
.bg-success, .tx-success
#4BCA81
.bg-success {
    background-color: #4BCA81;
}

.tx-success {
    color: #4BCA81;
}
.bg-error, .tx-error
#FF5335
.bg-error {
    background-color: #FF5335;
}

.tx-error {
    color: #FF5335;
}
.bg-warning, .tx-warning
#F5A623
.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.

SÜDKURIER-Blau
#006ab2
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ß.

Anthrazit
#4b4b4d
Dunkelgrau
#878787
SÜDKURIER-Blau
#006ab2
Weiß
#FFFFFF
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.

Weiß
#FFFFFF
Hellgrau
#f7f7f7
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.

Primary
#006AB2
Hover
#2881BF
Secondary
#F7f7f7
Disabled
#7fb4d9
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.

Grau
#dbdbdb
Handshake-Boxen

Für die direkte Ansprache des Nutzers in redaktionellen Umfeldern verwenden wir sogenannte Handshake-Boxen mit einer besonderen Champagner-Farbe.

Champagner
#fff7ea
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.

Rot
#c9242c
Hover
#d1464d
Grün
#79a000
Hover
#8eaf28
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.

Success
#4bca81
Error
#FF5335
Text Hier
#f5a623
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.

Gold
#d6ae00
#F8EDD2
Blau
#006ab2
#66a5d2
#99c3e1
#cce1f0
Lila
#896CAB
#a791c0
#c4b5d5
#e2daea
Türkis
#339cab
#66b5c0
#99cdd5
#cce6ea
Dunkelgrün
#33a173
#66b896
#99d0b9
#cce7dc
Hellgrün
#aac464
#bfd38b
#d5e1b1
#eaf0d8
Orange
#ec9637
#f1b069
#f5cb9b
#fae5cd
Rot
#d14849
#dc7676
#e8a3a4
#f3d1d1
Rot
#aa9989
Blau
#bfb3a7
Text Hier
#d5ccc4
Parteifarben

Bei Darstellung von Parteien in Grafiken und Diagrammen werden diese durch die jeweilige Parteifarbe repräsentiert. Diese wurden, der Einheitlichkeit halber, fest definiert.

CDU
#4e4842
SPD
#aa2926
Grüne
#328556
FDP
#e9a007
AfD
#0092c7
Linke
#655296
Sonstige
#a4a2a1