Typography
Including PDS does not change the typography of your site. After including, you may use PDS sass or html classes to define your typography in line with the ProDemos styles.
Font family
A few fonts are included in the design system. You can access them by a classname or use the css font definition to get the correct font:
- .bree-serif (
font-family:"Bree Serif"; font-weight:400;) - .fira-sans, .fira-sans-regular (
font-family:"Bree Serif"; font-weight:400;) - .fira-sans-medium (
font-family:"Bree Serif"; font-weight:500;) - .fira-sans-semibold (
font-family:"Bree Serif"; font-weight:600;) - .fira-sans-bold (
font-family:"Bree Serif"; font-weight:700;)
Font sizes
The design system has a set of named fontsizes that you can access
in sass (@pds-fontsize(xs)).
The names are
tiny, xxs, xs, s, default, m, l, xl, xxl, huge
Line heights
The design system has a set of named lineheights that you can access
in sass (@pds-lineheight(xs)).
The names are
none, xs, s, default, m
Colors
The colors are defined in css which you can access in html
(class="pds-m-colored blue")
or using css variables (color: var(--pds-color-blue)).