ProtonMail base styles. 🎨

Found at ProtonMail's Design System

47 files changed, 5431 insertions, 0 deletions

diff --git a/templates/@theme-base/pm-styles/_pm-aside.scss b/templates/@theme-base/pm-styles/_pm-aside.scss
new file mode 100644
index 0000000..77ac6c6
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-aside.scss
@@ -0,0 +1,39 @@
+/*
+ * aside bar
+ */
+.aside {
+  background: var(--main-bg-color, $pm-global-grey);
+  width: $aside-bar-width;
+  min-height: 100vh;
+  color: $pm-global-light;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 5;
+  padding-top: 1.7em;
+}
+
+.aside-link {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  padding: 7px;
+  background: var(--bgcolor-aside-link, $pm-global-altgrey);
+
+  &:focus, 
+  &:hover, 
+  &:active,
+  &[aria-current="true"] {
+    background: $white;
+    color: $pm-primary;
+
+    .aside-linkIcon {
+      fill: $pm-primary;
+    }
+
+  }
+}
+.aside-linkIcon {
+  width: 17px;
+  height: 17px;
+  fill: var(--fillcolor-icons, $pm-global-light);
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-badges.scss b/templates/@theme-base/pm-styles/_pm-badges.scss
new file mode 100644
index 0000000..2690c6f
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-badges.scss
@@ -0,0 +1,52 @@
+/*
+ * badges/labels 
+ */
+[class*="badgeLabel"] {
+  @extend .uppercase;
+  @extend .color-white;
+  @extend .inbl;
+  font-size: rem(11); // to be sure this is the same height everywhere
+  padding: 0 em(2) em(1);
+  line-height: 1;
+  border-radius: $global-border-radius;
+  border-width: 2px;
+  border-style: solid; 
+}
+.badgeLabel-success {
+  @extend .bg-global-success;
+  border-color: $pm-global-success;
+}
+.badgeLabel-blue {
+  @extend .bg-pm-blue;
+  border-color: $pm-blue;
+}
+.badgeLabel-green {
+  @extend .bg-pv-green;
+  border-color: $pv-green;
+}
+@if ($pm-primary == $pm-blue) {
+  .badgeLabel-primary,
+  .badgeLabel {
+    @extend .bg-pm-blue;
+    border-color: $pm-blue;
+  }
+}
+@else {
+  .badgeLabel-primary,
+  .badgeLabel {
+    @extend .bg-pv-green;
+    border-color: $pv-green;
+  }
+}
+.badgeLabel-grey {
+  @extend .bg-global-grey;
+  border-color: $pm-global-grey;
+}
+.badgeLabel-warning {
+  @extend .bg-global-attention;
+  border-color: $pm-global-attention;
+}
+.badgeLabel-error {
+  @extend .bg-global-warning;
+  border-color: $pm-global-warning;
+}
diff --git a/templates/@theme-base/pm-styles/_pm-blue-theme.scss b/templates/@theme-base/pm-styles/_pm-blue-theme.scss
new file mode 100644
index 0000000..227cb21
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-blue-theme.scss
@@ -0,0 +1,16 @@
+@import "../reusable-components/design-system-config";
+
+$main-bg-color: $pm-blue-dark;
+$secondary-bg-color: $pm-blue-light;
+$bgcolor-searchbox-field: rgba(0, 0, 0, 0.2);
+$bgcolor-spacebar: rgba(255, 255, 255, 0.1);
+$bgcolor-aside-link: rgba(0, 0, 0, 0.3);
+$bgcolor-toolbar: $pm-blue-light;
+$fillcolor-logo: $pm-global-light;
+$fillcolor-icons: $white;
+$color-nav-link: $white;
+$color-nav-active: $white;
+$color-standard-text: $white;
+$boxshadow-main: none;
+
+@import "./pm-theme-config";
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
new file mode 100644
index 0000000..b48e26c
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss
@@ -0,0 +1,33 @@
+/*
+ * Breadcrumb domain
+ */
+.breadcrumb-container {
+  @extend .bordered-container;
+}
+.breadcrumb-item:not(:last-of-type)::after {
+  content: '';
+  display: inline-block;
+  width: 1.6rem;
+  height: 1.6rem;
+  background: $pm-input-background url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat;
+  background-size: 1.4rem;
+  position: relative;
+  top: 6px;
+  opacity: .3;
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .breadcrumb-item:not(:last-of-type)::after {
+      background-image: url("#{$path-images}sprite-for-css-only.svg#css-lesser");
+    }
+  }
+}
+.breadcrumb-button {
+  padding: .4em;
+  opacity: .3;
+}
+[disabled][aria-current="step"].breadcrumb-button {
+  font-weight: bold;
+  opacity: 1;
+  color: inherit;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-buttons.scss b/templates/@theme-base/pm-styles/_pm-buttons.scss
new file mode 100644
index 0000000..bad40a6
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-buttons.scss
@@ -0,0 +1,420 @@
+ 
+/*
+ * Buttons
+ */
+[class*="pm-button"],
+[class*="pv-button"] {
+  border-radius: $global-border-radius;
+  padding: em(5) em(16) em(6); // design want 34px height
+  border-style: solid;
+  border-width: 1px;
+  text-decoration: none;
+  & > button { // this is for drop down buttons
+    color: inherit;
+  }
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &:active {
+    text-decoration: none;
+  }
+}
+
+
+.pm-button {
+  border-color: $pm-global-border;
+  background: $white;
+  color: $pm-global-grey;
+
+  &:hover,
+  &:focus,
+  &:focus-within,
+  &.is-hover { 
+    color: $pm-global-grey;
+    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    //background-color: $pm-global-border;
+    background: radial-gradient(closest-side, $white, $pm-global-border 90%);
+    box-shadow: none;
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    pointer-events: none;
+  }
+  /* just to cancel examples  */
+  &.is-active:hover {
+    box-shadow: none;
+  }
+  &.is-hover:hover {
+    background-color: $white;
+  }
+
+  &.p0 {
+    padding: 0;
+  }
+
+}
+
+.pm-button-dark {
+  color: $white;
+  background-color: $pm-global-grey;
+  border-color: $pm-global-border;
+
+  &:focus,
+  &:hover,
+  &.is-hover {
+    color: $white;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    pointer-events: none;
+  }
+  /* just to cancel examples  */
+  &.is-hover:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.pm-button-blue {
+  color: $white;
+  background-color: $pm-primary;
+  border: 1px solid $pm-primary;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover {
+    color: $white;
+    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
+    background: $pm-primary-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: $pm-primary-dark;
+    text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 );
+    box-shadow: none;
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    border-color: $pm-global-border;
+    pointer-events: none;
+  }
+  /* just to cancel examples  */
+  &.is-hover:hover {
+    background-color: $pm-primary-dark;
+  }
+}
+
+.pm-button-blueborder {
+  border-color: $pm-primary;
+  color: $pm-primary;
+  background-color: $white;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover {
+    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
+    border-color: $pm-primary-dark;
+    color: $pm-primary-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    border-color: $pm-primary-dark;
+    color: $pm-primary-dark;
+    background: radial-gradient(closest-side, $white, $pm-global-border 90%);
+    box-shadow: none;
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    border-color: $pm-global-border;
+    pointer-events: none;
+  }
+}
+
+.pm-button-blueborder-dark {
+  border-color: $pm-primary-light;
+  color: $pm-primary-light;
+  background-color: $pm-global-grey;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover,
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-color: $pm-primary-light;
+    color: $pm-primary-dark;
+  }
+  &:active,
+  &.is-active {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    border-color: $pm-global-border;
+    pointer-events: none;
+  }
+}
+
+.pv-button-green {
+  color: $white;
+  background-color: $pv-green;
+  border: 1px solid $pv-green;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover {
+    color: $white;
+    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
+    background: $pv-green-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: $pv-green-dark;
+    text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 );
+    box-shadow: none;
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    border-color: $pm-global-border;
+    pointer-events: none;
+  }
+  /* just to cancel examples  */
+  &.is-hover:hover {
+    background-color: $pv-green-dark;
+  }
+}
+
+.pv-button-greenborder {
+  border-color: $pv-green;
+  color: $pv-green;
+  background-color: $white;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover {
+    box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2);
+    border-color: $pv-green-dark;
+    color: $pv-green-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    border-color: $pv-green-dark;
+    color: $pv-green-dark;
+    background: radial-gradient(closest-side, $white, $pm-global-border 90%);
+    box-shadow: none;
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    border: 1px solid $pm-global-border;
+    pointer-events: none;
+  }
+}
+
+.pv-button-greenborder-dark {
+  border: 1px solid $pv-green-light;
+  color: $pv-green-light;
+  background-color: $pm-global-grey;
+
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &.is-hover,
+  &:active,
+  &.is-active {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-color: $pv-green-dark;
+    color: $pv-green-dark;
+  }
+  &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns
+  &.is-active {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &[disabled],
+  &.is-disabled {
+    background-color: $pm-global-muted;
+    color: rgba( $pm-global-grey, .3 );
+    border-color: $pm-global-border;
+    pointer-events: none;
+  }
+}
+
+
+
+/* modifiers */
+.pm-button--large {
+  padding: em(10) em(20) em(9); // design want 42px height 
+}
+.pm-button--small {
+  padding: em(1) em(12) em(2); // design want 26px height 
+}
+
+.pm-button--for-icon {
+  padding-left: .75em;
+  padding-right: .75em;
+}
+.pm-button--for-smallicon {
+  padding-left: .25em;
+  padding-right: .25em;
+}
+
+/* button group */
+.pm-group-buttons {
+  @extend .inline-flex;
+  @extend .flex-nowrap;
+}
+.pm-group-button,
+.pm-group-button.is-active,
+.pm-group-button:hover,
+.pm-group-button:focus,
+.pm-group-button:active {
+  border-radius: 0;
+  border-left-width: 0;
+}
+.pm-group-button:hover,
+.pm-group-button:focus,
+.pm-group-button:active {
+  position: relative;
+}
+.pm-group-buttons > .pm-group-button:first-child {
+  border-radius: $global-border-radius 0 0 $global-border-radius;
+  border-left-width: 1px;
+}
+.pm-group-buttons > .pm-group-button:last-child {
+  border-radius: 0 $global-border-radius $global-border-radius 0;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .pm-group-buttons > .pm-group-button:not(.pagination-expand):first-child {
+      border-radius: 0 $global-border-radius $global-border-radius 0;
+      border-right-width: 1px;
+      border-left-width: 0;
+    }
+    .pm-group-buttons > .pm-group-button:not(.pagination-expand):last-child {
+      border-radius: $global-border-radius 0 0 $global-border-radius;
+      border-left-width: 1px;
+    }
+  }
+}
+
+/* aliases for buttons => different per project */
+/* primary/link/error/warning/info */
+@if ($pm-primary == $pm-blue) {
+  .pm-button--primary {
+    @extend .pm-button-blue;
+  }
+  .pm-button--primaryborder {
+    @extend .pm-button-blueborder;
+  }
+  .pm-button--primaryborder-dark {
+    @extend .pm-button-blueborder-dark;
+  }
+}
+@else {
+  .pm-button--primary {
+    @extend .pv-button-green;
+  }
+  .pm-button--primaryborder {
+    @extend .pv-button-greenborder;
+  }
+  .pm-button--primaryborder-dark {
+    @extend .pv-button-greenborder-dark;
+  }
+}
+.pm-button--link {
+  color: $color-links;
+  border-width: 0;
+  box-shadow: none;
+  text-decoration: underline;
+  background-color: transparent; // to avoid heriting from other classes
+  padding-left: 0;
+  padding-right: 0;
+  &:focus,
+  &:hover,
+  &:not(div):active,
+  &:active {
+    color: $color-hover;
+    text-decoration: underline;
+    box-shadow: none;
+    background: transparent; // to avoid heriting from other classes
+  }
+  &[disabled],
+  &.is-disabled {
+    color: rgba( $pm-global-grey, .5 );
+    pointer-events: none;
+    text-decoration: none;
+    background-color: transparent; // to avoid heriting from other classes
+  }
+}
+.pm-button--error {
+  @extend .pm-button-blue;
+  background-color: $pm-global-warning;
+  border-color: $pm-global-warning; 
+}
+.pm-button--error:focus,
+.pm-button--error:hover,
+.pm-button--error:not(div):active  { // not div is here for a specificity issue for another fix
+  background-color: $pm-global-warning;
+  border-color: $pm-global-warning; 
+}
+.pm-button--warning {
+  @extend .pm-button-blue;
+  background-color: $pm-global-attention;
+  border-color: $pm-global-attention; 
+}
+.pm-button--warning:focus,
+.pm-button--warning:hover,
+.pm-button--warning:not(div):active { // not div is here for a specificity issue for another fix
+  background-color: $pm-global-attention;
+  border-color: $pm-global-attention; 
+}
+.pm-button--info {
+  @extend .pm-button;
+}
+
+/* other aliases requested */
+.pm-button--redborder {
+  @extend .pm-button;
+  border: 1px solid $pm-global-warning;
+  color: $pm-global-warning;
+}
+
+.pm-button--whiteborder {
+  border: 1px solid $white;
+}
+
+/* other modifiers requested */
+.pm-button--noborder {
+  border: 0;
+}
+
+
+.pm-button--currentColor {
+  color: currentColor;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-circlebar.scss b/templates/@theme-base/pm-styles/_pm-circlebar.scss
new file mode 100644
index 0000000..2bd7153
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-circlebar.scss
@@ -0,0 +1,37 @@
+$stroke-width: 3px !default; // be careful to udpate SVG if you want to update this value
+
+.circle-chart__background {
+  stroke: var(--bgcolor-aside-link, rgba($white,.2));
+  stroke-width: $stroke-width;
+  fill: transparent;
+}
+.circle-chart__background--bigger .circle-chart__background {
+  stroke: rgba($pm-global-grey, .2);
+  opacity: .4;
+}
+
+.circle-chart__circle {
+  stroke: $pm-global-success;
+  stroke-width: $stroke-width;
+  fill: transparent;
+  animation: circle-chart-fill 2s reverse;
+  transform: rotate(-90deg); 
+  transform-origin: center;
+}
+.circle-bar--global-attention .circle-chart__circle {
+   stroke: $pm-global-attention;
+}
+.circle-bar--global-warning .circle-chart__circle {
+  stroke: $pm-global-warning;
+}
+.circle-chart__percent {
+  fill: var(--color-standard-text, $white);
+}
+.circle-chart-info {
+  color: var(--color-standard-text, $pm-global-light);
+}
+
+
+@keyframes circle-chart-fill {
+  to { stroke-dasharray: 0 100; }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-containers.scss b/templates/@theme-base/pm-styles/_pm-containers.scss
new file mode 100644
index 0000000..4723e94
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-containers.scss
@@ -0,0 +1,123 @@
+/*
+ * containers
+ */
+.bordered,
+.bordered-container {
+  border: 1px solid $pm-global-border;
+}
+.bordered-container {
+  border-radius: $global-border-radius;
+}
+
+.dashed,
+.dashed-container {
+  border: 1px dashed $pm-global-border;
+}
+.dashed-container {
+  border-radius: $global-border-radius;
+}
+
+.border-bottom {
+  border-bottom: 1px solid $pm-global-border;
+}
+.border-bottom--dashed {
+  border-bottom-style: dashed;
+}
+.border-top {
+  border-top: 1px solid $pm-global-border;
+}
+.border-left {
+  border-left: 1px solid $pm-global-border;
+}
+.border-right {
+  border-right: 1px solid $pm-global-border;
+}
+
+.shadow-container {
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
+}
+
+.row--orderable {
+  z-index: 666; /* In case the modal is open */
+  background-color: $white;
+  color: $pm-global-grey;
+}
+
+$block-info-border-width: 3px !default;
+[class*="block-info"] {
+  padding: 0.5em 1.2em;
+  color: $pm-global-grey;
+  background-color: $pm-global-light;
+  border-left-width: $block-info-border-width;
+  border-left-style: solid;
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    [class*="block-info"] {
+      border-left-width: 0;
+      border-right-width: $block-info-border-width;
+      border-right-style: solid;
+    }
+  }
+}
+.block-info {
+  border-color: $pm-primary;
+}
+.block-info-error {
+  border-color: $pm-global-warning;
+}
+.block-info-warning {
+  border-color: $pm-global-attention;
+}
+.block-info-success {
+  border-color: $pm-global-success;
+}
+
+[class*="block-info-standard"] {
+  padding: 0.2em 1.2em;
+  background-color: transparent;
+}
+.block-info-standard {
+  border-color: $pm-primary;
+}
+.block-info-standard-error {
+  border-color: $pm-global-warning;
+}
+.block-info-standard-warning {
+  border-color: $pm-global-attention;
+}
+.block-info-standard-success {
+  border-color: $pm-global-success;
+}
+// other colors might be added later
+
+[class*="block-info"].color-white {
+  color: $white;
+}
+
+/**
+ * details/summary
+ */
+details {
+  border-bottom: 1px solid $pm-global-border;
+  border-radius: $global-border-radius;
+
+  & > summary::-webkit-details-marker {
+    display: none;
+  }
+  &:first-child {
+    border-top: 1px solid $pm-global-border;
+  }
+  &[open] > summary {
+    background: url(#{$path-images}sprite-for-css-only.svg#css-caret-close) 0
+      50% no-repeat;
+  }
+}
+summary {
+  padding: 1em 0 1em 2rem;
+  background: url(#{$path-images}sprite-for-css-only.svg#css-caret) 0 50%
+    no-repeat;
+  list-style: none;
+  border: 0;
+  cursor: pointer;
+}
diff --git a/templates/@theme-base/pm-styles/_pm-conversations.scss b/templates/@theme-base/pm-styles/_pm-conversations.scss
new file mode 100644
index 0000000..c8ee796
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-conversations.scss
@@ -0,0 +1,254 @@
+/*
+ * items (conversations/contacts lists)
+ */
+
+.items-column-list {
+  width: calc( (100% + var(--width-sidebar, #{$width-sidebar}) ) * #{$conversations-column-width/1%/100} );
+  border-right: 1px solid $pm-global-border;
+}
+.items-column-list--mobile {
+  width: 100%;
+}
+
+.items-column-list,
+.items-column-list--mobile,
+.view-column-detail {
+  height: calc(100vh - #{$header-height} - #{$toolbar-height} );
+}
+
+.item-container,
+.item-container-row {
+  padding: em(15) em(12);
+  border-bottom: 1px solid $pm-global-border;
+}
+.item-container-row {
+  padding: em(8) em(12);
+}
+
+.item-is-selected,
+.item-container.active { // alias for Angular
+  background: $conversation-selected-bg;
+}
+
+$conversation-icon-size: 4rem !default;
+.item-icon {
+  width: $conversation-icon-size;
+  height: $conversation-icon-size;
+  font-size: 1.2rem;
+  border: 1px solid $pm-global-border;
+}
+
+.item-checkbox {
+  // hidden fake check by default
+  & + .item-icon > .item-icon-fakecheck {
+    display: none;
+  }
+
+  // focus state (used global hover state) => NEEDS IMPROVEMENTS
+  // &:focus + .item-icon {
+  //   & > .item-abbr {
+  //     display: none;
+  //   }
+
+  //   & > .item-icon-fakecheck {
+  //     display: flex;
+  //     transform: scale(1);
+  //   }
+
+  //   .item-icon-fakecheck-icon {
+  //     fill: $pm-global-border;
+  //   }
+  // } 
+
+  // hover state of checkbox
+  & + .item-icon:hover {
+    background-color: $white;
+    border-color: $pm-global-border;
+    & > .item-abbr {
+      display: none;
+    }
+    & > .item-icon-fakecheck {
+      display: flex;
+      transform: scale(1);
+    }
+    .item-icon-fakecheck-icon {
+      fill: $pm-primary;
+    }
+  }
+
+  // checked state
+  &:checked + .item-icon {
+    background-color: $pm-primary;
+    border-color: $pm-primary;
+    & > .item-abbr {
+      display: none;
+    }
+    & > .item-icon-fakecheck {
+      display: flex;
+      
+      animation: conversationIconIn ease .15s;
+    }
+    .item-icon-fakecheck-icon {
+      fill: $white;
+    }
+
+  }
+}
+@keyframes conversationIconIn {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+
+.item-titlesender {
+  line-height: 1.3;
+}
+
+.starbutton {
+  fill: $pm-global-grey;
+  width: 1.6rem;
+  height: 1.6rem;
+  opacity: .5;
+  &:focus,
+  &:hover {
+    fill: $pm-global-attention;
+    opacity: 1;
+  }
+  [class*="starbutton-icon"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .starbutton-icon-starred {
+    transform: scale(0);
+    transition: transform .15s ease;
+  }
+}
+.starbutton--is-starred {
+  opacity: 1;
+  fill: $pm-global-attention;
+  .starbutton-icon-starred {
+    transform: scale(1);
+  }
+}
+
+/*
+ * view messages
+ */
+.message-container {
+  border: 1px solid $pm-global-border;
+  border-radius: $global-border-radius;
+}
+.message-header {
+  background-color: $pm-global-light;
+  @extend .p1;
+  @extend .relative;
+
+  &.is-inbound::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 23px;
+    height: 17px;
+    transform: skewX(50deg) translateX(-10px);
+
+    border-top: 1px solid $pm-global-border;
+    border-left: 1px solid $pm-global-border;
+    background-color: $pm-global-light;
+  }
+
+  &.is-outbound::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 23px;
+    height: 17px;
+    transform: skewX(-50deg) translateX(10px);
+
+    border-top: 1px solid $pm-global-border;
+    border-right: 1px solid $pm-global-border;
+    background-color: $pm-global-light;
+  }
+
+}
+
+/* states classes */
+.message-container.is-opened {
+
+  > .message-header {
+      border-bottom: 1px solid $pm-global-border;
+  }
+
+}
+
+
+.message-content {
+  @extend .p1;
+}
+
+.message-expand {
+  padding: 0 .5em .6em; // centers 
+  background-color: $pm-global-light;
+  line-height: .75;
+}
+
+.message-attachments {
+  @extend .p1;
+  border-top: 1px solid $pm-global-border;
+  font-size: 1.4rem;
+}
+
+.message-attachment {
+  line-height: 1.3;
+  padding: 0;
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  } 
+}
+.message-attachmentIcon {
+  width: 2.6em;
+}
+.message-attachmentInfo {
+  border-left: 1px solid $pm-global-border;
+  padding: .3em .7em;
+}
+.message-attachmentSize {
+  font-size: 1.2rem;
+  opacity: .5;
+}
+
+.container-to {
+  min-width: 3em;
+}
+
+
+.compose-fab {
+  position: fixed;
+  bottom: 1em;
+  right: 1.6em;
+  z-index: 77;
+  height: 6.6rem;
+  width: 6.6rem;
+  border-radius: 50%;
+  padding: .5em;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
+}
+
+.compose-fab--inBackground {
+  z-index: 0;
+}
+
+.protonmail_quote {
+  border-left: 1px solid $pm-global-border;
+  padding-left: 1rem;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-cursors.scss b/templates/@theme-base/pm-styles/_pm-cursors.scss
new file mode 100644
index 0000000..49fe0ed
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-cursors.scss
@@ -0,0 +1,8 @@
+/*
+ * Cursors
+ */
+$list-cursors: default, help, wait, grab, row-resize, pointer !default;
+
+@each $cursor in $list-cursors {
+  .cursor-#{$cursor} { cursor: #{$cursor}; }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss
new file mode 100644
index 0000000..a284984
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss
@@ -0,0 +1,30 @@
+$scrollbar-width: 6px !default;
+$scrollbar-color: $black !default;
+$scrollbar-thumb-color: #586065 !default;
+$scrollbar-thumb-height: 40px !default;
+
+.customScrollBar-container {
+  scrollbar-color: $scrollbar-thumb-color $black;
+  scrollbar-width: thin;
+}
+
+.customScrollBar-container::-webkit-scrollbar {
+  width: $scrollbar-width;
+}
+.customScrollBar-container::-webkit-scrollbar-button:start:decrement,
+.customScrollBar-container::-webkit-scrollbar-button:end:increment,
+.customScrollBar-container::-webkit-scrollbar-button:vertical:start:increment,
+.customScrollBar-container::-webkit-scrollbar-button:vertical:end:decrement {
+  display: none;
+}
+.customScrollBar-container::-webkit-scrollbar-track:vertical,
+.customScrollBar-container::-webkit-scrollbar-track-piece {
+  background-color: $black;
+  border: 0;
+  border-radius: #{$scrollbar-width/2};
+}
+::-webkit-scrollbar-thumb:vertical {
+  height: $scrollbar-thumb-height;
+  background-color: $scrollbar-thumb-color;
+  border-radius: #{$scrollbar-width/2};
+}
diff --git a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
new file mode 100644
index 0000000..28a7fbe
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss
@@ -0,0 +1,37 @@
+.dropDown-logout-button {
+  color: var(--color-nav-link, $white);
+  .expand-caret {
+    display: none;
+  }
+  &:focus,
+  &:hover,
+  &[aria-expanded="true"] {
+    .expand-caret {
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+    .dropDown-logout-text {
+      opacity: 0;
+    }
+  }
+}
+.dropDown-logout-email {
+  font-size: 1rem;
+}
+.dropDown-logout-initials {
+  border-color: var(--color-nav-link, $pm-global-border);
+  min-width: 2.7em;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .dropDown-logout-button > span:first-child {
+      margin-left: .5em;
+      margin-right: 0;
+    }
+  }
+}
diff --git a/templates/@theme-base/pm-styles/_pm-dropdown.scss b/templates/@theme-base/pm-styles/_pm-dropdown.scss
new file mode 100644
index 0000000..7ab0fe7
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-dropdown.scss
@@ -0,0 +1,188 @@
+/* dropdown examples */
+$dropDown-width: 200px !default;
+$dropDown-wide-width: 450px !default;
+$dropDown-narrow-width: 8em !default;
+
+.dropDown {
+  @extend .relative;
+}
+.dropDown-content {
+  position: absolute;
+  z-index: 10;
+  left: calc(50% - #{$dropDown-width/2});
+  top: 100%;
+  margin-top: 2rem;
+  display: block;
+  opacity: 1;
+  transition: visibility 0s ease, transform .15s ease, opacity .15s ease ;
+  transform-origin: top center;
+  transform: scale(1,1);
+  visibility: visible;
+  transition-delay: 0s;
+  width: $dropDown-width; 
+  background: $white;
+  border-radius: $global-border-radius;
+  box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.16);
+  color: $pm-global-grey;
+}
+
+.dropDown-content--narrow {
+  left: calc(50% - #{$dropDown-narrow-width/2});
+  width: $dropDown-narrow-width;
+}
+
+.dropDown-content--wide {
+  left: calc(50% - #{$dropDown-wide-width/2});
+  width: $dropDown-wide-width;
+}
+
+.dropDown-content--rightbottom {
+  left: 100%;
+  bottom: 0;
+  top: auto;
+  margin-left: 2em;
+  transform-origin: center left;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .dropDown-content--rightbottom {
+      left: auto;
+      right: 100%;
+      margin-right: 2em;
+      transform-origin: center right;
+    }
+  }
+}
+
+
+/* This is the hidden state */
+[hidden].dropDown-content {
+  display: block;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(1,0);
+  transition-delay: .15s, 0s, 0s;
+}
+[hidden].dropDown-content--rightbottom {
+  transform: scale(0,1);
+}
+
+.dropDown-contentInner {
+  position: relative;
+  overflow: auto;
+  min-height: 4em;
+  max-height: 30vh;
+  padding: 0; // no padding for the drop shadow :-\
+  margin: 0 0 0 1em;
+  
+  background: $white no-repeat;
+  background-image: radial-gradient(farthest-side at 50% 0,#acb0bf,transparent),radial-gradient(farthest-side at 50% 100%,#acb0bf,transparent);
+  background-position: 50% 0, 0 100%;
+  background-size: calc(100% - 20px) 3px;
+
+  > * {
+    margin-right: .5em;
+  }
+
+}
+.dropDown-contentInner {
+  &::before,
+  &::after {
+    content: '';
+    position: relative;
+    display: block;
+    z-index: 1;
+    background: $white;
+    height: 10px;
+  }
+}
+
+/* position of dropDown variations */
+.dropDown--leftArrow .dropDown-content {
+  left: 0;
+}
+.dropDown--rightArrow .dropDown-content {
+  left: auto;
+  right: 0;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .dropDown--leftArrow .dropDown-content {
+      right: 0;
+      left: auto;
+    }
+    .dropDown--rightArrow .dropDown-content {
+      left: 0;
+      right: auto;
+    }
+  }
+}
+
+/* arrow on top of dropdown */
+.dropDown-content::before {
+  content: '';
+  position: absolute;
+  top: -2rem; 
+  left: calc(50% - 1rem);
+  width: 1rem;
+  height: 1rem;
+  border: 1rem solid transparent;
+  border-bottom: 1rem solid $white;
+}
+
+.dropDown--leftArrow .dropDown-content::before {
+  left: 1rem;
+}
+.dropDown--rightArrow .dropDown-content::before {
+  left: auto;
+  right: 1rem;
+}
+
+.dropDown--leftBottomArrow .dropDown-content::before {
+  top: auto;
+  left: -2rem;
+  bottom: 1rem;
+  border: 1rem solid transparent;
+  border-right: 1rem solid $white;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .dropDown-content::before {
+      right: calc(50% - 1rem);
+      left: auto;
+    }
+
+    .dropDown--leftArrow .dropDown-content::before {
+      right: 1rem;
+      left: auto;
+    }
+    .dropDown--rightArrow .dropDown-content::before {
+      right: auto;
+      left: 1rem;
+    }
+
+    .dropDown--leftBottomArrow .dropDown-content::before {
+      left: 100%;
+      right: auto;
+      border: 1rem solid transparent;
+      border-left: 1rem solid $white;
+    }
+  }
+}
+
+
+/* border on items */
+.dropDown-item + .dropDown-item {
+  border-top: 1px solid $pm-global-border;
+}
+
+/* pagination caret */
+.expand-caret {
+  fill: currentColor;
+}
+.dropDown [aria-expanded="true"] .expand-caret {
+  @extend .rotateX-180;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-forms.scss b/templates/@theme-base/pm-styles/_pm-forms.scss
new file mode 100644
index 0000000..5b6fc67
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-forms.scss
@@ -0,0 +1,409 @@
+/* input design */
+::placeholder {
+  color: rgba($pm-global-grey, .65);
+  font-style: italic;
+}
+
+// fix "autofill state"
+input:-webkit-autofill{
+  box-shadow: 200px 200px 100px $pm-input-background inset;
+}
+
+/* removes X in input when typing in IE/EDGE */
+input::-ms-clear {
+  width: 0;
+  height: 0;
+}
+/* removes native password revealer for IE/EDGE */
+input::-ms-reveal {
+  display: none;
+}
+
+$field-container: 26rem !default;
+.pm-field-container {
+  width: $field-container;
+  @extend .mw100;
+  @extend .inbl;
+  &.auto {
+    @extend .auto;
+  }
+}
+
+.pm-field {
+  filter: none; // fixes Firefox autofill color
+  border: $input-defaut-border;
+  padding: em(6) em(16); // design want 34px height (actually 35 to avoid .5px)
+  background-color: $pm-input-background;
+  border-radius: $global-border-radius;
+  outline: 0;
+  &:focus,
+  &.focus,
+  &:focus-within {
+    background-color: $white;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
+  }
+  &[aria-invalid="true"]:not(:focus),
+  &[aria-invalid="true"]:not(.ng-pristine) {
+    border-color: $pm-global-warning;
+    box-shadow: none;
+  }
+  &.is-valid:not(:focus) {
+    border-color: $pm-global-success;
+  }
+  &[disabled] {
+    color: rgba( $pm-global-grey, .3 );
+    font-style: italic;
+  }
+  &.w100 {
+    width: 100%;
+  }
+  &:-moz-ui-invalid { // fixes some Firefox issues with HTML5 validation
+    box-shadow: none;
+  }
+
+  &[type="search"] {
+    background: url("#{$path-images}sprite-for-css-only.svg#css-search") 6px 50% no-repeat;
+    background-size: 1.5rem;
+    padding-left: 2em;
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    [type="search"].pm-field {
+      padding-left: 0;
+      padding-right: 2em;
+      background: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl") calc(100% - 6px) 50% no-repeat;
+    }
+  }
+}
+
+select.pm-field {
+  background: $pm-input-background url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat;
+  background-size: 1.5rem;
+  padding-left: 1em;
+  height: 3.5rem;
+  padding-right: 20px;
+  text-overflow: ellipsis;
+  &::-ms-expand {
+    display: none;
+  }
+}
+
+/* firefox bug */
+textarea[required].pm-field.field-pristine:invalid {
+  box-shadow: none;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    select.pm-field {
+      background-position: 6px 50%;
+      padding-right: 1em;
+      padding-left: 20px;
+    }
+  }
+}
+
+/* errors */
+.error-zone {
+  transition: transform .15s linear, max-height .15s linear;
+  transform: scaleY(1);
+  transform-origin: top center;
+  &:empty {
+    transform: scaleY(0);
+  }
+}
+
+// general rule: if focus is on the field => don't display error yet
+.pm-field-icon-container:focus-within + .error-zone,
+.pm-field:focus + .error-zone {
+  transform: scaleY(0);
+  max-height: 0;
+}
+
+
+
+
+/* sizes/other modifiers */
+.pm-field--tiny {
+  padding: em(6); // useful for address group
+}
+.pm-field--small {
+  padding: em(2) em(16);  // design want 26px height (actually 27 to avoid .5px)
+}
+.pm-field--large {
+  padding: em(10) em(16); // design want 42px height (actually 43 to avoid .5px)
+}
+.pm-field--highlight {
+  border-color: $pm-primary;
+  border-width: 2px;
+  background-color: rgba($pm-primary, .1);
+}
+
+/* checkboxes */
+.pm-checkbox-fakecheck {
+  display: inline-flex;
+  border: 1px solid $pm-global-border;
+  border-radius: 2px;
+  width: 1.6rem;
+  height: 1.6rem;
+  margin: auto .5rem auto 0;
+}
+.pm-checkbox-fakecheck-img {
+  margin: auto;
+  width: 1rem;
+  transform: scale(0);
+  transition: .15s transform linear;
+}
+.pm-checkbox {
+  @extend .sr-only;
+  &:checked + .pm-checkbox-fakecheck {
+    .pm-checkbox-fakecheck-img {
+      transform: scale(1);
+    }
+  }
+  &:focus + .pm-checkbox-fakecheck {
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
+  }
+  &[disabled] + .pm-checkbox-fakecheck,
+  &:indeterminate + .pm-checkbox-fakecheck {
+    background: $pm-global-muted;
+  }
+  &:indeterminate + .pm-checkbox-fakecheck {
+      content: '';
+      width: 1.6rem;
+      height: 1.6rem;
+      background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash");
+      background-repeat: no-repeat;
+  }
+}
+
+// exception for toolbar
+.pm-select-all {
+  .pm-checkbox-fakecheck {
+    border: 1px solid var(--fillcolor-icons, #585C67);
+    background-color: var(--bgcolor-aside-link, #484E59);
+  }
+  .pm-checkbox-fakecheck-img {
+    fill: var(--fillcolor-icons, $white);
+  }
+}
+
+
+/* radios */
+.pm-radio-fakeradio {
+  @extend .pm-checkbox-fakecheck;
+  border-radius: 50%;
+}
+.pm-radio-fakeradio::before {
+  content: '';
+  margin: auto;
+  width: .8rem;
+  height: .8rem;
+  border-radius: 50%;
+  background: transparent;
+  transform: scale(0);
+  transition: .15s transform linear;
+}
+.pm-radio {
+  @extend .sr-only;
+  &:checked + .pm-radio-fakeradio::before {
+    background: $pm-primary;
+    transform: scale(1);
+  }
+  &:focus + .pm-radio-fakeradio {
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
+  }
+  &[disabled] + .pm-radio-fakeradio {
+    background: $pm-global-muted;
+  }
+}
+
+
+/* toogle */
+$width: 5.5em !default;
+.pm-toggle-label {
+  margin-top: .15em;
+  // height: 2em;
+  width: $width;
+  display: inline-flex;
+  border: 1px solid $pm-global-border;
+  background: #fcfdff;
+  border-radius: 2rem;
+  padding: 2px;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    width: calc( #{$width/2} - 2px);
+    transition: transform .25s ease, background-color .25s ease, border-color .25s linear;
+    border-radius: 2rem;
+    background: $pm-global-muted;
+    top: 2px;
+    left: 0;
+    bottom: 2px;
+    transform: translateX(2px);
+    border: 1px solid $pm-global-border;
+  }
+  & > .pm-toggle-label-text {
+    align-self: center;
+    margin: 0;
+    text-align: center;
+    border-radius: 2rem;
+    padding: em(6) 0;
+    width: #{$width/2};
+    position: relative;
+    z-index: 2;
+    transition: fill .1s steps(1, end);
+    display: inline-flex;
+  }
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .pm-toggle-label {
+      &::before {
+        left: auto;
+        right: 0;
+        transform: translateX(-2px);
+      }
+    }
+  }
+}
+
+.pm-toggle-checkbox {
+  @extend .invisible;
+  &:checked + .pm-toggle-label {
+    & > .pm-toggle-label-text:last-child {
+      fill: $white;
+    }
+    &::before {
+      background: $pm-primary;
+      transform: translateX( #{$width/2} ) translateX(-2px);
+      // transform: translateX( calc( 2.5rem - 2px) ); does NOT work in IE11
+      border-color: $pm-primary-dark;
+    }
+  }
+  &:focus + .pm-toggle-label {
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16);
+  }
+  &[disabled] + .pm-toggle-label  {
+    background: rgba($pm-global-muted, .6);
+    .pm-toggle-label-text {
+      opacity: .3;
+    }
+  }
+  &[aria-busy="true"] + .pm-toggle-label  {
+    border-color: $pm-global-border;
+    &::before {
+      border-color: transparent;
+      transform: translateX( #{$width/4} ) translateX(-2px);
+      background: transparent url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat;
+    }
+    & > .pm-toggle-label-text {
+      opacity: 0;
+    }
+  }
+
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .pm-toggle-checkbox {
+      &:checked + .pm-toggle-label {
+        &::before {
+          transform: translateX( -#{$width/2} ) translateX(2px);
+        }
+      }
+      &[aria-busy="true"] + .pm-toggle-label  {
+        &::before {
+          //background-color: $pm-primary;
+          transform: translateX( -#{$width/4} ) translateX(2px);
+        }
+      }
+    }
+  }
+}
+.pm-toggle-label-img {
+  margin: auto;
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
+.pm-toggle-label--small {
+  margin-top: .25em;
+  font-size: .8em;
+  & .pm-toggle-label-img {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+}
+
+
+
+/* label */
+$pm-label-width: 18em !default;
+.pm-label {
+  padding-top: .5em;
+  width: var(--label-width, $pm-label-width);
+  padding-right: .5em;
+  &.pt0 {
+    padding-top: 0;
+  }
+  &.auto {
+    width: auto;
+  }
+}
+
+/* container address */
+.pm-field-container--address {
+  margin-top: -1.6em;
+}
+
+
+/* field with icon */
+.pm-field-icon-container {
+  @extend .pm-field; // added focus-within inside on pm-field for this fake-field :)
+  padding: 0;
+  > .pm-field {
+    border: 0;
+    width: calc(100% - 1.5em);
+  }
+  &:focus-within {
+    > .pm-field {
+      background-color: transparent;
+      box-shadow: none;
+      outline: 0;
+    }
+  }
+}
+.pm-field-icon-container--invalid:not(:focus-within) {
+  border-color: $pm-global-warning;
+  > .pm-field {
+    border-color: $pm-global-warning;
+  }
+}
+
+
+/* special case for very large inputs in modals, like rich text editor */
+.pm-modalContainer .pm-field-container--full {
+  width: calc(100% - var(--label-width, #{$pm-label-width}));
+}
+@include respond-to(1360) { 
+  .pm-modalContainer .pm-field-container--full {
+      width: $field-container;
+  }
+}
+@include respond-to(830) { 
+  .pm-modalContainer .pm-field-container--full {
+      width: calc(100% - var(--label-width, #{$pm-label-width}));
+  }
+}
+
+@include respond-to($breakpoint-small) { 
+  .pm-modalContainer .pm-field-container--full {
+      width: 100%;
+  }
+}
+/* end special case */
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
new file mode 100644
index 0000000..44a14ef
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss
@@ -0,0 +1,85 @@
+.searchbox-container {
+  width: $conversations-column-width;
+}
+.searchbox-container:empty {
+  width: 0;
+
+  // if there is no search bar, the next element (navigation) is pushed to the right (VPN/settings/etc.)
+
+  // & + .topnav-container {
+
+  //   & .topnav-list {
+  //     justify-content: flex-end;
+
+  //     & > li:last-child {
+  //       margin-left: 0;
+  //     }
+
+  //   }
+
+  // }
+}
+.searchbox-container input::placeholder {
+  color: var(--color-standard-text, rgba(255, 255, 255, .6) );
+}
+.searchbox-field[type="search"] {
+  height: 4rem;
+  background-color: var(--bgcolor-searchbox-field, rgba($black, .3));
+  background-image: none;
+  border-color: var(--main-bg-color, $black);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05);
+  background-size: 2rem;
+  padding-left: calc(2em + 2rem);
+  padding-right: 4rem;
+  color: var(--color-standard-text, $white);
+  border-width: 0;
+}
+.searchbox-search-button {
+  position: absolute;
+  left: 1em;
+  top: 0;
+  bottom: 0;
+  & > .searchbox-search-button-icon {
+    width: 2.2rem;
+    height: 2.2rem;
+    fill: var(--fillcolor-icons, $white);
+  }
+}
+.searchbox-advanced-search-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding: 0 1rem;
+  & > .searchbox-advanced-search-icon {
+    fill: var(--fillcolor-icons, $white);
+  }
+}
+
+@include respond-to($breakpoint-small) { 
+  .searchbox-advanced-search-button {
+    position: static;
+  }
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .searchbox-field[type="search"] { 
+      padding-right: calc(2em + 2rem);
+      padding-left: 4rem;
+      background-image: none;
+      background-size: 2rem;
+    }
+    .searchbox-search-button-icon {
+      @extend .mirror;
+    }
+    .searchbox-search-button {
+      right: 1em;
+      left: auto;
+    }
+    .searchbox-advanced-search-button {
+      right: auto;
+      left: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-header-topnav.scss b/templates/@theme-base/pm-styles/_pm-header-topnav.scss
new file mode 100644
index 0000000..65af0f9
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-header-topnav.scss
@@ -0,0 +1,101 @@
+.topnav-link {
+  border: 1px solid transparent;
+  padding: 1rem;
+  color: var(--color-nav-link, $white);
+  &:focus,
+  &:hover,
+  &:active,
+  &[aria-current="true"] {
+    color: var(--color-nav-active, $pm-primary);
+    text-decoration: none;
+    
+    > .topnav-icon {
+      fill: var(--color-nav-active, $pm-primary);
+    }
+  }
+  &[aria-current="true"] {
+    font-weight: bold;
+  }
+  & > svg {
+  fill: var(--fillcolor-icons, $white);
+  }
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .topnav-list { 
+      margin-left: 0;
+      margin-right: 1em;
+    }
+    .topnav-icon { 
+      margin-right: 0;
+      margin-left: .5em;
+    }
+  }
+}
+
+/* Decrease margins (was 1em) */
+@include respond-to(1500) {
+
+  .topnav-list {
+      > li {
+          margin-right: 1px;
+      }
+  }
+
+}
+
+
+@include respond-to(1300) {
+
+  .topnav-list--four-elements {
+      .navigation-title {
+      // equivalent of .sr-only, but impossible to extend in a breakpoint
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+      }
+      .topnav-icon {
+          margin-right: 0;
+          &.expand-caret {
+              margin-left: .25em;
+          }
+      }
+  }
+
+
+}
+
+
+@include respond-to(1100) {
+
+  .navigation-title {
+      // equivalent of .sr-only, but impossible to extend in a breakpoint
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+  }
+  .topnav-icon {
+      margin-right: 0;
+  }
+
+}
+
+
+
+@include respond-to($breakpoint-small) {
+  .topnav-icon {
+    width: 25px;
+    height: 25px;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-layout.scss b/templates/@theme-base/pm-styles/_pm-layout.scss
new file mode 100644
index 0000000..43ecc66
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-layout.scss
@@ -0,0 +1,22 @@
+/* for 1px-high hr */
+hr {
+  background-color: $color-hr;
+  border: 0;
+  color: $color-hr;
+  height: $hr-height;
+  margin: 0 0 1em;
+  padding: 0;
+}
+
+/* rounded corners */
+.rounded { border-radius: $global-border-radius; }
+.rounded50 { border-radius: 50%; }
+.rounded0 { border-radius: 0; }
+.rounded0-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.rounded0-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+
+kbd {
+  @extend .rounded;
+  @extend .bg-global-light;
+  border: 1px solid $pm-global-border;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-light-theme.scss b/templates/@theme-base/pm-styles/_pm-light-theme.scss
new file mode 100644
index 0000000..b8bf232
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-light-theme.scss
@@ -0,0 +1,16 @@
+@import "../reusable-components/design-system-config";
+
+$main-bg-color: $pm-global-light;
+$secondary-bg-color: $white;
+$bgcolor-searchbox-field: $white;
+$bgcolor-spacebar: rgba(0, 0, 0, 0.05);
+$bgcolor-aside-link: #e3e4e7;
+$bgcolor-toolbar: $pm-global-light;
+$fillcolor-logo: $pm-blue;
+$fillcolor-icons: $pm-global-grey;
+$color-nav-link: $pm-global-grey;
+$color-nav-active: $pm-blue-dark;
+$color-standard-text: $pm-global-grey;
+$boxshadow-main: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+
+@import "./pm-theme-config";
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-loader-animation.scss b/templates/@theme-base/pm-styles/_pm-loader-animation.scss
new file mode 100644
index 0000000..67fd7c0
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-loader-animation.scss
@@ -0,0 +1,117 @@
+$loader-size-big: 200px !default;
+$stroke-width-big: 4 !default;
+
+.loadingAnimation {  
+  animation: protonRotate 3s linear infinite;
+  will-change: transform;
+}
+
+
+@keyframes protonRotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+.loadingAnimation-circle {
+  fill: transparent;
+  stroke: $pm-global-grey;
+  stroke-width: $stroke-width-big;
+  transform-origin: 50%;
+  will-change: transform;
+}
+
+.loadingAnimation-circle--pm-primary {
+  stroke: $pm-primary;
+}
+.loadingAnimation-circle--global-light {
+  stroke: $pm-global-light;
+}
+
+.loadingAnimation-orbit1 {
+  animation: protonOrbit1 3s linear infinite;
+}
+.loadingAnimation-orbit2 {
+  animation: protonOrbit2 3s linear infinite;
+}
+
+
+// Generates orbit animation function
+// @author Nicolas Hoffmann
+// @param {String} $name - animation name
+// @param {String} $stroke-width - Default stroke-width of your circle
+// @param {Float} $stroke-width-ratioplus - ratio to increase $stroke-width value (mitigates disparition effect during rotation)
+// @param {String} $type-rotate
+@mixin orbit( $name, $stroke-width, $stroke-width-ratioplus, $type-rotate ){
+  
+  @keyframes #{$name} {
+    0% {
+      transform: unquote("#{$type-rotate}(0)");
+      stroke-width: $stroke-width;
+    }
+  
+    25% {
+      stroke-width: $stroke-width*$stroke-width-ratioplus;
+    }
+  
+    50% {
+      stroke-width: $stroke-width;
+    }
+  
+    75% {
+      stroke-width: $stroke-width*$stroke-width-ratioplus;
+    }
+  
+    100% {
+      transform: unquote("#{$type-rotate}(360deg)");
+      stroke-width: $stroke-width;
+    }
+  }
+
+}
+
+@include orbit('protonOrbit1', $stroke-width-big, 2.5, 'rotateX');
+@include orbit('protonOrbit2', $stroke-width-big, 2.5, 'rotateY');
+
+
+
+/* smaller version */
+$loader-size-smaller: 20px !default;
+$stroke-width-smaller: 1 !default;
+
+.loadingAnimation-circle--smaller {
+  stroke-width: $stroke-width-smaller;
+}
+
+.loadingAnimation-orbit1--smaller {
+  animation: protonOrbit1-smaller 3s linear infinite;
+}
+.loadingAnimation-orbit2--smaller {
+  animation: protonOrbit2-smaller 3s linear infinite;
+}
+
+@include orbit('protonOrbit1-smaller', $stroke-width-smaller, 2, 'rotateX');
+@include orbit('protonOrbit2-smaller', $stroke-width-smaller, 2, 'rotateY');
+
+
+
+.atomLoader-text::after {
+  position: absolute;
+  overflow: hidden;
+  display: inline-block;
+  animation: ellipsis steps(4,end) 900ms infinite;
+  content: "\2026"; /* ascii code for the ellipsis character */
+  width: 0;
+}
+
+@keyframes ellipsis {
+  to { width: 1.25em }
+}
+
+
+
diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
new file mode 100644
index 0000000..abffaaf
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss
@@ -0,0 +1,53 @@
+[aria-busy="true"] {
+    background-image: url(#{$path-images}loading-atom-smaller.svg);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+button[aria-busy="true"] {
+    background-image: url(#{$path-images}loading-atom-smaller-disabled.svg);
+    background-position: calc(100% - 4px) 50%;
+    background-size: 10px 10px;
+}
+
+tr[aria-busy="true"] {
+    height: 5rem;
+}
+
+td[aria-busy="true"] {
+  position: relative;
+  background-image: none;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: $white url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat;
+  }
+}
+
+.progressive[aria-busy="true"] {
+  position: relative;
+  background-image: none;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-image: none;
+    animation: backgroundLoading 1s linear infinite alternate;
+  }
+}
+
+@keyframes backgroundLoading {
+  0% {
+    background-color: $white;
+  }
+  100% {
+    background-color: #eee;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-meterbar.scss b/templates/@theme-base/pm-styles/_pm-meterbar.scss
new file mode 100644
index 0000000..4798eb2
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-meterbar.scss
@@ -0,0 +1,114 @@
+/*
+ * Space remaining bar
+ */
+$meterbar-height: 6px !default;
+
+.spacebar-container {
+  padding: 1rem 2rem;
+  color: var(--color-standard-text, $white);
+}
+
+.spacebar {
+  /* Reset the default appearance */
+  //-webkit-appearance: none; // well, because Chrome.
+  -moz-appearance: none;
+  //-ms-appearance: none;
+  /* autoprefixer: ignore next */
+  appearance: none;
+
+  height: $meterbar-height;
+  border-radius: #{$meterbar-height/2};
+  background: var(--bgcolor-spacebar, $black);
+
+  &::-webkit-meter-bar {
+    background: var(--bgcolor-spacebar, $black);
+    border-radius: #{$meterbar-height/2};
+  }
+
+  // &::-webkit-meter-optimum-value {
+  //   background: $pm-primary; 
+  //   border-radius: #{$meterbar-height/2};
+  // }
+  &::-webkit-meter-optimum-value {
+    background: $pm-primary; 
+    border-radius: #{$meterbar-height/2};
+  }
+  &:-moz-meter-optimum::-moz-meter-bar {
+    border-radius: #{$meterbar-height/2};
+    background: $pm-primary;
+  }
+  
+}
+
+// .spacebar-percent {
+//   border-radius: 3px;
+//   background: $pm-primary;
+//   height: 6px;
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+// }
+
+/* to target IE/EDGE: hack */
+// _:-ms-input-placeholder, :root {
+//   .spacebar {
+//     visibility: hidden;
+//   }
+//   .spacebar-gauge {
+//     visibility: visible;
+//   }  
+// }
+
+// .spacebar-version {
+//   color: rgba($white, .3);
+// }
+
+
+.setting-meterbar {
+  //-webkit-appearance: none;
+  -moz-appearance: none;
+  //-ms-appearance: none;
+  /* autoprefixer: ignore next */
+  appearance: none;
+  height: 1.5rem;
+  background: $pm-global-muted;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+
+  &::-webkit-meter-bar {
+    background: none; /* Required to get rid of the default background property */
+    display: inherit;
+    border: 0; // For Edge
+  }
+  &::-moz-meter-bar {
+    display: inherit;
+  }
+  &::-webkit-meter-optimum-value {
+    background: $pm-global-success;
+  }
+  &::-webkit-meter-suboptimum-value {
+    background: $pm-global-attention;
+  }
+  &::-webkit-meter-even-less-good-value {
+    background: $pm-global-warning;
+  }
+
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: $pm-global-success;
+  }
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: $pm-global-attention;
+  }
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: $pm-global-warning;
+  }
+
+}
+
+.setting-meterbar--high {
+  &::-webkit-meter-suboptimum-value {
+    background: $pm-global-warning;
+  }
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background-color: $pm-global-warning;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
new file mode 100644
index 0000000..f8bccfb
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss
@@ -0,0 +1,119 @@
+$minicalendar-day-color: $black !default;
+$minicalendar-day-color-on-dark-background: $white !default;
+$minicalendar-fontsize: 1.2rem !default;
+$minicalendar-cell-size: 2em !default;
+
+.minicalendar {
+    font-size: $minicalendar-fontsize;
+}
+
+.minicalendar-grid--displayWeekNumber {
+    display: grid;
+    grid-template-columns: 30px auto;
+    grid-template-rows: auto;
+}
+
+.minicalendar-weekdays,
+.minicalendar-weeknumbers,
+.minicalendar-day--inactive-month {
+    opacity: .4;
+}
+
+.minicalendar-weekdays {
+    display: grid;
+    grid-template-columns: repeat( var(--minicalendar-weekdays-numberOfDaysInWeek, 7), 1fr);
+    grid-template-rows: 1fr;
+}
+.minicalendar-days {
+    display: grid;
+    grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr);
+    grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr)
+}
+
+.minicalendar-day {
+    color: $minicalendar-day-color;
+}
+.minicalendar-icon {
+    fill: $minicalendar-day-color;
+}
+.minicalendar--onDarkBackground {
+    .minicalendar-day {
+        color: $minicalendar-day-color-on-dark-background;
+    }
+    .minicalendar-icon {
+        fill: $minicalendar-day-color-on-dark-background;
+    }
+}
+
+.minicalendar-days {
+    user-select: none;
+}
+
+.minicalendar-weekdays {
+    border-bottom: 1px dotted $pm-global-border;
+}
+
+.minicalendar-weeknumbers > span {
+
+    &:first-of-type {
+        border-bottom: 1px dotted $pm-global-border;
+    }
+    &:not(:first-of-type) {
+        min-height: $minicalendar-cell-size;
+    }
+
+}
+.minicalendar-weeknumbers-heading {
+    display: inline-block;
+    transform: scale(.7);
+}
+
+.minicalendar-day {
+    position: relative;
+    min-width: #{$minicalendar-cell-size + 0.35em};
+    min-height: #{$minicalendar-cell-size + 0.35em};
+}
+
+.minicalendar-grid--displayWeekNumber .minicalendar-day {
+    min-width: $minicalendar-cell-size;
+    min-height: $minicalendar-cell-size;
+}
+.minicalendar-day[aria-current="date"] {
+    color: $white;
+    font-weight: bold;
+    background: $pm-primary-dark;
+    border-radius: 50%;
+}
+.minicalendar-day[aria-pressed=true] {
+    color: $white;
+    font-weight: bold;
+    background: $pm-primary;
+}
+
+$minicalendar-day-marker-size: 3px !default;
+.minicalendar-day--marker {
+    position: absolute;
+    bottom: 1px;
+    left: calc(50% - #{$minicalendar-day-marker-size/2});
+    height: $minicalendar-day-marker-size;
+    width: $minicalendar-day-marker-size;
+    background-color: $pm-primary;
+    border-radius: 50%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.minicalendar-day[aria-pressed=true],
+.minicalendar-day[aria-pressed=date] {
+    .minicalendar-day--marker {
+        background-color: $white;
+    }
+}
+
+.minicalendar-day--range-bound {
+    background: $pm-primary;
+}
+.minicalendar-day--range {
+    background: $pm-primary-light;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-modal.scss b/templates/@theme-base/pm-styles/_pm-modal.scss
new file mode 100644
index 0000000..e991ba0
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-modal.scss
@@ -0,0 +1,243 @@
+/*
+ * Modals
+ */
+/* overlay covers everything */
+$modal-width: 50% !default;
+$modal-max-width: 70rem;
+
+$modal-breakpoint-width: 52em !default;
+$modal-breakpoint-height: 22em !default;
+
+$modal-max-height: 80% !default;
+
+$modal-wider-width: 70% !default;
+$modal-wider-max-width: 100rem;
+
+$modal-smaller-width: 28em !default;
+
+.pm-modalOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: rgba( 0, 0, 0, .4 );
+  z-index: 666;
+  cursor: pointer;
+  animation: pm-modalOverlayIn ease .5s 1 normal ;
+}
+
+.pm-modalContainer {
+  position: fixed;
+  top: 0; left: 0; bottom: 0; right: 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  cursor: pointer;
+  z-index: 666;
+  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+}
+
+.pm-modalContainer--inBackground {
+  z-index: 600;
+}
+
+.pm-modalOverlayOut {
+  animation: pm-modalOverlayOut ease .5s 1  normal ;
+  animation-fill-mode: forwards;
+}
+
+
+@keyframes pm-modalOverlayIn {
+  0% {
+    background: rgba( 0, 0, 0, 0 );
+  }
+  100% {
+    background: rgba( 0, 0, 0, .4 );
+  }
+}
+
+@keyframes pm-modalOverlayOut {
+  0% {
+    background: rgba( 0, 0, 0, .4 );
+  }
+  100% {
+    background: rgba( 0, 0, 0, 0 );
+  }
+}
+
+.pm-modal {
+  position: relative;
+  width: $modal-width;
+  max-height: $modal-max-height;
+  max-width: $modal-max-width;
+  background: $white;
+  color: $pm-global-grey;
+  padding: 0;
+  overflow: hidden;
+  border-radius: $global-border-radius;
+  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3);
+  animation: pm-modalIn ease .15s 1 normal;
+  animation-fill-mode: both;
+  animation-delay: .1s; // stupid fix for Safari crazy display bug
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  cursor: default;
+}
+
+@keyframes pm-modalIn {
+  0% {
+    opacity: 0;
+	  transform: scale(.8);
+  }
+  100% {
+    opacity: 1;
+	  transform: scale(1);
+  }
+}
+
+@keyframes pm-modalOut {
+  0% {
+    opacity: 1;
+	  transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+	  transform: scale(.8);
+  }
+}
+
+.pm-modalOut {
+  animation: pm-modalOut ease .15s 1 normal ;
+  animation-fill-mode: both;
+}
+
+.pm-modal--smaller {
+  width: $modal-smaller-width;
+}
+.pm-modal--wider {
+  width: $modal-wider-width;
+  max-width: $modal-wider-max-width;
+}
+
+
+
+
+.pm-modalClose {
+  position: absolute;
+  right: .5rem;
+  top: .2rem;
+  background: transparent;
+  border-radius: 1em;
+  color: $pm-global-grey;
+  border: 0;
+  font-size: 2em;
+  padding: 0;
+  line-height: 1;
+  cursor: pointer;
+}
+// not defined, left this in case of
+// .pm-modalClose:focus,
+// .pm-modalClose:hover,
+// .pm-modalClose:active {
+// }
+// .pm-modalClose:hover,
+// .pm-modalClose:active {
+// }
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .pm-modalClose {
+      left: .5rem;
+      right: auto;
+    }
+  }
+}
+
+.pm-modalContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.pm-modalHeader {
+  padding: rem(30) rem(30) rem(15) rem(30);
+  flex: 0;
+}
+.pm-modalTitle {
+  font-size: 2.2rem;
+  line-height: 1.5;
+  margin-bottom: 0;
+  padding-right: 1em;
+}
+.pm-modalFooter {
+  padding: rem(15) rem(30) rem(30);
+  flex: 0;
+  [class*="pm-button"] { // only for Safari the ugly
+    min-height: 3.4rem;
+  }
+}
+
+.pm-modalContentInner {
+  position: relative;
+  overflow: auto;
+  flex: 1 1 auto;
+  padding: 0 rem(30);
+
+  background: $white no-repeat;
+  background-image: radial-gradient(farthest-side at 50% 0,#acb0bf,transparent),radial-gradient(farthest-side at 50% 100%,#acb0bf,transparent);
+  background-position: 50% 0, 0 100%;
+  background-size: calc(100% - 20px) 3px;
+}
+.pm-modalContentInner {
+  &::before,
+  &::after {
+    content: '';
+    position: relative;
+    display: block;
+    z-index: 1;
+    background: $white;
+    height: 10px;
+  }
+}
+.pm-modalContentInner > p:first-child {
+  margin-top: 0;
+}
+.pm-modalContentInner > p:last-child {
+  margin-bottom: 0;
+}
+
+
+
+// adaptation for labels
+$pm-label-shorter-width: 10em !default;
+.pm-modal--shorterLabels .pm-label {
+  width: var(--label-shorter-width, $pm-label-shorter-width);
+}
+
+// single button on right
+.pm-modalFooter [class*="pm-button"]:only-child {
+  margin-left: auto;
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .pm-modalFooter [class*="pm-button"]:only-child {
+      margin-right: auto;
+      margin-left: 0;
+    }
+  }
+}
+
+// small viewports
+@media (max-width: $modal-breakpoint-width) {
+  .pm-modal {
+    margin: 1%;
+    min-width: 0;
+    width: 98%;
+    max-width: 98%;
+    max-height: 98%;
+    align-self: center;
+  }
+}
+
diff --git a/templates/@theme-base/pm-styles/_pm-navigation.scss b/templates/@theme-base/pm-styles/_pm-navigation.scss
new file mode 100644
index 0000000..46a41e1
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-navigation.scss
@@ -0,0 +1,61 @@
+/*
+ * navigation
+ */
+
+.navigation__link {
+  padding: 1.1rem 1em 1.1rem 2rem;
+  line-height: 1.3;
+  color:  var(--color-nav-link, $white);
+  text-decoration: none;
+  display: block;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .navigation__link {
+      padding: .75rem 3rem .75rem 1rem;
+    }
+  }
+}
+
+.navigation__icon {
+  fill:  var(--fillcolor-icons, #6D7178);
+}
+
+.navigation__refresh {
+  display: none;
+}
+
+.navigation__link:focus,
+.navigation__link:hover {
+  background: rgba(255,255,255,.05);
+  color:  var(--color-nav-link, $pm-global-light);
+  text-decoration: none;
+  .navigation__icon {
+    fill:  var(--fillcolor-icons, $white);
+  }
+}
+[aria-current="page"].navigation__link {
+  background: var(--main-bg-color, $pm-global-grey);
+  color: var(--color-nav-active, $pm-primary);
+  font-weight: bold;
+  
+  &:hover .navigation__icon,
+  .navigation__icon {
+    fill: var(--color-nav-active, $pm-primary);
+  }
+  
+  .navigation__refresh {
+    display: inline-flex;
+  }
+
+}
+.navigation__counterItem {
+  background: rgba($white, 0.1);
+  font-size: 1.1rem;
+  padding: .1em em(6, 11) .2em;
+  font-weight: normal;
+  &:empty {
+      display: none; // removes a bug on Webkit
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-notifications.scss b/templates/@theme-base/pm-styles/_pm-notifications.scss
new file mode 100644
index 0000000..93ed558
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-notifications.scss
@@ -0,0 +1,91 @@
+/*
+ * Notifications
+ */
+.notifications-container {
+  position: fixed;
+  top: 1em;
+  left: 50%;
+  z-index: 777;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+[class*="notification-"] {
+  border-radius: $global-border-radius;
+  overflow: hidden;
+  display: block;
+}
+.notification {
+  &-alert {
+    background: $pm-global-warning;
+    color: $pm-global-light;
+  }
+  &-success {
+    background: $pm-global-success;
+    color: $pm-global-light;
+  }
+  &-warning {
+    background: $pm-global-attention;
+    color: $pm-global-grey;
+  }
+  &-info {
+    background: $pm-primary;
+    color: $white;
+  }
+}
+
+.notificationIn {
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+  animation-name: notificationIn;
+}
+
+.notificationOut {
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease;
+  animation-name: notificationOut;
+}
+
+
+@keyframes notificationIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-50px);
+    transform: translateY(-50px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes notificationOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    max-height: 0;
+    padding: 0;
+    margin-bottom: 0;
+  }
+}
+
+
+@include respond-to($breakpoint-small) { 
+
+  .notifications-container {
+    left: 1em;
+    right: 1em;
+    -webkit-transform: none;
+    transform: none;
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-panels.scss b/templates/@theme-base/pm-styles/_pm-panels.scss
new file mode 100644
index 0000000..89d52c0
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-panels.scss
@@ -0,0 +1,49 @@
+/*
+ * Information panels
+ */
+.information-panel-image {
+  position: absolute;
+  width: 48px;
+  height: 36px;
+  top: 19px;
+  left: -12px;
+  border: 1px solid $pm-global-border;
+  border-radius: $global-border-radius;
+  border-bottom-left-radius: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    display: inline-block;
+    width: 12px;
+    height: 10px;
+    top: calc(100% + 1px);
+    left: -1px;
+    border: 6px solid transparent;
+    border-top: 6px solid $pm-global-border;
+    border-right: 6px solid $pm-global-border;
+  }
+}
+
+.information-panel-content {
+  margin: 1.6rem 2.3rem 1.6rem 5.1rem;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .information-panel-image {
+      left: auto;
+      right: -12px;
+      &::before {
+        left: auto;
+        right: -1px;
+        border: 6px solid transparent;
+        border-top: 6px solid $pm-global-border;
+        border-left: 6px solid $pm-global-border;
+      }
+    }
+    .information-panel-content {
+      margin: 1.6rem 5.1rem 1.6rem 2.3rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-progress-contact.scss b/templates/@theme-base/pm-styles/_pm-progress-contact.scss
new file mode 100644
index 0000000..326c70c
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-progress-contact.scss
@@ -0,0 +1,37 @@
+$progress-contact-height: 6px !default;
+
+.progress-contact {
+  /* Reset the default appearance */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+    
+  background: $pm-global-border;
+  // for Edge/IE
+  color: $pm-primary;
+
+  border-radius: #{$progress-contact-height/2};
+  height: $progress-contact-height;
+
+  &::-webkit-progress-bar {
+    background-color: $pm-global-border;
+    border-radius: #{$progress-contact-height/2};
+  }
+
+  &::-webkit-progress-value { 
+    border-radius: #{$progress-contact-height/2};
+    background: $pm-primary;
+    transition: .15s width ease;
+  }
+
+  &::-moz-progress-bar { 
+    border-radius: #{$progress-contact-height/2};
+    background: $pm-primary;
+    transition: .15s width ease;
+  }
+
+  &::-ms-fill {
+    border-color: currentColor;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-settings-home.scss b/templates/@theme-base/pm-styles/_pm-settings-home.scss
new file mode 100644
index 0000000..fbc7541
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-settings-home.scss
@@ -0,0 +1,13 @@
+/*
+ * settings home
+ */
+.settings-grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); 
+}
+.setting-grid {
+  padding-right: 1em;
+}
+.setting-grid--tall {
+   grid-row: span 2;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-sticky-header.scss b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
new file mode 100644
index 0000000..c6e8fd2
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-sticky-header.scss
@@ -0,0 +1,57 @@
+/*
+ * sticky header and container for sections
+ */
+
+$sticky-title-height: 10rem !default;
+.sticky-title {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
+  padding: .5em .75em;
+  background: inherit;
+  z-index: 9;
+}
+.sticky-title--onTop {
+  box-shadow: none;
+}
+.sticky-title--noPadding {
+  padding: 0;
+}
+
+.container-section-sticky {
+  padding: 3em 2em 0 2em;
+  max-width: 85ch; // avoid too long lines
+  margin-left: auto;
+  margin-right: auto;
+}
+.container-section-sticky--fullwidth {
+  max-width: none;
+}
+
+.container-section-sticky-section {
+  margin-bottom: 12rem;
+}
+
+
+/* trick for fixing anchor links */
+.header-height-anchor {
+  position: absolute;
+  top: -#{$sticky-title-height};
+}
+
+// not sticky on mobile
+@include respond-to($breakpoint-small) { 
+  .sticky-title {
+    position: static;
+    box-shadow: none;
+  }
+  .container-section-sticky-section {
+    margin-bottom: 8rem;
+  }
+  .header-height-anchor {
+    position: static;
+    top: 0;
+  }
+}
+
diff --git a/templates/@theme-base/pm-styles/_pm-subnav.scss b/templates/@theme-base/pm-styles/_pm-subnav.scss
new file mode 100644
index 0000000..6d6a1b9
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-subnav.scss
@@ -0,0 +1,20 @@
+/*
+ * subnavigation
+ */
+
+.subnav {
+  width: var(--width-subnav, $subnav-width);
+}
+.subnav-inner {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  padding: 2em;
+}
+.subnav-link {
+  @extend .nodecoration;
+  @extend .color-global-grey;
+}
+[aria-current="true"].subnav-link {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-table-plans.scss b/templates/@theme-base/pm-styles/_pm-table-plans.scss
new file mode 100644
index 0000000..cbe7f3e
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-table-plans.scss
@@ -0,0 +1,145 @@
+/*
+ * Plans tables
+ */
+ .pm-plans-table {
+  @extend .noborder;
+  @extend .w100; 
+  border-collapse: separate;
+  border-spacing: 0;
+  @extend .min-w35e;
+}
+
+.pm-simple-table-row-th {
+  font-weight: normal;
+}
+
+.pm-plans-table {
+  caption {
+    transform: scale(0);
+  }
+  td,
+  th {
+    padding: em(16);
+    border: 1px solid $pm-global-border;
+    border-bottom: 0;
+    border-right: 0;
+  }
+  th.is-empty {
+    border: 0;
+  }
+  th:not(.pm-simple-table-row-th) {
+    @extend .uppercase;
+  }
+  tr td:last-child,
+  tr th:last-child {
+    border-right: 1px solid $pm-global-border;
+  }
+  thead {
+    tr:first-of-type {
+      & :nth-child(2) {
+        border-top-left-radius: $global-border-radius;
+      }
+      & :last-child {
+        border-top-right-radius: $global-border-radius;
+      }
+    }
+  }
+  tbody {
+    tr:last-of-type {
+      td,
+      th {
+        border-bottom: 1px solid $pm-global-border;
+      }
+      & :first-child {
+        border-bottom-left-radius: $global-border-radius;
+      }
+      & :last-child {
+        border-bottom-right-radius: $global-border-radius;
+      }
+    }
+  }
+  tbody tr {
+    .pm-simple-table-row-th {
+      padding-left: 2em;
+    }
+    &:first-of-type .pm-simple-table-row-th {
+      border-top-left-radius: $global-border-radius;
+    }
+  }
+
+
+}
+
+
+@include respond-to(1100) { 
+
+  .pm-plans-table {
+    tbody tr {
+      .pm-simple-table-row-th {
+        padding: em(10);
+      }
+    }
+
+  }
+
+}
+
+@include respond-to($breakpoint-medium) { 
+
+  .pm-plans-table {
+    td,
+    th {
+      padding: em(10);
+    }
+
+  }
+
+}
+
+
+
+/* modifiers for highlighting a plan */
+/* ADR : 
+   - getting type or unit from attr is not supported by any browser => https://developer.mozilla.org/en-US/docs/Web/CSS/attr
+   - CSS custom properties can't be used in selectors => https://css-irl.info/practical-tips-css-variables/
+   - content attribute can't be herited https://stackoverflow.com/questions/7175113/content-attribute-to-inherit-node-value
+ */
+
+$border-width: 2px !default;
+$nb-plans-max: 4 !default;
+
+@for $i from 1 through $nb-plans-max {
+
+  .pm-table--highlight[data-plan-number="#{$i}"] {
+    & tr td:nth-child(#{$i+1}),
+    & tr th:nth-child(#{$i+1}) {
+      border-left: #{$border-width} solid $pm-primary;
+      border-right: #{$border-width} solid $pm-primary;
+    }
+    & tr:last-child td:nth-child(#{$i+1}) {
+      border-bottom: #{$border-width} solid $pm-primary;
+    }
+    & tr th:nth-child(#{$i+1}) {
+      border-top: #{$border-width} solid $pm-primary;
+      position: relative;
+      color: $pm-primary;
+      &:before {
+        content: attr(data-highlight);
+        display: block;
+        position: absolute;
+        bottom: 100%;
+        left: -#{$border-width};
+        right: -#{$border-width};
+        background-color: $pm-primary;
+        color: $white;
+        text-align: center;
+        font-weight: bold;
+        text-transform: uppercase;
+        font-size: 1.2rem;
+        padding: .25em;
+        border-radius: $global-border-radius $global-border-radius 0 0;
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-table.scss b/templates/@theme-base/pm-styles/_pm-table.scss
new file mode 100644
index 0000000..3da4237
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-table.scss
@@ -0,0 +1,44 @@
+/*
+ * tables
+ */
+.pm-simple-table {
+  @extend .border-collapse;
+  @extend .noborder;
+  @extend .w100;
+  caption {
+    transform: scale(0);
+  }
+}
+.pm-simple-table td,
+.pm-simple-table th {
+  padding: em(9);
+  border-bottom: 1px solid $pm-global-border;
+}
+.pm-simple-table th:not(.pm-simple-table-row-th) {
+  @extend .uppercase;
+  @extend .alignleft;
+  &.aligncenter {
+    @extend .aligncenter;
+  }
+  &.alignright {
+    @extend .alignright;
+  }
+}
+
+
+.pm-simple-table--has-actions {
+  td:last-child,
+  th:last-child {
+    text-align: right;
+  }
+}
+
+/* simple dirty fix */
+.pm-simple-table button svg {
+  @extend .relative;
+  top: -0.25em;
+}
+.pm-simple-table a svg {
+  @extend .relative;
+  top: -0.15em;
+}
diff --git a/templates/@theme-base/pm-styles/_pm-tabs.scss b/templates/@theme-base/pm-styles/_pm-tabs.scss
new file mode 100644
index 0000000..f3da22d
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-tabs.scss
@@ -0,0 +1,42 @@
+.tabs-list {
+  margin: 0;
+  padding: 0;
+  @extend .unstyled;
+  @extend .flex;
+  border-bottom: 1px solid $pm-global-border;
+}
+
+.tabs-list-item {
+  margin-right: 1rem;
+}
+
+.tabs-list-link {
+  @extend .flex;
+  color: $pm-global-grey;
+  border-bottom: 2px solid $pm-global-border; 
+  padding: .5em;
+  @extend .nodecoration;
+  @extend .relative;
+  top: 1px;
+  &:focus,
+  &:hover {
+    font-weight: bold;
+    @extend .nodecoration;
+  }
+  &[disabled] {
+    opacity: .4;
+    cursor: default;
+    pointer-events: none;
+    &:focus,
+    &:hover {
+      font-weight: normal;
+    } 
+  }
+}
+
+[aria-selected="true"].tabs-list-link {
+  font-weight: bold;
+  border-bottom: 2px solid $pm-primary;
+}
+
+/* hidden state for content is not necessary for React, added in exception for Design system website */
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-theme-config.scss b/templates/@theme-base/pm-styles/_pm-theme-config.scss
new file mode 100644
index 0000000..3e82024
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-theme-config.scss
@@ -0,0 +1,14 @@
+:root {
+  --main-bg-color: #{$main-bg-color};
+  --secondary-bg-color: #{$secondary-bg-color};
+  --bgcolor-searchbox-field: #{$bgcolor-searchbox-field};
+  --bgcolor-spacebar: #{$bgcolor-spacebar};
+  --bgcolor-aside-link: #{$bgcolor-aside-link};
+  --bgcolor-toolbar: #{$bgcolor-toolbar};
+  --fillcolor-logo: #{$fillcolor-logo};
+  --fillcolor-icons: #{$fillcolor-icons};
+  --color-nav-link: #{$color-nav-link};
+  --color-nav-active: #{$color-nav-active};
+  --color-standard-text: #{$color-standard-text};
+  --boxshadow-main: #{$boxshadow-main};
+}   
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-toolbar.scss b/templates/@theme-base/pm-styles/_pm-toolbar.scss
new file mode 100644
index 0000000..90e733b
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-toolbar.scss
@@ -0,0 +1,66 @@
+/*
+ * toolbar
+ */
+ .toolbar {
+  height: $toolbar-height;
+  background: var(--bgcolor-toolbar, $pm-global-altgrey);
+  border-radius: 4px 4px 0 0;
+  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2);
+}
+.toolbar-button {
+  // resets to avoid pm-button styles
+  padding: unset;
+  background: unset;
+  border: unset;
+  border-radius: unset;
+
+  padding-left: em(16, $base-font);
+  padding-right: em(16, $base-font);
+  display: flex; // alignment fix on Chrome
+
+  &:hover {
+    box-shadow: unset;
+    background-color: var(--bgcolor-spacebar, #505560);
+  }
+  &[disabled] {
+    background: unset;
+    opacity: .4;
+  }
+  &:active,
+  &.is-active,
+  &:not(div):active,
+  [aria-expanded="true"] {
+    background: unset;
+    background-color: var(--bgcolor-spacebar, #2F333E);
+  }
+}
+.toolbar-button--dropdown {
+  padding-left: em(12, $base-font);
+  padding-right: em(12, $base-font);
+}
+.toolbar-icon {
+  fill: var(--fillcolor-icons, $white);
+}
+.toolbar-separator {
+  width: 2px;
+  background-image: linear-gradient(90deg, var(--bgcolor-spacebar, #4F5460) 0, var(--bgcolor-spacebar, #4F5460) 1px, var(--bgcolor-spacebar, #353A46) 1px);
+}
+.toolbar button[aria-disabled="true"],
+.toolbar .toolbar-button[aria-disabled="true"] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+.toolbar-select {
+  padding-left: em(16, $base-font);
+  padding-right: em(16, $base-font);
+  color: var(--fillcolor-icons, $white);
+  background: url("#{$path-images}sprite-for-css-only.svg#css-caret-white") calc(100% - 6px) 50% no-repeat;
+}
+
+
+@include respond-to($breakpoint-small) {
+  .toolbar {
+    border-radius: 0;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-tooltips.scss b/templates/@theme-base/pm-styles/_pm-tooltips.scss
new file mode 100644
index 0000000..b5443e5
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-tooltips.scss
@@ -0,0 +1,84 @@
+/*
+ * tooltips
+ */
+ $tooltip-width: 14em;
+ $arrow-width: .5em;
+ 
+ [class*="tooltip-"][aria-hidden="true"]:not(.tooltip-container) {
+   display: none;
+ }
+ 
+ /* position relative for containers */
+ .tooltip-container {
+   @extend .relative;
+   @extend .inbl;
+ }
+ 
+ /* tooltip styles */
+ /* factorisation */
+ [class*="tooltip-"]:not(.tooltip-container) {
+   position: absolute;
+   z-index: 666;
+   width: $tooltip-width;
+   border-radius: $global-border-radius;
+   background: $pm-global-grey;
+   color: $pm-global-light;
+   padding: .5em;
+   text-align: center;
+ }
+ .tooltip-top {
+   bottom: calc(100% + #{$arrow-width} + 10px ); // 100% from bottom + arrow width + small margin
+   left: calc(50% - #{$tooltip-width/2} );
+ }
+ .tooltip-right {
+   left: calc(100% + #{$arrow-width} + 10px );
+   top: 0;
+ }
+ .tooltip-bottom {
+   top: calc(100% + #{$arrow-width} + 10px ); // 100% from bottom + arrow width + small margin
+   left: calc(50% - #{$tooltip-width/2} );
+ }
+ .tooltip-left {
+   right: calc(100% + #{$arrow-width} + 10px );
+   top: 0;
+ }
+ 
+ /* used pseudo-element to make arrows */
+ /* factorisation */
+ [class*="tooltip-"]:not(.tooltip-container)::before {
+   content: '';
+   speak: none;
+   position: absolute;
+   z-index: 666;
+   width: $arrow-width;
+   height: $arrow-width;
+   pointer-events: none;
+ }
+ 
+ .tooltip-top::before {
+   top: 100%;
+   left: calc(50% - #{$arrow-width} );
+   border: $arrow-width solid transparent;
+   border-top: $arrow-width solid $pm-global-grey;
+ }
+ .tooltip-right::before {
+   top: calc(50% - #{$arrow-width} );
+   left: -#{$arrow-width*2};
+   border: $arrow-width solid transparent;
+   border-right: $arrow-width solid $pm-global-grey;
+ }
+ .tooltip-bottom::before {
+   bottom: 100%;
+   left: calc(50% - #{$arrow-width} );
+   border: $arrow-width solid transparent;
+   border-bottom: $arrow-width solid $pm-global-grey;
+ }
+ .tooltip-left::before {
+   top: calc(50% - #{$arrow-width} );
+   right: -#{$arrow-width*2};
+   border: $arrow-width solid transparent;
+   border-left: $arrow-width solid $pm-global-grey;
+ }
+ 
+ 
+ /* responsive ? */
\ No newline at end of file
diff --git a/templates/@theme-base/pm-styles/_pm-wizard.scss b/templates/@theme-base/pm-styles/_pm-wizard.scss
new file mode 100644
index 0000000..cb0b54a
--- /dev/null
+++ b/templates/@theme-base/pm-styles/_pm-wizard.scss
@@ -0,0 +1,102 @@
+/*
+ * wizard
+ */
+
+$height-wizard: 6px !default;
+$size-current-pin: 16px !default;
+
+.wizard-container {
+  position: relative;
+  padding-top: 1.5em;
+  padding-left: 2px; // "optical" alignment, difficult to align text and circle ^^
+}
+
+.wizard-container--noTextDisplayed {
+  padding-top: 0;
+}
+
+.wizard {
+  height: $height-wizard;
+  display: flex;
+}
+
+.wizard-marker {
+  display: flex;
+  width: $size-current-pin;
+  height: $size-current-pin;
+  border-radius: 50%;
+  position: relative;
+  top: -#{$height-wizard - 1};
+  background-image: radial-gradient(circle, $pm-primary 0, $pm-primary #{$height-wizard/2}, transparent #{$height-wizard/2});
+}
+
+.wizard-item {
+  
+  background: $pm-global-border;
+
+  &:not(:last-child) {
+    @extend .flex-item-fluid;
+  }
+  
+  // positionned first element always with a aria-current/is-complete
+  &:first-child {
+    background: none;
+    background-image: linear-gradient(to left, $pm-global-border 0,  $pm-global-border calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) );
+  }
+  &:last-child {
+    background: none;
+    background-image: linear-gradient(to right, $pm-global-border 0,  $pm-global-border 50%, transparent 50%);
+    &.is-complete::after {
+      content: none;
+    }
+  }
+  
+  &[aria-current="step"],
+  &.is-complete {
+    &::before {
+      content: '';
+      position: relative;
+      display: block;
+      border-radius: 50%;
+      z-index: 1;
+      top: -#{$height-wizard - 1};
+      left: -1px;
+      width: $size-current-pin;
+      height: $size-current-pin;
+    }
+
+    .wizard-marker {
+      display: none;
+    }
+  }
+  &[aria-current="step"]::before {
+    background-image: radial-gradient(circle, $white 0, $white #{$height-wizard/2}, $pm-primary #{$height-wizard/2});
+  }
+  &.is-complete::before {
+    background: $pm-primary url("#{$path-images}sprite-for-css-only.svg#css-on") 50% 50% no-repeat;
+    background-size: #{$size-current-pin - $height-wizard};
+  }
+  &.is-complete::after {
+    content: '';
+    position: relative;
+    display: block;
+    width: 100%;
+    height: $height-wizard;
+    top: -$size-current-pin;
+    background-color: $pm-primary;
+  }
+  &[aria-current="step"] .wizard-item-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 2rem;
+    font-weight: bold;
+  }
+  &:not([aria-current]) .wizard-item-inner {
+    @extend .invisible;
+  }
+}
+
+.wizard-container--noTextDisplayed .wizard-item[aria-current="step"] .wizard-item-inner {
+  @extend .invisible;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss
new file mode 100644
index 0000000..0263daf
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-colors.scss
@@ -0,0 +1,300 @@
+/* PM and VPN colors */
+.bg-global-grey {
+  background-color: $pm-global-grey;
+}
+.bg-global-altgrey {
+  background-color: $pm-global-altgrey;
+}
+.bg-global-altgrey-gradient {
+  background-image: linear-gradient(to bottom, $pm-global-grey, $pm-global-altgrey);
+}
+.bg-global-light {
+  background-color: $pm-global-light;
+}
+.bg-global-border {
+  background-color: $pm-global-border;
+}
+.bg-global-muted {
+  background-color: $pm-global-muted;
+}
+.bg-global-success {
+  background-color: $pm-global-success;
+}
+.bg-global-warning {
+  background-color: $pm-global-warning;
+}
+.bg-global-attention {
+  background-color: $pm-global-attention;
+}
+.bg-pm-blue {
+  background-color: $pm-blue;
+}
+.bg-pm-blue-dark {
+  background-color: $pm-blue-dark;
+}
+.bg-pm-blue-light {
+  background-color: $pm-blue-light;
+}
+
+.bg-pv-green {
+  background-color: $pv-green;
+}
+.bg-pv-green-dark {
+  background-color: $pv-green-dark;
+}
+.bg-pv-green-light {
+  background-color: $pv-green-light;
+}
+
+.bg-white {
+  background-color: $white;
+}
+.bg-black {
+  background-color: $black;
+}
+
+.bg-visionary {
+  background-color: $visionary;
+}
+.bg-plus {
+  background-color: $plus;
+}
+.bg-professional {
+  background-color: $professional;
+}
+.bg-vpnbasic {
+  background-color: $vpnbasic;
+}
+.bg-vpnplus {
+  background-color: $vpnplus;
+}
+.bg-primary {
+  background-color: $pm-primary;
+}
+
+.fill-global-grey {
+  fill: $pm-global-grey;
+}
+.fill-global-altgrey {
+  fill: $pm-global-altgrey;
+}
+.fill-global-light {
+  fill: $pm-global-light;
+}
+.fill-global-border {
+  fill: $pm-global-border;
+}
+.fill-global-muted {
+  fill: $pm-global-muted;
+}
+.fill-global-success {
+  fill: $pm-global-success;
+}
+.fill-global-warning {
+  fill: $pm-global-warning;
+}
+.fill-global-attention {
+  fill: $pm-global-attention;
+}
+.fill-pm-blue {
+  fill: $pm-blue;
+}
+.fill-pm-blue-dark {
+  fill: $pm-blue-dark;
+}
+.fill-pm-blue-light {
+  fill: $pm-blue-light;
+}
+
+.fill-pv-green {
+  fill: $pv-green;
+}
+.fill-pv-green-dark {
+  fill: $pv-green-dark;
+}
+.fill-pv-green-light {
+  fill: $pv-green-light;
+}
+
+.fill-white {
+  fill: $white;
+}
+.fill-black {
+  fill: $black;
+}
+.fill-currentColor {
+  fill: currentColor;
+}
+.fill-primary {
+  fill: $pm-primary;
+}
+
+.fill-visionary {
+  fill: $visionary;
+}
+.fill-plus {
+  fill: $plus;
+}
+.fill-professional {
+  fill: $professional;
+}
+.fill-vpnbasic {
+  fill: $vpnbasic;
+}
+.fill-vpnplus {
+  fill: $vpnplus;
+}
+.fill-beta.fill-beta { // specificity because bold class is applied and after
+  fill: $pm-primary-dark;
+  font-weight: normal;
+  font-style: italic;
+}
+
+.stroke-global-grey {
+  stroke: $pm-global-grey;
+}
+.stroke-global-altgrey {
+  stroke: $pm-global-altgrey;
+}
+.stroke-global-light {
+  stroke: $pm-global-light;
+}
+.stroke-global-border {
+  stroke: $pm-global-border;
+}
+.stroke-global-muted {
+  stroke: $pm-global-muted;
+}
+.stroke-global-success {
+  stroke: $pm-global-success;
+}
+.stroke-global-warning {
+  stroke: $pm-global-warning;
+}
+.stroke-global-attention {
+  stroke: $pm-global-attention;
+}
+.stroke-pm-blue {
+  stroke: $pm-blue;
+}
+.stroke-pm-blue-dark {
+  stroke: $pm-blue-dark;
+}
+.stroke-pm-blue-light {
+  stroke: $pm-blue-light;
+}
+
+.stroke-pv-green {
+  stroke: $pv-green;
+}
+.stroke-pv-green-dark {
+  stroke: $pv-green-dark;
+}
+.stroke-pv-green-light {
+  stroke: $pv-green-light;
+}
+
+.stroke-white {
+  stroke: $white;
+}
+.stroke-black {
+  stroke: $black;
+}
+.stroke-currentColor {
+  stroke: currentColor;
+}
+.stroke-primary {
+  stroke: $pm-primary;
+}
+
+
+.stroke-visionary {
+  stroke: $visionary;
+}
+.stroke-plus {
+  stroke: $plus;
+}
+.stroke-professional {
+  stroke: $professional;
+}
+.stroke-vpnbasic {
+  stroke: $vpnbasic;
+}
+.stroke-vpnplus {
+  stroke: $vpnplus;
+}
+
+
+
+.color-global-grey {
+  color: $pm-global-grey;
+}
+.color-global-altgrey {
+  color: $pm-global-altgrey;
+}
+.color-global-light {
+  color: $pm-global-light;
+}
+.color-global-border {
+  color: $pm-global-border;
+}
+.color-global-muted {
+  color: $pm-global-muted;
+}
+.color-global-success {
+  color: $pm-global-success;
+}
+.color-global-warning {
+  color: $pm-global-warning;
+}
+.color-global-attention {
+  color: $pm-global-attention;
+}
+.color-pm-blue {
+  color: $pm-blue;
+}
+.color-pm-blue-dark {
+  color: $pm-blue-dark;
+}
+.color-pm-blue-light {
+  color: $pm-blue-light;
+}
+
+.color-pv-green {
+  color: $pv-green;
+}
+.color-pv-green-dark {
+  color: $pv-green-dark;
+}
+.color-pv-green-light {
+  color: $pv-green-light;
+}
+
+.color-white {
+  color: $white;
+}
+.color-black {
+  color: $black;
+}
+.color-currentColor {
+  color: currentColor;
+}
+.color-primary {
+  color: $pm-primary;
+}
+
+.color-visionary {
+  color: $visionary;
+}
+.color-plus {
+  color: $plus;
+}
+.color-professional {
+  color: $professional;
+}
+.color-vpnbasic {
+  color: $vpnbasic;
+}
+.color-vpnplus {
+  color: $vpnplus;
+}
diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss
new file mode 100644
index 0000000..05a4265
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-config.scss
@@ -0,0 +1,409 @@
+// Sass variables: adapt them to your designs globally
+
+// base size for text
+$base-font             : 14 !default; // if "14" then 1em = 14px
+// default line-height
+$l-h                   : 1.5 !default;
+
+$size-h1               : 36 !default;
+$size-h2               : 28 !default;
+$size-h3               : 20 !default;
+$size-h4               : 18 !default;
+$size-h5               : 17 !default;
+$size-h6               : 16 !default;
+
+$size-smallest         : 9 !default;
+$size-smaller          : 10 !default;
+$size-small            : 12 !default;
+$size-big              : 16 !default;
+$size-bigger           : 18 !default;
+$size-biggest          : 20 !default;
+
+// fonts
+$font-family           : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default;
+
+
+// project colors
+$pm-global-grey        : #262a33 !default;
+$pm-global-altgrey     : #3c414e !default;
+$pm-global-light       : #f6f7fa !default;
+$pm-global-border      : #dde6ec !default;
+$pm-global-muted       : #eeeff1 !default;
+$pm-global-success     : #5db039 !default;
+$pm-global-warning     : #ec5858 !default;
+$pm-global-attention   : #eac819 !default;
+$pm-blue               : #657ee4 !default;
+$pm-blue-dark          : #526ee0 !default;
+$pm-blue-light         : #788ee8 !default;
+
+$white                 : #fff !default;
+$black                 : #000 !default;
+
+$pv-green              : #4da358 !default;
+$pv-green-dark         : #3e8447 !default;
+$pv-green-light        : #5fb364 !default;
+
+// plans
+$visionary             : #6ddcfb !default;
+$plus                  : #c6e422 !default;
+$professional          : #d4b46e !default;
+$vpnbasic              : #f67f60 !default;
+$vpnplus               : #9ccc23 !default;
+
+// primary
+$pm-primary            : $pm-blue !default;
+$pm-primary-light      : $pm-blue-light !default;
+$pm-primary-dark       : $pm-blue-dark !default;
+
+// not approved colors
+$pm-input-background   : #fcfdff !default;
+$plan-logo-color       : #8ed60f !default;
+$conversation-selected-bg: #e3e7f6 !default;
+
+// colors
+$color-links           : $pm-primary !default;
+$color-hover           : $black !default;
+$color-hr              : $pm-global-border !default;
+$hr-height             : 1px !default;
+$color-alert           : $pm-global-warning !default;
+$color-bg-button       : $white !default;
+$color-txt-button      : $black !default;
+
+$global-border-radius  : 3px !default;
+
+// inputs
+$input-defaut-border   : 1px solid $pm-global-border !default;
+
+// main breakpoints
+$breakpoint-large      : 1500 !default;
+$breakpoint-medium     : 910 !default;
+$breakpoint-small      : 680 !default;
+$breakpoint-tiny       : 320 !default;
+
+// RTL
+$rtl-option            : false !default;
+// RTL = Right To Left =>
+// to adapt a website in a language that is written from right to left
+// designed for multilingual websites with LTR et RTL
+
+
+// hyphens
+$hyphenation           : false !default;
+
+// clear floats
+$use-clearleft_right   : false !default;
+$use-clearhidden       : false !default;
+$use-clearfix          : false !default;
+
+// vertical rythm
+// possible values     : 'double_top_single_bottom',  'single_top', 'single_bottom'
+$vertical-rythm        : 'single_bottom' !default;
+
+// units for typo
+// possible values     : 'use_em',  'use_rem', 'use_rem_with_em_fallback'
+$typo-unit             : 'use_rem' !default;
+
+// applies 62.5% on html (to make 10px default font size), simplifies rem calculation
+$root-equiv-10-px      : true !default;
+
+// basic premise: default user setting for font size is at 16 pixels in the browser
+// you should NEVER update this value, however… who can predict the future…
+$root-default-font-size: 16 !default;
+
+// others
+$use-reset-button      : true !default;
+$use-old-ie-fallbacks  : true !default;
+
+// default config for webpack, can be overriden by "global config" in styles-pm.scss
+$path-images           : '../../assets/img/shared/' !default;
+
+
+// variables for global layouts, allowing you to use calc for components and adapt quickly if needed
+$aside-bar-width       : 4.5rem !default;
+$header-height         : 8rem !default;
+$width-sidebar         : 19rem !default; // main navigation
+$toolbar-height        : 5rem !default;
+$subnav-width          : 25rem !default; // quick nav on the right
+
+$conversations-column-width: 35% !default;  // used also to align search bar on top
+
+
+
+// Sass functions: don’t touch if you are not sure ;)
+
+@function em($px, $base: $base-font) {
+
+  @return ($px / $base) * 1em;
+
+}
+
+@function rem($px, $reset-applied: $root-equiv-10-px, $user-default-font-size: $root-default-font-size) {
+
+  @if ( $reset-applied == true ) {
+      @return ($px / 10) * 1rem;
+  }
+  @else {
+         @return ($px / $user-default-font-size) * 1rem;
+		}
+
+}
+
+
+// calculated via https://rocssti.net/en/builder-css
+// based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil
+
+@function line-height ($font-size, $base-height, $base-font, $type-vr) {
+
+  $coef: ceil(1 / ($base-height * $base-font / $font-size));
+  $height: ($base-font * $base-height / $font-size) ;
+
+  @return ($height * $coef) ;
+
+}
+
+
+@function margin-em ($font-size, $base-height, $base-font, $type-vr) {
+
+  $coef: ceil(1 / ($base-height * $base-font / $font-size));
+  $other_coef: ceil($base-height * $base-font / $font-size);
+  $height: ($base-font * $base-height / $font-size) ;
+  $margin: ($height * $coef );
+
+  @if $type-vr == 'double_top_single_bottom' {
+     @return ( ($margin * $other_coef)*1em 0 ( ($margin/2) * $other_coef) *1em 0 );
+  }
+  @else if $type-vr == 'single_bottom' {
+     @return ( 0 0 ( ($margin/2) * $other_coef) *1em 0 );
+  }
+  @else if $type-vr == 'single_top' {
+     @return ( ( ($margin/2) * $other_coef) *1em 0 0 0 );
+  }
+}
+
+
+@function margin-em-other ($font-size, $base-height, $base-font, $type-vr){
+
+  $coef: ceil(1 / ($base-height * $base-font / $font-size));
+  $height: ($base-font * $base-height / $font-size) ;
+  $margin: ($height * $coef );
+
+  @return ( ($margin)*1em 0 );
+
+}
+
+
+@mixin flow-hr( $value, $type-vr: $vertical-rythm, $type-unit: $typo-unit ){
+
+  @if $type-unit == 'use_em' {
+     font-size: em($value);
+  }
+  @else if $type-unit == 'use_rem' {
+     font-size: rem($value);
+  }
+  @else if $type-unit == 'use_rem_with_em_fallback' {
+     font-size: em($value);
+     font-size: rem($value);
+  }
+  line-height: line-height($value, $l-h, $base-font, $type-vr);
+  margin: margin-em($value, $l-h, $base-font, $type-vr) ;
+
+}
+
+
+@mixin flow-other( $value, $type-vr: $vertical-rythm, $type-unit: $typo-unit ){
+
+  @if $type-unit == 'use_em' {
+     font-size: em($value);
+  }
+  @else if $type-unit == 'use_rem' {
+     font-size: rem($value);
+  }
+  @else if $type-unit == 'use_rem_with_em_fallback' {
+     font-size: em($value);
+     font-size: rem($value);
+  }
+  line-height: line-height($value, $l-h, $base-font, $type-vr);
+  margin: margin-em-other($value, $l-h, $base-font, $type-vr) ;
+
+}
+
+
+@mixin vendor-prefix($property, $value, $prefixes: webkit moz ms o) {
+
+  @if $prefixes {
+    @each $prefix in $prefixes {
+      #{'-' + $prefix + '-' + $property}: $value;
+    }
+  }
+  #{$property}: $value;
+
+}
+
+
+@mixin color-opacity($color, $opacity: 0.9) {
+    color: $color; /* The Fallback */
+    color: rgba($color, $opacity);
+}
+
+@mixin background-opacity($color, $opacity: 0.9) {
+    background-color: $color; /* The Fallback */
+    background-color: rgba($color, $opacity);
+}
+
+
+
+// Replace `$search` with `$replace` in `$string`
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+
+
+
+// Generate margins
+// example
+// $list-margin: mt, mr, mb, ml, m;
+// $list-margin-values: 0, 1, 2, 3; // specify 2.5 if needed
+
+@mixin margin-generator ($list-margin, $list-margin-values, $prefix: "") {
+
+  @each $margin-type in $list-margin {
+     @each $margin in $list-margin-values {
+        //$temp_m : str-slice($margin-type, 0, 1);
+        $temp_t : str-slice($margin-type, 2, 3);
+
+        $property: margin;
+
+        @if $temp_t == t {
+           $property: margin-top;
+        } @else if $temp_t == r {
+           $property: margin-right;
+        } @else if $temp_t == b {
+           $property: margin-bottom;
+        } @else if $temp_t == l {
+           $property: margin-left;
+        }
+
+
+        $value : $margin + 0em;
+        /* #{$value} */
+
+        @if $margin == 0 {
+           $value : $margin;
+        }
+
+        // convert to string
+        $text-margin: $margin + '';
+        // 1.5 = 1-5
+        $property-class: str-replace($text-margin, '.', '-');
+
+        // . mr 1-5 { margin-right: 1.5em ;}
+        .#{$prefix}#{$margin-type}#{$property-class} { #{$property}: #{$value}; }
+
+
+        }
+     }
+
+}
+
+
+
+// Generate paddings
+// example
+// $list-padding: pt, pr, pb, pl, p;
+// $list-padding-values: 0, 1, 2, 3; // specify 2.5 if needed
+
+@mixin padding-generator ($list-padding, $list-padding-values, $prefix: "") {
+
+  @each $padding-type in $list-padding {
+     @each $padding in $list-padding-values {
+        //$temp_p : str-slice($padding-type, 0, 1);
+        $temp_t : str-slice($padding-type, 2, 3);
+
+        $property: padding;
+
+        @if $temp_t == t {
+           $property: padding-top;
+        } @else if $temp_t == r {
+           $property: padding-right;
+        } @else if $temp_t == b {
+           $property: padding-bottom;
+        } @else if $temp_t == l {
+           $property: padding-left;
+        }
+
+        $value : $padding + 0em;
+        @if $padding == 0 {
+           $value : $padding;
+        }
+
+        // convert to string
+        $text-padding: $padding + '';
+        // 1.5 = 1-5
+        $property-class: str-replace($text-padding, '.', '-');
+
+        .#{$prefix}#{$padding-type}#{$property-class} { #{$property}: #{$value}; }
+
+
+        }
+     }
+}
+
+
+//
+// Responsive management in em
+//
+
+@mixin respond-to ($breakpoint, $query-type : 'max') {
+  @if $query-type == "max" {
+     @media (max-width: em($breakpoint, $root-default-font-size)) {
+      @content;
+    }
+  }
+
+  @else if $query-type == "min" {
+     @media (min-width: em($breakpoint, $root-default-font-size)) {
+      @content;
+    }
+  }
+
+  @else if $query-type == "height" {
+     @media (max-height: em($breakpoint, $root-default-font-size)) {
+      @content;
+     }
+  }
+
+  @else  {
+    @warn "Type non supported.";
+  }
+}
+
+
+//
+// body::before: to get current breakpoint in JS
+//
+@mixin body-before ($value-content, $display-none : false) {
+  @if $value-content != "" {
+    body::before {
+      content: '#{$value-content}';
+      @if $display-none == true {
+        display: none;
+      }
+    }
+  }
+  @else  {
+    @warn "$value-content not specified";
+  }
+
+}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-forms.scss b/templates/@theme-base/reusable-components/_design-system-forms.scss
new file mode 100644
index 0000000..ead9aa3
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-forms.scss
@@ -0,0 +1,68 @@
+/*
+ * inputs
+ */
+/* resets */
+
+/* makes you want to click on */
+label,
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+  cursor: pointer;
+}
+button[disabled],
+input[type="submit"][disabled],
+input[type="button"][disabled],
+input[type="reset"][disabled] {
+  cursor: default;
+}
+
+/* for field texts */
+.label {
+  display: inline-block;
+}
+
+/* avoid dummy resize */
+textarea {
+  resize: vertical;
+}
+/* remove a Firefox difference on button tag */
+button::-moz-focus-inner { border: 0; padding: 0; }
+
+label,
+button,
+input,
+select {
+  vertical-align: middle;
+}
+
+@if $use-reset-button == false {
+  /** fix typo inputs **/
+  input,
+  select,
+  textarea,
+  optgroup,
+  button {
+    font: inherit;
+  }
+}
+
+/*
+ * avoids dimensioning for radio, checkboxes and images
+ * and a different display on IE
+ */
+input[type="radio"],
+input[type="checkbox"],
+input[type="image"] {
+  background-color: transparent;
+  border: 0;
+  width: auto;
+}
+
+/* to cancel input sizing or other if needed */
+.auto {
+  width: auto;
+  min-width: 0;
+}
+
diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
new file mode 100644
index 0000000..2fbc591
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss
@@ -0,0 +1,650 @@
+/**
+ * layout
+ */
+
+/* it depends, it exceeds (french joke) */
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+svg {
+  height: auto;
+  max-width: 100%;
+}
+/* no reset on embed, object & video, some players don't like */
+
+/* useful to manage floats */
+/* containing floats */
+.mod,
+.scroll-if-needed {
+  overflow: auto;
+}
+.scroll-horizontal-if-needed {
+  overflow-x: auto;
+}
+.mod--hidden,
+.no-scroll {
+  overflow: hidden;
+}
+
+.scroll-smooth-touch {
+  -webkit-overflow-scrolling: touch;
+}
+
+/* some floattings */
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+
+@if $rtl-option == true {
+  /* RTL */
+  [dir="rtl"] .left {
+    float: right;
+  }
+  [dir="rtl"] .right {
+    float: left;
+  }
+}
+
+/* clear floats */
+.clear {
+  clear: both;
+}
+@if $use-clearleft_right == true {
+  .clearleft {
+    clear: left;
+  }
+  .clearright {
+    clear: right;
+  }
+  @if $rtl-option == true {
+    /* RTL */
+    [dir="rtl"] .clearleft {
+      clear: right;
+    }
+    [dir="rtl"] .clearright {
+      clear: left;
+    }
+  }
+}
+@if $use-clearhidden == true {
+  .clearhidden {
+    clear: both;
+    margin: 0;
+    padding: 0;
+    visibility: hidden;
+  }
+}
+@if $use-clearfix == true {
+  .clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
+/* gut: "spacing" empty div */
+.gut {
+  height: 1px;
+}
+
+/* table-design in CSS */
+.row {
+  display: table;
+  table-layout: fixed;
+}
+.inline-row {
+  display: inline-table;
+  table-layout: fixed;
+}
+.line {
+  display: table-row;
+}
+.col {
+  display: table-cell;
+  vertical-align: top;
+}
+.col-noalign {
+  display: table-cell;
+}
+
+/* alignments */
+.aligntop {
+  vertical-align: top;
+}
+.alignbottom {
+  vertical-align: bottom;
+}
+.alignmiddle {
+  vertical-align: middle;
+}
+.alignbaseline {
+  vertical-align: baseline;
+}
+
+/* block */
+.bl {
+  display: block;
+}
+
+/* inline-block, useful for grids, and not only */
+.inbl {
+  display: inline-block;
+}
+
+/* grid = element of inline-grid */
+.grid {
+  @extend .inbl;
+  @extend .aligntop;
+}
+
+/* to relativize */
+.relative {
+  position: relative;
+}
+
+/* centered block */
+.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* to absolute */
+.absolute {
+  position: absolute;
+  z-index: 1;
+}
+
+/* to centered absolute */
+.centered-absolute {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* to top right */
+.top-right {
+  top: 0;
+  right: 0;
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .top-right {
+      left: 0;
+      right: auto;
+    }
+  }
+}
+
+.right-icon {
+  top: 0;
+  right: .5em;
+  height: 3.5rem; // height of field
+}
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .right-icon {
+      left: .5em;
+      right: auto;
+    }
+  }
+}
+
+/* hardware-acceleration activation */
+.hardware-accelerated {
+  @include vendor-prefix(transform, translateZ(0));
+}
+
+/* block widths */
+.w0 {
+  width: 0;
+}
+.w1 {
+  width: 1%;
+}
+.w2 {
+  width: 2%;
+}
+.w3 {
+  width: 3%;
+}
+.w5 {
+  width: 5%;
+}
+.w10 {
+  width: 10%;
+}
+.w15 {
+  width: 15%;
+}
+.w20 {
+  width: 20%;
+}
+.w25 {
+  width: 25%;
+}
+.w30 {
+  width: 30%;
+}
+.w33 {
+  width: 33.333%;
+}
+.w40 {
+  width: 40%;
+}
+.w45 {
+  width: 45%;
+}
+.w49 {
+  width: 49%;
+}
+.w50 {
+  width: 50%;
+}
+.w60 {
+  width: 60%;
+}
+.w66 {
+  width: 66.666%;
+}
+.w70 {
+  width: 70%;
+}
+.w75 {
+  width: 75%;
+}
+.w80 {
+  width: 80%;
+}
+.w90 {
+  width: 90%;
+}
+.w100 {
+  width: 100%;
+}
+
+/* here you may add px widths */
+$list-width-px: 50, 150, 200, 500 !default;
+// ex .w500p { width: 500px; }
+
+@each $width in $list-width-px {
+  .w#{$width}p {
+    width: #{$width}px;
+  }
+}
+
+/* here you may add em widths */
+$list-width-em: 400 !default;
+// ex .w500e { width: 60em; }
+
+@each $width in $list-width-em {
+  $size_em: em($width);
+  .w#{$width}e {
+    width: $size_em;
+  }
+}
+
+/* max-block widths */
+
+/* here you may add max-widths % */
+$list-max-widths: 50, 80, 100 !default;
+@each $max-width in $list-max-widths {
+  .mw#{$max-width} {
+    max-width: #{$max-width * 1%};
+  }
+}
+
+/* here you may add pixel max-widths */
+$list-max-width-px: 100, 650 !default;
+
+@each $max-width in $list-max-width-px {
+  .mw#{$max-width}p {
+    max-width: #{$max-width}px;
+  }
+}
+
+/* here you may add ch max-widths */
+$list-max-width-ch: 70 !default;
+
+@each $max-width in $list-max-width-ch {
+  .mw#{$max-width}ch {
+    max-width: #{$max-width}ch;
+  }
+}
+
+/* here you may add em max-widths */
+$list-max-width-em: 8, 15, 40, 50 !default;
+
+@each $max-width in $list-max-width-em {
+  .mw#{$max-width}e {
+    max-width: #{$max-width}em;
+  }
+}
+
+$list-min-width-em: 3, 5, 35 !default;
+
+@each $min-width in $list-min-width-em {
+  .min-w#{$min-width}e {
+    min-width: #{$min-width}em;
+  }
+}
+
+.h100 {
+  height: 100%;
+}
+.h100v {
+  height: 100vh;
+}
+
+/* margins */
+.mt1r {
+  margin-top: 1rem;
+}
+
+$list-margins: m, mt, mr, mb, ml !default;
+$list-margins-values: 0, 0.25, 0.5, 0.75, 1, 1.5, 2 !default; // specify 2.5 if needed
+
+@include margin-generator($list-margins, $list-margins-values);
+
+.mtauto {
+  margin-top: auto;
+}
+.mrauto {
+  margin-right: auto;
+}
+.mbauto {
+  margin-bottom: auto;
+}
+.mlauto {
+  margin-left: auto;
+}
+.mauto {
+  margin: auto;
+}
+
+@if $rtl-option == true {
+  [dir="rtl"] {
+    .mrauto {
+      margin-right: 0;
+      margin-left: auto;
+    }
+    .mlauto {
+      margin-left: 0;
+      margin-right: auto;
+    }
+  }
+}
+
+/* paddings */
+
+$list-paddings: p, pt, pr, pb, pl !default;
+$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2.5 if needed
+
+@include padding-generator($list-paddings, $list-paddings-values);
+
+/* to hide text with accessibility… a11y */
+.invisible,
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.nonvisible {
+  visibility: hidden;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+.opacity-40 {
+  opacity: 0.4;
+}
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.filter-blur {
+  filter: blur(4px);
+}
+
+.hidden,
+[hidden] {
+  display: none;
+} /* hidden everywhere */
+.nodesktop {
+  display: none;
+} /* hidden on desktop */
+/*.noprint   {} /* hidden on print */
+/*.notablet  {} /* hidden on tablets */
+/*.nomobile  {} /* hidden on mobile */
+
+.list-2columns {
+  -webkit-column-count: 2;
+  -moz-column-count: 2;
+  column-count: 2;
+  -webkit-column-gap: 0;
+  -moz-column-gap: 0;
+  column-gap: 0;
+
+  & > li {
+    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
+    page-break-inside: avoid; /* Firefox */
+    break-inside: avoid; /* IE 10+ */
+    break-inside: avoid-column; /* W3C */
+  }
+}
+
+/*
+ * ratio container (for responsive iframes/videos/etc.)
+ */
+[class*="ratio-container-"] {
+  width: 100%;
+  height: 0;
+  @extend .relative;
+}
+.ratio-container-square {
+  padding-top: 100%;
+}
+.ratio-container-16-9 {
+  padding-top: 56.25%;
+}
+
+.inner-ratio-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+/*
+ * Flexbox helpers, also name tartiflex
+ */
+.inline-flex,
+.inline-flex-vcenter {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.flex-row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+.flex-reverse {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+}
+.flex-column {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.flex-column-reverse {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse;
+}
+.flex-spacebetween {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.flex-spacearound {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-around;
+}
+.flex-justify-start {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+.flex-justify-end {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+.flex-nowrap {
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+/* fix aspect ratio */
+.flex > * {
+  min-height: 0;
+  min-width: 0;
+}
+
+.inline-flex-vcenter > *,
+.flex-item-centered-vert {
+  margin-top: auto;
+  margin-bottom: auto;
+  align-self: center;
+}
+
+.flex-items-center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -ms-grid-row-align: center;
+  align-items: center;
+}
+.flex-items-start {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  -ms-grid-row-align: flex-start;
+  align-items: flex-start;
+}
+.flex-items-end {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  -ms-grid-row-align: flex-end;
+  align-items: flex-end;
+}
+
+.flex-item-fluid {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0px;
+  flex: 1 1 0px;
+}
+.flex-item-fluid-auto {
+  flex: 1 1 auto;
+}
+
+.flex-item-noshrink {
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+.flex-item-nogrow {
+  -webkit-box-flex: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+}
+.flex-item-grow-2 {
+  -webkit-box-flex: 2;
+  -ms-flex-positive: 2;
+  flex-grow: 2;
+}
+.flex-item-noflex {
+  -webkit-box-flex: 0;
+      -ms-flex: 0;
+          flex: 0;
+}
+
+.flex-self-vcenter {
+  -ms-flex-item-align: center;
+  align-self: center;
+}
+
+.flex-autogrid {
+  margin: 0 -0.5em;
+  @extend .flex;
+  @extend .flex-spacebetween;
+}
+.flex-autogrid-item {
+  @extend .flex-item-fluid;
+  padding: 0 0.5em 1em;
+}
+.flex-autogrid-item.pb0 {
+  padding-bottom: 0;
+}
+
+/* RTL/others */
+.mirror {
+  -webkit-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+.rotateX-180 {
+  -webkit-transform: rotateX(180deg);
+  transform: rotateX(180deg);
+}
+.rotateZ-90 {
+  -webkit-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+}
+.rotateZ-270 {
+  -webkit-transform: rotateZ(270deg);
+  transform: rotateZ(270deg);
+}
+/* increase surface click/tap */
+.increase-surface-click::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.no-pointer-events,
+.no-pointer-events-children * {
+  pointer-events: none;
+}
diff --git a/templates/@theme-base/reusable-components/_design-system-links-icons.scss b/templates/@theme-base/reusable-components/_design-system-links-icons.scss
new file mode 100644
index 0000000..f6b9ef1
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-links-icons.scss
@@ -0,0 +1,100 @@
+/* links */
+/* remember focus */
+a,
+.link {
+  color: $color-links;
+  cursor: pointer;
+
+  &:focus,
+  &:hover,
+  &:active {
+    color: $color-hover;
+    text-decoration: underline;
+  }
+}
+/* avoid border on images in links + fix border image IE */
+a:link img,
+a:visited img,
+img {
+  border-style: none;
+}
+.nodecoration {
+  text-decoration: none;
+}
+.underline {
+  text-decoration: underline;
+}
+.underline-hover:hover,
+.underline-hover:focus {
+  text-decoration: underline;
+}
+
+.primary-link {
+  &:focus,
+  &:hover {
+    color: $pm-primary;
+  }
+}
+
+.hover-same-color {
+  &:focus,
+  &:hover {
+    &.color-white {
+      color: $white;
+    }
+    &.primary-link {
+      color: $pm-primary;
+    }
+  }
+}
+
+/* links with icons, may use DATA-URI */
+
+/* external links */
+/*a[href^="http://"],
+a[href^="https://"] {
+
+}*/
+/* if full URL of the website in an internal link, remove icon */
+/*a[href^="http://www.mydomain.com"] {
+
+}*/
+/* contact, mailto links */
+/*.mail,
+a[href^="mailto:"] {
+
+}*/
+/* if URL ends with .pdf or whatever */
+/*a[href$=".pdf"] {
+
+}*/
+
+/* facto icons */
+[class*="icon-"] {
+  @extend .alignmiddle;
+  @extend .inbl;
+}
+
+$list-icon-pixels: 12,16,20,25,40,100 !default; 
+
+@each $width in $list-icon-pixels {
+  .icon-#{$width}p { 
+    width: #{$width}px; 
+    height: #{$width}px; 
+  }
+}
+
+$list-icon-percent: 50 !default;
+@each $width in $list-icon-percent {
+  .icon-#{$width} { 
+    width: percentage($width / 100); 
+    height: percentage($width / 100); 
+  }
+}
+
+.path2x {
+  stroke-width: 1px;
+  &.fill-global-light {
+    stroke: $pm-global-light;   
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-print.scss b/templates/@theme-base/reusable-components/_design-system-print.scss
new file mode 100644
index 0000000..fa339e4
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-print.scss
@@ -0,0 +1,52 @@
+@media print {
+  /**
+   * add in this all elements which need to be hardly reseted for print
+   */
+  body,
+  html,
+  .page,
+  .reset4print {
+    background-color: $white;
+    background-image: none;
+    border: 0;
+    box-shadow: none;
+    color: $black;
+    float: none;
+    height: auto;
+    margin: 0;
+    max-width: 100%;
+    min-height: 0;
+    padding: 0;
+    position: static;
+    width: auto;
+    opacity: 1;
+    visibility: visible;
+    max-height: none;
+    display: block;
+  }
+
+  body {
+    padding: .5em;
+    overflow: auto;
+  }
+
+  /* hide unnecessary elements */
+  .noprint {
+    display: none;
+  }
+  
+  /* display specific elements for print */
+  .onprint {
+    display: block;
+  }
+  
+  /* avoid problematic page break */
+  blockquote, ul, ol {
+    page-break-inside: avoid;
+  }
+  h1, h2, h3, caption {
+    page-break-after: avoid;
+  }
+
+
+} /* end print */
diff --git a/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss b/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss
new file mode 100644
index 0000000..437cc53
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss
@@ -0,0 +1,9 @@
+/**
+ * reduced motion MQ: for vestibular disorders
+ */
+@media (prefers-reduced-motion: reduce) {
+  *, *:before, *:after {
+    animation-duration: 0s !important;
+    transition-duration: 0s !important;
+  }
+}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-reset.scss b/templates/@theme-base/reusable-components/_design-system-reset.scss
new file mode 100644
index 0000000..10c91ed
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-reset.scss
@@ -0,0 +1,95 @@
+/* for HTML 5 */
+article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
+audio, canvas, progress, video { display: inline-block; }
+abbr, eventsource, mark, meter, time, output, bb { display: inline; }
+
+/* to comment/fallback if you care about IE<8 */
+html { box-sizing: border-box; }
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+/* reset minimum */
+html, body, blockquote, ul, ol, form, button, figure { margin: 0; padding: 0; }
+button, progress { border: 0; }
+p, ul, ol, dl, blockquote, pre, td, th {
+  font-size: 1em;
+  line-height: $l-h;
+  margin: $l-h * 1em 0;
+}
+
+@if $use-reset-button == true {
+  /* reset buttons, remember to style them in forms */
+  input, select, textarea, optgroup, button {
+    background: transparent;
+    border: 0;
+    font: inherit;
+    -webkit-appearance: none;
+  }
+}
+
+/* fix display img/iframe */
+img,
+iframe { vertical-align: middle; }
+
+ul, ol { padding-left: 2em; }
+
+.unstyled {
+  padding-left: 0;
+  list-style-type: none;
+}
+
+@if $rtl-option == true {
+  /* RTL */
+  [dir="rtl"] ul, 
+  [dir="rtl"] ol { 
+    padding-left: 0; 
+    padding-right: 2em;
+  }
+  [dir="rtl"] .unstyled {
+    padding-right: 0;
+  }
+}
+
+
+@if $root-equiv-10-px == true {
+  /* base font size at 10px */
+  html { 
+    font-size: 62.5%;
+    /* IE9-IE11 math fixing. See https://connect.microsoft.com/IE/feedback/details/816709/ */
+    /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
+    font-size: calc(1em * 0.625);
+  }
+}
+body {
+  background: $pm-global-grey;
+  color: $pm-global-light;
+  font-family: $font-family;
+  text-rendering: geometricPrecision; 
+  -webkit-font-smoothing: antialiased;
+  
+  @if $typo-unit == 'use_em' {
+     @if $root-equiv-10-px == true {
+       font-size: em($base-font, 10);
+	 }
+	 @else {
+	       font-size: em($base-font, $root-default-font-size);
+	       }
+  }
+  @else if $typo-unit == 'use_rem' {
+     font-size: var(--body-fontsize, rem($base-font));
+  }
+  @else if $typo-unit == 'use_rem_with_em_fallback' {
+     @if $root-equiv-10-px == true {
+       font-size: em($base-font, 10);
+	 }
+	 @else {
+	       font-size: em($base-font, $root-default-font-size);
+	       }
+     font-size: rem($base-font);
+  }
+  line-height: $l-h;
+  min-height: 100%;
+}
+
+
diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss
new file mode 100644
index 0000000..a22d1f5
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-responsive.scss
@@ -0,0 +1,182 @@
+/* general case */
+@include body-before ('desktop', true);
+
+/**
+ * medium/tablet breakpoint
+ */
+@include respond-to($breakpoint-medium) { 
+   
+  /**
+   * layout/modules
+   */
+
+  /* display elements */
+  .nodesktop { display: block; }
+
+  /* hide unnecessary elements */
+  .notablet { display: none; }
+  
+  /* linearization of floating content/table-layout */
+  .autotablet {
+    float: none;
+    display: block;
+    width: auto;
+  }
+  
+  /* margins */
+  $list-margins-tablet: m, mt, mr, mb, ml;
+  $list-margins-tablet-values: 0, 1, 2; // specify 2.5 if needed
+
+  @include margin-generator($list-margins-tablet, $list-margins-tablet-values, "ontablet-");
+
+  /* paddings */
+  $list-paddings-tablet: p, pt, pr, pb, pl;
+  $list-paddings-tablet-values: 0, 1, 2; // specify 2.5 if needed
+
+  @include padding-generator($list-paddings-tablet, $list-paddings-tablet-values, "ontablet-");
+  
+  /* text aligns */
+  .ontablet- {
+    &alignleft   { text-align: left; }
+    &aligncenter { text-align: center; }
+    &alignright  { text-align: right; }
+  }
+
+  .ontablet- {
+    &w100        { width: 100%; }
+    &mw100       { max-width: 100% }
+  }
+
+  /**
+   * global structure adaptation (page / skip links / header / main content / footer)
+   */
+  @include body-before ('tablet');
+
+}
+
+
+
+
+/**
+ * small/mobile breakpoint
+ */
+@include respond-to($breakpoint-small) { 
+
+  /**
+   * layout/modules
+   */
+
+  /* display elements */
+  .notablet { display: block; }
+
+  /* hide unnecessary elements */
+  .nomobile { display: none; }
+
+  /* linearization of floating content/table-layout */
+  .automobile {
+    float: none;
+    display: block;
+    width: auto;
+  }
+  
+  /* margins */
+  $list-margins-mobile: m, mt, mr, mb, ml;
+  $list-margins-mobile-values: 0, 0.5, 1, 2; // specify 2.5 if needed
+
+  @include margin-generator($list-margins-mobile, $list-margins-mobile-values, "onmobile-");
+  
+  /* paddings */
+  $list-paddings-mobile: p, pt, pr, pb, pl;
+  $list-paddings-mobile-values: 0, 1, 2; // specify 2.5 if needed
+
+  @include padding-generator($list-paddings-mobile, $list-paddings-mobile-values, "onmobile-");
+  
+  /* text aligns */
+  .onmobile- {
+    &alignleft   { text-align: left; }
+    &aligncenter { text-align: center; }
+    &alignright  { text-align: right; }
+  }
+
+  .onmobile- {
+    &flex-column {
+      flex-direction: column;
+      & > * {
+        width: 100%;
+        flex-basis: auto;
+      }
+      &.flex-autogrid {
+        margin: 0;
+      }
+      & > .flex-autogrid-item {
+        padding: 0;
+        min-height: auto;
+      }
+    }
+    &flex-column-nostretch {
+      flex-direction: column;
+      & > * {
+        align-self: center;
+      }
+    }
+    &wauto {
+      width: auto;
+    }
+    &flex-wrap {
+      flex-wrap: wrap;
+    }
+    &min-w100 {
+      min-width: 100%;
+    }
+  }
+  
+
+  /**
+   * global structure adaptation (page / skip links / header / main content / footer)
+   */
+  @include body-before ('mobile');
+
+}
+
+
+
+/**
+ * tiny/small mobile breakpoint
+ */
+@include respond-to($breakpoint-tiny) { 
+
+  /**
+   * layout/modules
+   */
+
+  /* display elements */
+  /*.nomobile { display: block; }*/
+
+  /* hide unnecessary elements */
+  .notinymobile { display: none; }
+
+  /* linearization of floating content/table-layout */
+  .autotinymobile {
+    float: none;
+    display: block;
+    width: auto;
+  }
+  
+  /* margins */
+  //$list-margins-tinymobile: m, mt, mr, mb, ml;
+  //$list-margins-tinymobile-values: 0, 1, 2; // specify 2.5 if needed
+
+  //@include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-");
+
+  /* paddings */
+  //$list-paddings-tinymobile: p, pt, pr, pb, pl;
+  //$list-paddings-tinymobile-values: 0, 1, 2; // specify 2.5 if needed
+
+  //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-");  
+
+  /**
+   * global structure adaptation (page / skip links / header / main content / footer)
+   */
+  @include body-before ('tinymobile');
+
+}
diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
new file mode 100644
index 0000000..61a82f0
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
@@ -0,0 +1,192 @@
+.noborder,
+iframe,
+dialog { border: 0; }
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+/*
+ * taken from http://tinytypo.tetue.net/ made by @tetue
+ * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
+ *
+ * see https://en.wikipedia.org/wiki/Quotation_mark#Summary_table for reference
+ */
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(fr) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
+}
+:lang(en) > q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+
+/* avoid ugly line-height */
+sup,
+sub {
+  vertical-align: 0;
+  position: relative;
+}
+sup {
+  bottom: 1ex;
+}
+sub {
+  top: .5ex;
+}
+
+/* avoid margin problems */
+@if $vertical-rythm == 'single_top' or $vertical-rythm == 'double_top_single_bottom' {
+  h1,.h1,
+  h2,.h2,
+  h3,.h3,
+  h4,.h4,
+  h5,.h5,
+  h6,.h6{
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  /* remove bottom margin on last child */
+  p,
+  ul,
+  ol,
+  dl,
+  blockquote,
+  pre,
+  table {
+    &:last-child {
+      margin-bottom: 0;
+    } 
+  }
+}
+
+/* avoid margin on nested elements */
+li p,
+li ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+/* Hyphenation: Thou shalt not pass (Moïse or Gandalf, don’t remember) */
+@if $hyphenation == true {
+  textarea,
+  table,
+  td,
+  th,
+  code,
+  pre,
+  samp,
+  div,
+  p {
+    word-break: break-word;
+  }
+  @supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
+    textarea,
+    table,
+    td,
+    th,
+    code,
+    pre,
+    samp,
+    div,
+    p {
+      word-break: normal;
+      @include vendor-prefix(hyphens, auto, webkit ms);
+    }
+  }
+}
+@else {
+  .cut {
+    word-break: break-word;
+  }
+  @supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
+    .cut {
+      word-break: normal;
+      @include vendor-prefix(hyphens, auto, webkit ms);
+    }
+  }
+}
+
+/* remove hyphenation if needed */
+.nocut {
+  word-wrap: normal;
+}
+@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
+  .nocut {
+    @include vendor-prefix(hyphens, none, webkit ms);
+  }
+}
+
+.break {
+  word-wrap: break-word;
+}
+
+code,
+pre,
+samp {
+  white-space: pre-wrap;
+}
+code {
+  line-height: 1;
+}
+kbd {
+  border: solid 1px;
+  border-top-left-radius: .5em;
+  border-top-right-radius: .5em;
+  padding: 0 .25em;
+}
+table {
+  margin-bottom: 1.5em;
+  table-layout: fixed;
+}
+/* important, abbr are good */
+/* only those with a title are shown */
+abbr[title] {
+  border-bottom: dotted 1px;
+  cursor: help;
+  text-decoration: none;
+  /* color inherited from text */
+}
+
+/* text aligns */
+.alignright  { text-align: right; }
+.aligncenter { text-align: center; }
+.alignleft   { text-align: left; }
+
+@if $rtl-option == true {
+  /* RTL */
+  [dir="rtl"] .alignright  { text-align: left; }
+  [dir="rtl"] .alignleft   { text-align: right; }
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+
+b, strong, .strong, .bold {
+  font-weight: bold;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.no-outline {
+  outline: 0;
+}
\ No newline at end of file
diff --git a/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
new file mode 100644
index 0000000..01a82ae
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss
@@ -0,0 +1,33 @@
+/* fix viewport for Win8 (snap mode) and preparing day
+ * when viewport will be supported by all render engines
+ *
+ * Examples: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
+ * width=device-width => width: device-width;
+ * height=device-height => height: device-height;
+ * initial-scale=2 => zoom: 2;
+ * maximum-scale=2 => max-zoom: 2;
+ * minimum-scale=0.5 => min-zoom: 0.5;
+ * user-scalable=no => user-zoom: fixed;
+ *
+ * for Win8 snap mode => only width: device-width; works for the moment
+ */
+  
+
+/* if anyone has a mixin for this, feel free to share */
+
+  
+@-webkit-viewport {
+  width: device-width;
+}
+@-moz-viewport {
+  width: device-width;
+}
+@-ms-viewport {
+  width: device-width;
+}
+@-o-viewport {
+  width: device-width;
+}
+@viewport {
+  width: device-width;
+}