Project Vision

The Handshake team had built a successful platform to connect up-and-coming talent at Universities with employment opportunities, and were looking to set the stage for their next phase of growth.

Forge was asked to establish a design system that would:

  1. Create a unified and cohesive user experience for Handshake's employer and university interfaces
  2. Support the rollout of an upcoming company rebrand that could support different brand themes between Handshakes employer, university, and student experiences and interfaces
  3. Improve baseline UX through stronger information hierarchy, better clarity of action, more obvious pathing, and incorporating UX best practices through common components and patterns
  4. Increase time-to-ship efficiency by ensuring greater parity of styles and components between design and engineering
  5. Foster better collaboration across roles and teams
  6. Make Handshake’s experiences accessible for all
  7. Establish a governance process for design, engineering, and product management to maintain and evolve the design system over time

To achieve this, we partnered with internal UX, engineering, and product management teams to define and design a platform-and-device-agnostic multi-brand design system consisting of style tokens, a component library, and cutting-edge Figma tooling, extensible system documentation, and synchronous and asynchronous training.


Design systems, Design Tokens, Product Strategy, UI/UX, Product Design


Platform and device-agnostic multi-brand design system, Design system guidelines and documentation, Component library, Training videos



The Challenge

Handshake found product market fit early and have been growing rapidly ever since. The product teams encountered common challenges while rapidly scaling their platform—new products and features were added, and eventually launch times became slower and inconsistencies in visual styles, frontend components, and the interactions across UI/UX patterns became more common.

Design view that shows the original UI. Dark sidebar with a navy header navigation. White background for the body of content with the use of sectioned cards with heavy drop shadows.
How a design system is created using atomic component, nested components, container components. Those are then used within design files swapping slot components for local components.
Design view that shows the original UI. Dark sidebar with a navy header navigation. White background for the body of content with the use of sectioned cards with heavy drop shadows.

The Solution

As Handshake grew, they started to better differentiate experiences between students, universities, and employers with the latter two comprising of the “Enterprise” side of the house. The team needed a design language to unify the design and baseline UX across products and platforms.

Showing the UI in comparison with the new UI. Utilizing subtle contrast between the sidebar and body, more subtle drop shadows, light boarders, and more more balanced spacing.

Establish foundations

We decided early on To enable the extensibility and flexibility needed to support multiple brands and themes. Thorough documentation is a hallmark of the team's approach, encompassing all fundamental styles alongside their corresponding design token names and values.

This comprehensive repository includes essential elements such as color primitives, semantic color usage, typography, sizing, grids, border radius, border width, spacing, shadows, and various effects. With this meticulous documentation, the team ensures clarity and consistency in their design decisions, fostering seamless and efficient design and implementation.

Foundational styles documentation

A new, flexible baseline for components

As Handshake prepared for an upcoming rebrand, they needed a way to support the rollout while avoiding various parts of their UIs clashing as possible. Our baseline design language needed to ensure a clean, flexible design baseline that would harmonize with the styles of the current and new brands, themes, while being malleable and flexible enough to support multiple brands and themes on the other side of the rebrand, delivering a cohesive user experience across all things Handshake.

Collage of UI components included in the design system
Collage of UI components included in the design system

Putting the system to work

We began testing our design system through a pilot where we vetted design style and component decisions against real user interfaces and interaction flows. This helped us stress-test the system, evaluating its performance under various conditions and edge cases. It also provided us the opportunity to elicit feedback from the Handshake design team, and the extended XFN partners, ensuring that the design system had cohesive foundation that would the lay the groundwork for its successful implementation and future evolution.

Documentation and training

Creating precise design system documentation is crucial for any design system. Our main goal is to promote adoption and smooth collaboration with FXN partners, designers, and engineers from day one.

We want everyone involved to feel comfortable and confident using the design system, so in addition to the written design guidelines, we conducted live training sessions, as well as interactive workshops, with the product design team, and recorded a series of recorded how-to Loom videos that we embedded into the guidelines.

Additionally, using Figma widgets, we established a framework to help ensure that component statuses can be kept in sync between Jira and Figma—maintaining alignment between design and engineering.

Documentation highlights showing file management cover photos, component documentation, and training videos
Documentation highlights showing file management cover photos, component documentation, and training videos

How the system has evolved

Following the successful launch of their rebrand, the Handshake team has integrated the new brand designs into the Rosetta design system, and into their product.

In the example on the left below, you can see how the sidebar navigation is themed while working seamlessly with the base system styles and components in the page layout.

Asset attribution: Handshake marketing site

Have a project in mind?

Let's get to work.

Submit a project