ProtonMail Design System

Welcome to ProtonMail V4.0 Design System. The goals of these pages are:

  • Having a more consistent experience for users
  • Having a consistent reference for all the teams
  • 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
  • Avoid reinventing the wheel for Front-End
  • Documentaaaation! Because it is important. ©
  • Facilitating the onboarding of newcomers in the team.

Last updates

v1.7.0 is here: wizard, progress, meters, notifications, etc.

12 Jul 2019: Tons of updates for this summer release: new helpers, new components, new icons, etc.

Read more about “v1.7.0 is here: wizard, progress, meters, notifications, etc.”

v1.6.0 is here: theming, prefers-reduced-motion, drop downs, details/summary, etc.

02 May 2019: A lot of updates/features/new components: theming, CSS custom properties, prefers-reduced-motion, drop downs, interface elements styles, conversations, icons, etc.

Read more about “v1.6.0 is here: theming, prefers-reduced-motion, drop downs, details/summary, etc.”

v1.5.0 is here: tooltips, RTL documentation, input styles, etc.

25 Mar 2019: New components are here: Tooltips, RTL documentation, input styles, conversations, icons, etc.

Read more about “v1.5.0 is here: tooltips, RTL documentation, input styles, etc.”

New component/input styles, icons and bugfixes

08 Mar 2019: New components are here: “domain breadcrumb”, “Information panels”, etc. icons and a lot of small updates

Read more about “New component/input styles, icons and bugfixes”

Valentine update: Loading content, drop downs, progress bar and a lot of stuff

14 Feb 2019: New components are here: Loading content, drop downs, progress bar, etc. and a lot of updates for documentation

Read more about “Valentine update: Loading content, drop downs, progress bar and a lot of stuff”

Split Sass components, badges and login template

24 Jan 2019: Each component have it Sass file, badges have been updated and login template example has been added.

Read more about “Split Sass components, badges and login template”

Proton Design System starts here

14 Jan 2019: Here is the first step for Proton Design System, starting with ProtonMail 4.0.

Read more about “Proton Design System starts here”