Pennsylvania Design Standards

Welcome to the Pennsylvania Design Standards (PDS). The PDS are a design 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 are aligned with two goals of this initiative:

Thus, the PDS aim to outline 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.

How to Use the PDS

The PDS is a collection of design tools, code, and documentation. The design tools include UI components for designers to work with. 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 Core

Link to the PDS in Your Project

PDS Stylesheet:

<link rel="stylesheet" href="{path-to-pds}/styles/toolkit.css">

Montserrat Font Family:

<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">

PDS Javascript:

<script src="{path-to-pds}/scripts/toolkit.js"></script>