docs: Adding atomic design directories and brief explainer files

src/components/atoms/atoms.md

@@ -0,0 +1,9 @@
+# What are atoms?
+
+https://bradfrost.com/blog/post/atomic-web-design/
+
+Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
+
+Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
+
+Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.