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

Branding

In Review

This page was thoroughly tested. However, it has not yet been applied in many cases. Maybe there will be changes due to case-related issues. If you have any suggestions for improvements, if you find a bug or if you have anything important which should be included in the documentation, feel free to contact me via slack, email (tjaeger@wescale.com) or personally.

Logo

The space available for the logo is 174 x 36px. If your uploaded file exceeds these dimensions, it will automatically be scaled down to the mentioned size - thereby the aspect ratio is kept.

For an optimal display try to use the given space as good as possible and save your logo as PNG with transparent background.

Scroll down to check your logo in the context of the platform.

Colors

In the example below you can see how your corporate colors would look like in wescale. The example is very straightforward and has been chosen in such a way that you get the best possible overall impression of which colors are finally used for what purpose.
When choosing your colors, please also remember your colleagues with moderately low visual acuity, congenital color deficiencies, or the loss of contrast sensitivity that typically accompanies aging. At wescale we always strive to use colors that have a sufficient contrast to their background (4.5:1 according to W3C). When choosing your colors, in addition to sufficient contrast, the respective semantics should be taken into account. For further information see also colors.

The color variables will be gradually integrated into the platform, which means that older UIs will not always reflect your corporate colors.

Primary
Contrast:
Aa
5.42
Active
Contrast:
Aa
4.57
Highlight
Contrast:
Aa
4.51

Example shopping

Your colors in wescale

Filter 1: Option selected
Filter 2: Option selected
27.95 EUR

 

     

30.80 EUR

 

     

36.30 EUR

 

     

65.90 EUR

 

     

89.80 EUR

 

     

122.20 EUR

 

     

154.95 EUR

 

     

180.00 EUR

 

     

  • Highlightbox

    For the highlight box we use different shades of the color variable "$highlight-color".

Drilldown facet

    • Back to all
    • First level (Lorem ipsum dolor sit amet, consetetur sadipscing elitr)
    • Second level (At vero eos et accusam)
  • Current level
    • First item
    • Second item
    • Third item

Checkbox facet

  • First selected option
  • Second selected option

  • Option one
  • Option two
  • Option three
  • Option four
  • Option five
  • Option six
  • Option seven
  • Option eight
  • Option nine
  • Option ten
  • Option eleven
  • Option twelve

Example overview