-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolors-sustainable.html
36 lines (32 loc) · 19.2 KB
/
colors-sustainable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html><html lang="de"><head><title>Colors-Sustainable | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="Colors-SustainableDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.decolors-sustainable.html"><meta property="og:title" content="Colors-Sustainable"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle-sustainable.css"><link rel="stylesheet" href="assets/css/ide-editmode.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header></header><main><div id="intro" class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-component-header"><div class="c-component-header__action-wrapper"><div class="c-component-header__cta-wrapper"> <a class="c-cta c-cta--small" href="colors.html"><span class="c-cta__text">Main</span></a> <a class="c-cta c-cta--small is-active" href="colors-sustainable.html"><span class="c-cta__text">Sustainable</span></a> <a class="c-cta c-cta--small" href="colors-dynamic.html"><span class="c-cta__text">Dynamic</span></a> <a class="c-cta c-cta--small" href="colors-professional.html"><span class="c-cta__text">Professional</span></a></div></div></div></div></div></div></div><div id="figma" class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text c-markdown"><h1>Colors</h1><h2>Form Follows Function oder Color Follows Function</h2><h3>Markenfarbe vs. Akzentfarbe: Klickbare Elemente sollten sich in der Farbgebung klar abgrenzen.</h3><p>Für ein optimales Nutzererlebnis (engl. User Experience = UX), ist es zwingend notwendig, dass der Nutzer interaktive, also klickbare Elemente intuitiv erkennen kann.</p><p>Eine Website bspw. sollte ein klares Ziel verfolgen – z.B., dass der Nutzer einen Stromvertrag abschließt. Das klickbare Element, also der Button, der den Nutzer zu dieser Aktion führt, sollte dabei klar im Fokus stehen. Hierbei spielt die Farbwahl eine wichtige Rolle: Eine klare Unterscheidung zwischen Marken- und Akzentfarben ist essentiell. Akzentfarben müssen dabei in erster Linie funktional, nicht unbedingt markenbildend, sein. Im besten Fall sollte es nur eine klare Akzentfarbe geben, die bei Bedarf um Funktionsfarben erweitert wird.</p><h3>Digitale Barrierefreiheit: Zugänglichkeit für alle Bürger:innen in Münster</h3><p>Wie in dem Kapitel "Accessibility" beschrieben, achten wir bei unserem Design System auf genügend hohe Farbkontraste.</p><h3>All diese Anforderungen löst unser Design System, mit Hilfe unserer für den digitalen Einsatz optimierten Farbpalette und der Implementierung von Themes.</h3></div></div></div><div class="g-row mt-1"><div class="g-col-12"><iframe style="border: 0; width: 100%" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FwLXdixPS3eSOEmOtvxj6Jg%2FSWMS-DDS%3Fnode-id%3D354%253A8801" allowfullscreen></iframe></div></div></div></div><div id="color-primary" class="c-section pt-2"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text"><h2>Primary</h2></div></div></div><div class="g-row"><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-primary"> <span>Primary</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-primary-hover"> <span>Primary</span><br> <span><strong>Hover</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-primary-focus"> <span>Primary</span><br> <span><strong>Focus</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div></div></div></div><div id="color-secondary" class="c-section pt-2"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text"><h2>Secondary</h2></div></div></div><div class="g-row"><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--light bg-secondary"> <span>Secondary</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--light bg-secondary-focus"> <span>Secondary</span><br> <span><strong>Focus</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div></div></div></div><div id="color-special" class="c-section pt-2"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text"><h2>Benachrichtung</h2></div></div></div><div class="g-row"><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--light bg-highlight"> <span>Korall</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div></div></div></div><div id="color-special" class="c-section pt-2"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text"><h2>Special</h2></div></div></div><div class="g-row"><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-success"> <span>Success</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-success-soft"> <span>Success</span><br> <span><strong>Soft</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-warning"> <span>Warning</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-warning-soft"> <span>Warning</span><br> <span><strong>Soft</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div></div><div class="g-row"><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-danger"> <span>Danger</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-danger-soft"> <span>Danger</span><br> <span><strong>Soft</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-info"> <span>Info</span><br> <span><strong>Hue</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div><div class="g-col-12 g-col-mp-6 g-col-ml-4 g-col-tp-3 g-col-tl-2 mt-1 c-text--center"><div class="ide-color-circle ide-color-circle--dark bg-info-soft"> <span>Info</span><br> <span><strong>Soft</strong></span></div><div class="c-text"><p> <b>HEX:</b><span class="ide-color-hex"></span><br> <b>RGB:</b><span class="ide-color-rgb"></span></p></div></div></div></div></div><div id="color-backgrounds" class="c-section pt-2"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text"><h2>Background</h2></div></div></div></div></div><div class="c-section bg-shade"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-10 g-offset-tp-1 g-col-tl-8 g-offset-tl-2"><div class="c-text p-2"><p><strong>bg-shade</strong> | Link: <a href="#">Commodo consequat</a></p></div></div></div></div></div><div class="c-section bg-white"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-10 g-offset-tp-1 g-col-tl-8 g-offset-tl-2"><div class="c-text p-2"><p><strong>bg-white</strong> | Link: <a href="#">Commodo consequat</a></p></div></div></div></div></div><div class="c-section bg-light-green"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-10 g-offset-tp-1 g-col-tl-8 g-offset-tl-2"><div class="c-text p-2"><p><strong>bg-light-green</strong> | Link: <a href="#">Commodo consequat</a></p></div></div></div></div></div><script>
let colors = document.getElementsByClassName('ide-color-circle')
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
for (let i = 0; i < colors.length; i++) {
let styles = window.getComputedStyle(colors[i]);
let rgb = styles.backgroundColor;
let destRGB = colors[i].nextElementSibling.getElementsByClassName('ide-color-rgb')[0];
let destHEX = colors[i].nextElementSibling.getElementsByClassName('ide-color-hex')[0];
let hex = rgb2hex(rgb);
destRGB.innerHTML = rgb;
destHEX.innerHTML = hex.toUpperCase();
}
</script><aside class="sidebar"><nav class="c-side-nav"> <button class="c-side-nav__nav-toggle" id="c-side-nav__toggle"><span class="c-side-nav__toggle-icon"></span></button><div class="c-side-nav__picture-wrapper"><a class="c-side-nav__picture-link" href="/"><div class="c-picture"> <img alt="Logo" src="assets/img/logo.svg"> <span class="c-badge" style="
position: absolute;
left: 101px;
bottom: -10px;
">v1.0.0</span></div></a><div class="c-cta-group"> <a class="c-cta" href="https://github.com/wirDesign-communication-AG/stadtwerke-muenster-design-system" target="_blank"><span class="c-cta__text">GitHub</span></a> <a class="c-cta" href="https://www.figma.com/file/wLXdixPS3eSOEmOtvxj6Jg/SWMS-?node-id=0%3A1" target="_blank"><span class="c-cta__text">Figma</span></a></div><div class="c-cta-group c-filter"><span class="c-input-wrapper " data-action="wrapper"><div class="c-input__container"> <input autofocus class="c-input c-filter__input" type="search" name="input" id="input" aria-label="Componentenfilter. Bitte Text eintragen." placeholder="Filter Components..."></div></span></div></div><div class="c-side-nav__nav-wrapper"><ul><li><p>Introduction</p><ul><li> <a class="" href="index.html" title="Overview">Overview</a></li><li> <a class="" href="getting-started.html" title="Getting Started">Getting Started</a></li><li> <a class="" href="accessibility.html" title="Accessibility">Accessibility</a></li><li> <a class="" href="principles.html" title="Principles">Principles</a></li><li> <a class="" href="theming.html" title="Theming">Theming</a></li></ul></li><li><p>Basics</p><ul><li> <a class="" href="animation.html" title="Animation">Animation</a></li><li> <a class="is-active" href="colors-sustainable.html" title="Colors">Colors</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-primary" data-anchor="color-primary" title="Primary">Primary</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-secondary" data-anchor="color-secondary" title="Secondary">Secondary</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-tertiary" data-anchor="color-tertiary" title="Tertiary">Tertiary</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-special" data-anchor="color-special" title="Special">Special</a></li><li> <a class="c-side-nav__section-link" href="/colors-sustainable.html#color-backgrounds" data-anchor="color-backgrounds" title="Backgrounds">Backgrounds</a></li></ul></li><li> <a class="" href="graphics.html" title="Graphics">Graphics</a></li><li> <a class="" href="layout.html" title="Layout">Layout</a></li><li> <a class="" href="icons.html" title="Icons">Icons</a></li><li> <a class="" href="logo.html" title="Logo">Logo</a></li><li> <a class="" href="spacing.html" title="Spacing">Spacing</a></li><li> <a class="" href="typography.html" title="Typography">Typography</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/typography.html#typo-intro" data-anchor="typo-intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-headlines" data-anchor="typo-headlines" title="Headline">Headline</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-text" data-anchor="typo-text" title="Text">Text</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-quote" data-anchor="typo-quote" title="Quote">Quote</a></li></ul></li></ul></li><li><p>Form-Elements</p><ul><li> <a class="" href="checkbox.html" title="Checkbox">Checkbox</a></li><li> <a class="" href="date-picker.html" title="Date-Picker">Date-Picker</a></li><li> <a class="" href="dropdown.html" title="Dropdown">Dropdown</a></li><li> <a class="" href="file-upload.html" title="File-Upload">File-Upload</a></li><li> <a class="" href="form.html" title="Form">Form</a></li><li> <a class="" href="input.html" title="Input">Input</a></li><li> <a class="" href="radio-button.html" title="Radio-Button">Radio-Button</a></li><li> <a class="" href="switch.html" title="Switch">Switch</a></li><li> <a class="" href="toggle-button.html" title="Toggle-Button">Toggle-Button</a></li><li> <a class="" href="tooltip.html" title="Tooltip">Tooltip</a></li></ul></li><li><p>Basic Components</p><ul><li> <a class="" href="badge.html" title="Badge">Badge</a></li><li> <a class="" href="button-sustainable.html" title="Button">Button</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/button-sustainable.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/button-sustainable.html#standard" data-anchor="standard" title="Variationen">Variationen</a></li><li> <a class="c-side-nav__section-link" href="/button-sustainable.html#cta-group" data-anchor="cta-group" title="Gruppe">Gruppe</a></li></ul></li><li> <a class="" href="chips-sustainable.html" title="Chips">Chips</a></li><li> <a class="" href="image.html" title="Image">Image</a></li><li> <a class="" href="loader.html" title="Loader">Loader</a></li><li> <a class="" href="lottie-animation.html" title="Lottie-Animation">Lottie-Animation</a></li><li> <a class="" href="messages.html" title="Messages">Messages</a></li><li> <a class="" href="quote-sustainable.html" title="Quote">Quote</a></li><li> <a class="" href="text.html" title="Text">Text</a></li><li> <a class="" href="video.html" title="Video">Video</a></li></ul></li><li><p>Modules</p><ul><li> <a class="" href="accordion.html" title="Accordion">Accordion</a></li><li> <a class="" href="card-sustainable.html" title="Card">Card</a></li><li> <a class="" href="carousel.html" title="Carousel">Carousel</a></li><li> <a class="" href="hero-sustainable.html" title="Hero">Hero</a></li><li> <a class="" href="hero-carousel.html" title="Hero-Carousel">Hero-Carousel</a></li><li> <a class="" href="navigation.html" title="Navigation">Navigation</a></li><li> <a class="" href="tabs.html" title="Tabs">Tabs</a></li><li> <a class="" href="text-picture.html" title="Text-Picture">Text-Picture</a></li></ul></li></ul></div></nav></aside></main><footer><div class="c-footer p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-footer__nav-wrapper"><nav class="c-footer__nav"><ul class="c-footer__nav-list"><li class="c-footer__nav-list-item"> <a href="impressum.html" title="Impressum">Impressum</a></li><li class="c-footer__nav-list-item"> <a href="datenschutz.html" title="Datenschutz">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>