Color

Color definitions

TT:s color palette consists primarily of black, white, grey and Sun (yellow). In addition, there is a UI/UX color, primary Indigo (blue) for common recognition, links and CTA:s. When enhancement in color is needed, use primary Steel and Moss. To complement or contrast the colors there are additionally secondary colors.

Sun is a primary color in the profile and should be included in most context. It is mainly used to highlight something and to accentuate details. It is important that Sun is used sparingly so that it has the right effect when used.

It is important to use the right color definitions. The color code are listed next to it. The colors should work together to create uniformity.

Primary Palette

TT Black
White
Indigo
Moss
Steel
Sun

Indigo

DO: The color indigo is primary used as a call to action color. E.g. buttons.

DON'T: Use the color as a background color (buttons will lose contrasts)

Sun

DO: Yellow should be used as an accent color for small details. It could also be used to contrast the color Indigo. E.g download vs buy when both actions have the same level of importance. Use as a highlight color when prominent feedback is needed. E.g Badge, call outs, TT-mic.

DON'T: Use this color as a major part of your color pallet. Only for details.

Moss and Steel

DO: Use as a background color when element needs more attention than black text on white background (white text on black background). Use with white text. Use as contrast to a light color.

DON'T: Use this for a large space as the only dominant color. Contrast with other colors to get the right effect. Do not use black text on dark backgrounds.

Grey tones

Grey 100
Grey 200
Dark Grey
Gray
Black-ink
Sky-light

Ink-colors are used for texts and sky-colors are used for backgrounds.

Black could be used to enhance a line, detail or an icon. Using Black(Black) in text makes the font too sharp on screen.

Alert Palette

ok
warning
failure

This is a non-branding color. Color only to be use to state actions, (failure, ok and warning) in interface. A common color theme for recognition.

Secondary Palette

Moss-dark
Moss-light (Kalk)
Sun-light
Sun-lighter
Steel-light
Steel-dark
Burnt
Burnt-light
Burnt-dark

To complement or contrast the primary colors there are additionally secondary colors.

Moss-light works well for print and interiors and could therefore work as a primary color in that context. Moss-light (previously Kalk) has evolved in to Moss to gain functionality and contrast for web.