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. 
    Keystone Design System

    Getting Started

    The Keystone Design System provides principles, guidance, and code to help you design and build accessible, mobile-friendly websites and digital services for the Commonwealth of Pennsylvania.

    Design principles

    The Keystone Design System is a unified and efficient approach to designing and developing digital experiences for the Commonwealth's websites. The goal is to ensure consistency, accessibility, and user satisfaction across the range of online services provided by the government. By creating Keystone, we aim to streamline the design and development process, foster collaboration among teams, and ultimately enhance the overall quality of digital interactions within the state.

    Accessibility

    Ensuring that digital services are accessible to all, regardless of ability or disability.

    Consistency

    Promoting a cohesive visual language and user experience across all Pennsylvania state government websites.

    Flexibility

    Providing a modular and scalable design system that accommodates diverse content and functionality requirements.

    Frequently asked questions

    A design system is a comprehensive collection of guidelines, components, and tools that work together to ensure consistency, accessibility, and efficiency in the creation of digital experiences. It serves as the foundation for building user interfaces that are not only visually cohesive but also enhance the overall user experience.

    Keystone is the dedicated design system crafted for the array of websites across Pennsylvania state government. It's more than just a set of templates: Keystone is a dynamic toolkit designed to empower developers, designers, and content authors to build websites that are not only functional but also reflect the identity and values of the Commonwealth.

    Pennsylvania is known as the Keystone State due to its central geographical location and its historical significance in the formation of the United States. A keystone is the central, wedge-shaped stone in an arch that holds the other stones in place, preventing the arch from collapsing.

    Map of the United States highlighting Pennsylvania's position

    Pennsylvania's nickname is "The Keystone State" because it was the middle colony of the original thirteen colonies, and because Pennsylvania has held a key position in the economic, social, and political development of the United States.

    The keystone is a fitting metaphor for the Pennsylvania government's website design system due to its representation of strength, stability, and centrality. A keystone supports and locks all other stones in place.

    The Keystone Design System is the central, foundational system that unifies and supports the websites within the Commonwealth. It embodies the strength of consistency, stability in design principles, and its role in uniting components in a cohesive and harmonious digital landscape.

    The Keystone Design System is a tool. It helps Commonwealth teams to build digital products quickly and consistently. Before asking your team to build something custom, see if there's an existing Keystone component instead. This provides more consistent user experiences, faster development cycles, and increased unity across our digital experiences.

    OSZAR »