Overview

About Primer DS

Primer Design System is a legacy custom-made PPG’s design system — the design and code library that provides ready-to-use UI components for PPG’s digital products. PrimeNG is going to substitute Primer as a design system in the near future.

Primer Design System is made of:

  • A Figma library. When designers add the library to their Figma environment, they can start adding Primer components into their projects as easy as drag and drop.
  • An Angular code framework. Developers import Primer’s library of interface components into their projects to create the front-of-front-end layer of their applications.
  • A set of guidelines. This website helps you give PPG’s customers the best possible experience with Primer, by detailing the dos and dont’s of all of Primer’s components—as well as overall design guidelines for color, typography, icons, and more.

Why use Primer Design System?

As a kit of solutions to common UI problems, Primer gives designers and developers a speed boost since they no longer have to build everyday interface elements. But it also delivers much more.

In the paint world, primer is a foundation that: helps paint stick to its surface; increases paint durability; and protects the product being painted. The Primer design system offers similar benefits:

Foundation

Primer Design System provides a base layer of common components that can be used to build a big chunk of most of PPG’s product interfaces.

Stickiness

Primer makes it easier for the PPG brand to adhere to any product; the PPG look and feel is stirred right into Primer’s components, so the branding rolls on easy.

Durability

Primer is constantly being tested, refined, and improved. Customers enjoy high-quality, accessible digital experiences. Meanwhile, Primer’s reliability means an associated reduction in maintenance for product teams.

Protection for the product

When teams spend less time building common elements, they can spend more time on the product itself, solving the novel business and customer problems the product is meant to address. (And they can likely ship that product faster, too.)

For all of us

Primer is multi-disciplinary by design, with tools and guidance for everyone who contributes to PPG’s digital experiences. While Primer delivers a set of production assets for designers and developers, those assets also embody PPG’s best practices for design and development. You’re encouraged to explore outside your traditional job description as you get acquainted with Primer; the more we understand each other’s tools and perspectives, the better we can work together.

Primer is more than a kit of parts. It’s a platform for collaboration.