Skip to content

Colors

Core colors

A pool of tinted variants of the main twoday brand colors. The core colors maintain the vivid twoday brand identity and ensures a visual connection between different elements. 

 

Black / White

white-1

#FFFFFF
1

black-1000

#171717
1000

Neutral

neutral-900

#2B2B2B
900

neutral-800

#3C3C3C
800

neutral-700

#616161
700

neutral-600

#757575
600

neutral-500

#949494
500

neutral-400

#C8C8C8
400

neutral-300

#D4D4D4
300

neutral-200

#E0E0E0
200

neutral-100

#EDEDED
100

neutral-50

#F5F5F5
50

Dark orange

dark-orange-900

#4D1D00
900

dark-orange-800

#702B00
800

dark-orange-700

#943800
700

dark-orange-600

#C74C00
600

dark-orange-500

#F66A13
500

dark-orange-400

#FF8439
400

dark-orange-300

#FFA975
300

dark-orange-200

#FFD3B8
200

dark-orange-100

#FFE5D6
100

dark-orange-50

#FFEFE5
50

Light orange

light-orange-900

#5C3700
900

light-orange-800

#995C00
800

light-orange-700

#D68100
700

light-orange-600

#F09000
600

light-orange-500

#FFA824
500

light-orange-400

#FFBC57
400

light-orange-300

#FFD28F
300

light-orange-200

#FFE9C7
200

light-orange-100

#FFF1DB
100

dark-orange-50

#FFF8EE
50

Yellow

yellow-900

#493409
900

yellow-800

#6D4D0D
800

yellow-700

#916711
700

yellow-600

#E0AE0B
600

yellow-500

#F4D81F
500

yellow-400

#F8E56D
400

yellow-300

#FAED98
300

yellow-200

#FCF3BB
200

yellow-100

#FDF7D3
100

yellow-50

#FEFAE2
50

Green

green-900

#00522C
900

green-800

#006636
800

green-700

#007A40
700

green-600

#009951
600

green-500

#00C266
500

green-400

#2BD283
400

green-300

#5FE3A4
300

green-200

#C1F5DC
200

green-100

#D3F8E6
100

green-50

#EDFCF5
50

Blue

blue-900

#003047
900

blue-800

#004466
800

blue-700

#005985
700

blue-600

#006DA3
600

blue-500

#007AB8
500

blue-400

#009CE9
400

blue-300

#1FB5FF
300

blue-200

#A3E1FF
200

blue-100

#C2EBFF
100

blue-50

#E0F5FF
50

Red

red-900

#520006
900

red-800

#7A0008
800

red-700

#A3000B
700

red-600

#CC000E
600

red-500

#EB0A19
500

red-400

#F84F5A
400

red-300

#FB747D
300

red-200

#FDAFB5
200

red-100

#FFCCD0
100

red-50

#FFEBEC
50

Dark blue

dark-blue-900

#00173A
900

dark-blue-800

#192E4E
800

dark-blue-700

#334561
700

dark-blue-600

#4C5D75
600

dark-blue-500

#667489
500

dark-blue-400

#808B9C
400

dark-blue-300

#99A2B0
300

dark-blue-200

#B2B9C4
200

dark-blue-100

#CCD1D8
100

dark-blue-50

#E5E8EB
50

Dark green

dark-green-900

#003E25
900

dark-green-800

#336551
800

dark-green-700

#4C7866
700

dark-green-600

#668B7C
600

dark-green-500

#809E92
500

dark-green-400

#99B2A8
400

dark-green-300

#B2C5BE
300

dark-green-200

#CCD8D3
200

dark-green-100

#E5ECE9
100

dark-green-50

#F0F4F3
50

Common colors

To create a coherent experience in all twoday products, common colors from the core palette should be used. These situational colors below represent common system states. 
 
There might be interface text elements that need to be contrasted with other colors than black and white, like status pills, alerts and checkboxes. For this purpose, you should use a different shade of the same color against it.

For example, light red surface can use darker color variant as text color. The "Accessible combinations” shown here exceed AA-level minimum contrast ratios (4.5:1) referred in accessibility guidelines.

WCAG 2.2. color contrast guidelines 

Text colors

Non-interactive text (such as headings and body text) should use this palette.  
In general, avoid using other colors as body text color besides the ones documented here. 

black-1000

Primary
1000

neutral-700

Secondary
700

neutral-600

Disabled
600

white-1

White
1

Neutral colors

The neutral colors are used for functional purposes to create a dynamic and balanced look and feel. Example uses include border colors; dividers, input border (gray-3), and more. 

neutral-900

gray-5
900

neutral-700

gray-4
700

neutral-500

gray-3
500

neutral-200

gray-2
200

neutral-50

gray-1
50

neutral-combinations

Accessible combinations

 

Informative colors

State which does not indicate clear success or failure but can be useful extra information to the user.

For example: alert popups like “you have received a new message”, “service maintenance this weekend” 

blue-900

blue-5
900

blue-700

blue-4
700

blue-400

blue-3
400

blue-200

blue-2
200

blue-50

blue-1
50

informative-combinations

Accessible combinations

 

Danger / Error colors

Danger colors are assigned to interactive and feedback elements related to actions or functionality that may result in a system error, permanent loss of data, or other types of situations that are hard to recover.

For example: deleting a user account, form input errors. The colors are also used in internal system errors not caused by the user, for example network errors. 

red-900

red-5
900

red-700

red-4
700

red-400

red-3
400

red-200

red-2
200

red-50

red-1
50

error-combinations

Accessible combinations

 

Success colors

Success colors are intended for system feedback that signifies the successful completion of a task or user action.

For example: Pop-up notification when submitting a form, password length is adequate in an input field. 

green-900

green-5
900

green-700

green-4
700

green-400

green-3
400

green-200

green-2
200

green-50

green-1
50

success-combinations

Accessible combinations

 

Caution / Waiting colors

Caution and waiting colors are used for system states which are intermediary, indeterminate, or otherwise noteworthy information, yet not destructive.

For example: ongoing process, unsaved changes, user action required.

yellow-900

yellow-5
900

yellow-700

yellow-4
700

yellow-400

yellow-3
400

yellow-200

yellow-2
200

yellow-50

yellow-1
50

caution-combinations

Accessible combinations

 

Theme colors

A twoday product is brought to life with its own hand-picked theme colors. Themes allow you to customize all design aspects of your product in order to meet the specific needs of your business or brand. 

Start by picking 1-3 main colors from the core pool. You can consider these as the primary, secondary and accent colors of the product UI. 

 

dark-orange-500

Primary
$darkOrange-500

neutral-900

Secondary
$grey-900

green-400

Accent
$green-400

For each selected color, try to limit the use of tints to 5. This helps you create stronger contrasts when combining the different shades together. If needed, more tints can be introduced, but ensure adequate contrast when combining shades. 

 

colors-theme-example_tints

Depending on where the color combinations are used, make sure the colors abide to the following: 

  • Non-text elements input focus color, graph color has 3:1 contrast to adjacent color  
  • Text elements exceed 4.5:1 contrast for small text or 3:1 contrast for large text  

Buttons are an exception. If the button has text or distinguishable icon, the button “hit area” does not have to meet the contrast requirement. In other words, button with text only or low contrast border is allowed, if the text color meets the small 4.5:1 or large 3:1 contrast requirement against the button’s surface color.

 

colors-principles-button-contrast

Default themes

The design system has two default themes, which  can be used in  products that are twoday endorsed or master branded, but do not have their own brand identity. These themes can be useful in kicking off a new internal project. 

 

Default theme 1: twonight

dark-orange-500

Primary
Dark orange
500

neutral-900

Secondary
Neutral
900

Primary color tints

dark-orange-900

darkOrange-5
900

dark-orange-700

darkOrange-4
700

dark-orange-500
darkOrange-3
500
dark-orange-200
darkOrange-2
200
dark-orange-50
darkOrange-1
50
theme-1-tints-1



Secondary color tints
neutral-900

gray-5
900

neutral-700

gray-4
700

neutral-400
gray-3
400
neutral-200
gray-2
200
neutral-50
gray-1
50
theme-1-tints-2

 

 

Default theme 2: twomorrow

light-orange-500

Primary
Light orange
500

neutral-900

Secondary
Neutral
900

blue-400

Accent
Blue
400

 

Primary color tints

light-orange-900

lightOrange-5
900

light-orange-800

lightOrange-4
800

light-orange-500
lightOrange-3
500
light-orange-200
darkOrange-2
200
light-orange-50
lightOrange-1
50
theme-2-tints-1



Secondary color tints
neutral-900

gray-5
900

neutral-700

gray-4
700

neutral-500
gray-3
500
neutral-200
gray-2
200
neutral-50
gray-1
50
theme-2-tints-2

 

 

Accent color tints
blue-900

blue-5
900

blue-700

blue-4
700

blue-400
blue-3
400
blue-200
blue-2
200
blue-50
blue-1
50
theme-2-tints-3

 

 

Use the common colors as the secondary palette for different system states. 

If you are unsure whether to start composing your own color scheme or to use a default theme, refer to this quick selection tree to help you determine the need. 

colors-theme-choosing-colors

Principles

Use primarily black (#171717) or white text (#FFFFFF) in colored surfaces, or different lightness level of the same surface color.

Try not to mix different colors together, even if they would exceed the accessibility contrast requirements.

color-do
color-dont

Accessibility

  • All text must surpass WCAG 2.1 AA contrast requirements.  
    • The minimum contrast ratio with small text is 4.5:1. Small text is less than 24px. 
    • With large text, the requirement is 3:1. Large text is 24px or larger 

 

  • Non-text elements, or graphical UI objects, must exceed 3:1 contrast to their adjacent colours. These include: 
    • Charts  
    • Icons, like a left-pointing icon of a “previous” button 
    • Checked/unchecked states of radio buttons and checkboxes  
    • Focus states on buttons, form controls and input fields  

 

uielement-pass
uielement-fail

More information about text contrast and non-text contrast requirements.