Color | Foundations

Color is a crucial aspect of our visual language, conveying meaning, emphasis, and hierarchy in our product UI. Built on the Vista brand guidelines, our colors enhance our customers' experience by clearly differentiating elements, guiding interactions, and maintaining visual coherence throughout Vista products.

Color decisions are stored in tokens which sync between code and Figma. All color-related design tokens start with the word color, followed by a property: bg, border, icon, or text. The full list of color tokens can be seen on the All Tokens page.

Palettes

SWAN’s color system is composed of eight palettes for different UI needs.

A neutral color palette is commonly used for text, icons, backgrounds, borders, and interactive states.

Two opacity palettes align to the grey palette, used on backgrounds and elevations allowing them to blend into the surface below.

Five saturated color palettes are used for semantic roles, such as error and warning. See "Roles" below.

Semantic roles

The saturated palettes are used as a basis for semantic roles within SWAN. These roles (and their colors) provide consistency around feedback for positive or negative actions for users. Ensure you are using matching your use case to the specific semantic role—do not use a role just to achieve a particular color.

ROLE	DESCRIPTION
Info	To signify neutral information
Accent	To signify a standout area or a brand moment
Success	To signify a positive outcome, e.g. user data successfully submitted
Warning	To signify caution of a possible action
Error	To signify a negative outcome, e.g. user data cannot be submitted
Promo	To signify promotional content, e.g. discounts
Help	To signify content relating to user help, e.g. CARE

<GridContainer>
  <Row fontWeight="bold">
    <Column span={6}>Standard mode</Column>
    <Column span={6}>Dark mode</Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="info" standardMode>
        info
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="info" darkMode pl={1}>
        info
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="accent" standardMode>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="accent" darkMode pl={1}>
        accent
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="success" standardMode>
        success
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="success" darkMode pl={1}>
        success
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="warning" standardMode>
        warning
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="warning" darkMode pl={1}>
        warning
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="error" standardMode>
        error
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="error" darkMode pl={1}>
        error
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="promo" standardMode>
        promo
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="promo" darkMode pl={1}>
        promo
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="help" standardMode>
        help
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="help" darkMode pl={1}>
        help
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row fontWeight="bold">
    <Column span={6}>Standard mode</Column>
    <Column span={6}>Dark mode</Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="info" standardMode>
        info
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="info" darkMode pl={1}>
        info
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="accent" standardMode>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="accent" darkMode pl={1}>
        accent
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="success" standardMode>
        success
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="success" darkMode pl={1}>
        success
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="warning" standardMode>
        warning
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="warning" darkMode pl={1}>
        warning
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="error" standardMode>
        error
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="error" darkMode pl={1}>
        error
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="promo" standardMode>
        promo
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="promo" darkMode pl={1}>
        promo
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="help" standardMode>
        help
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="help" darkMode pl={1}>
        help
      </Box>
    </Column>
  </Row>
</GridContainer>

Pairing roles

Role-related colors are made to work together. This means that any role-related text color (e.g. sem.color.text.success) will work on its equivalent background color (e.g. sem.color.bg.success). The text color sem.color.text.success-alt can also be used with the success role background color to achieve desaturated text. However, most role colors don't necessarily have to be used together.

<>
  <Card bgc="success" textColor="success" mb="4">
    Success background with success text
  </Card>
  <Card bgc="success" textColor="success-alt">
    Success background with success-alt text
  </Card>
</>

<>
  <Card bgc="success" textColor="success" mb="4">
    Success background with success text
  </Card>
  <Card bgc="success" textColor="success-alt">
    Success background with success-alt text
  </Card>
</>

Role colors with "paired" in their name however must be used together. This is because they require specific color pairings to meet accessibility contrast requirements in both Standard and Dark modes. For example, sem.color.text.help-strong-paired and sem.color.bg.help-strong-paired must always be used together.

Interaction

Colors often have sets of related values (with related tokens) to support different interaction states such as hover and active. When applicable, these will build on existing emphasis levels; for example, sem.color.bg.strong.hover is the hover state version of the "strong" background color.

Selected color tokens such as sem.color.border.selected and sem.color.bg.selected-accent tokens also have interaction states.

Focus is signified through through borders, and thus doesn't have corresponding tokens like hover. If required, sem.focus tokens can be used.

Dark mode

Dark mode reverses the colors of a section of your page, enabling text and components to be legible on darker backgrounds.

For more information on modes, see Modes.

Brand colors

Vista Blue is our main brand color, however it only should appear sparingly in key parts of the UI. It is used in specific components to help guide customers through the site. Do not apply it to other components or UI.

Warm White and Midnight are two brand colors you can use to on the site to help create an ownable brand aesthetic.

Apply Warm White to the background of “text-only” areas to create a soft contrast with the default white page background. Using it as the background for FAQs background will make these sections more consistently recognizable.
Warm White and Midnight can be used as a marketing Banner background.
Apply Midnight to the site footer.

Seasonal palettes

This is planned for release after the visual language refresh has gone live in SWAN v3.3. More information coming soon!

Applying color in code

SWAN provides a set of color core props that can be used on any component. For more information, see Color props.