Color

Color Palette

Visage starts with a base palette, used for the Visage UI components and typography. Then we add a secondary "rainbow" palette, used for marketing purposes, such as the background colors of banners and heroes.

The colors "holiday", "error", and "discount" should be used only for the purposes indicated by their names.

In Code

In your page code, you should rarely need to reference a particular color by name. Instead, Visage offers semantic color names in its design tokens and CSS custom properties. This allows you to reference a color by what it's used for -- and when the site rebrands, your page will pick up the new colors automatically.

Background Color

Visage supports changing the background color of an element to one of a set of colors from our palette.

Note: setting the background color will not automatically change the text color! If you are using a dark background color, you will need to make sure you maintain a 4.5:1 contrast between text and color, such as by setting the font color with Typography, or by using "Dark Mode" on the element (see below).

Playground

React

In React, you can use the backgroundColor prop on any component to change the background color.

Vanilla

<div class="background-light-blue">
  <!-- can be any tag, not just div -->
  content goes here
</div>

Guidelines

Designer Guidelines

The "loading-shimmer" background is for sections of pages that are currently loading, such as skeleton screens. Typically a section with this background will not have any content inside of it.

Accessibility Guidelines

All text must have at least a 4.5:1 contrast ratio with its background, so remember to set your text color appropriately.

SEO Considerations

A background color must be really different from the text on the top of it. Displaying text with the same or similar color as the background (e.g. light grey text on a white background) may generate a penalty from Google, as this will be considered hidden content.

Text color

<>
  <Typography textColor="dark-grey">dark-grey</Typography>
  <Typography textColor="white" style={{ backgroundColor: 'black' }}>
    white
  </Typography>
  <Typography textColor="holiday">holiday</Typography>
  <Typography textColor="error">error</Typography>
  <Typography textColor="alert">alert</Typography>
</>

<!-- doesn't have to a be a div tag; use on any tag -->
<div class="text-color-holiday">holiday</div>

Dark Mode

If your page content is on top of a dark background, such as a dark backgroundColor (see above) or a dark-colored image, Visage supports a "dark mode" that can be placed on an element. Dark Mode will change the text color to white, and also change the colors of the Visage components to ensure a correct color contrast.

<>
  <Box backgroundColor="violet" darkMode p={4}>
    <p>This box shows Dark Mode on a "Violet" background.</p>
    <TextButton skin="secondary">Sample button</TextButton>
  </Box>
</>

<div class="dark-mode background-caspian">
  <p>This box shows Dark Mode on a background with color "caspian".</p>
  <button class="textbutton-skin-primary textbutton">Sample button</button>
</div>