Design Tokens

Using design tokens instead of hardcoded values allows you to make sweeping changes in your product and automatically support global features, like dark mode.

Using tokens

In Reshaped, we provide design tokens as CSS variables. They are used in Reshaped components, and you can use them in your custom components built on top of Reshaped. All CSS variables start with an --rs prefix to avoid conflicts with external variables. Reshaped color tokens automatically support dark mode, so you won't need to keep styles for both modes separately.

To access the token values, first, you need to wrap your application with the Reshaped provider and pass the theme and mode you would like to use. In the following example, we're using the theme provided by the Reshaped package. However, you can also create your custom theme and use it the same way.

import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";
const Application = ({ children }) => (
<Reshaped theme="reshaped" defaultColorMode="dark">

Using in Javascript

Since all variables are defined in CSS, you don't have to call any utilities or hooks to get access to the tokens. Instead, you can use them directly, even in your inline styles or CSS-in-JS code.

const Component = () => {
return <div style={{ color: "var(--rs-color-foreground-neutral)" }} />;