Brand Guideline April 2025
Demo Logo Light

Farben

Primäre Farbpalette

Die konsistente Verwendung von Farben ist entscheidend für einen wirksamen Wiedererkennungswert der Marke.
Die Marke sollte immer in einer der Farben auf dieser Seite dargestellt werden, abgesehen von spezifischen Empfehlungen in diesem Leitfaden.

Andere/unautorisierten Farben sollen nicht verwendet werden.

Demo Red
HEX #e22935
RGB 226, 41, 53
CMYK 2, 93, 76, 0
Demo Wine Red
HEX #370808
RGB 55, 8, 8
CMYK 52, 92, 71, 79
Demo Grey
HEX #aaaaaa
RGB 170, 170, 170
CMYK 36, 27, 28, 7
Demo White
HEX #ffffff
RGB 255, 255, 255
CMYK 0, 0, 0, 0

Farbtöne

Die Verwendung der primären Farbpalette ohne Veränderung wird bevorzugt, aber manche Situationen erfordern die Verwendung von
Farbabstufungen, insbesondere im Internet.

Wenn ein Nutzer beispielsweise mit dem Mauszeiger über einen Button auf der Webseite fährt, kann eine Farbänderung helfen die Aktion sichtbar zu machen.

Light 20%
Light 40%
Light 60%
Light 80%
Original
Dark 80%
Dark 60%
Dark 40%
Dark 20%
Light 20%
Light 40%
Light 60%
Light 80%
Original
Dark 80%
Dark 60%
Dark 40%
Dark 20%

Farbverläufe

Farbverläufe erweitern die Markenfarben um dynamische Übergänge und schaffen visuelle Tiefe.
Sie sollten gezielt eingesetzt werden, um Inhalte hervorzuheben, ohne die Klarheit und Wiedererkennbarkeit der Marke zu beeinträchtigen.

Sekundäre Farbpalette

Die sekundäre Farbpalette ist so konzipiert, dass sie kreative Flexibilität bietet. Diese Farben sind komplementär zu den primären Farben und wurden ausgewählt, um Entwurfen Wärme und Energie zu verleihen.

Es ist nicht erforderlich, eine Farbe aus der sekundären Farbpalette zu verwenden.

HEX #cc0f13
RGB 204, 15, 19
CMYK 12, 100, 100, 3
HEX #ee7526
RGB 238, 117, 38
CMYK 0, 64, 90, 0
HEX #ffd602
RGB 255, 214, 2
CMYK 1, 14, 92, 0
HEX #5a9c3b
RGB 90, 156, 59
CMYK 70, 16, 96, 2
HEX #01549a
RGB 1, 84, 154
CMYK 96, 67, 8, 0
HEX #7b1c82
RGB 123, 28, 130
CMYK 64, 100, 1, 1

Neutrale Farbpalette

Unsere Grautöne bilden die Grundlage unserer Farbpalette und können für eine Vielzahl von Berührungspunkten verwendet werden. Verwenden Sie sie zusammen mit unseren Primär- und Sekundärfarben.

Grey 050
HEX #F3F3F3
RGB 243, 243, 243
CMYK 0, 0, 0, 5
Grey 100
HEX #E7E7E7
RGB 231, 231, 231
CMYK 0, 0, 0, 9
Grey 150
HEX #DBDBDB
RGB 219, 219, 219
CMYK 0, 0, 0, 14
Grey 200
HEX #D0D0D0
RGB 208, 208, 208
CMYK 0, 0, 0, 18
Grey 250
HEX #C4C4C4
RGB 196, 196, 196
CMYK 0, 0, 0, 23
Grey 300
HEX #B8B8B8
RGB 184, 184, 184
CMYK 0, 0, 0, 28
Grey 350
HEX #ACACAC
RGB 172, 172, 172
CMYK 0, 0, 0, 33
Grey 400
HEX #A0A0A0
RGB 160, 160, 160
CMYK 0, 0, 0, 37
Grey 450
HEX #949494
RGB 148, 148, 148
CMYK 0, 0, 0, 42
Grey 500
HEX #898989
RGB 137, 137, 137
CMYK 0, 0, 0, 46
Grey 550
HEX #7D7D7D
RGB 125, 125, 125
CMYK 0, 0, 0, 51
Grey 600
HEX #717171
RGB 113, 113, 113
CMYK 0, 0, 0, 56
Grey 650
HEX #656565
RGB 101, 101, 101
CMYK 0, 0, 0, 60
Grey 700
HEX #595959
RGB 89, 89, 89
CMYK 0, 0, 0, 65
Grey 750
HEX #4D4D4D
RGB 77, 77, 77
CMYK 0, 0, 0, 70
Grey 800
HEX #414141
RGB 65, 65, 65
CMYK 0, 0, 0, 75
Grey 850
HEX #363636
RGB 54, 54, 54
CMYK 0, 0, 0, 79
Grey 900
HEX #2A2A2A
RGB 42, 42, 42
CMYK 0, 0, 0, 84
Grey 950
HEX #1E1E1E
RGB 30, 30, 30
CMYK 0, 0, 0, 88

Farbexport

Lade die Palette in einem der beiden Formate herunter, um sie direkt in dein Projekt einzubinden – theme.json für die WordPress-Farbeinstellungen oder shades.css für den vollständigen Satz an Hell- und Dunkelabstufungen, die auf der Seite verwendet werden.

theme.json

Farbpalette für WordPress-Themes

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "demo-red",
                    "color": "#E22935",
                    "name": "Demo Red"
                },
                {
                    "slug": "demo-wine-red",
                    "color": "#370808",
                    "name": "Demo Wine Red"
                },
                {
                    "slug": "demo-grey",
                    "color": "#AAAAAA",
                    "name": "Demo Grey"
                },
                {
                    "slug": "demo-white",
                    "color": "#FFFFFF",
                    "name": "Demo White"
                },
                {
                    "slug": "secondary-0",
                    "color": "#CC0F13",
                    "name": "Secondary 1"
                },
                {
                    "slug": "secondary-1",
                    "color": "#EE7526",
                    "name": "Secondary 2"
                },
                {
                    "slug": "secondary-2",
                    "color": "#FFD602",
                    "name": "Secondary 3"
                },
                {
                    "slug": "secondary-3",
                    "color": "#5A9C3B",
                    "name": "Secondary 4"
                },
                {
                    "slug": "secondary-4",
                    "color": "#01549A",
                    "name": "Secondary 5"
                },
                {
                    "slug": "secondary-5",
                    "color": "#7B1C82",
                    "name": "Secondary 6"
                },
                {
                    "slug": "white",
                    "color": "#FFFFFF",
                    "name": "White"
                },
                {
                    "slug": "grey-050",
                    "color": "light-dark(#F3F3F3, #1E1E1E)",
                    "name": "Grey 050"
                },
                {
                    "slug": "grey-100",
                    "color": "light-dark(#E7E7E7, #2A2A2A)",
                    "name": "Grey 100"
                },
                {
                    "slug": "grey-150",
                    "color": "light-dark(#DBDBDB, #363636)",
                    "name": "Grey 150"
                },
                {
                    "slug": "grey-200",
                    "color": "light-dark(#D0D0D0, #414141)",
                    "name": "Grey 200"
                },
                {
                    "slug": "grey-250",
                    "color": "light-dark(#C4C4C4, #4D4D4D)",
                    "name": "Grey 250"
                },
                {
                    "slug": "grey-300",
                    "color": "light-dark(#B8B8B8, #595959)",
                    "name": "Grey 300"
                },
                {
                    "slug": "grey-350",
                    "color": "light-dark(#ACACAC, #656565)",
                    "name": "Grey 350"
                },
                {
                    "slug": "grey-400",
                    "color": "light-dark(#A0A0A0, #717171)",
                    "name": "Grey 400"
                },
                {
                    "slug": "grey-450",
                    "color": "light-dark(#949494, #7D7D7D)",
                    "name": "Grey 450"
                },
                {
                    "slug": "grey-500",
                    "color": "#898989",
                    "name": "Grey 500"
                },
                {
                    "slug": "grey-550",
                    "color": "light-dark(#7D7D7D, #949494)",
                    "name": "Grey 550"
                },
                {
                    "slug": "grey-600",
                    "color": "light-dark(#717171, #A0A0A0)",
                    "name": "Grey 600"
                },
                {
                    "slug": "grey-650",
                    "color": "light-dark(#656565, #ACACAC)",
                    "name": "Grey 650"
                },
                {
                    "slug": "grey-700",
                    "color": "light-dark(#595959, #B8B8B8)",
                    "name": "Grey 700"
                },
                {
                    "slug": "grey-750",
                    "color": "light-dark(#4D4D4D, #C4C4C4)",
                    "name": "Grey 750"
                },
                {
                    "slug": "grey-800",
                    "color": "light-dark(#414141, #D0D0D0)",
                    "name": "Grey 800"
                },
                {
                    "slug": "grey-850",
                    "color": "light-dark(#363636, #DBDBDB)",
                    "name": "Grey 850"
                },
                {
                    "slug": "grey-900",
                    "color": "light-dark(#2A2A2A, #E7E7E7)",
                    "name": "Grey 900"
                },
                {
                    "slug": "grey-950",
                    "color": "light-dark(#1E1E1E, #F3F3F3)",
                    "name": "Grey 950"
                },
                {
                    "slug": "black",
                    "color": "#121212",
                    "name": "Black"
                }
            ],
            "gradients": []
        }
    }
}
shades.css

CSS-Variablen für „Tint“ und „Shade“

:root {
  --color--demo-red--light--10: color-mix(in srgb, var(--wp--preset--color--demo-red) 10%, white);
  --color--demo-red--light--20: color-mix(in srgb, var(--wp--preset--color--demo-red) 20%, white);
  --color--demo-red--light--30: color-mix(in srgb, var(--wp--preset--color--demo-red) 30%, white);
  --color--demo-red--light--40: color-mix(in srgb, var(--wp--preset--color--demo-red) 40%, white);
  --color--demo-red--light--50: color-mix(in srgb, var(--wp--preset--color--demo-red) 50%, white);
  --color--demo-red--light--60: color-mix(in srgb, var(--wp--preset--color--demo-red) 60%, white);
  --color--demo-red--light--70: color-mix(in srgb, var(--wp--preset--color--demo-red) 70%, white);
  --color--demo-red--light--80: color-mix(in srgb, var(--wp--preset--color--demo-red) 80%, white);
  --color--demo-red--light--90: color-mix(in srgb, var(--wp--preset--color--demo-red) 90%, white);
  --color--demo-red--dark--10: color-mix(in srgb, var(--wp--preset--color--demo-red) 10%, black);
  --color--demo-red--dark--20: color-mix(in srgb, var(--wp--preset--color--demo-red) 20%, black);
  --color--demo-red--dark--30: color-mix(in srgb, var(--wp--preset--color--demo-red) 30%, black);
  --color--demo-red--dark--40: color-mix(in srgb, var(--wp--preset--color--demo-red) 40%, black);
  --color--demo-red--dark--50: color-mix(in srgb, var(--wp--preset--color--demo-red) 50%, black);
  --color--demo-red--dark--60: color-mix(in srgb, var(--wp--preset--color--demo-red) 60%, black);
  --color--demo-red--dark--70: color-mix(in srgb, var(--wp--preset--color--demo-red) 70%, black);
  --color--demo-red--dark--80: color-mix(in srgb, var(--wp--preset--color--demo-red) 80%, black);
  --color--demo-red--dark--90: color-mix(in srgb, var(--wp--preset--color--demo-red) 90%, black);
  --color--demo-wine-red--light--10: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 10%, white);
  --color--demo-wine-red--light--20: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 20%, white);
  --color--demo-wine-red--light--30: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 30%, white);
  --color--demo-wine-red--light--40: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 40%, white);
  --color--demo-wine-red--light--50: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 50%, white);
  --color--demo-wine-red--light--60: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 60%, white);
  --color--demo-wine-red--light--70: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 70%, white);
  --color--demo-wine-red--light--80: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 80%, white);
  --color--demo-wine-red--light--90: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 90%, white);
  --color--demo-wine-red--dark--10: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 10%, black);
  --color--demo-wine-red--dark--20: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 20%, black);
  --color--demo-wine-red--dark--30: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 30%, black);
  --color--demo-wine-red--dark--40: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 40%, black);
  --color--demo-wine-red--dark--50: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 50%, black);
  --color--demo-wine-red--dark--60: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 60%, black);
  --color--demo-wine-red--dark--70: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 70%, black);
  --color--demo-wine-red--dark--80: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 80%, black);
  --color--demo-wine-red--dark--90: color-mix(in srgb, var(--wp--preset--color--demo-wine-red) 90%, black);
}
Anmeldung erforderlich