The Photon Design System provides a centralized, living source for look, feel and sound of our products to create consistent user interfaces across all Firefox products. It collects guidelines, reusable UI components, templates and other resources to help you focus on the unique parts of your work.

🦊 For Designers

Familiarize yourself with the style, motion, copy and interaction principles defined in Photon and build your interfaces using UI components specified here.

You may use the templates and assets provided here to make your work more efficient so you don’t need to worry about re-creating existing components.

If you come across an interaction that requires a modification of any component specified here, or you require new type of component, please reach out to us so that we may include it in Photon.

🐺 For Developers

Consult this website for any question on detailed implementation of specified components.

Use it as a source for any specifics to rely on that are unclear to you through the mockup of a designer, and if in doubt fall back to an implementation as described here.

Call out any information you miss in Photon and we will help you get the information you need.

🌱 Help us grow Photon

With your help we will review any new UI to ensure Photon stays up to date, new components are added and existing ones are updated.

If you are missing information in Photon, please file an issue for it. This can be a component you notice that is not specified or a type of information that would make your work more productive.

And if you want to help us grow Photon check out the wiki.