diff --git a/docs/source/_static/images/book-light.svg b/docs/source/_static/images/book-light.svg
new file mode 100644
index 000000000..6315fadba
--- /dev/null
+++ b/docs/source/_static/images/book-light.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 412.7 296.1" style="enable-background:new 0 0 412.7 296.1;" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#cfd0d0" d="M404.7,24.6C404.7,24.6,404.7,24.6,404.7,24.6L404.7,24.6h-27.2v-9.3c0.1-3.7-2.2-7-5.8-8C352.9,2.4,333.5,0,314.1,0
+			c-32,0-75.6,7.2-107.8,40C174.2,6.9,130.3,0,98.4,0C78.9,0,59.5,2.4,40.7,7.4c-3.5,1-5.9,4.3-5.8,8v9.2H8c-4.4,0-8,3.6-8,8v255.5
+			c0,4.4,3.6,8,8,8c1.4,0,2.7-0.4,3.9-1c0.8-0.4,80.8-44.2,192.5-16h1.2h0.7c0.6,0.1,1.3,0.1,1.9,0c112-28.4,192,15.3,192.5,16
+			c2.5,1.4,5.5,1.4,8,0c2.5-1.4,4-4,4-6.9V32.6C412.7,28.2,409.1,24.6,404.7,24.6z M16,275.4V40.6h19.1v200.6c0,4.4,3.5,8,7.9,8.1
+			c0.4,0,0.9,0,1.3-0.1c16.5-2.5,33.3-3.9,50-4c23.2-0.4,46.3,3.1,68.3,10.3C112.9,249.6,62.4,256.4,16,275.4z M94.3,229.4
+			c-14.6,0-29.1,1-43.5,2.8V21.7c15.6-3.5,31.5-5.2,47.4-5.3c29.9,0,71.2,6.9,99.8,39.2l0.2,199.3C181.7,244,149.2,229.4,94.3,229.4
+			z M214.3,55.6c28.6-32,69.9-39.2,99.8-39.2c16,0,31.9,1.8,47.4,5.3v210.5c-14.4-1.8-28.8-2.8-43.3-2.9c-54.6,0-87.1,14.6-104,25.5
+			V55.6z M396.6,275.4c-46.5-19-97.1-25.8-147-19.8c22.1-7.3,45.3-10.7,68.6-10.3c16.8,0.1,33.7,1.4,50.3,3.9
+			c4.4,0.7,8.4-2.3,9.1-6.7c0.1-0.4,0.1-0.9,0.1-1.3V40.6H397L396.6,275.4z"/>
+	</g>
+</g>
+</svg>
diff --git a/docs/source/_static/images/books-light.svg b/docs/source/_static/images/books-light.svg
new file mode 100644
index 000000000..c3d02e813
--- /dev/null
+++ b/docs/source/_static/images/books-light.svg
@@ -0,0 +1 @@
+<svg height="480pt" viewBox="0 0 480 480" width="480pt" xmlns="http://www.w3.org/2000/svg"><path fill="#cfd0d0" d="m240 0h-104c-4.417969 0-8 3.582031-8 8v56h-120c-4.417969 0-8 3.582031-8 8v400c0 4.417969 3.582031 8 8 8h232c4.417969 0 8-3.582031 8-8v-464c0-4.417969-3.582031-8-8-8zm-8 416h-88v-16h88zm-216-296h112v240h-112zm216-32h-88v-24h88zm-216 288h112v24h-112zm128 8v-280h88v280zm88-368v32h-88v-32zm-104 64v24h-112v-24zm-112 336h112v48h-112zm128 48v-32h88v32zm0 0"/><path fill="#cfd0d0" d="m479.742188 437.984375-96-368c-.535157-2.0625-1.871094-3.824219-3.714844-4.898437-1.839844-1.070313-4.03125-1.363282-6.089844-.8125l-120 32c-4.25 1.132812-6.789062 5.484374-5.679688 9.742187l96 368c.535157 2.0625 1.875 3.824219 3.71875 4.894531 1.839844 1.066406 4.03125 1.355469 6.085938.800782l120-32c4.242188-1.132813 6.777344-5.476563 5.679688-9.726563zm-201.246094-279.441406 104.542968-27.871094 3.761719 14.398437-104.535156 27.914063zm112.34375 2.050781 46.398437 177.980469-104.503906 27.882812-46.398437-177.992187zm50.472656 193.46875 8.191406 31.394531-104.542968 27.871094-8.160157-31.382813zm-71.023438-272.261719 8.710938 33.398438-104.542969 27.863281-8.703125-33.382812zm-12.578124 380.398438-8.710938-33.398438 104.542969-27.878906 8.703125 33.382813zm0 0"/><path fill="#cfd0d0" d="m104 144h-64c-4.417969 0-8 3.582031-8 8v64c0 4.417969 3.582031 8 8 8h64c4.417969 0 8-3.582031 8-8v-64c0-4.417969-3.582031-8-8-8zm-8 64h-48v-48h48zm0 0"/></svg>
diff --git a/docs/source/_static/images/coding-light.svg b/docs/source/_static/images/coding-light.svg
new file mode 100644
index 000000000..9a395f008
--- /dev/null
+++ b/docs/source/_static/images/coding-light.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 408.5" style="enable-background:new 0 0 512 408.5;" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#cfd0d0" d="M506.8,191.8L388.4,66.4c-7.3-7.7-19.4-8.1-27.1-0.8c-7.7,7.3-8.1,19.4-0.8,27.1l106,112.3l-106,112.3
+			c-7.3,7.7-6.9,19.9,0.8,27.1c3.7,3.5,8.5,5.2,13.2,5.2c5.1,0,10.2-2,14-6l118.4-125.4C513.7,210.8,513.7,199.2,506.8,191.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path fill="#cfd0d0" d="M151.6,317.3L45.6,205l106-112.3c7.3-7.7,6.9-19.9-0.8-27.1c-7.7-7.3-19.9-6.9-27.1,0.8L5.2,191.8c-7,7.4-7,19,0,26.4
+			l118.4,125.4c3.8,4,8.9,6,14,6c4.7,0,9.5-1.7,13.2-5.2C158.5,337.1,158.8,325,151.6,317.3z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path fill="#cfd0d0" d="M287.1,1.7c-10.5-1.6-20.3,5.6-21.9,16.1l-56.3,368.6c-1.6,10.5,5.6,20.3,16.1,21.9c1,0.1,2,0.2,2.9,0.2
+			c9.3,0,17.5-6.8,19-16.3l56.3-368.6C304.7,13.1,297.5,3.3,287.1,1.7z"/>
+	</g>
+</g>
+</svg>
diff --git a/docs/source/_static/images/light-bulb-light.svg b/docs/source/_static/images/light-bulb-light.svg
new file mode 100644
index 000000000..aa4936f70
--- /dev/null
+++ b/docs/source/_static/images/light-bulb-light.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 284.7 307.4" style="enable-background:new 0 0 284.7 307.4;" xml:space="preserve">
+<g>
+	<path fill="#cfd0d0" d="M142.2,259.7c-8.8,0-17.7,0.1-26.5,0c-7.6-0.1-11.3-3.7-11.4-11.4c-0.2-19.2-7.6-35.1-21.3-48.4
+		c-27-26.1-34.1-65.8-17.8-99.3c15.9-33,52-52.4,88.1-47.6c37.1,5,66.6,32.4,73.3,69.3c5.3,29.3-2.6,55.3-23.7,76.4
+		c-14.3,14.3-22.4,30.8-22.6,51c-0.1,6.4-4,10-10.6,10C160.5,259.8,151.3,259.7,142.2,259.7z M169,248.5c0.2-0.8,0.4-1.4,0.4-2.1
+		c1-22.5,10.2-40.9,26.5-56.3c10.5-10,16.8-22.5,19.8-36.8c7.3-34.9-11.4-70.5-44.4-84.4c-32.7-13.8-71.2-2.2-90.9,27.4
+		c-20.2,30.2-16.1,70,10.2,95.5c13.4,13,21.7,28.4,24.2,47c0.4,3.2,0.6,6.5,0.9,9.8C133.6,248.5,151.2,248.5,169,248.5z"/>
+	<path fill="#cfd0d0" d="M142.5,264.4c9.1,0,18.3,0.1,27.5,0c4,0,7.5,0.5,7.9,5.4c0.3,3.6-2.6,5.7-7.7,5.7c-18.6,0-37.3,0-55.9,0
+		c-3.9,0-7.2-1-7.3-5.5c-0.1-4.6,3.1-5.7,7.1-5.6C123.5,264.5,133,264.4,142.5,264.4z"/>
+	<path fill="#cfd0d0" d="M142.4,292.5c-8.3,0-16.6,0-24.9,0c-4,0-7.2-1.4-7.1-5.8c0.1-4.1,3.1-5.4,6.9-5.4c16.6,0.1,33.2,0.1,49.8,0
+		c4,0,7.2,1.1,7,5.7c-0.1,4.5-3.5,5.5-7.4,5.5C158.7,292.5,150.5,292.5,142.4,292.5z"/>
+	<path fill="#cfd0d0" d="M68.2,208c-1.3,2.1-2.1,3.8-3.3,5c-7.6,7.7-15.2,15.3-22.9,22.9c-2.7,2.6-5.6,4-8.7,1c-3-3-1.9-6,0.8-8.7
+		c7.8-7.7,15.4-15.6,23.4-23.1c1.5-1.4,4.5-2.1,6.6-1.7C65.6,203.7,66.7,206.3,68.2,208z"/>
+	<path fill="#cfd0d0" d="M136.9,22.7c0-5.5,0-11,0-16.5c0-3.8,1.7-6.3,5.5-6.3c3.8,0,5.4,2.7,5.4,6.4c0,11.1,0,22.3,0,33.4c0,3.7-1.7,6.3-5.6,6.2
+		c-3.9,0-5.4-2.6-5.4-6.4C137,34,136.9,28.4,136.9,22.7z"/>
+	<path fill="#cfd0d0" d="M262,141c-5.6,0-11.3,0-16.9,0c-3.7,0-6.3-1.5-6.4-5.3c-0.1-3.9,2.6-5.5,6.3-5.5c11.1,0,22.3,0,33.4,0
+		c3.7,0,6.4,1.6,6.4,5.4c0,3.7-2.3,5.4-6.3,5.2c-5.5-0.3-10.9-0.1-16.4-0.1C262,140.8,262,140.9,262,141z"/>
+	<path fill="#cfd0d0" d="M22.5,124.5c5.5,0,11,0.1,16.5,0c3.6-0.1,5.7,1.3,6,5.1c0.2,3.6-1.9,5.3-5.1,5.4c-11.6,0.1-23.2,0.2-34.8,0.1
+		c-3.3,0-5.2-2-5-5.5c0.3-3.4,2.1-5,5.6-5C11.2,124.6,16.9,124.5,22.5,124.5z"/>
+	<path fill="#cfd0d0" d="M220.5,202c2,1.3,3.8,2,5,3.2c7.8,7.7,15.6,15.5,23.3,23.2c2.7,2.7,3.6,5.8,0.6,8.7c-2.9,2.7-5.8,1.6-8.3-0.9
+		c-7.9-7.9-15.9-15.6-23.5-23.8c-1.4-1.5-1.7-4.5-1.4-6.6C216.5,204.4,218.8,203.4,220.5,202z"/>
+	<path fill="#cfd0d0" d="M85.8,58.2c-1.1,1.5-1.9,3.6-3.3,4.1c-1.8,0.6-4.8,0.6-5.9-0.5C67.8,53.5,59.2,44.9,50.9,36c-1.2-1.3-0.8-5.2,0.3-7
+		c1.8-2.7,5.1-2.5,7.4-0.2c8.4,8.2,16.8,16.6,25,25C84.6,54.9,84.9,56.5,85.8,58.2z"/>
+	<path fill="#cfd0d0" d="M231.2,32.4c-1.4,2.1-2.2,4-3.5,5.3c-7.6,7.7-15.2,15.3-22.9,22.9c-2.7,2.7-5.7,3.8-8.7,0.8c-2.7-2.8-1.9-5.7,0.7-8.3
+		c7.9-7.9,15.6-15.9,23.7-23.5c1.5-1.4,4.5-1.9,6.6-1.6C228.6,28.2,229.7,30.6,231.2,32.4z"/>
+	<path fill="#cfd0d0" d="M119,298.2c15.5,0,30.8,0,46,0c-0.6,4.5-4.6,8.6-10.2,8.9c-8.3,0.5-16.6,0.5-24.9,0C124.9,306.9,121.4,303.6,119,298.2z"/>
+	<path fill="#cfd0d0" d="M140.6,78.5c3.6-0.3,6.4,0.9,6.7,4.9c0.3,4-2.3,5.4-5.9,6c-26.9,4-38.2,14.3-44.7,40.9c-0.8,3.4-2.7,5.6-6.2,5.1
+		c-4.2-0.6-5-3.7-4.5-7.5C89,101.2,113.6,79,140.6,78.5z"/>
+</g>
+</svg>
diff --git a/docs/source/index.md b/docs/source/index.md
index 62cf34dce..b53d35818 100644
--- a/docs/source/index.md
+++ b/docs/source/index.md
@@ -57,6 +57,27 @@ gutter: 3
 :text-align: center
 :img-top: _static/images/light-bulb.svg
 :class-img-top: index-card-image
+:class-item: only-light
+:shadow: md
+
+```{button-link} tutorials/index.html
+---
+click-parent:
+ref-type: ref
+class: stretched-link index-card-link
+---
+Tutorials
+```
+
+Tutorials help you to get started with pytask and how you manage your first project.
+
+````
+
+````{grid-item-card}
+:text-align: center
+:img-top: _static/images/light-bulb-light.svg
+:class-img-top: index-card-image
+:class-item: only-dark
 :shadow: md
 
 ```{button-link} tutorials/index.html
@@ -76,6 +97,28 @@ Tutorials help you to get started with pytask and how you manage your first proj
 :text-align: center
 :img-top: _static/images/book.svg
 :class-img-top: index-card-image
+:class-item: only-light
+:shadow: md
+
+```{button-link} how_to_guides/index.html
+---
+click-parent:
+ref-type: ref
+class: stretched-link index-card-link
+---
+How-to Guides
+```
+
+How-to guides provide instructions for very specific and advanced tasks and document
+best-practices.
+
+````
+
+````{grid-item-card}
+:text-align: center
+:img-top: _static/images/book-light.svg
+:class-img-top: index-card-image
+:class-item: only-dark
 :shadow: md
 
 ```{button-link} how_to_guides/index.html
@@ -96,6 +139,27 @@ best-practices.
 :text-align: center
 :img-top: _static/images/books.svg
 :class-img-top: index-card-image
+:class-item: only-light
+:shadow: md
+
+```{button-link} explanations/index.html
+---
+click-parent:
+ref-type: ref
+class: stretched-link index-card-link
+---
+Explanations
+```
+
+Explanations deal with key topics and concepts which underlie the package.
+
+````
+
+````{grid-item-card}
+:text-align: center
+:img-top: _static/images/books-light.svg
+:class-img-top: index-card-image
+:class-item: only-dark
 :shadow: md
 
 ```{button-link} explanations/index.html
@@ -115,6 +179,27 @@ Explanations deal with key topics and concepts which underlie the package.
 :text-align: center
 :img-top: _static/images/coding.svg
 :class-img-top: index-card-image
+:class-item: only-light
+:shadow: md
+
+```{button-link} reference_guides/index.html
+---
+click-parent:
+ref-type: ref
+class: stretched-link index-card-link
+---
+Reference Guides
+```
+
+Reference guides explain the implementation and provide an entry-point for developers.
+
+````
+
+````{grid-item-card}
+:text-align: center
+:img-top: _static/images/coding-light.svg
+:class-img-top: index-card-image
+:class-item: only-dark
 :shadow: md
 
 ```{button-link} reference_guides/index.html