caseywilliams / design-system

A resource for creating user interfaces based on brand, UX, and dev principles

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Puppet Design System

The Puppet Design System represents the behaviors, components, principles and visual presentation we share. It is based on our objective to provide consistency, efficiency, and quality experiences to our customers. With it, we scale design across departments, products, platforms, and time zones.

Visit the documentation and living styleguide at

Quick start

With an existing app

To add the main package, @puppet/react-components, to an existing project:

npm install @puppet/react-components

From scratch

To try out the design system from scratch, generate a new project with uikit:

npm install -g @puppet/uikit
uikit generate project my-project

In a sandbox

If you'd just like to play around with the components in a sandbox with the design-system repo, you can run Styleguidist locally, though this is also hosted at, which includes live editable code.

git clone && cd design-system
npm install
npm start

Add components

import { Button } from '@puppet/react-components';
<Button>Hello world!</Button>

Use common styles

To use public Sass variables, add @puppet/sass-variables to your project:

npm install @puppet/sass-variables

Reference the public variables from your Sass files:

@import '~@puppet/sass-variables/index';
.my-text {
  color: $puppet-amber;

Note: See the Getting Started guide for a longer walkthrough with examples of using the uikit, React components, Sass variables, and other packages.


The Puppet Design System includes:


The Puppet Design System is a cross-functional team effort across Puppet with shared ownership where contributions are welcome and encouraged. Read more in


We are continuing to iterate on the Puppet Design System and appreciate your feedback and questions. Feel free to create an issue, pull request, or contact Puppet employees can follow along in Slack (#team-design-system) or Jira (PDS).

Release Notes

See the changelog for each package, like react-components'


A resource for creating user interfaces based on brand, UX, and dev principles

License:Apache License 2.0


Language:JavaScript 59.6%Language:CSS 37.5%Language:Shell 1.9%Language:HTML 1.0%