The color concept.
Maintaining consistent and engaging digital experiences within Germanedge, whether applications or experiences, requires a sensitive use of color. The following color concepts form the basis for our efforts to create a unique user interface design. The color world of our user interface "Inspire" is clean and reduced.
The colour system is based on 2 main colours, the brand colour and the primary colour "Tokyo". The two colours together, because they are complementary to each other, result in a rounded colour picture. In addition, various alarm colours are added, but it should be noted that the alarm colours never resemble the brand- and primary colours.
The color palette of Germanedge is basically divided into two different themes. The "Daylight" and "Nightshift" theme. The color palette of each theme brings a uniform and recognizable consistency to our interface.
The anatomy of the Germanedge colours.
As the basis for both themes, the neutral "Tokyo" colour family dominates, separating the contents with subtle nuances.
It is important that the nuances do not run into each other. The yellow brand colour is the primary action colour for all Germanedge products and experiences. Additional colours are used sparingly and purposefully.
The themes.
The themes serve as a framework for colour worlds within Inspire, with each theme based on a specific primary background colour. There are two standard themes. The Daylight theme "Astronaut" and the Nightshift theme"Tokyo at Night".
Highest Contrast
WCAG AA
WEB AIM
Usage of the Astronaut Theme Colors
(tbd)
Usage of Tokyo Theme Colors
(tbd)
| #id | Role | Value | |
|---|---|---|---|
| ? | Default page background | Tokyo 100 #202026 |
|
| ? | Default boardlet background | Tokyo 90 #292930 |
|
| Tone | Name | Hexadecimal | SCSS variable name | Usage |
|---|---|---|---|---|
| Highlight palette | ||||
| Primary Color | #1DC1FD | to be defined | Can be used for links or other elements that we wish to highlight separately. |
| Brand Color | #FAD465 | to be defined | |
| Messages palette | ||||
| Success Color | #49F45D | to be defined | e.g. Positive confirmation for notifications, entries or actions. Positive feedback for error-free production. |
| Error Color | #FA3030 | to be defined | e.g. negative confirmation for notifications, entries or actions. Negative feedback for dirsturbed production. Used for every kind of error. |
| Warning Color | #FF9D00 | to be defined | Used, for example, for warnings that can occur in production. Unlike the error, the warning is not as critical. |
| Neutral palette | The various gradations of grey are used to ensure good contrast and legibility. This allows the remaining colours to be optimally displayed. | |||
| Very Dark Gray | #242424 | to be defined | |
| Darker Gray | #313131 | to be defined | |
| Dark Gray | #3C3C3C | to be defined | |
| Medium Gray | #505050 | to be defined | |
| Medium Light Gray | #626262 | to be defined | |
| Light Gray | #787878 | to be defined | |
| Lighter Gray | #8D8D8D | to be defined | |
| Even Lighter Gray | #9A9A9A | to be defined | |
| Very Light Gray | #A4A4A4 | to be defined | |
| Nearly White | #F0F0F0 | to be defined | |
| True White | #FFFFFF | to be defined |
https://wasp2-dev.myapp.de:444/live-style-guide/theming
| Tokyo Colors | Brand | Alerts Colors | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| scss variables | #hex | scss variables | #hex | Danger | scss variables | #hex | Warning | scss variables | #hex | Success | scss variables | #hex | Note | scss variables | #hex | ||||||||
| Tokyo 100 | $tokyo-100 | #202026 |
| Brand 100 | $brand-100 | #957616 |
| Danger 100 | $danger-100 | #F50B09 |
| Warning 100 | $warning-100 | #FF7A00 |
| Success 100 | $success-100 | #7FD966 |
| Note 100 | $note-100 | #14D2FF |
|
| Tokyo 90 | $tokyo-90 | #292930 |
| Brand 90 | $brand-90 | #A88724 |
| Danger 80 | $danger-80 | #F55150 |
| Warning 80 | $warning-80 | #FF902A |
| Success 80 | $success-80 | #94DF7F |
| Note 80 | $note-80 | #3BD9FF |
|
| Tokyo 80 | $tokyo-80 | #373741 |
| Brand 80 | $brand-80 | #E0B535 |
| Danger 60 | $danger-60 | #F77373 |
| Warning 60 | $warning-60 | #FFA655 |
| Success 60 | $success-60 | #A9E599 |
| Note 60 | $note-60 | #62E1FF |
|
| Tokyo 70 | $tokyo-70 | #535359 |
| Brand 70 | $brand-70 | #FACA3D |
| Danger 40 | $danger-40 | #F99696 |
| Warning 40 | $warning-40 | #FFBC7F |
| Success 40 | $success-40 | #BFECB2 |
| Note 40 | $note-40 | #89E8FF |
|
| Tokyo 60 | $tokyo-60 | #7E7E82 |
| Brand 60 | $brand-60 | #FAD465 |
| Danger 20 | $danger-20 | #FBB9B9 |
| Warning 20 | $warning-20 | #FFD2AA |
| Success 20 | $success-20 | #D4F2CC |
| Note 20 | $note-20 | #B0F0FF |
|
| Tokyo 50 | $tokyo-50 | #A9A9AC |
| Brand 50 | $brand-50 | #FBDC83 |
| Danger 00 | #FDDCDC |
| Warning 00 | #FFE8D4 |
| Success 00 | #E9F8E5 |
| Note 00 | #D7F7FF |
| ||||
| Tokyo 40 | $tokyo-40 | #BCBCBE |
| Brand 40 | $brand-40 | #FCE5A2 |
| ||||||||||||||||
| Tokyo 30 | $tokyo-30 | #D4D4D5 |
| Brand 30 | $brand-30 | #FDEDC1 |
| ||||||||||||||||
| Tokyo 20 | $tokyo-20 | #EFEFEF |
| Brand 20 | $brand-20 | #FEF6E0 |
| ||||||||||||||||
| Tokyo 10 | $tokyo-10 | #FFFFFF |
| Brand 10 | $brand-10 | #FDFBF4 |
|
| Astronaut Colors | Brand | Alerts Colors | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| scss variables | #hex | scss variables | #hex | Danger | scss variables | #hex | Warning | scss variables | #hex | Success | scss variables | #hex | Note | scss variables | #hex | ||||||||
| Astronaut 100 | $astronaut-100 | #0F0E0D |
| Brand 100 | $brand-100 | #BE9C38 |
| Danger 100 | $danger-100 | #F06464 |
| Warning 100 | $warning-100 | #FDB225 |
| Success 100 | $success-100 | #9FDB57 |
| Note 100 | $note-100 | #87DFF0 |
|
| Astronaut 90 | $astronaut-90 | #272625 |
| Brand 90 | $brand-90 | #D9B23D |
| Danger 80 | $danger-80 | #F17575 |
| Warning 80 | $warning-80 | #FDBA3D |
| Success 80 | $success-80 | #A9DF69 |
| Note 80 | $note-80 | #94E2F1 |
|
| Astronaut 80 | $astronaut-80 | #3F3E3D |
| Brand 80 | $brand-80 | #F2D43D |
| Danger 60 | $danger-60 | #F38686 |
| Warning 60 | $warning-60 | #FDC355 |
| Success 60 | $success-60 | #B4E37C |
| Note 60 | $note-60 | #A1E6F3 |
|
| Astronaut 70 | $astronaut-70 | #575655 |
| Brand 70 | $brand-70 | #F5DB5D |
| Danger 40 | $danger-40 | #F59797 |
| Warning 40 | $warning-40 | #FDCB6D |
| Success 40 | $success-40 | #BFE78F |
| Note 40 | $note-40 | #AFE9F5 |
|
| Astronaut 60 | $astronaut-60 | #6F6E6D |
| Brand 60 | $brand-60 | #F7E06F |
| Danger 20 | $danger-20 | #F6A8A8 |
| Warning 20 | $warning-20 | #FDD485 |
| Success 20 | $success-20 | #C9EBA1 |
| Note 20 | $note-20 | #BCEDF6 |
|
| Astronaut 50 | $astronaut-50 | #878686 |
| Brand 50 | $brand-50 | #F7E692 |
| ||||||||||||||||
| Astronaut 40 | $astronaut-40 | #B7B6B6 |
| Brand 40 | $brand-40 | #F8EBA7 |
| ||||||||||||||||
| Astronaut 30 | $astronaut-30 | #CFCECE |
| Brand 30 | $brand-30 | #F8EFBC |
| Link | tbd | #00AEE2 |
| ||||||||||||
| Astronaut 20 | $astronaut-20 | #E7E6E6 |
| Brand 20 | $brand-20 | #F7F1CF |
| ||||||||||||||||
| Astronaut 10 | $astronaut-10 | #F2F2F2 |
| Brand 10 | $brand-10 | #F5F2DE |
|
