Color

Here are the guidelines on how we implement colour in code. This page should be used alongside Trade Me’s full colour palette.

UI Grey variables

Our use of UI (user interface) greys helps users to easily understand hierarchy of elements on a page, and to identify form elements that are being interacted with. As a warm, neutral tone, Bluff Oyster has been chosen for our UI greys from our Trade Me colour palette.

$tg-ui-grey-extra-extra-dark

Used to aid navigation, for example to indicate a selected tab.

$tg-ui-grey-extra-dark

Used to indicate focus, for example on selected form elements.

$tg-ui-grey-dark

$tg-ui-grey-medium

Default variable for unselected form elements.

$tg-ui-grey-light

Primarily used to separate content, for example row dividers in tables.

$tg-ui-grey-extra-light

Used as a background colour for neutral interactive content, such as default buttons.

$tg-ui-grey-background

An alternative background colour to white. Used to indicate separate sections of content on a page, for example in box. Also used to indicate disabled form fields.

Validation color variables

We have consistent colours to represent validation success or failure. These variables are used for validation messaging across Tangram form components.

$tg-validation-success

$tg-validation-fail

Brand color variables

Brand color variables coming soon! In the meantime, the #tangram Slack channel is always available for support.

Color stamp

import { TgColorStampComponent } from '@trademe/tangram';

A static, visual way of representing colour options. For an interactive version, use a color picker.

Code

<tg-color-stamp
    color="multi">
</tg-color-stamp>

Color

UI Grey variables

Example

Example

Example

Example

Example

Example

Example

Example

Validation color variables

Example

Example

Example

Brand color variables

Example

Color stamp

Example