@swisspost/design-system-styles NPM

Design System Styles

Swiss Post Design System splash screen

Styles for the Swiss Post web platform.

Documentation

Technical docs: Swiss Post Design System
Design docs: Experience Hub

Installation

The scss files in our styling package make use of the latest features of Sass. If you are planning to compile the .scss files in your project, be sure to use an up to date version of the latest Sass implementation (dart-sass, npm i sass@latest). LibSass or Ruby Sass are not supported. If you can not meet this prerequisite, you can still use the precompiled CSS files included in the styling package.

Install the styling package

  npm install @swisspost/design-system-styles

Import the stylesheet into your project, e.g. src/styles.scss.

@use '@swisspost/design-system-styles/<bundle-name>.scss';

Available Sass entrypoints:

index.scss (internet facing applications)
intranet.scss (internal applications)
basics.scss (atomic styles for font, buttons, lists etc.)
core.scss (variables, mixins, functions and placeholders only)

Available CSS bundles:

index.css (internet facing applications)
intranet.css (internal applications)
basics.css (atomic styles for font, buttons, lists etc.)

Migration guide

To execute the migrations please follow our migration guide.

Contribute

Considering supporting the Swiss Post Design System with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Learn how you can contribute to this project in the styles contribution guidelines and also take a look at the general contribution guidelines.

For any questions regarding the pattern library, you can reach out on the discussions page.

In order to keep our community open and inclusive, we expect you to read and follow our Code of Conduct.