Photon Design System

An open-source design system for Firefox Quantum's cross-platform products which were released in late 2017.

Project Background

From a Style Guide to a Design System

Photon, the code name of the new UI style in Firefox, was shipped in 2017 with the major update “Firefox Quantum”. Before officially releasing the Photon UI in Firefox, the UX design team started to build a Photon Design System to replace the old style guide which was built for the old UI style “Australis”.

The Challenges


The Design Culture Shock

The design system team consisted of designers from North America, Europe, and Taiwan. Some designers had front-end experience, while other designers were purely visual designers. That variety of professional backgrounds added some levels of difficulties when we examined a single piece of the design system (such as a visual design language) with different perspectives.

However, experiencing the design culture shock of working with international colleagues was good for me. I learnt how to leverage the Sprint mindset to take baby steps to move forward, and how important it was to spend time on thinking about “why” before diving deeply into solutions.


1 Product, 5 Platforms

Firefox has a wide product portfolio on all platforms: Windows, MacOS, Linux, Android, and iOS.

It’s challenging to design a system for multiple platforms. One of the directions that the design team wanted to go was to make Firefox look native on all the operating systems in order to enhance its usability. Therefore, nicely balancing Firefox’s unique style and the OS’s style became a big challenge for the Photon Design System. The team discussed with the product designers from both desktop and mobile teams to come up with a consensually clear line of when and how, to use the Firefox’s design language or the OS conventions.


Stakeholders were Not in the Design System Team

The design system team was an independent team in the organization documenting the design guidelines and building the infrastructure of design tools and design tokens. Since the key stakeholders such as the design director and engineering leaders weren’t part of the team, frequent communications with them became essential to making progress on building the design system.

The purpose of frequent communications with stakeholders were:
1. Getting up-to-date information on Photon UI
2. Confirming the design guidelines that we consolidated from the Photon UIs were aligned with the stakeholder’s expectations.

The Core Team

The team purely consisted of designers.

4 UX designers
2 Visual Designers

My role

What I Did for the Photon Design System

Conducted a visual audit, documented visual design language and defined the usage of the components.

Designed the IA of the Photon Design System website and published the content by HTML/ CSS.

Constantly communicated with designers, front-end engineers, content strategists, and brought more visibility to the vision of the system.


The problems,
goals, philosophies,
and workflow

Identify Problems

Learning from the Past

There were several style guides that were tried to build guidelines for designing a product in Mozilla, but unfortunately, none of them were totally adopted in the organization.

“What were the challenges?”

The very first thing that the team did for the project was to interview people who worked on the previous style guides to learn their difficulties.


The style guides only focused on desktop products.


Less guidelines addressing the best practice of accessibility.


Low adoption of the previous style guides in products.

The Project Goal

Create a Single Source of Truth that Indicates both “What” and “How” to Design a Cohesive Experience for Firefox Users.

Using this system will help make your work more efficient, and our products more consistent, while still looking, feeling, and sounding uniquely Firefox.
— Photon Design System

The Philosophy


Design for Scale

New features are constantly added to Firefox. To make it the most flexible for the future, all elements of the visual design language are built with the consideration toward future scalability on both desktop and mobile.
(For example: Typography)

For how to choose between the Photon Design System and the platform conventions, there is a page that exposed and demonstrated the principle and why the system offers this recommendation.

High Visibility: Align with Photon Design System

Lower Visibility: Can use Platform Components


Imbed Best Practice for Accessibility

Accessibility is critical for an exceptional user experience. All visual design language and UI components had to successfully pass the WCAG 2.0’s color contrast test before they were documented on the Photon Design System. Therefore, it can save the designers’ time from checking if the visual design meets the accessibility requirements.

The color contrast analyzer tools with guidelines that we used for Photon Design System


Maximize the Adoption

“How might we create a momentum in the organization?”
After learning from the past, we found that advocating the concept of the design system was essential to the success. There were 3 main tactics we used in the project:

Initiate Deep Communications

The team spent more time focused on “why we needed a design system” than “what we should deliver” for building a design system. We worked with designers, engineers, and even content strategists in the globally collaborated team to get onboard on building a design system and the willingness to adapt it into their day-to-day design/ engineering process.

Internal workshops and meetings were hosted to make people aware of the Photon Design System, and align the expectations from different functional teams.

A meeting in Mozilla’s June 2017 All Hands for collecting feedback and expectations from different product teams.

Co-design the Design System

1. The system was built on Github
The way we built the Photon Design System was to fully adapt the spirit of open-source. The progress was transparent to everyone. People could use the system, and at the same time, were encouraged to contribute to it (including making changes and opening issues).

2. The collaborative process
While we were documenting, we ended up actively co-designing with stakeholders what eventually became a real design language that supported multiple projects and platforms.

Build Design Tools

We believe lowering the barrier of using the Photon Design System can help everyone who works on Firefox naturally adopt it in their everyday workflow. To accomplish that, the team focused not only on the content of the guidelines, but also on providing design tools and resources for both designers and engineers.

Examples of the icon library and Sketch color palette which were built by my colleagues.

Process Overview

The Photon Design System Workflow


About defining the
typography guideline


An Adaptable and Scalable Typography Guideline

As the Photon UIs are being designed simultaneously by designers distributed from multiple countries, it results in a number of UI inconsistencies and accessibility problems.

The need of having a typography guideline was urgent to solve these problems. Making a type scale family which is adaptable to all platforms and scalable for future use were the main focus when I was developing the typography guideline.

Typography has a massive impact on how a design is perceived.
— Luke Jones,
Typography and creating grids for screens

The Firefox family that the type scales are designed for.

How I defined the type scales

It’s a Team Sport: Back and Forth Discussions and Experiments

For the Firefox desktop, I collected the UI inventory and discussed with designers to find common ground to achieve the UI consistency and accessibility goals.

The type scale was also tested with the real content on content-heavy websites like Mozilla Support to make sure it provided a good visual hierarchy.

After rounds of experiments, 2 type ratios were defined in developing the responsive type scales and was documented on the Photon Design System website.

Followed up with UI examples to elaborate the differences between Display, Title, Body and Caption, and how to use the recommended type pairs.

More about Accessibility

More Guidelines to Achieve the Accessibility Standard

Readability | Line Length

Accessibility | Color contrast

Recommended text colors in light and dark backgrounds by considering WCAG 2.0 color contrast guideline.


Outcome & Skill Learned

The Outcome

Typography and UI Component Guidelines were Published on the Photon Design System Website.

A design system is a living system, so it’ll never end. Before I was asked to shift around to other projects, Typography was a fully documented visual language on the Photon Design System Website. Other UI components such as link, input field, card, and overlay’s guidelines were published.

The guidelines help designers and engineers efficiently create new UIs that align with Firefox Photon’s visual language and provide the best UX for the user.

The Skills Learned

This Design-System Philosophy has Influenced Me in Future Designs

To bridge the gap between designers and engineers, I had to learn how engineers work. Sometimes I had to force myself to jump into their tools so that I could find the best balanced solutions to meet their needs.

The skills that I learned from this project:
* Communication skills for cross-team collaborations
* Responsive typography
* Using Git to publish guideline content

At the end of this project, My contributions were recorded on Github, which had never happened in my design career.

And most importantly, the design-system philosophy encourages me to design reuseable components, select color and type scale meaningfully, and last but not least, take care of the accessibility.