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.

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
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
Accent	To signify a standout area or a brand moment
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="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="accent" standardMode>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="accent" darkMode pl={1}>
        accent
      </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="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="accent" standardMode>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="accent" darkMode pl={1}>
        accent
      </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

Warm White and Midnight are two of our new brand colors, and we are looking to integrate it on our site to help create an ownable brand aesthetic.

Infuse Warm White on “text-only” areas to create a soft contrast with white backgrounds. Using it as the background for FAQs background will make these sections more consistently recognizable.
Warm White can also be used as a marketing banner background.
Infuse Midnight on the site footer to make it branded and ownable.

Seasonal palettes

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

Props

Text

The textColor prop is a core prop that can be used to change the color of text. (In the vanilla API, this is the CSS class swan-text-color-[color] instead, e.g. swan-text-color-error.)

Ensure that text and background meets a 4.5:1 color contrast ratio.

<GridContainer>
  <Row fontSkin="title-subsection" mb={5}>
    <Column span={6}>Standard mode</Column>
    <Column span={6}>Dark mode</Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="standard" standardMode>
        standard
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="standard" darkMode bgc="standard" px={3}>
        standard
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="subtle" standardMode>
        subtle
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="subtle" darkMode bgc="standard" px={3}>
        subtle
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="info" standardMode>
        info
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="info" darkMode bgc="standard" px={3}>
        info
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="success" standardMode>
        success
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="success" darkMode bgc="standard" px={3}>
        success
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="warning" standardMode>
        warning
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="warning" darkMode bgc="standard" px={3}>
        warning
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="error" standardMode>
        error
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="error" darkMode bgc="standard" px={3}>
        error
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="accent" standardMode>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="accent" darkMode bgc="standard" px={3}>
        accent
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="promo" standardMode>
        promo
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="promo" darkMode bgc="standard" px={3}>
        promo
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="help" standardMode>
        help
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="help" darkMode bgc="standard" px={3}>
        help
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row fontSkin="title-subsection" mb={5}>
    <Column span={6}>Standard mode</Column>
    <Column span={6}>Dark mode</Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="standard" standardMode>
        standard
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="standard" darkMode bgc="standard" px={3}>
        standard
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="subtle" standardMode>
        subtle
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="subtle" darkMode bgc="standard" px={3}>
        subtle
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="info" standardMode>
        info
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="info" darkMode bgc="standard" px={3}>
        info
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="success" standardMode>
        success
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="success" darkMode bgc="standard" px={3}>
        success
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="warning" standardMode>
        warning
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="warning" darkMode bgc="standard" px={3}>
        warning
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="error" standardMode>
        error
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="error" darkMode bgc="standard" px={3}>
        error
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="accent" standardMode>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="accent" darkMode bgc="standard" px={3}>
        accent
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="promo" standardMode>
        promo
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="promo" darkMode bgc="standard" px={3}>
        promo
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box textColor="help" standardMode>
        help
      </Box>
    </Column>
    <Column span={6}>
      <Box textColor="help" darkMode bgc="standard" px={3}>
        help
      </Box>
    </Column>
  </Row>
</GridContainer>

Background

The backgroundColor (or bgc) prop is a core prop that can be used to change the color of the background. (In the vanilla API, this is the CSS class swan-bgc-[color] instead, e.g. swan-bgc-error.)

Ensure that text and background meets a 4.5:1 color contrast ratio. The BACKGROUND_WITH_MODE object can be used to dynamically set Dark mode to ensure the correct contrast.

<GridContainer>
  <Row fontSkin="title-subsection" mb={5}>
    <Column span={6}>Standard mode</Column>
    <Column span={6}>Dark mode</Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="standard" standardMode p={3}>
        standard
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="standard" darkMode p={3}>
        standard
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="strong" standardMode p={3}>
        strong
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="strong" darkMode p={3}>
        strong
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="black" standardMode p={3}>
        black
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="black" darkMode p={3}>
        black
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="transparent" standardMode p={3}>
        transparent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="transparent" darkMode p={3}>
        transparent
      </Box>
    </Column>
  </Row>
  <Row fontWeight="bold" fontSkin="title-item" mt={5} mb={3}>
    <Column span={6}>Semantic colors</Column>
    <Column span={6}></Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="info" standardMode p={3}>
        info
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="info" darkMode p={3}>
        info
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="success" standardMode p={3}>
        success
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="success" darkMode p={3}>
        success
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="warning" standardMode p={3}>
        warning
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="warning" darkMode p={3}>
        warning
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="error" standardMode p={3}>
        error
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="error" darkMode p={3}>
        error
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="accent" standardMode p={3}>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="accent" darkMode p={3}>
        accent
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="promo" standardMode p={3}>
        promo
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="promo" darkMode p={3}>
        promo
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="help" standardMode p={3}>
        help
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="help" darkMode p={3}>
        help
      </Box>
    </Column>
  </Row>
  <Row fontWeight="bold" fontSkin="title-item" mt={5} mb={3}>
    <Column span={6}>Brand colors</Column>
    <Column span={6}></Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="warm-white" standardMode p={3}>
        warm-white
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="warm-white" darkMode p={3}>
        warm-white
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="midnight" standardMode p={3}>
        midnight
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="midnight" darkMode p={3}>
        midnight
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row fontSkin="title-subsection" mb={5}>
    <Column span={6}>Standard mode</Column>
    <Column span={6}>Dark mode</Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="standard" standardMode p={3}>
        standard
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="standard" darkMode p={3}>
        standard
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="strong" standardMode p={3}>
        strong
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="strong" darkMode p={3}>
        strong
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="black" standardMode p={3}>
        black
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="black" darkMode p={3}>
        black
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="transparent" standardMode p={3}>
        transparent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="transparent" darkMode p={3}>
        transparent
      </Box>
    </Column>
  </Row>
  <Row fontWeight="bold" fontSkin="title-item" mt={5} mb={3}>
    <Column span={6}>Semantic colors</Column>
    <Column span={6}></Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="info" standardMode p={3}>
        info
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="info" darkMode p={3}>
        info
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="success" standardMode p={3}>
        success
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="success" darkMode p={3}>
        success
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="warning" standardMode p={3}>
        warning
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="warning" darkMode p={3}>
        warning
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="error" standardMode p={3}>
        error
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="error" darkMode p={3}>
        error
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="accent" standardMode p={3}>
        accent
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="accent" darkMode p={3}>
        accent
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="promo" standardMode p={3}>
        promo
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="promo" darkMode p={3}>
        promo
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="help" standardMode p={3}>
        help
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="help" darkMode p={3}>
        help
      </Box>
    </Column>
  </Row>
  <Row fontWeight="bold" fontSkin="title-item" mt={5} mb={3}>
    <Column span={6}>Brand colors</Column>
    <Column span={6}></Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="warm-white" standardMode p={3}>
        warm-white
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="warm-white" darkMode p={3}>
        warm-white
      </Box>
    </Column>
  </Row>
  <Row>
    <Column span={6}>
      <Box bgc="midnight" standardMode p={3}>
        midnight
      </Box>
    </Column>
    <Column span={6}>
      <Box bgc="midnight" darkMode p={3}>
        midnight
      </Box>
    </Column>
  </Row>
</GridContainer>

MARKETING_COLORS deprecated in SWAN v3.2

Import the object from @vp/marketing-colors instead. Find more information and migration documentation in the Deprecation roadmap.

For marketing-specific background colors, the MARKETING_COLORS object offers a set of approved marketing-only background colors for use in Contentful/Builder. These can be used with whitelisted SWAN components (such as Banner) through the --swan-public-marketing-background CSS Custom Property.