{"id":16607,"date":"2023-05-26T13:09:13","date_gmt":"2023-05-26T11:09:13","guid":{"rendered":"https:\/\/design-guidelines.burckhardt.swiss\/elemente\/colors\/"},"modified":"2023-07-21T15:01:15","modified_gmt":"2023-07-21T13:01:15","slug":"colors","status":"publish","type":"post","link":"https:\/\/design-guidelines.burckhardt.swiss\/en\/basic-elements\/colors\/","title":{"rendered":"Colors"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
\n
\n
\n

Colors<\/h1>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n

Primary colors<\/h3>\n\n\n\n

The colors Black and White are Burckhardt\u2019s primary colors and define the look.<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Secondary colors\/Accent colors<\/h3>\n\n\n\n

The primary colors are supplemented by
the secondary color Offwhite and the
accent color Red.<\/p>\n<\/div>\n\n\n\n

\n
\n
\n
\"\"
Secondary colors<\/span><\/figcaption><\/figure>\n\n
\"\"
Accent colors<\/span><\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Gradations<\/h3>\n\n\n\n

The defined gradations of the color Offwhite can be used as a supplementary color within infographics.<\/p>\n<\/div>\n\n\n\n

\"\"
Gradations for infographics<\/span><\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

How to use<\/h2>\n\n\n\n
\n
\n

Backgrounds<\/h3>\n\n\n\n

The Burckhardt colors White and Offwhite can be used as background colors. Black is used as a background color more rarely to grab attention. <\/p>\n\n\n\n

Text color<\/h3>\n\n\n\n

Black is used as the text color on light backgrounds; White is used on dark and black backgrounds. Red can additionally be used to highlight short text elements such as section headings and links. <\/p>\n<\/div>\n\n\n\n

\n
\"\"
White background with black text color (example: website)<\/span><\/figcaption><\/figure>\n\n
\"\"
Offwhite background with black text color (example: website)<\/span><\/figcaption><\/figure>\n\n
\"\"
Black background with white text color (example: notebook)<\/span><\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Highlighting using red underlining<\/h3>\n\n\n\n

To highlight individual words or groups of words within headings or quotations,
these can be underlined in Red
(more under line<\/a>). <\/p>\n<\/div>\n\n\n\n

\n
\"\"
Highlighting with red underlining(example: website)<\/span><\/figcaption><\/figure>\n\n
\"\"
Highlighting with red text color (example: category line on the website)<\/span><\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Other topics<\/h2>\n\n\n\n
\n
\n

\n Logo\n <\/h3>\n \n \"\"\n <\/a>\n <\/div>\n
\n

\n Graphics\n <\/h3>\n \n \"\"\n <\/a>\n <\/div>\n
\n

\n Graphical User Interface (GUI Kit)\n <\/h3>\n \n \"\"\n <\/a>\n <\/div>\n <\/div>\n\n
\n \n