diff --git a/htdocs/parts/intro.php b/htdocs/parts/intro.php
index 2325247..c819a1c 100644
--- a/htdocs/parts/intro.php
+++ b/htdocs/parts/intro.php
@@ -3,6 +3,8 @@
 if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 	header('HTTP/1.1 403 Forbidden'); die();
 }
+
+global $root_path;
 ?>
 
 <div class="p-xs b r-s bkgd-grid">
@@ -26,25 +28,29 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
 
     <h3 class="t-size-12 mb-xxs mt-m">Design philosophy</h3>
     <div class="ml-xs">
-        <h4 class="t-size-11">Core Stylesheet</h4>
-        <p>These rules apply to the "core" part of the stylesheet:</p>
-        <ul>
+        <h4 class="t-size-11 mt-s mb-xxs">Core stylesheet rules:</h4>
+        <ul class="l-bullets l-bullet-manual">
             <li>No implicit sizes, margins or paddings</li>
             <li>No styles from class-less DOM, except for styling elements</li>
             <li>Self-sufficient and embeddable as a single file or text blob</li>
             <li>Competitive minified size</li>
-            <li>Standardized naming scheme</li>
+            <li>Standardized &amp; consistent naming scheme</li>
         </ul>
-        <!-- Avoid nested divs, keep the logical DOM layout, -->
-        <h4 class="t-size-11 mt-s">Site Stylesheet</h4>
-        <ul>
+
+        <h4 class="t-size-11 mt-s mb-xxs">Site stylesheet rules:</h4>
+        <ul class="l-bullets l-bullet-manual">
             <li>Prefabs for common elements</li>
-            <ul>
+            <ul class="l-bullets l-bullet-manual">
                 <li>Bound to specific elements</li>
-                <li>???</li>
-                <li>???</li>
-                <li>No forced smooth transition</li>
-                <li><b>MUST</b> be snappy on low-end hardware, no snagging allowed</li>
+            </ul>
+            <li>No forced smooth transition</li>
+        </ul>
+
+        <h4 class="t-size-11 mt-s mb-xxs">General rules</h4>
+        <ul class="l-bullets l-bullet-manual">
+            <li><b>Must</b> be snappy on low-end hardware, no snagging or slowdowns allowed</li>
+            <ul class="l-bullets l-bullet-manual">
+                <li>Tested on an old Chuwi Ubook X internally</li>
             </ul>
         </ul>
     </div>
diff --git a/htdocs/parts/lists.php b/htdocs/parts/lists.php
index c05a3fb..43b6254 100644
--- a/htdocs/parts/lists.php
+++ b/htdocs/parts/lists.php
@@ -11,15 +11,132 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         <i class="fa-solid fa-list f-right"></i></h2>
 </div>
 <section class="p-s">
-    <p>???.</p>
+    <h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
+    <p class="mb-s">
+        By default, ordered and unordered lists have no bullet.<br>
+        This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.
+    </p>
+    <ul class="debug">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li class="l-bullet-disc">
+            Item 3 with explicit disc bullet (See below)
+        </li>
+    </ul>
 
-    <div class="debug">
-        <ul>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
+    <p class="mb-s">
+        Regular-looking lists can be created by simply adding the <span class="code">.l-bullets</span>
+        or <span class="code">.list-bullets</span> class to list's root element.<br>
+        These classes must also be used for any nested children lists !
+    </p>
+    <div class="debug mb-s">
+        <ul class="l-bullets debug l-bullet-manual">
             <li>Line 1</li>
-            <li>Line 2<br>Line 2 continued</li>
+            <li>Line 2<br>Line 2 continued after a <i>br</i></li>
             <li>Line 3</li>
+            <ul class="l-bullets l-bullet-manual">
+                <li>Line 3.1</li>
+                <li>Line 3.2</li>
+            </ul>
+            <li>Line 4</li>
         </ul>
     </div>
+    <div class="debug">
+        <ol class="l-bullets l-bullet-manual">
+            <li>Salt</li>
+            <li>Packs of crisps</li>
+            <ol class="l-bullets l-bullet-manual">
+                <li>Salt and pepper</li>
+                <li>Paprika</li>
+            </ol>
+            <li>Olive oil</li>
+        </ol>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
+    <p class="mb-s">
+        By default, the lists do not include their bullet in the parent element.<br>
+        This is due to the fact that the imposed spacings when using
+        <span class="code">list-style-position: inside;</span> looks like absolute trash.
+    </p>
+    <p class="mb-s">
+        This behavior can be changed by using the <span class="code">.l-bullet-inside</span>
+        or <span class="code">list-bullet-inside</span> classes.<br>
+        Alternatively, a nicer manual spacing can be applied by using the <span class="code">.l-bullet-manual</span>
+        or <span class="code">list-bullet-manual</span> classes.
+    </p>
+    <p class="mb-s">
+        Please note that the following classes must be applied to the root element and any nested
+        list's root element too.
+    </p>
+    <div class="grid col-3">
+        <div>
+            <p><b>Outside (Default)</b></p>
+            <ul class="debug l-bullets l-bullet-outside my-xs">
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+            </ul>
+            <span class="code">ul.l-bullets<b>.l-bullet-outside</b>&gt;li*3</span>
+        </div>
+        <div>
+            <p><b>Inside</b></p>
+            <ul class="debug l-bullets l-bullet-inside my-xs">
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+            </ul>
+            <span class="code">ul.l-bullets<b>.l-bullet-inside</b>&gt;li*3</span>
+        </div>
+        <div>
+            <p><b>Manual (Recommended)</b></p>
+            <ul class="debug l-bullets l-bullet-manual my-xs">
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+            </ul>
+            <span class="code">ul.l-bullets<b>.l-bullet-manual</b>&gt;li*3</span>
+        </div>
+    </div>
+
+    <h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
+    <p class="mb-s">
+        Each list and its entry can have its bullets' style changed by using the following classes in the
+        <span class="code">ul</span>, <span class="code">ol</span> or <span class="code">li</span> elements.<br>
+        <s>The <span class="code">type</span> property also works as expected in these cases.</s>
+    </p>
+    <p class="mb-s">
+        Please note that some of the more exotic bullet styles may not fit properly when using
+        the manual position as shown below.<br>
+        This is a known issue and won't be fixed as it is an edge-case.
+    </p>
+    <ul class="debug l-bullet-manual">
+        <li class="l-bullet-disc">
+            Disc: <span class="code">.l-bullet-disc</span>, <span class="code">.list-bullet-disc</span>
+        </li>
+        <li class="l-bullet-square">
+            Square: <span class="code">.l-bullet-square</span>, <span class="code">.list-bullet-square</span>
+        </li>
+        <li class="l-bullet-decimal">
+            Decimal: <span class="code">.l-bullet-decimal</span>, <span class="code">.list-bullet-decimal</span>
+        </li>
+        <li class="l-bullet-decimal-leading">
+            Decimal: <span class="code">.l-bullet-decimal-leading</span>, <span class="code">.list-bullet-decimal-leading</span>
+        </li>
+        <li class="l-bullet-georgian">
+            Gregorian: <span class="code">.l-bullet-georgian</span>, <span class="code">.list-bullet-georgian</span>
+        </li>
+        <li class="l-bullet-chinese">
+            Chinese: <span class="code">.l-bullet-chinese</span>, <span class="code">.list-bullet-chinese</span>
+        </li>
+        <li class="l-bullet-kannada">
+            Kannada: <span class="code">.l-bullet-kannada</span>, <span class="code">.list-bullet-kannada</span>
+        </li>
+        <li class="l-bullet-none">
+            None: <span class="code">.l-bullet-none</span>, <span class="code">.list-bullet-none</span>
+        </li>
+    </ul>
 
-    <b>TODO: All a detail of all classes</b>
 </section>
diff --git a/scss/core/lists.scss b/scss/core/lists.scss
index b9236e8..5eaaa18 100644
--- a/scss/core/lists.scss
+++ b/scss/core/lists.scss
@@ -2,28 +2,54 @@
 
 /* Core > Lists */
 
-ul:not(.no-bullet) {
-  padding-left: 1.5rem;
-
-  &> li {
+ul {
+  &.l-bullets, &.list-bullets {
     list-style-type: disc;
   }
 }
 
-ol:not(.no-bullet) {
-  list-style-type: decimal;
-  padding-left: 1.5rem;
+ol {
+  &.l-bullets, &.list-bullets {
+    list-style-type: decimal;
+  }
 }
 
-li {
-  //list-style-type: disc;
-
-  /*&>  li {
-    list-style-type: circle;
-  }*/
+ul, ol {
+  &.l-bullet-inside, &.list-bullet-inside {
+    list-style-position: inside;
+  }
+  &.l-bullet-outside, &.list-bullet-outside {
+    list-style-position: outside;
+  }
+  &.l-bullet-manual, &.list-bullet-manual {
+    list-style-position: outside;
+    padding-left: 1.5rem;
+  }
 }
 
-/*ul.no-bullet, ol.no-bullet {
-  list-style-type: none;
-  padding-left: 0;
-}*/
+ul, ol, li {
+  &.list-bullet-none, &.l-bullet-none {
+    list-style-type: none;
+  }
+  &.list-bullet-disc, &.l-bullet-disc {
+    list-style-type: disc;
+  }
+  &.list-bullet-square, &.l-bullet-square {
+    list-style-type: square;
+  }
+  &.list-bullet-decimal, &.l-bullet-decimal {
+    list-style-type: decimal;
+  }
+  &.list-bullet-decimal-leading, &.l-bullet-decimal-leading {
+    list-style-type: decimal-leading-zero;
+  }
+  &.list-bullet-georgian, &.l-bullet-georgian {
+    list-style-type: georgian;
+  }
+  &.list-bullet-chinese, &.l-bullet-chinese {
+    list-style-type: trad-chinese-informal;
+  }
+  &.list-bullet-kannada, &.l-bullet-kannada {
+    list-style-type: kannada;
+  }
+}