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.
Terra now supports theming for different white label brands. Use the settings menu in the top right to preview the Terra color palette and components with custom brand colors.
CTA
CTA colors are used as the background color for the CTAs. The CTA colors come as a set that reflects the interactive states, including default, hover, and pressed.- Primary/Secondary/Tertiary default are used as the default background on CTAs (buttons, checkboxes, radio buttons, etc) in their default state.
- Primary/Secondary/Tertiary hover are used as the hover background color for the CTA components unless otherwise stated.
- Primary/Secondary/Tertiary pressed are used as the pressed background color for the CTAs unless otherwise stated.
Primary default
#4837b9
primary-700
<tw>-cta-primary-default
Themeable
Primary hover
#6253da
primary-600
<tw>-cta-primary-hover
Themeable
Primary pressed
#280f96
primary-800
<tw>-cta-primary-pressed
Themeable
Primary text
#ffffff
primary-inverse-text
<tw>-cta-primary-text
Themeable
Secondary default
#FFFFFF
white
<tw>-cta-secondary-default
Secondary hover
#f5f5ff
interactive-100
<tw>-cta-secondary-hover
Themeable
Secondary pressed
#EBEBFF
interactive-200
<tw>-cta-secondary-pressed
Themeable
Secondary text
#4837b9
interactive-700
<tw>-cta-secondary-text
Themeable
Tertiary default
#FFFFFF
white
<tw>-cta-tertiary-default
Tertiary hover
#f5f5ff
interactive-100
<tw>-cta-tertiary-hover
Themeable
Tertiary pressed
#EBEBFF
interactive-200
<tw>-cta-tertiary-pressed
Themeable
Primary default
#4837b9
primary-700
<tw>-cta-primary-default-darkmode
Themeable
Primary hover
#6253da
primary-600
<tw>-cta-primary-hover-darkmode
Themeable
Primary pressed
#280f96
primary-800
<tw>-cta-primary-pressed-darkmode
Themeable
Secondary default
#171D26
gray-900
<tw>-cta-secondary-default-darkmode
Secondary hover
#130A76
primary-900
<tw>-cta-secondary-hover-darkmode
Themeable
Secondary pressed
#280f96
primary-800
<tw>-cta-secondary-pressed-darkmode
Themeable
Tertiary default
#171D26
gray-900
<tw>-cta-tertiary-default-darkmode
Tertiary hover
#130A76
primary-900
<tw>-cta-tertiary-hover-darkmode
Themeable
Tertiary pressed
#280f96
primary-800
<tw>-cta-tertiary-pressed-darkmode
Themeable
Text & Icon
There are 9 major shades of text color:- Primary is used as default for all body and title texts
- Primary inverse is used on any background color that exceeds 50 darkness, like primary buttons.
- Subdue is for labels, subtitles, subtexts.
- Disabled is for any texts on disabled interactive components.
- Critical is for error texts.
- Attention is for warning texts.
- Success is for success texts.
- Link is for link texts.
- Brand is for texts on branded components. Use it to give components a shade of personality.
* Please note that all links need an underline to comply with accessibility requirements.
Primary
#1D1E20
neutral-900
<tw>-text-primary
Primary inverse
#FFFFFF
white
<tw>-text-primary-inverse
Subdued
#72777E
neutral-600
<tw>-text-subdued
Disabled
#BBBFC4
neutral-400
<tw>-text-disabled
Critical
#C7200A
red-600
<tw>-text-critical
Success
#39800B
green-700
<tw>-text-success
Link
#4837b9
interactive-700
<tw>-text-link
Themeable
Brand
#4837b9
interactive-700
<tw>-text-brand
Themeable
Attention
#E17605
yellow-600
<tw>-text-attention
Primary
#FFFFFF
white
<tw>-text-primary-darkmode
Primary inverse
#1D1E20
neutral-900
<tw>-text-primary-inverse-darkmode
Subdued
#BBBFC4
neutral-400
<tw>-text-subdued-darkmode
Disabled
#52565C
neutral-700
<tw>-text-disabled-darkmode
Critical
#F65F50
red-500
<tw>-text-critical-darkmode
Success
#76C643
green-500
<tw>-text-success-darkmode
Link
#AEA9FE
interactive-400
<tw>-text-link-darkmode
Themeable
Brand
#887EFC
interactive-500
<tw>-text-brand-darkmode
Themeable
Attention
#FFB200
yellow-600
<tw>-text-attention-darkmode
Background
We use 4 shades of color across the platforms:- Primary is used as the default color and for elevated components like cards, tables, models.
- Secondary is used to add depth to the UI. It can be used as decorative color for table title rows.
- Tertiary is used as background for footers and highlight sections.
- Disabled is used as background for disabled components.
Primary
#FFFFFF
white
<tw>-background-primary
Secondary
#F8FAFC
gray-50
<tw>-background-secondary
Tertiary
#F1F5F9
gray-100
<tw>-background-tertiary
Disabled
#F4F5F6
neutral-100
<tw>-background-disabled
Critical
#fbe7e5
red-200
<tw>-background-critical
Primary
#171D26
gray-900
<tw>-background-primary-darkmode
Secondary
#171D26
gray-900
<tw>-background-secondary-darkmode
Tertiary
#2F3946
gray-800
<tw>-background-tertiary-darkmode
Disabled
#373A3E
neutral-800
<tw>-background-disabled-darkmode
Critical
#6d1d13
red-800
<tw>-background-critical-darkmode
Border
We use 4 border colors for any linear elements across the products:- Regular is used as a default on outlined interactive components’ border unless stated otherwise.
- Subdued is used on dividers, disabled and card components’ border.
- Brand is used on secondary button’s border and outline for components on select states.
- Disabled is used on disabled components or sections.
Regular
#72777E
neutral-600
<tw>-border-regular
Subdued
#D6D8DB
neutral-300
<tw>-border-subdued
Brand
#280f96
primary-800
<tw>-border-brand
Themeable
Disabled
#ECEDEF
neutral-200
<tw>-border-disabled
Critical
#c7200a
red-600
<tw>-border-critical
Regular
#D6D8DB
neutral-300
<tw>-border-regular-darkmode
Subdued
#52565C
neutral-700
<tw>-border-subdued-darkmode
Brand
#AEA9FE
primary-400
<tw>-border-brand-darkmode
Themeable
Disabled
#52565C
neutral-700
<tw>-border-disabled-darkmode
Critical
#f65f50
red-500
<tw>-border-critical-darkmode
General
General UI color has various darkness that allows flexibility and ensures appropriate contrasts. Typically, they are used on the elements of the UI components other than text, icon, and border. This category is not expected to be used often in designers daily prototyping.Make sure the foreground and background’s contrast passes the accessibility test. Tool for checking contrast
For color usage guidance in data charts, please refer to chart color guidance page
Brand primary
#6253da
primary-600
<tw>-general-brand-primary
Themeable
Brand secondary
#AEA9FE
primary-400
<tw>-general-brand-secondary
Themeable
Brand tertiary
#6253da
primary-300
<tw>-general-brand-tertiary
Themeable
Brand quaternary
#6253da
primary-200
<tw>-general-brand-quaternary
Themeable
Brand accent primary
#009696
secondary-600
<tw>-general-brand-primary
Themeable
Brand accent secondary
#80dbdb
secondary-400
<tw>-general-brand-accent-secondary
Themeable
Brand accent tertiary
#009696
secondary-300
<tw>-general-brand-accent-tertiary
Themeable
Brand accent quaternary
#009696
secondary-200
<tw>-general-brand-accent-quaternary
Themeable
Red primary
#C7200A
red-600
<tw>-general-red-primary
Red secondary
#F0766B
red-400
<tw>-general-red-secondary
Red tertiary
#FDB6B0
red-300
<tw>-general-red-tertiary
Red quaternary
#FBE7E5
red-200
<tw>-general-red-quaternary
Yellow primary
#E17605
yellow-600
<tw>-general-yellow-primary
Yellow secondary
#FFB200
yellow-500
<tw>-general-ellow-secondary
Yellow tertiary
#FFD87F
yellow-400
<tw>-general-yellow-tertiary
Yellow quaternary
#FFF6E1
yellow-200
<tw>-general-yellow-quaternary
Green primary
#39800B
green-700
<tw>-general-green-primary
Green secondary
#A3D982
green-400
<tw>-general-green-secondary
Green tertiary
#D1ECC0
green-300
<tw>-general-green-tertiary
Green quaternary
#EEF8E8
green-200
<tw>-general-green-quaternary
Blue primary
#1684C4
blue-600
<tw>-general-blue-primary
Blue secondary
#6CBFEF
blue-400
<tw>-general-blue-secondary
Blue tertiary
#B6DFF7
blue-300
<tw>-general-blue-tertiary
Blue quaternary
#E3F3FC
blue-200
<tw>-general-blue-quaternary
Aqua primary
#009696
aqua-600
<tw>-general-aqua-primary
Aqua secondary
#80DBDB
aqua-400
<tw>-general-aqua-secondary
Aqua tertiary
#BFEDED
aqua-300
<tw>-general-aqua-tertiary
Aqua quaternary
#E7F8F8
aqua-200
<tw>-general-aqua-quaternary
Indigo primary
#280F96
indigo-800
<tw>-general-indigo-primary
Indigo secondary
#6253DA
indigo-600
<tw>-general-indigo-secondary
Indigo tertiary
#CCCCFF
indigo-300
<tw>-general-indigo-tertiary
Indigo quaternary
#EBEBFF
indigo-200
<tw>-general-indigo-quaternary
Gray primary
#2F3946
gray-800
<tw>-general-gray-primary
Gray secondary
#B5BFCA
gray-400
<tw>-general-gray-secondary
Gray tertiary
#D0D9E1
gray-300
<tw>-general-gray-tertiary
Gray quaternary
#E8EDF3
gray-200
<tw>-general-gray-quaternary
Neutral primary
#373A3E
neutral-800
<tw>-general-neutral-primary
Neutral secondary
#BBBFC4
neutral-400
<tw>-general-neutral-secondary
Neutral tertiary
#D6D8DB
neutral-300
<tw>-general-neutral-tertiary
Neutral quaternary
#ECEDEF
neutral-200
<tw>-general-neutral-quaternary
Pink primary
#951AA1
pink-700
<tw>-general-pink-primary
Pink secondary
#E192ED
pink-400
<tw>-general-pink-secondary
Pink tertiary
#EFC7F5
pink-300
<tw>-general-pink-tertiary
Pink quaternary
#F9E3FD
pink-200
<tw>-general-pink-quaternary
Light primary
#FFFFFF
white
<tw>-general-light-primary
Light secondary
#f5f5ff
primary-100
<tw>-general-light-secondary
Themeable
Dark primary
#130A76
primary-900
<tw>-general-dark-primary
Themeable
Brand primary
#887EFC
primary-500
<tw>-general-brand-primary-darkmode
Themeable
Brand secondary
#4837b9
primary-700
<tw>-general-brand-secondary-darkmode
Themeable
Brand tertiary
#280f96
primary-800
<tw>-general-brand-tertiary-darkmode
Themeable
Brand quaternary
#130A76
primary-800
<tw>-general-brand-quaternary-darkmode
Themeable
Brand accent primary
#60d2d2
secondary-500
<tw>-general-brand-primary-darkmode
Themeable
Brand accent secondary
#247f7e
secondary-700
<tw>-general-brand-accent-secondary-darkmode
Themeable
Brand accent tertiary
#1c6363
secondary-800
<tw>-general-brand-accent-tertiary-darkmode
Themeable
Brand accent quaternary
#124040
secondary-900
<tw>-general-brand-accent-quaternary-darkmode
Themeable
Red primary
#F65F50
red-500
<tw>-general-red-primary-darkmode
Red secondary
#98291A
red-700
<tw>-general-red-secondary-darkmode
Red tertiary
#6D1D13
red-800
<tw>-general-red-tertiary-darkmode
Red quaternary
#380F0A
red-900
<tw>-general-red-quaternary-darkmode
Yellow primary
#FFB200
yellow-500
<tw>-general-yellow-primary-darkmode
Yellow secondary
#CA6902
yellow-700
<tw>-general-ellow-secondary-darkmode
Yellow tertiary
#933D00
yellow-800
<tw>-general-yellow-tertiary-darkmode
Yellow quaternary
#662A00
yellow-900
<tw>-general-yellow-quaternary-darkmode
Green primary
#76C643
green-500
<tw>-general-green-primary-darkmode
Green secondary
#427D1B
green-600
<tw>-general-green-secondary-darkmode
Green tertiary
#305C14
green-800
<tw>-general-green-tertiary-darkmode
Green quaternary
#1E3E09
green-900
<tw>-general-green-quaternary-darkmode
Blue primary
#61C5FF
blue-500
<tw>-general-blue-primary-darkmode
Blue secondary
#1684C4
blue-600
<tw>-general-blue-secondary-darkmode
Blue tertiary
#096290
blue-700
<tw>-general-blue-tertiary-darkmode
Blue quaternary
#0B4465
blue-800
<tw>-general-blue-quaternary-darkmode
Aqua primary
#80DBDB
aqua-400
<tw>-general-aqua-primary-darkmode
Aqua secondary
#009696
aqua-600
<tw>-general-aqua-secondary-darkmode
Aqua tertiary
#1C6363
aqua-800
<tw>-general-aqua-tertiary-darkmode
Aqua quaternary
#124040
aqua-900
<tw>-general-aqua-quaternary-darkmode
Indigo primary
#887EFC
indigo-500
<tw>-general-indigo-primary-darkmode
Indigo secondary
#6253DA
indigo-600
<tw>-general-indigo-secondary-darkmode
Indigo tertiary
#4837B9
indigo-700
<tw>-general-indigo-tertiary-darkmode
Indigo quaternary
#280F96
indigo-800
<tw>-general-indigo-quaternary-darkmode
Gray primary
#919DAC
gray-500
<tw>-general-gray-primary-darkmode
Gray secondary
#6C7989
gray-600
<tw>-general-gray-secondary-darkmode
Gray tertiary
#475566
gray-700
<tw>-general-gray-tertiary-darkmode
Gray quaternary
#2F3946
gray-800
<tw>-general-gray-quaternary-darkmode
Neutral primary
#989DA4
neutral-500
<tw>-general-neutral-primary-darkmode
Neutral secondary
#72777E
neutral-600
<tw>-general-neutral-secondary-darkmode
Neutral tertiary
#52565C
neutral-700
<tw>-general-neutral-tertiary-darkmode
Neutral quaternary
#373A3E
neutral-800
<tw>-general-neutral-quaternary-darkmode
Pink primary
#E192ED
pink-400
<tw>-general-pink-primary-darkmode
Pink secondary
#AF1EBE
pink-600
<tw>-general-pink-secondary-darkmode
Pink tertiary
#951AA1
pink-700
<tw>-general-pink-tertiary-darkmode
Pink quaternary
#6E1377
pink-800
<tw>-general-pink-quaternary-darkmode
Light primary
#FFFFFF
white
<tw>-general-light-primary-darkmode
Dark primary
#130A76
primary-900
<tw>-general-dark-primary-darkmode
Themeable
Dark secondary
#130A76
primary-900
<tw>-general-dark-secondary-darkmode
Themeable
Brand
Terra design system has all the brand colors scattered under semantic categories (CTA, Text, Border, General UI). Below are only for reference.Only as reference
indigo-800
Only as reference
indigo-600
Only as reference
indigo-300
Only as reference
indigo-200
Only as reference
aqua-600