The need for Design Systems goes hand in hand with the need for scale, efficiency, and consistency in Design.
Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency.
Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms.
Increased efficiency and consistency lead a company to build faster products at scale.
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;300;400;600;700&display=swap');
* {
font-style: normal;
line-height: 1.5;
font-family: 'Barlow', sans-serif;
}@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;300;400;600;700&display=swap');
* {
font-style: normal;
line-height: 1.5;
font-family: 'IBM Plex Sans', sans-serif;
}@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;700&display=swap');
* {
font-style: normal;
line-height: 1.5;
font-family: 'Montserrat', sans-serif;
}- thin
- light
- regular
- semi-bold
- bold
- Name of the font family
- Font size
- Font weight
.ibm-96-thin {
font-size: 96px;
font-weight: 100;
}
.barlow-48-regular {
font-size: 48px;
font-weight: 400;
}
.montserrat-18-light {
font-size: 18px;
font-weight: 300;
}- Name of the color
- Lightness percentage
- Brand name
--bodyMavennet50: rgba(127, 115, 140, 1);
--primaryNeoflow60: rgba(76, 134, 235, 1);
--fadeMetal80: rgba(187, 184, 224, 1);