Cubic Design System

In 2021, Ping Identity’s corporate website was redesigned over the course of 8 months. Project Reimagine was a complete overhaul, and was built using a new design system, Cubic.

Project Details

2020–2022

Scope

Design System
Creative Direction
Website Design
Iconography
Photography

Role

Creative Direction & Design Lead

Team

Mike Heighway, Creative Director
Régine Carreras, Senior Designer 
Josh Kulchar, Senior Designer 
Katie Daugherty, Designer 
Ed Nepomuceno, UX Lead 
Aaron Hughes, Dev Lead

Typefaces

Gotham and Gotham Narrow by Tobias Frere Jones

Design System

The new design system for Ping brought a fresh new look and feel to the website. The base color palette was expanded, brought into accessibility standards and used with intent—specifically, the Ping brand red was used in key areas throughout the site and in the graphics. A new typographic system set up a bold hierarchy. Icons were updated across the board, and designed to have a more unique visual style. A base set of patterns was developed to help carry the brand’s style across the entire site and other touch points.

Color

The entire color palette for Ping Identity was updated to provide greater visual contrast between elements, with the exception of the primary brand red. A new Bright Red was introduced to help carry the brand color through moments that require a dark background, but need a contrast compliant red.

Typography

Two widths from the Gotham type family are used strategically across the site. For headlines and areas requiring visual impact, Gotham Condensed carries the messaging forward. For communicating longer form copy, the regular width Gotham is employed. In the section titling, highlighted text helps call out particular words or short phrases for maximum effect.

Navigation & Buttons

The primary navigation across the site was designed to integrate the product and capability iconography to create a visual thread as users move throughout the site. Buttons were defined and designed to be used in particular combinations for maximum user clarity.

To help users with long format content, we developed a table of contents that updated based on the users position on the page. The highlighted number in the table of contents corresponds to what chapter the user is reading.

Layout Blocks, Components & Variants

A modular set of page building blocks was developed to allow for rapid page assembly, and to maintain a visual consistency across the 3,000+ pages on the Ping Identity website. These blocks were broken into block types (text, image, multi-use, cards, form) and variations were made for use across the site.

Design blocks were set up in Figma as variants, which allowed the team to quickly mockup pages across our different breakpoints. Three breakpoints are shown here, and the block is seen in both its default state and populated state.