{" "}

## What we learned

Hey there! We just had our design workshop number 2 and it was great joy to share with you all of the new things we have been working on. Here is what you missed:

- Answering some frequently asked questions since we released.
- Learning about our new component api.
- Deep diving on our button component
- Our new css framework
- Slots (new figma pattern for components)

 

---

## The workshop video

<YoutubeEmbed videoid="e_jzDfTdjow" />

Continuing our deep dive in our new design system.

To the right of the image, a woman sits at a desk looking down at her computer. Around her head are bubbles depicting a quote, a video, a website, and a message. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 2 - WPDS for Designers'. 'WP Design System' appears on the lower left.

WPDS v1 - Design Workshop 2

Watch Brian Alfaro lead a design workshop for our v1 rollout of the new WPDS. (Recorded
March 16th, 2022).
 

<YoutubeEmbed videoid="cODayPp8b_U" />
 

**Chapters:**

 

[**0:00**](https://www.youtube.com/watch?v=cODayPp8b_U&t=0s) - Agenda & intro

 

[**3:16**](https://www.youtube.com/watch?v=cODayPp8b_U&t=196s) - Our new tokens

 

[**5:49**](https://www.youtube.com/watch?v=cODayPp8b_U&t=349s) - Color tokens

 

[**7:26**](https://www.youtube.com/watch?v=cODayPp8b_U&t=446s) - Numeric tokens

 

[**12:47**](https://www.youtube.com/watch?v=cODayPp8b_U&t=767s) - Context (light and dark)

 

[**17:24**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1044s) - Color intention (theming)

 

[**21:26**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1286s) - Figma plugin (Token
tools)

 

[**25:09**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1509s) - Component API

 

[**27:47**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1667s) - Zeplin code/style guide

 

[**30:30**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1830s) - Zeplin extension

 

[**31:59**](https://www.youtube.com/watch?v=cODayPp8b_U&t=1919s) - Navigation our doc site

Watch Brian Alfaro lead a design workshop for our rollout of the new WPDS.

To the right of the image, a woman sits at a desk looking down at her computer. Around her head are bubbles depicting a quote, a video, a website, and a message. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 1 - WPDS for Designers'. 'WP Design System' appears on the lower left.

WPDS v1 - Design Workshop

## What's happening

Watch Arturo Silva lead our second developer workshop for our v1 rollout of the new
WPDS. Same topics as the first one, but with a different approach. (Recorded April
7th, 2022).

 

## Topics discussed

- Box component
- Theme package's OOTB Stitches functions
 - `css`
 - `styled`
 - `theme`
 - `utils`
- The differences between SASS/SCSS and CSS-in-JS
- How to use the `css` function in Svelte, Vue.js, and more
- and much more!

 

<YoutubeEmbed videoid="pDQK-UJ2LJQ" />

Watch Arturo Silva lead our second developer workshop for our v1 rollout of the new WPDS. Same topisc as the first one, but with a different approach.

To the right of the image, a man stands holding a text box with both hands. In front of him a large website floats in front of him. He appears to be inserting the text box into the upper left of the website. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 2 - WPDS for Developers'. 'WP Design System' appears on the lower left.

WPDS v1 - Developer Workshop 2

Watch Arturo Silva lead a developer workshop for our v1 rollout of the new WPDS.
(Recorded March 17th, 2022).
 

<YoutubeEmbed videoid="CN-vbXz0asI" />

Watch Arturo Silva lead a developer workshop for our v1 rollout of the new WPDS.

To the right of the image, a man stands holding a text box with both hands. In front of him a large website floats in front of him. He appears to be inserting the text box into the upper left of the website. On the upper left of the image, the word 'WORKSHOP' appears in large bold letters. The words below this say 'Session 1 - WPDS for Developers'. 'WP Design System' appears on the lower left.

WPDS v1 - Developer Workshop

---

## Getting started

### Requesting access

If you are a Washington Post employee, please submit a SAR to gain access to your
Figma Product & Design workspace. If you are not a post employee and are
looking to use WPDS Ui Kit, please reference these Figma files.
[WPDS Ui Kit & WPDS Asset Manager](https://www.figma.com/@WPDS).

#### Prerequisite

Before jumping into Figma and using our design system, you must first understand the concepts around our system. The Figma library is built and designed to parallel what is happening in the code.
Please read over the following before proceeding with this guide.

1. [Color](/foundations/color)
2. Tokens - `color`, `radius`, `shadow`, `size`, `typoggraphy`, `z-index`
3. [Asset](/foundations/wam)

---

## Using components

### Enabling our Figma libraries

When using our Figma library, it is essential not to detach as this will
give you the optimal experience when handing off designs to a developer.

<Container>
 <Box
 as="iframe"
 css={{ minHeight: "640px", maxWidth: "100%", padding: "$100 $100" }}
 src="https://scribehow.com/embed/Our_Figma_Library__hutMYjdCRe-Anb5ckKUvpw"
 width="100%"
 height="640"
 allowfullscreen
 frameborder="0"
 ></Box>
</Container>

### Component variants

All of our components match the coded API (properties of the variants)
as close as possible.

<Container>
 <Box
 as="iframe"
 css={{ minHeight: "640px", maxWidth: "100%", padding: "$100 $100" }}
 src="https://scribehow.com/embed/Component_Api__rc7AiXYQTX2fe4lMLEOnHg"
 width="100%"
 height="640"
 allowfullscreen
 frameborder="0"
 ></Box>
</Container>

#### Slots

Some of our components use a concept called slots. Slots are for you to
replace with your component or nest another component. To replace,
select the slot in the layer and replace it with the desired component.
You can build out a design that does not need to be detached by replacing slots.

<Container caption="This example shows available slots to replace with other local or design system components">
 <InlineImage
 width={252}
 height={285}
 maxWidth="100%"
 src="/img/guides/figma/slots.png"
 />
</Container>

#### Icons

If an icon layer of a component is locked, this indicates that you should not change the icon. Otherwise, you may modify the icon glyph using any icon available in our Asset Manager.

#### Use Figma variant controls

Only use the Figma variant controls when modifying the Figma component to apply the desired variant. These controls closely match
to the coded component and inform the developer on what property value to assign.
Avoid manually overriding the properties by selecting the layers.

<Container>
 <InlineImage
 width={318}
 height={156}
 maxWidth="100%"
 src="/img/guides/figma/component_properties.gif"
 />
</Container>

---

## Using our tokens

### Applying tokens

In Figma, we have two tokens managed by the native Figma UI.
The shadow and color tokens can be accessed by
selecting the style icon. All other tokens are handled either through our token
tools or manually.

#### Applying color

Select the style icon and apply the fill or stroke color to apply a color token in Figma.
When selecting a color style, all tokens are displayed; a helpful way
of picking the right colors is to use our [theme](/foundations/color#Themes) alias to assign color with intention.

<Container>
 <InlineImage
 width={239}
 height={322}
 maxWidth="100%"
 src="/img/guides/figma/using_theme.gif"
 />
</Container>

#### Applying shadows

To apply shadows to an element, select the effects in the design panel and apply one of the shadow tokens.

<Container>
 <InlineImage
 width={228}
 height={322}
 maxWidth="100%"
 src="/img/guides/figma/applying_shadows.gif"
 />
</Container>

### Applying other tokens

We developed a plugin to manage and assign tokens in Figma that are currently
not supported or flexible enough to be used in design without detaching the style.
Our plugin resolves this by connecting our tokens while still being flexible in Figma.

#### Installing Token Tools

To install the plugin, visit the [plugin landing page](https://www.figma.com/community/plugin/1044987008646864166/Token-Tool)
and install. You will now have access to the plugin in your Figma file. If you do not see the plugin, please reload the file.

#### Token tools

Token Tools is a plugin that we will iterate and expand on as our needs grow with the system.
The interface design mimics Figma UI to avoid learning new interaction patterns.

<Container>
 <InlineSVG width={300} height={600} path="/img/guides/figma/plugin.svg" />
</Container>

#### Theme

The theme tool in token tools applies the matching color for that theme switching it from its
current context to the following context.

<Container>
 <InlineImage
 width={1148}
 height={406}
 maxWidth="100%"
 src="/img/guides/figma/plugin_theme.gif"
 />
</Container>

#### Border radius

Using the border radius tool will apply the border radius token to any frame or shape that
has a uniform border radius.

<Container>
 <InlineImage
 width={1158}
 height={540}
 maxWidth="100%"
 src="/img/guides/figma/border_radius.gif"
 />
</Container>

#### Font size & Line height

The font size and line height tool will apply the token to the selected text element.

<Container>
 <InlineImage
 width={1158}
 height={540}
 maxWidth="100%"
 src="/img/guides/figma/font_size_line_height.gif"
 />
</Container>

#### Font weight & Font Family

Currently, token tools do not manage font family or font weight. However, in the WPDS Zeplin extension, the extension will note the tokens. For more information, please refer to our tokens documentation to apply the correct value in
Figma.

 

#### [Read next our Zeplin guide >](/resources/guides/zeplin-guide)

Figma is our tool of choice when designing and using our design system. Other design software is currently not supported, but maybe in the future.

Figma Guide

---

## Getting started

### Requesting access

If you are a Washington Post employee, please submit a SAR to access our Zeplin Product & Design workspace. If you are not a post-employee and want to use Zeplin in your suite, please reference our Figma file to upload and create your style guide.

### Creating a Zeplin project

<Container>
 <Box
 as="iframe"
 css={{ minHeight: "640px", padding: "$100 $100" }}
 src="https://scribehow.com/embed/Creating_a_Zeplin_project__3QIHj0krQKKwmVOizwQ50Q"
 width="100%"
 height="640"
 allowfullscreen
 frameborder="0"
 ></Box>
</Container>

### Connecting WPDS Styleguide

<Container>
 <Box
 as="iframe"
 css={{ minHeight: "640px", maxWidth: "100%", padding: "$100 $100" }}
 src="https://scribehow.com/embed/Zeplin_Workflow__Sl-5tsJ3R26TMT8HyT_4QQ"
 width="100%"
 height="640"
 allowfullscreen
 frameborder="0"
 ></Box>
</Container>

### Connected Components

By linking the style guide you unlock our connected compoents. Selecting a component connected to code in Zeplin will reveal a code snippet and the props chosen for the component variant. This happens when you use our Figma Ui Kit components!

<Container caption="In this example the properties reveal taht 32 was selected for the prop `size`">
 <InlineImage
 src="/img/guides/zeplin/connected.png"
 width={520}
 height={671}
 maxWidth="100%"
 />
</Container>

#### Properties

We do our best to ensure that our Figma API that translates to Zeplin properties matches as close to 1:1 of the actual coded component. However, you might find some properties like states that are not in the coded component; this is due to the nature of Figma. In those instances, you can ignore it unless otherwise documented.

---

## Extension

### Getting WPDS Extension

Zeplin supports a good amount of tokens; there are some limitations in how some tokens are managed or not managed at all. Right not the current tokens managed by Zeplin is only color. We chose not to manage typestyles; instead, we highlight individual tokens font size, font, line height using our extension. We also manage tokens like border radius and shadows using our extension.

#### Installing the extension

Select the project in Zeplin you would like to add the extension to and then select extension > explore extensions > add WPDS Tokens.

<Container>
 <Box
 as="iframe"
 css={{ minHeight: "640px", padding: "$100 $100" }}
 src="https://scribehow.com/embed/WPDS_Zeplin_Extension__5t1hkwhtTzWyXS749Yk-2g"
 width="100%"
 height="640"
 allowfullscreen
 frameborder="0"
 ></Box>
</Container>

#### Typography tokens

To reveal the typography tokens, select a text layer to have the extension show the properties of that text.

<Container>
 <InlineImage
 alt="Animated image of showing how to add the WPDS extension"
 width={323}
 height={195}
 maxWidth="100%"
 src="/img/guides/zeplin/text_tokens.png"
 />
</Container>

#### Border radius and shadows

To reveal the border radius or shadow, select a layer with a border radius or shadow, and the extension will show the corresponding tokens.

<Container>
 <InlineImage
 alt="Animated image of showing how to add the WPDS extension"
 width={318}
 height={156}
 maxWidth="100%"
 src="/img/guides/zeplin/shadow_border.png"
 />
</Container>

#### Token syntax

Note that all tokens will display in stitches token string format by adding a $. Stitches is our default styling framework for our system, but if you need to refer to the token, drop the $.

Zeplin is our tool of choice when it comes to hand-off. It offers a layer of connection to code and design not yet realized by other tools.

Zeplin Guide

## Stitches

The Washington Post Design System utilizes the css-in-js library, [Stitches](https://stitches.dev/), to optimize app performance and dev experience. For more context about why we use Stitches, [check out this post by the WPDS team.](https://build.washingtonpost.com/resources/architecture/stitches#Supporting%20Community)

---

## Stitches functions

Stitches functions make creating and styling components easy. Below, we’ll dive into the functions most useful to a user of our UI Kit, but check out Stitches’ [other functions](https://stitches.dev/docs/api) if you’re curious.

## Styled

The `styled` function is used to simply create React components with styles. The arguments to the function are:

1. either an HTML element or a react component
2. styles

Component variants may also be specified. For example:

```jsx
import { styled, css } from '@washingtonpost/wpds-ui-kit'

// create a new component, 'FancyButton', which modifies a 'button' element
const FancyButton = styled('button', {
	// base styles

	variants: {
		variant: {
			fancier: {
				// fancier styles
			},
			fanciest : {
				// fanciest styles
			},
		},
	},
});

// Use it
<FancyButton>I'm fancy!</FancyButton>
<FancyButton variant="fancier">I am fancier!</FancyButton>
```

## CSS

The `css` function can be used to create reusable styles through the application of a class name or used inline to style individual elements. Here’s an example of inline use, utilizing the already defined `FancyButton` from before:

```jsx
<FancyButton css={{ //base styles, optional variants }}>I'm fancy!</FancyButton>
```

And below demonstrates the application of css through the classname property:

```jsx
const newButton = css({
 // base styles
});

// Use it
<div className={newButton()}>I'm new!</div>;
```

\*\*note: style property names use camel case in these functions (example: `z-index` becomes `zIndex`)

## Keyframes

Another function available in Stitches is the `keyframes` function. Using the keyframe animation technique, Stitches allows the creation of global CSS keyframe rules, which lets transitions be easily reused across code. Below is an example of a simple fading-out animation:

```jsx
import { keyframes } from '@washingtonpost/wpds-ui-kit'

const fadeOut = keyframes({
	from: { opacity: 1 },
	to: { opacity: 0 },
});

// Use it
const fadingInButton = styled("button", {
	'&hover': {
		animation: `${fadeOut} 200ms ease-out`,
	}
)};
```

---

## Theme object and tokens

The theme object contains useful token data that can be applied when styling an element. WPDS specifies its own tokens for many attributes, which can be explored throughout the [foundations section](https://build.washingtonpost.com/#Foundations) of our documentation. Tokens can be accessed in code by using the `theme` object, which is is preferred over using the `$` reference symbol because it provides additional checks. For more information about using our theme tokens, check out [this tutorial](https://build.washingtonpost.com/resources/tutorials/how-to-use-our-theme).\
The `const WPDS` is pre-defined in the UI Kit's [`stitches.config.ts` file](https://github.com/washingtonpost/wpds-ui-kit/blob/main/ui/theme/src/stitches.config.ts).

```jsx
const WPDS = stitches.createStitches({
 prefix,
 theme: {
 colors: {
 ...tokens.light,
 ...tokens.staticColors,
 ...tokens.defaultTheme,
 },
 sizes: tokens.sizes,
 ...
 },
 media: { ... },
 utils: { ... },
});

// Use it
const BestButton = styled('button', {
	// use the size token $200, which is equivalent to 2rem or 32px
	marginTop: theme.space["200"],
	// use the color token $primary, which is equivalent to rgba(17, 17, 17, 1)
	// color tokens change automatically when a color theme is applied
	color: theme.colors.primary,
});
```

## Breakpoints

Stitches is also capable of defining breakpoints, which are reusable media queries useful for responsive styling. The WPDS UI Kit supports a variety of size breakpoints and custom themes, which can be explored in the kit's [`stitches.config.ts` file](https://github.com/washingtonpost/wpds-ui-kit/blob/main/ui/theme/src/stitches.config.ts). The button in the example below would be uniquely styled when the viewport is smaller than `768px`, or `sm`.

```jsx
const WPDS = stitches.createStitches({
 prefix,
 theme: { ... },
 media: {
 sm: "(max-width: 767px)",
 md: "(min-width: 768px) and (max-width: 899px)",
 lg: "(min-width: 900px) and (max-width: 1023px)",
		...
 },
 utils: { ... },
});

// Use it
const VariableButton = styled('button', {
	// Base styles
	"@sm" {
		// small-screen styles
	},
});
```

Note: the `"@dark"` and `"@light"` media queries are responsive only to OS preferences, so styles specified with these will not affect elements based on the theme toggled in the application. To style an element based on local theme, consider stying based on the parent `html` element using the syntax: `[".<className> &"]`. For example:

```jsx
// Adding opacity to an image when local dark mode is enabled.
const StyledImage = styled(Image, {
 paddingRight: "$075",
 [".wpds-dark &"]: { opacity: "0.9" },
});
```

## Utils

Utils allow the creation of custom shortcuts to write certain styling properties. For example, the WPDS ui kit has defined utils `px` and `py`, which affect horizontal and vertical padding, respectively. `px` could then be used in place of `padding-left` and `padding-right` when styling elements. Check out the other utils WPDS supports defined in [the config file](https://github.com/washingtonpost/wpds-ui-kit/blob/main/ui/theme/src/stitches.config.ts).

```jsx
const WPDS = stitches.createStitches({
 prefix,
 theme: { ... },
 media: { ... },
 utils: {
 px: (value: Stitches.PropertyValue<"padding">) => ({
 paddingLeft: value,
 paddingRight: value,
 }),
 py: (value: Stitches.PropertyValue<"padding">) => ({
 paddingTop: value,
 paddingBottom: value,
 }),
		...
 },
});

// Use it
Paragraph with padding
```

---

## Global styles

Another feature of the UI Kit that provides greater consistency is `globalStyles`. [In the `globalStyles` definition](https://github.com/washingtonpost/wpds-ui-kit/blob/main/ui/theme/src/stitches.config.ts#L102), default styles for certain properties are specified by using Stitches’ `globalCSS` function. A `darkModeGlobalStyles` modification is also specified, which alters default color styles in dark mode.

## Dark theme

The WPDS UI Kit currently supports a light and a [dark theme](https://github.com/washingtonpost/wpds-ui-kit/blob/main/ui/theme/src/stitches.config.ts#L94). Using the Stitches function `createTheme`, tokens specified in the `theme` object can be overwritten to create custom themes. In the case of our UI Kit, the dark theme is employed when the breakpoint `dark` is toggled.

---

## Contributing

If your team would benefit from an additional util, breakpoint, or something else, please [reach out](https://build.washingtonpost.com/resources/process/support) to the WPDS team!

Using Stitches to style your projects

A step-by-step guide to making a page using Next.js and UI Kit.

Coding a page

## Video tutorial

<YoutubeEmbed videoid="wYCuVCa5uek" />

In this tutorial, we will learn just how our theme tokens work and interact with our greater color palette. You will understand why you would use a theme token over just using the same color token. Theme tokens are powerful and will help define how we abstract intention from color in the future as we grow.

How to use theme tokens

## Getting started

<Alert dismissable={false} variant={"warning"}>
 Note: If you are not upgrading to our Q2 2022 color tokens this guide
 is not for you and you can review our{" "}
 <a href="/foundations/color">color tokens</a>.
</Alert>

 

Before getting started and reviewing all of our new beautiful colors, we need to spend some time reflecting on just where we are coming from and by that I mean we need to look at our old colors. Long ago before we were even where we are today, our colors used a naming convention based on their perceived lightness against a white background. While that may have worked at one time, we have long since outgrown this naming convention.

 

<Container caption="Example of tokens named by perceived lightness">
 <InlineSVG
 path="/img/guides/color-migration/light_dark_darker.svg"
 width="695px"
 height="115px"
 />
</Container>

 

---

## The problem & resolution

The old way of naming our color tokens presented issues for us to scale as a system. The main issues were the following:

1. **Inconsistent terminology**
 -- The first problem with the way we were naming our tokens was that it was not consistent across color families. What was `lightest` in one color scale, was `pale` in another.

2. **Limited color scales**
 -- The second problem was our inability to grow our color scales. For example how might we add a color between `gray-light` and `gray-lighter` (_gray-semi-light?_). In our new palette there was a need for more colors in each family and this forced us to take a more scalable approach.

3. **Confusing when going from light to dark contexts**
 -- Lastly there is the problem of generating token names based on perceived lightness. In our previous system of color tokens, all perceived lightness was measured against a white background. The problem becomes when we change that background to a dark context, the visual relationship between light and dark is inverted, which is not reflected in the token name. As we want our colors to be adaptive using the same contrast across different contexts, percieved lightness was not a viable approach.

### The resolution

To resolve many of the issues outlined above we have changed our naming convention to use numbers instead of perceived lightness. This has unlocked the ability for our color tokens to flex according to the context, scale to support more colors in a family and avoid inconsistencies across color families.

---

## Phase 1: Translation

If you are an early adopter of our new design system, you have already been using our new color token naming convention. This phase is referred to as a "translation" because our color tokens did not disrupt or add any new colors to our legacy system. We simply translated the previous tokens to a normalized color scale. This provides the runway to begin to scale our color scales accordingly, while having minimum impact when we integrate into our unified palette.

<Container caption="Example of gray-dark translating to gray-80">
 <InlineSVG
 path="/img/guides/color-migration/dark-80.svg"
 width="345px"
 height="115px"
 />
</Container>

 

### Old convention → New convention

<Alert dismissable={false} variant={"warning"}>
 Note: all other Subs colors were deprecated in this translation as
 there was uncertainty on which colors would remain after the final color
 consolidation of our new palette of phase 2.
</Alert>

<Collapsible maxHeight={350}>

| **Old convention** | **New convention** |
| ------------------ | ------------------ |
| black | gray0 |
| off-black | gray20 |
| gray-darkest | gray40 |
| gray-darker | gray60 |
| gray-dark | gray80 |
| gray | gray100 |
| gray-light | gray200 |
| gray-lighter | gray300 |
| gray-lightest | gray400 |
| offwhite | gray500 |
| white | gray600 |
| blue-dark | blue80 |
| blue | blue100 |
| blue-bright | blue200 |
| blue-pale | blue300 |
| red-dark | red80 |
| red | red100 |
| red-bright | red200 |
| red-pale | red300 |
| orange-dark | orange80 |
| orange | orange100 |
| orange-bright | orange200 |
| orange-pale | orange300 |
| green-dark | green80 |
| green | green100 |
| green-bright | green200 |
| green-pale | green300 |
| gold-dark | gold80 |
| gold | gold100 |
| gold-bright | gold200 |
| gold-pale | gold300 |
| subs-blue-dark | vividblue80 |
| subs-blue | vividblue100 |
| subs-blue-bright | vividblue200 |
| subs-blue-pale | vividblue300 |

</Collapsible>

---

## Phase 2: Growth & Adoption (Final Phase)

The introduction of one unfied system of color tokens represents the evolution of our color palette across the organization. This palette was contributed to by a collection of individuals from many different departments. Our main goal with this palette is to bring together our vast spectrum of colors and eliminate arbitrary deviations that we encountered throughout our product at large.

### Which colors changed in phase 2?

 

#### Grayscale tokens

The grayscale now ranges from `0` to `700`
| Token | Notes |
| ------- | ---------------------------------- |
| gray0 | no change to value |
| gray20 | no change to value |
| gray40 | no change to value |
| gray60 | new color value |
| gray80 | no change to value |
| gray100 | new color value |
| gray200 | new color value: equivalent to gray100 in phase 1 |
| gray300 | new color value: equivalent to gray200 in phase 1 |
| gray400 | new color value: equivalent to gray300 in phase 1 |
| gray500 | new color value: equivalent to gray400 in phase 1 |
| gray600 | new color value: equivalent to gray500 in phase 1 |
| gray700 | new color value: equivalent to gray600 in phase 1 |

 

#### Vivid blue

<Alert dismissable={false} variant={"error"}>
 Note: vividblue is no longer a supported token. All of the vividblues
 have been merged into one family of blue. Please review the blue tokens to map
 to the desired blue value.
</Alert>

 

#### Blue

All colors for blue have changed in value and now support a scale from `40` to `600`:

| Token | Notes |
| ------- | ------------------------------------------------------ |
| blue40 | new token added |
| blue60 | new token added |
| blue80 | change to value |
| blue100 | change to value: equivalent to vividblue100 in phase 1 |
| blue200 | change to value |
| blue300 | change to value |
| blue400 | new token added |
| blue500 | new token added |
| blue600 | new token added: equivalent to vividblue300 in phase 1 |

 

#### Red

All colors for red have changed in value and now support a scale from `40` to `600`:

| Token | Notes |
| ------ | ------------------------------------------------ |
| red40 | new token added |
| red60 | new token added |
| red80 | change to value |
| red100 | no change to value |
| red200 | change to value |
| red300 | change to value |
| red400 | new token added |
| red500 | new token added |
| red600 | new token added: equivalent to red300 in phase 1 |

 

#### Green

All colors for green have changed in value and now support a scale from `40` to `600`:

| Token | Notes |
| -------- | -------------------------------------------------- |
| green40 | new token added |
| green60 | new token added |
| green80 | change to value |
| green100 | no change to value |
| green200 | change to value |
| green300 | change to value |
| green400 | new token added |
| green500 | new token added |
| green600 | new token added: equivalent to green300 in phase 1 |

 

#### Gold

All colors for gold have changed in value and now support a scale from `40` to `600`:

| Token | Notes |
| ------- | -------------------------------------------------------- |
| gold40 | new token added: equivalent to gold80 before the change |
| gold60 | new token added: equivalent to gold100 before the change |
| gold80 | change to value: equivalent to gold200 before the change |
| gold100 | change to value |
| gold200 | change to value |
| gold300 | change to value |
| gold400 | new token added |
| gold500 | new token added |
| gold600 | new token added: equivalent to gold300 in phase 1 |

 

#### Orange

All colors for orange have changed in value and now support a scale from `40` to `600`:

| Token | Notes |
| --------- | --------------------------------------------------- |
| orange40 | new token added |
| orange60 | new token added |
| orange80 | change to value |
| orange100 | no change to value |
| orange200 | change to value |
| orange300 | change to value |
| orange400 | new token added |
| orange500 | new token added |
| orange600 | new token added: equivalent to orange300 in phase 1 |

 
### [Please see our Color tokens to see all of our tokens](/foundations/color)

This guide will help you understand the evolution of our color palette. It will also help you if you are using our v1 tokens or even using our v0 tokens to migrate to use our latest unified palette! So let's jump right in!

Foundations

Components

Resources

Release Notes

Welcome

What's new

Getting started