Skip to content

Colors

Here is an overview on how to use all the twoday brand elements on different backgrounds. You will find a comprehensive and detailed guide with all accepted color combinations. What color buttons to use on which backgrounds and which 5th element color to stack on top of your selected background color etc.

4 rules in particular to be aware of:

  • Maximum of one primary button per viewport.
  • Image cards can’t be used on primary brand colored backgrounds. If you want to use image cards, use a black or white background instead.
  • There must always be a black or white background section between any primary brand color background section. There is not any limit to the amount of primary brand color backgrounds there can be on content pages, as long as they are divided with a black or white background section.
  • Never use the 5th element behind white/light text.

How to use elements on black backgrounds

Please notice: Never use the 5th element behind white/light text.

twoday-brandhub-design-system-color-black

How to use elements on white backgrounds

twoday-brandhub-design-system-color-white

How to use elements on dark orange backgrounds

twoday-brandhub-design-system-color-dark-orange

How to use elements on light green backgrounds

twoday-brandhub-design-system-color-light-green

How to use elements on light blue backgrounds

twoday-brandhub-design-system-color-light-blue

How to use elements on light orange backgrounds

twoday-brandhub-design-system-color-light-orange

How to use elements on yellow backgrounds

twoday-brandhub-design-system-color-yellow

How to use elements on red backgrounds

twoday-brandhub-design-system-color-red

How to use elements on dark blue backgrounds

Please notice: Never use the 5th element behind white/light text.

twoday-brandhub-design-system-color-dark-blue

How to use elements on dark green backgrounds

Please notice: Never use the 5th element behind white/light text.

twoday-brandhub-design-system-color-dark-green