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 created to establish a unified and efficient approach to designing and developing digital experiences for the Commonwealth of Pennsylvania's state government websites. The goal is to ensure consistency, accessibility, and user satisfaction across the diverse 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.


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


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


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 diverse array of websites across the Pennsylvania state government. It's more than just a set of templates; Keystone is a dynamic toolkit designed to empower developers, designers, and content creators 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. The term "keystone" refers to the central, wedge-shaped stone in an arch that holds the other stones in place, preventing the arch from collapsing. Similarly, Pennsylvania was considered a crucial state during the early years of the United States because of its strategic location between the original thirteen colonies.

Map of the United States highlighting Pennsylvania's position on the map

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 name 'Keystone' serves as a fitting metaphor for the Pennsylvania government's website design system due to its symbolic representation of strength, stability, and centrality. In architectural terms, a keystone is the crucial, central stone in an arch that supports and locks all other stones in place.

Similarly, Keystone Design System acts as the central, foundational element that unifies and supports the diverse range of websites within the Commonwealth. It embodies the strength of consistency, stability in design principles, and the pivotal role it plays in bringing together various components to create a cohesive and harmonious digital landscape. Just as a keystone is essential for the structural integrity of an arch, Keystone is fundamental to the coherence and effectiveness of the Pennsylvania government's online presence.

Everyone involved, from design, product management, and engineering, maintains the integrity of the principles, components, and patterns established in Keystone. Before asking your team to build something custom, ask yourself: "Do I really need this? Can I use an existing component that's already part of Keystone?". This will lead to more consistent user experiences, faster development cycles, and tighter unity across our digital experiences.