How to use the Design System

The Proton Design System is splitted into 2 sections:

  1. Design: brand colors/buttons/etc. all elements used for the project.
  2. Front-End Guidelines: guidelines to understand project structures, existing classes, helpers, available frameworks, recommendations, etc.

About CSS structure and re-use

Sass files of the Design System are splitted for the moment into 3 folders:

  1. reusable-components: a set of files/framework/etc. that can be used on every project, including static websites.
    • _design-system-config.scss: config, Sass functions and variables
    • _design-system-reset.scss: resets
    • _design-system-colors.scss: colors classes (background, color, and fill)
    • _design-system-util-typo-fix.scss: typo fixes and typo helpers
    • _design-system-links-icons.scss: icons sizes/links
    • _design-system-layout-modules.scss: all positionning helpers (including flex)
    • _design-system-forms.scss: all resets for forms
    • _design-system-responsive.scss: all helpers for responsive
    • _design-system-print.scss: all helpers/resets for print
    • _design-system-reduced-motion.scss: a media-query prefers-reduced-motion: reduce to cancel transitions/animations for users that need it (vestibular disorder)
    • _design-system-viewport-fix.scss: some viewport fixes
  2. pm-styles: styles used for ProtonMail V4.
  3. pv-styles: styles coming from ProtonVPN.
    • _pv-indicator.scss: state indicator for servers
  4. react-styles: these are dedicated styles for some react components (separated because of special needs incompatible between Design System website/React/Angular).
    • _pm-dropdown.scss: Drop downs
    • _pm-tooltip.scss: Tooltips
    • _snow.scss: Snow theme for Quill
    • _react-intl-tel-input.scss: Files for React Intl Tel input
  5. design-system-website: styles for global interface, including styles only needed to make this website work properly.

See in /assets/css/styles-pm.scss to see an example of import of all of these.

Design system images (assets)

  1. Images used by the Design System CSS and which could be re-used on other projects are in the folder /assets/img/shared.
  2. Images only used by the Design System website are in the folder /assets/img/design-system-website.

Overwriting variables

If you need (for your project) to set up different values than the default one of the design system, do overwrite variables in styles-pm.scss, not in Sass partials.

Read more about this in Sass variables section.