Proton Design System starts here

Back to home

The design system for Proton projects is here. A quick look?

Features of the Design System


Here are goals of this tool:

  • Having a more consistent experience for users
  • Having a consistent reference for all the teams, and mutualizing some elements on all Proton projects in order to save time
  • Improving/simplifying work discussions between design and devs, and between all front-end team (same language, same conventions, same objectives)
  • Improving/simplifying Front-End maintenability/scalability, by not reinventing the wheel: the goal is to reduce drastically the CSS weight on PM V4 - target is to reduce it by half
  • Facilitating the onboarding of newcomers in the team.


This will be first the main place to implement design of the V4 of PM. Real assets will come quickly, and project will be updated on a regular basis.

In a near future, there will be other projects (click on the VPN icon to get a nice message)

And quality for the pleasure

As we all love security, quality and privacy, we have here:

A+ to Security Headers

100% at Dareboost

A+ to Mozilla Observatory