Welcome to the Pennsylvania Design Standards (PDS). The PDS is a system for designing and building public websites, applications, and digital services for the Commonwealth of Pennsylvania. This site serves as the main design resource for designers, developers, product managers, and others who are working on digital projects for the Commonwealth of Pennsylvania.
The PDS grew out of Governor Tom Wolf’s Customer Service Transformation initiative. Foremost, the PDS is aligned with two goals of this initiative:
Thus the PDS outlines a set of standards based on best practices to govern the design of digital assets and ensure a consistent look and feel. Moreover, these standards apply to all agencies under the governor’s jurisdiction and will be mandated by directive. Overall, the PDS helps design and build better online experiences for Commonwealth citizens.
The PDS is a collection of design tools, code, and documentation. The design tools include UI components for designers. There are two types of design files. The first file is a .svg file meant for use in any UI design tool, such as Sketch, Adobe XD, UXPin, InVision Studio, and most other vector-based design tools. Additionally, there is a native Figma file included.
The code files include CSS styles and JavaScript files designed to be utilized in any project. These base files have additional dependencies required in order to work with the PDS. The additional resources required include:
This site will serve as your guide for implementation and usage. You’ll find each component documented with notes and code snippets to aid in development.
The file download button below includes all the core code files (with the exception of the additional resources noted above), the design tools files, licenses, and .readme files.
Download PDS 1.1.5<link rel="stylesheet" href="{path-to-pds}/styles/toolkit.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"><script src="{path-to-pds}/scripts/toolkit.js"></script>