Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Foundations

    Design Tokens

    Our visual design uses consistent palettes of typography, spacing units, color, and other discrete elements of style. Design tokens make it easy to apply those palettes to your project.

    WCM Component Tiles

    Introduction

    Design tokens are the fundamental building blocks of a design system. They represent the atomic elements of a design, such as colors, typography, spacing, and more. Design tokens allow for a more scalable, consistent, and manageable approach to designing digital products.

    Illustration showing the cycle of a token. A color tile expands into values and tokens, which expands into color tokens for Figma, Code & Production.

    What are design tokens?

    Design tokens are abstracted values that store visual design attributes. They help maintain consistency across different platforms and devices. For example, a color token might be defined once and used in multiple places, ensuring uniformity.

    An example of design tokens used for an in-page alert. This shows the .on-error-container text color on a container using .error-container.

    Benefits of design tokens

    • Consistency: Ensures visual and thematic consistency across the website.
    • Scalability: Makes it easier to scale the design by changing values in a single place.
    • Maintainability: Simplifies the process of updating the design system.
    • Platform Independence: Facilitates sharing a common design language across various platforms and technologies.

    How to read design token names

    Knowing how to read token names will help you find the right token faster when working in designs and in code.

    An example of a token name, which is separated into three sections by periods. The example says 'color' in section 1, 'light' in section 2, and 'primary' in section 3.
    The token name contains three sections that describe that token's attribute, theme, and role. 
    1. The attribute is the type of foundational style, such as color, elevation, or space.
    2. The theme indicates light or dark mode. Not all tokens have a theme.
    3. The role provides information about the token’s purpose.

    Examples of design tokens

    These examples show how design tokens work throughout the Keystone Design System.

    Color tokens

    Color tokens define the colors used across the website. They include:
    • Primary, secondary, tertiary, and error colors.
    • Neutral shades for text, backgrounds, borders, and other uses.
    • Extended palettes, such as success, warning, focus, etc.

    Learn more about color tokens. 

    A sample card with an image, tag, date, and text with notations to show how design tokens are used to provide four colors on the card.

    Spacing tokens

    Spacing tokens define a spacing scale for margins, padding, gaps, and other negative spaces. They offer a harmonious and balanced layout.

    Learn more about spacing tokens. 

    An image of a form component, highlighting the spacing between each form item to show how the spacing tokens can be used.

    Typography tokens

    Typography tokens ensure that text is readable and accessible on any device. They include font families, sizes, weights, line heights, and other typographic details. 

    Learn more in our typography guidelines. 

    Elevation tokens

    Elevation tokens provide depth and focus in the user interface. They define shadow styles for elements like modals and popovers.

    Learn more in our elevation guidelines. 

    The popover component displays on the page with an elevation of 4.