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.

• --theme-responsive-factor controls how components and sizes adapt on smaller screens, below the mobile breakpoint.
• --theme-scale-factor controls how much space appears between elements, making the UI feel more compact with smaller values or more relaxed with larger values.

Switching between light and dark modes

Learn how to switch between light and dark modes using our Nova web libraries.

Step 1: Import your chosen theme

The Visa and Default themes support light and dark modes. Reference the Get Started guides for Angular, React, or Styles(CSS) for instructions on how to import themes into your application.

Step 2: Set the theme attribute

Apply a data-theme attribute to your htmltag. The possible values are light or dark.

Note: The Visa and Default themes automatically default to your system’s light or dark mode preference. To override this behavior and use your desired mode, set the data-theme attribute to light or dark.

Step 3: Switch the mode

To switch between light and dark modes, change the value of the data-theme attribute. This example uses plain Javascript, but you can also use React or Angular to manage the theme state and switching logic.

Best practices for switching modes

• For accessbility purposes, consider defaulting to the user’s system preferences for light or dark mode. This can be done by checking the prefers-color-scheme media query.
• Use local storage or cookies to save the user’s preferences if you want the theme to persist across page reloads.

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.