Design system logo

Overview

The Prenda Design System (PDS) is a system that was created to document, unify, and streamline the creation of front-end applications at Prenda.

The Prenda Design System is designed and maintained in Figma. The scope of which includes four main files that are referenced by designers and engineers:

Figma file structure

The Prenda Design System is implemented in the “design-system” repository, hosted on GitHub. Finished components and libraries are available for viewing on a Storybook webpage, a technology and service of Chromatic.

All designers and engineers can contribute to the development, maintenance, and quality of the Prenda Design System. I worked primarily as a contributor but also helped to define standards for contribution from designers.


Foundations

Brand principals

Foundations were based on Prenda brand principals

Type styles

Banner

Example component - Banner

Text button states

Complexity with button component - accounting for many different instances of a button

Icon usage

Icon usage documentation

← Return to work