Foundations

Overview

Explore how you can use design tokens and utilities to implement visual elements such as color, typography, layout, and spacing units; on your website.

What Are Design Tokens?

Design tokens provide designers with a way to make consistent design choices with regards to typography, spacing units, color, and other elements of style.

Each token is given a recognizable name and holds a value of specific design elements- all of which convey the style that will be applied and the intended use of the token. Learn how the U.S. Web Design System (USWDS) uses design tokens.

What Are Utilities?

Utilities are Hyper-Text Markup Language (HTML) classes used to style a new object or element, or to create an override for an existing style set within the production CSS. Utilities provide developers and designers with ways to experiment with styles without altering the existing styles in the CSS. Learn how NCIDS uses utilities.

Explore NCIDS Tokens and Utilities

The appearance of an item is set using tokens and utilities to manipulate its color, border, outline, shadow, and opacity.

Colors set the emotional tone of a user interface and are a powerful way to establish consistency.

The layout and positioning of a page is set using display, flex, layout grid, and float utilities to structure website content.

Spacing units apply sizing and spacing rules in order to create consistent structures.

Typography is an important element to ensure consistency and communicate the hierarchy of a page.