logo

Colors

Terra color system utilized color tokens to scale and main the color implementations across the VTS platforms. The Terra color choices help to differentiate VTS from other brands, at the same time, maintains accessibility.

For color used in data charts, please refer to chart color guidance page.

Principles

Systematic

  • Maintain the default colors in all components
  • Use the semantic colors specific to respective foundation category.

Hierarchical

  • Use color to effectively convey information and create visual hierarchy
  • Minimize stimuli

Accessible

  • Ensure sufficient color contrast
  • Combine color meaning with a unique shape, icon and/or text.

Vulnerable

  • Color alone cannot convey the system status

How to read our color system

In our system, We have 5 semantic categories: Brand, Text and icon, Background, Border, and General UI. Read detailed usage on the color palette page.

When choosing the foreground and brackground colors, please make sure the contrast pass the WCAG 2.1 guidelines.

See Contrast Ratio for details | Tool for checking contrast

Guidelines

How to pick color categories

Each category is semantically desiged or its intended use. Use Text and icon colors for text and icons, border color for borders; Background for non-component background; General UI for components.

See color palette for details.

Don't

Don’t cross use the semantic categories even the colors are the same.

Do

Follow the semantic guidance for the color categories.

How to pick correct color variant

For text and icon , background, and border, all variants are semantically desiged for their intended use. For general color, use them on elements other than icon, text, non-UI background, or border. See color palette for details.

If we mix and match different shades, the darker shades will look like being selected.

Use cases

Case 1: Information hierarchy

Guiding Principal: Hierarchical - Highlight the cirtical information with semantic affordance and higher contrast.
In the case below, the design needs to emphasize the urgency when the space is vacant. The urgent information stands out through the darkness and saturation, but users can still tell the years apart from each other.

Case 2: Contrast Ratio

Guiding Principal: Accessible - Information should be accessible with proper contrast colors.
When choosing the foreground and the background colors for informative elements such as text, icons, borders that delineate component boundries, etc, choose the color pair that passes the WCAG 2.1 contrast rules. The color contrast requirement is not required for the disabled states.

Accessibility

According to the Web Content Accessibility Guidelines (WCAG), all the websites should be accessible to as many user groups who has disability as possible. Digital Accessibility Centre (DAC) offers level AA and AAA accreditation to help the websites to be compliant.
AA is view as basic level of accessibility; AAA is view as good level of accessibility for people with disability.
VTS strives for friendliness and inclusivity, so we aim to be AAA-level compliant and offer the most accessible products to as many users as possible.
However, being accessible doesn't mean every element on the website needs to pass the AAA-level contrast. Some components, like disabled buttons, dividers, model boxes, don't have to be compliant. To make the rule easier to implement, here is a list of elements that must be compliant:
  • Enabled buttons
  • All the texts and icons
  • All the navigational components
  • All the interactive components, like dropdowns, input fields, checkboxes