ProtonMail Design system
  • Mailbox
  • Settings
  • Support
  • Hey, this is a Design System, you can't log out. :)

Design

  • Colors
  • Typography
  • Icons
  • Themes

Page mockups

  • Conversations (WIP)
  • Signup elements
  • Login (no nav)

Components

  • Buttons
  • Tables
  • Containers
  • Labels
  • Badges
  • Forms
  • Meter bar
  • Notifications
  • Modals
  • Drop downs
  • Tooltips

Front-end Conventions

  • How to use the Design System
  • Sass/CSS variables
  • Namespacing classes
  • DOs/DONTs

Front-end Helpers

  • Flexbox helpers
  • Margin/padding helpers
  • Float/inline-block helpers
  • Absolute/fixed/relative helpers
  • Responsive helpers
  • Misc: CSS table/square-ratio helpers
  • Typographic helpers
  • Hiding/disabling helpers
  • Sizing helpers
  • Scroll helpers
  • Cursor helpers
  • Transform helpers
  • Borders/outline/radiuses helpers
  • Misc - lists, click/tap zone, print, dark mode

MISC

  • Loading content
  • Right to left
  • Assets

Signup elements (WIP)