5
New Styleguide page for "Loading"
Introduce CDN links to all images
Add Section with index-tiles to branding page
New Styleguide page for "Branding"
FC
Extend ".wui-bs-alert" with all fruit-color-variantes
Font-Awesome has been updated to version 5.12.0
Ut
"Utils" has been extended with opacity, heights and colors
1

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Colors

Summary

If you are wondering which colors can be changed, when we use which colors and what you have to pay attention to, then you have come to the right place. On the utils page you you can also find a detailed overview of the respective classes and variables we use in wescale. On the branding page You can see what the colors will look like on the platform.

  • Accessibility. Contrast ratio of foreground and background is at least 1:4.5. (recommended lower limit of Web Content Accessibility Guidelines).
  • Signal colors. Red and green are signal colors and are also used as such by us. In order for the user to recognize warnings for example, a color like red should only be used for warnings, destructive actions etc.

Related pages

Stable

Feel free to use this component. It has been tested and is already live in production. Anyways – if you find a problem with this component let me know. You can contact me via slack, email (tjaeger@wescale.com) or personally.

Primary

#6E5ABF

rgb 110|90|191

$color-primary

On almost every page, the primary action is triggered by a button. This allows us to guide the user through the system and support her in completing tasks as quickly and easily as possible. Accordingly, all buttons that trigger a primary or secondary action have the color $color-primary.
Due to our concept of user guidance, this color is reserved for buttons in most cases. (see: Buttons)

Relevant UI-elements

  • Primary and outline-buttons
  • Index-tiles

Active

#2D77C9

rgb 45|119|201

$color-active

The active color is used in every element which has a state that can change. The user recognizes at a glance which UI element is active or which element can be activated. It does not matter whether the element was activated by a user or by the system.

Relevant UI-elements

  • Active checkboxes or radio-buttons
  • Current menu item
  • Batches on notifications
  • Current page on pagination

Highlight

#078390

rgb 7|131|144

$color-highlight

In reality, there is often a thin line between highlight and active color. A good indicator for the use of $color-highlight is that the element is neither clickable nor changes its state.

Relevant UI-elements

  • Prices in Shopping
  • Default labels

Additional colors

Additional colors

These colors are only partially customizable. For one thing because of their semantics and for another because they are quite opinionated. Adjustments should be discussed in any case, because there is a lot to consider with these variables in contrast to the ones above.

  • Status colors. According to the status of a process you should use these colors. If there is an action which is marked as succeeded by an icon like a checkmark, the checkmark should be in the success-color as well.
  • Gray shades. To keep the visual noise to a minimum, the all in all appearance of the wescale interface is based on subtle shades of gray.
  • Fruit colors. If the default colors are not enough, you can use the fruit colors to highlight an element. For example, for labels that display variety of different statuses.
  • wescale colors. The colors of the wescale logo are not part of the platform. But anyways - they are worth being listed here ;)

Status colors

$color-success

#25A342

rgb 37|163|66

This is written in $font-color-success

$color-warning

#FFB400

rgb 255|180|0

This is written in $font-color-warning

$color-danger

#DC3545

rgb 220|53|69

This is written in $font-color-danger

To ensure the best possible legibility, we always try to stick to the contrast recommended by the WCAG. However, this is not fully possible with the status colors, since these colors are also assigned a semantic meaning.
A little excursion into color theory: The contrast of yellow to white, for example, can never be 4.5 to 1. If you darken yellow until the desired contrast is achieved, it is no longer yellow but rather an ochre brown - at best a dirty orange. The semantic meaning - yellow as a warning color - is more important in this case than the contrast ratio. Our compromise, which we make for the status colors, is that there is a difference between background colors and text colors. With background colors, we pay more attention to semantic correctness. With text colors, however, we pay more attention to good legibility and a sufficient contrast.

We distinguish between font-color and background-color for the best possible readability/visibility. Please also note that for longer texts on a yellow background, the color white should not be used, but .wui-color--warning-dark

Gray shades

$color-gray-20

#333333

rgb 51|51|51

$color-gray-33

#555555

rgb 85|85|85

$color-gray-46

#767676

rgb 118|118|118

$color-gray-60

#999999

rgb 153|153|153

$color-gray-80

#cccccc

rgb 204|204|204

$color-gray-87

#dedede

rgb 222|222|222

$color-gray-95

#f1f1f1

rgb 241|241|241

The number of the variable reflects the respective brightness-value from the HSB color model (Hue, Saturation, Brightness) (0 = black, 100 = white).
Each variable is mapped to two classes. The class name is always composed according to the same schema:
.wui-color-- or .wui-bg-color-- gray- number of brightness (eg. .wui-bg-color--gray-95)

Some shades of gray can only be assigned to certain elements such as $default-border-color. With these semantic variables you should make sure that they are used exclusively for the intended purpose.

Fruit colors

-10

-20

-40

-50 (default)

-60

$color-peach

#FBEBEE

#F7D6DC

#E15D75

#D93452

#982439

$color-yangmei

#FAEAF4

#F4D5E9

#D458A6

#C92E90

#8D2065

$color-pitaya

#F7EDF8

#EFDBF0

#BF70C4

#AF4CB5

#7B357F

$color-fig

#F4EFFA

#E9DFF4

#A57FD4

#8F5FC9

#64438D

$color-plum

#F0F0FB

#E1E1F6

#8888DD

#6A6AD4

#4A4A94

$color-blueberry

#EEEFF9

#DDE0F2

#7682CB

#5463BE

#3B4585

$color-akebi

#ECF2F9

#D8E4F2

#6593CC

#3E78BF

#2B5486

$color-grapes

#EDF2F5

#DAE4EB

#6D94B0

#48799C

#32556D

$color-feijoa

#E6F2F2

#CDE5E4

#379893

#057E78

#045854

$color-apple

#E6F3EF

#CEE6DE

#399B7C

#08825B

#065B40

$color-olive

#E8F3EC

#D1E6D9

#479D65

#19843F

#125C2C

$color-kiwano

#F7EFE6

#EFDFCC

#BD7F33

#AD5F00

#794300

$color-papaya

#FBECE6

#F6D9CD

#DC6936

#D34304

#D34304

$color-cherry

#FBE8E8

#F7D2D2

#DE4A4A

#D61D1D

#961414

Colors ain't easy

The fruit colors could be found on all pages and must also work in combination with a variety of components. Together with the other colors they have a great influence on the look and feel and contribute to the recognizability of wescale.
We have dealt intensively with the various use cases so that the wescale-colors meet our very high requirements:

  • The fruit colors come in different shades. All default values (e.g. $color-peach-50) are WCAG-2 compliant and have a contrast to white font of at least 1:4,5. ($color-akebi = $color-akebi-50)
  • Among other things, color is used to describe the status and provide at-a-glance meaning. For "rejected", "failed" or other destructive actions we use red shades for example.
    Conversely, that means: If a variable needs to be adjusted, do not leave the given color space! Red shades remain red shades.
  • The values 10 - 100 indicate how bright a color is (10 = light, 100 = dark). They are used exclusively for the assignment to the perceived contrast. Unlike the gray shades, it is not an exact indicator of the brighness value in the HSB color model.
  • The perceived contrast of one color column is always the same. $color-blueberry-50 has the same perceived contrast as $color-grapes-50. However, the colors actually have different brightness values. The percentage change is therefore not based on a fixed system but on the perceived brightness.
Each variable is mapped to two classes. The class name is always composed according to the same schema:
.wui-color-- or .wui-bg-color-- name of color- number of brightness
for example: .wui-color--plum-40 or .wui-bg-color--grapes-60

wescale colors

$color-wescale-blue-light

#4EA8E2

rgb 78|168|226

$color-wescale-blue-dark

#2F71BA

rgb 47|113|186