A design system is kind of an agreement that defines how a company or a set of people working together would build products.

🔍 What do you find here?

Introduction

Atomic Design

It's a concept created by the Awesome Breakfast, and it's basically a way of thinking about design systems that break everything down to really simple levels. So it's going to take our design system and break them into five different parts: atoms, molecules, organisms, templates and pages.

1. Atom: an atom would refer to, a small piece of a system that can exist on its own, like a label or a button.
2. Molecule: take one atom, which is the label, and then another, which is an input, and then another, which is a button, and put all three together. Now what we have is a search form and that is what we would call a molecule.
3. Organism: a combination of many molecules and atoms together, like a nav bar, footer.
4. Templates: it is a combination of different organisms to actually make sense together, like a login page - it would be a combination of a form, a button, maybe a heading a card so that the user can actually log in.
5. Pages: same as a template but the template has some fake data, but then this is a page because it has real-life data in it.

CSS Architecture

Best practices and guidelines that we need to follow to have a scalable:

1. Organized - fixed code structure