Skip to main content

Official website

of the Commonwealth of Pennsylvania

    The .gov means it's 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

    Foundations are the visual elements needed to create engaging layouts and end-to-end user experiences.

    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.

    View Design Tokens Page

    Color

    Color is a practical and emotional tool. It conveys personality, sets a tone, attracts attention, and indicates importance.

    View Color Page

    Elevation

    Elevation styles are crucial in a website design system as they help in creating depth and focus in user interfaces.

    View Elevation Page

    Iconography

    Icons represent items and ideas in a simple graphic format. They help communicate with universal understanding.

    View Icon Page

    Layout

    Consistent layout principles allow designers and developers to efficiently build user-friendly experiences across devices and screen sizes.

    View Layout Page

    Typography

    Typography is a deliberate system of letters, numbers, and characters. Good typography ensures legibility, clean aesthetics, and a well-defined information hierarchy.

    View Typography Page