Design tokens for developers

Before you begin

Make sure you understand the basics by visiting Design tokens and theming or reference the following overview.

Understanding base elements

The base elements of our system represent visual aspects that can be themed at various levels, from broad adjustments to component-specific changes. These elements include accessibility styles, color, elevation, icons, shape and size, spacing, and typography.

 

This page provides an introduction to app-level and component-level theming for web and mobile. To find tables containing the variables of each element and their default values, reference the Code tabs of each of the following:

• Accessibility styles
• Color
• Elevation
• Icons and illustrations
• Size and shape
• Spacing
• Typography

Theming for mobile (Flutter)

There are two types of theming that can be performed using our library: App-level theming and widget-level theming.

App-level theming

The following provides an example of how to apply light and dark mode as an app-level theme.

Step 1: Add light and dark theme

Under your MaterialApp(), add both light and dark theme:

Step 2: Add the provider package

Next, add provider package in your pubspec.yaml. In your main .dart file, create a ThemeProvider, provide your themeData, and wrap your app with it:

Step 3: Switch the theme

Then, anywhere in your code, call themeProvider.switchLightTheme() and themeProvider.switchDarkTheme() to switch the theme. In the code example above, you’ll notice that the font is now customizable. But don’t forget to add your fonts in your pubspec.yaml.

Widget-level theming

Theming can also be performed at the widget level. This example shows how to change the theme of a button to VButtonSecondary.

Theming for web

Theming for web can be performed at the app-level or component-level using CSS variable overrides.

App-level theming

The following theming configuration allows you to modify a small set of variables for maximum impact across components.

Color

The simplest way to customize your application colors is by adjusting the palette.

Typography

To override the typography value, you can use CSS variables or utilities.

Padding

To override the padding value, you can use CSS variables or utilities.

Shape

The simplest way to customize the shape is by adjusting the corners.

Margin

To override the margin value, you can use CSS variables or utilities.

Component-level theming

When overriding only one component or one instance of a component without customizing the whole theme, you can redefine the component variables directly. The following example shows this using a checkbox component.

Variants

For some customization efforts, you may need to update the markup structure or the display properties of the component. To make this easier, we provide examples of some basic variants you can extend to create custom components. Learn more in our Abstract examples.

 

You can also find utility classes that can help you shape your components with Typography, Flex, and Spacing examples.