{"_path":"/guidelines-internal/design-ui-color-styles","_draft":false,"_partial":false,"_empty":false,"title":"Design: UI Color-Styles","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"design-ui-color-styles"},"children":[{"type":"text","value":"Design: UI Color-Styles"}]},{"type":"element","tag":"h2","props":{"id":"allgemein"},"children":[{"type":"text","value":"Allgemein"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alle Farben, die in einem UI-Design angewendet werden können "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN"}]}]},{"type":"text","value":" in einer Farbpalette = Color-Styles definiert und angelegt werden."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alle Farb-Zuweisungen in einem Design-Dokument (z. B. Figma) "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN"}]}]},{"type":"text","value":" über die Auswahl eines Color-Styles geschehen."}]}]},{"type":"element","tag":"h2","props":{"id":"umfang"},"children":[{"type":"text","value":"Umfang"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Color-Styles "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLLTEN"}]}]},{"type":"text","value":" folgende Farben beinhalten"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"die Farben der jeweiligen Corporate Identity (CI)."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"jeweils eine helle und eine dunkle Abstufung. Bei Bedarf kann es weitere Abstufungen geben."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Basisfarben: schwarz und weiß"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ampelfarben für System-Feedback"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Für komplexe App-Interfaces, bei denen die Farben vorranging zur Strukturierung und Information eingesetzt werden "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"KANN"}]}]},{"type":"text","value":" zusätzlich zu oder anstatt der CI-Farben mit einem Farbsystem nach Farbnamen gearbeitet werden."}]},{"type":"element","tag":"h2","props":{"id":"naming"},"children":[{"type":"text","value":"Naming"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"ci-farben"},"children":[{"type":"text","value":"CI-Farben"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Von einer Benennung anhand von Farbnamen (z.B. "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"green"}]},{"type":"text","value":") ist abzusehen, da sich die Farben der CI im Laufe eines Projektes ändern können. Somit wäre beispielsweise die Benennung einer grünen Primärfarbe als “green” nicht mehr angemessen, wenn sie durch rot ersetzt wird."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die CI-Farben und Ihre Abstufungen SOLLTEN daher anhand ihere Präsenz im CI mit folgenden Namen benannt werden:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"primary"}]},{"type":"text","value":" = CI Primärfarbe"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary"}]},{"type":"text","value":" = CI Sekundärfarbe"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tertiary"}]},{"type":"text","value":" = CI Tertiärfarbe"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sollten in der Corporate Identity mehr als drei Farben (mit Ausnahme von schwarz und weiß) verwendet werden, kann in Betracht gezogen werden, die Color Styles anhand der Farbnamen zu benennen (z.B. "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"green"}]},{"type":"text","value":"). Dafür sollte sichergestellt werden, dass sich die Farben selbst nicht mehr ändern."}]},{"type":"element","tag":"h4","props":{"id":"abstufungen"},"children":[{"type":"text","value":"Abstufungen"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Namen der Abstufungen "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLLTEN"}]}]},{"type":"text","value":" aus dem CI-Namen mit dem Zusatz "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-dark"}]},{"type":"text","value":" und "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-light"}]},{"type":"text","value":" bestehen:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"z .B."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-light"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-dark"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sollte es bei den Farben mehr als zwei Abstufungen geben, "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"KANN"}]}]},{"type":"text","value":" alternativ mit den Namenszusätzen "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-100"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-200"}]},{"type":"text","value":", …, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-900"}]},{"type":"text","value":" gearbeitet werden."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"z .B."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-100"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-500"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-900"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"basics"},"children":[{"type":"text","value":"Basics"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"black"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"white"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"ampelfarben"},"children":[{"type":"text","value":"Ampelfarben"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"success"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"warning"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"error"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"farbsysteme-nach-farbnamen"},"children":[{"type":"text","value":"Farbsysteme nach Farbnamen"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"z. B."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"red-100"}]},{"type":"text","value":", …, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"red-900"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blue-100"}]},{"type":"text","value":", …, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blue-900"}]}]}]}]},"public":true,"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"design-ui-color-styles"},"children":[{"type":"text","value":"Design: UI Color-Styles"}]},{"type":"element","tag":"h2","props":{"id":"allgemein"},"children":[{"type":"text","value":"Allgemein"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alle Farben, die in einem UI-Design angewendet werden können "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN"}]}]},{"type":"text","value":" in einer Farbpalette = Color-Styles definiert und angelegt werden."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alle Farb-Zuweisungen in einem Design-Dokument (z. B. Figma) "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN"}]}]},{"type":"text","value":" über die Auswahl eines Color-Styles geschehen."}]}]},{"type":"element","tag":"h2","props":{"id":"umfang"},"children":[{"type":"text","value":"Umfang"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Color-Styles "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLLTEN"}]}]},{"type":"text","value":" folgende Farben beinhalten"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"die Farben der jeweiligen Corporate Identity (CI)."},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"jeweils eine helle und eine dunkle Abstufung. Bei Bedarf kann es weitere Abstufungen geben."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Basisfarben: schwarz und weiß"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ampelfarben für System-Feedback"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Für komplexe App-Interfaces, bei denen die Farben vorranging zur Strukturierung und Information eingesetzt werden "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"KANN"}]}]},{"type":"text","value":" zusätzlich zu oder anstatt der CI-Farben mit einem Farbsystem nach Farbnamen gearbeitet werden."}]},{"type":"element","tag":"h2","props":{"id":"naming"},"children":[{"type":"text","value":"Naming"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"ci-farben"},"children":[{"type":"text","value":"CI-Farben"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Von einer Benennung anhand von Farbnamen (z.B. "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"green"}]},{"type":"text","value":") ist abzusehen, da sich die Farben der CI im Laufe eines Projektes ändern können. Somit wäre beispielsweise die Benennung einer grünen Primärfarbe als “green” nicht mehr angemessen, wenn sie durch rot ersetzt wird."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die CI-Farben und Ihre Abstufungen SOLLTEN daher anhand ihere Präsenz im CI mit folgenden Namen benannt werden:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"primary"}]},{"type":"text","value":" = CI Primärfarbe"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary"}]},{"type":"text","value":" = CI Sekundärfarbe"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"tertiary"}]},{"type":"text","value":" = CI Tertiärfarbe"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sollten in der Corporate Identity mehr als drei Farben (mit Ausnahme von schwarz und weiß) verwendet werden, kann in Betracht gezogen werden, die Color Styles anhand der Farbnamen zu benennen (z.B. "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"green"}]},{"type":"text","value":"). Dafür sollte sichergestellt werden, dass sich die Farben selbst nicht mehr ändern."}]},{"type":"element","tag":"h4","props":{"id":"abstufungen"},"children":[{"type":"text","value":"Abstufungen"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Namen der Abstufungen "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLLTEN"}]}]},{"type":"text","value":" aus dem CI-Namen mit dem Zusatz "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-dark"}]},{"type":"text","value":" und "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-light"}]},{"type":"text","value":" bestehen:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"z .B."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-light"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-dark"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sollte es bei den Farben mehr als zwei Abstufungen geben, "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"KANN"}]}]},{"type":"text","value":" alternativ mit den Namenszusätzen "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-100"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-200"}]},{"type":"text","value":", …, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"-900"}]},{"type":"text","value":" gearbeitet werden."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"z .B."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-100"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-500"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"secondary-900"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"basics"},"children":[{"type":"text","value":"Basics"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"black"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"white"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"ampelfarben"},"children":[{"type":"text","value":"Ampelfarben"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"success"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"warning"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"error"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"farbsysteme-nach-farbnamen"},"children":[{"type":"text","value":"Farbsysteme nach Farbnamen"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"z. B."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"red-100"}]},{"type":"text","value":", …, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"red-900"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blue-100"}]},{"type":"text","value":", …, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"blue-900"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"allgemein","depth":2,"text":"Allgemein"},{"id":"umfang","depth":2,"text":"Umfang"},{"id":"naming","depth":2,"text":"Naming","children":[{"id":"ci-farben","depth":3,"text":"CI-Farben"},{"id":"basics","depth":3,"text":"Basics"},{"id":"ampelfarben","depth":3,"text":"Ampelfarben"},{"id":"farbsysteme-nach-farbnamen","depth":3,"text":"Farbsysteme nach Farbnamen"}]}]}},"_type":"markdown","_id":"content:06.guidelines-internal:design-ui-color-styles.md","_source":"content","_file":"06.guidelines-internal/design-ui-color-styles.md","_extension":"md"}