Added summaries about the sections of the design system

docs/01-index.md

@@ -8,14 +8,49 @@ status: alpha
 </div>
 
 <article class="rg-article">
-  <h1 class="rg-article-title">Reactive Graph Design System</h1>
+  <h1 class="rg-article-title">About the design system</h1>
   <p class="rg-article-intro">
     This is a design system for Reactive Graph websites and applications. It establishes a common design language,
     provides reusable coded components, and outlines high level guidelines for content and accessibility.
   </p>
+</article>
+
+<section class="rg-emphasis-box">
+  <h3>Atomic Design</h3>
+  <p class="intro">Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.</p>
   <p>
     All components defined are categorized following the
     <a href="http://atomicdesign.bradfrost.com/table-of-contents/">atomic design principles by Brad Frost</a>.
   </p>
-</article>
+</section>
+
+<section class="rg-emphasis-box">
+  <h3>Fundamentals</h3>
+  <p class="intro">
+    The fundamentals define the <a href="/docs/fundamentals/palette">color palette</a>,
+    the <a href="/docs/fundamentals/fonts">fonts</a>, the <a href="/docs/fundamentals/logo">logo</a>,
+    the <a href="/docs/fundamentals/icons">icon sets</a>, the sets of <a href="/docs/fundamentals/pattern">patterns</a>
+    and <a href="/docs/fundamentals/gradients">gradients</a>.</p>
+  <p></p>
+</section>
 
+<section class="rg-emphasis-box">
+  <h3>Graph Representation</h3>
+  <p class="intro">
+    The section about the graph representation defines how the
+    <a href="/docs/graph-representation/type-system">type system</a> of the graph can be visualized. This means
+    how look components, entity types and relation types. Furthermore, it also defines the appearance of
+    <a href="/docs/graph-representation/instance-system">instances</a> (entity instances and relation instances).
+  </p>
+  <p></p>
+</section>
+
+<section class="rg-emphasis-box">
+  <h3>Flow Node Representation</h3>
+  <p class="intro">
+    The section about the flow node representation defines how the control flows can be visualized. This includes
+    the visualization of <a href="/docs/flow-node-representation/flow-node">flow nodes</a> and their property sockets
+    and the <a href="/docs/flow-node-representation/connector">connectors</a> which enables the data flow.
+  </p>
+  <p></p>
+</section>