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 is based on consistent palettes of typography, spacing units, color, and other discrete elements of style we call design tokens.

    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.

    Example of how color tokens can be used together using the .on-error-container text color on a container using .error-container.

    Benefits of Using 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.

    There are multiple sections of a token name spaced by periods. The first section is 'color', the second is 'light', and the third is 'primary'.
    1. Attribute - The type of foundational style, such as color, elevation, or space.
    2. Theme - Indicates light or dark mode. Not all tokens have a theme.
    3. Role - Additional details about the token’s purpose.

    Design Tokens Examples

    Use these examples to get a better understanding of how different tokens work.

     

    Color Tokens

    • Define all the colors used across the website.
    • Include primary, secondary, tertiary and error colors, along with neutral shades for text, backgrounds, borders, etc.
    • A few extended palettes are also included: success, warning, focus, etc.


    Learn more about Color Tokens.

    The card group component uses several different color tokens, displayed in this illustration.

    Example of color design tokens in use

    Spacing Tokens

    • Define a consistent spacing scale for margins, paddings, gaps, etc.
    • Helps in creating 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

    • Define font families, sizes, weights, line heights, and other typographic details.
    • Ensure text is legible and accessible across all devices.

    Learn more in our Typography Guidelines.

    Elevation Tokens

    • Define shadow styles for different UI elements like modals, pop-overs, etc.
    • Helps in creating depth and focus in the interface.

    Learn more in our Elevation Guidelines.

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