From 518597c6dd0d613547a979b91f2406c9e117511a Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Wed, 11 Sep 2024 16:49:17 +0200
Subject: [PATCH 01/31] change sturcture of navigation and delete some pages

---
 docs/app/_components/SectionNavigation.tsx    |  2 +
 docs/app/_components/SiteHeader.tsx           |  2 +-
 docs/content/concepts/style-props.mdx         |  2 +-
 docs/content/concepts/validation.mdx          |  2 +-
 docs/content/develop/release.mdx              | 14 ----
 docs/content/develop/scripts.mdx              | 82 -------------------
 .../design-token-guidelines.mdx               |  2 +-
 .../design-tokens.mdx                         |  2 +-
 .../{concepts => foundations}/elevation.mdx   |  2 +-
 .../{concepts => foundations}/icons.mdx       |  0
 .../surface-default.demo.tsx                  |  0
 .../surface-overlay.demo.tsx                  |  0
 .../surface-raised.demo.tsx                   |  0
 .../surface-sunken.demo.tsx                   |  0
 docs/content/introduction/about.mdx           | 26 ------
 .../component-guidelines.mdx                  |  0
 .../{introduction => resources}/faq.mdx       |  8 +-
 .../get-in-touch.mdx                          |  0
 docs/lib/config.ts                            |  8 +-
 19 files changed, 19 insertions(+), 133 deletions(-)
 delete mode 100644 docs/content/develop/release.mdx
 delete mode 100644 docs/content/develop/scripts.mdx
 rename docs/content/{introduction => foundations}/design-token-guidelines.mdx (99%)
 rename docs/content/{introduction => foundations}/design-tokens.mdx (99%)
 rename docs/content/{concepts => foundations}/elevation.mdx (99%)
 rename docs/content/{concepts => foundations}/icons.mdx (100%)
 rename docs/content/{concepts => foundations}/surface-default.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/surface-overlay.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/surface-raised.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/surface-sunken.demo.tsx (100%)
 delete mode 100644 docs/content/introduction/about.mdx
 rename docs/content/{develop => resources}/component-guidelines.mdx (100%)
 rename docs/content/{introduction => resources}/faq.mdx (89%)
 rename docs/content/{introduction => resources}/get-in-touch.mdx (100%)

diff --git a/docs/app/_components/SectionNavigation.tsx b/docs/app/_components/SectionNavigation.tsx
index 7713afc8a7..b805c6b272 100644
--- a/docs/app/_components/SectionNavigation.tsx
+++ b/docs/app/_components/SectionNavigation.tsx
@@ -16,6 +16,8 @@ export const SectionNavigation = () => {
     section => section.name.toLocaleLowerCase() === formattedSectionName
   );
 
+  console.log(navigation.find(section => section.name.toLocaleLowerCase()));
+
   return (
     <nav className="flex flex-col gap-2">
       <p className="font-semibold">{currentSection?.name}</p>
diff --git a/docs/app/_components/SiteHeader.tsx b/docs/app/_components/SiteHeader.tsx
index 840b913e0a..3c4ee8b57f 100644
--- a/docs/app/_components/SiteHeader.tsx
+++ b/docs/app/_components/SiteHeader.tsx
@@ -16,7 +16,7 @@ export const SiteHeader = () => (
     </div>
     <div className="hidden md:block">
       <Link href="https://marigold-rapp.vercel.app/" variant="cta">
-        <span className="hidden xl:inline">Discover new </span>Tutorials!
+        <span className="hidden 2xl:inline">Discover new </span>Tutorials!
       </Link>
     </div>
     <div className="flex flex-1 flex-col items-stretch md:block md:flex-initial">
diff --git a/docs/content/concepts/style-props.mdx b/docs/content/concepts/style-props.mdx
index 2f524d3c7d..f679390c35 100644
--- a/docs/content/concepts/style-props.mdx
+++ b/docs/content/concepts/style-props.mdx
@@ -1,7 +1,7 @@
 ---
 title: Style Props
 caption: Style props are a set of properties that can be used to apply custom styling to a component.
-order: 3
+order: 2
 ---
 
 Style props are a concept used in component to enable easy and consistent styling of components in React applications. They provide a convenient way to apply CSS styling directly to components using JSX syntax. Instead of writing traditional CSS classes or inline styles, you can use these "style props" to define the appearance and layout of your components.
diff --git a/docs/content/concepts/validation.mdx b/docs/content/concepts/validation.mdx
index 4e158d78f6..f6b1b8db35 100644
--- a/docs/content/concepts/validation.mdx
+++ b/docs/content/concepts/validation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Validation
 caption: Learn about how to use form validation with Marigold.
-order: 6
+order: 3
 ---
 
 HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like `required` and input types such as `email` or `number` to provide users with feedback.
diff --git a/docs/content/develop/release.mdx b/docs/content/develop/release.mdx
deleted file mode 100644
index 4a0e63332b..0000000000
--- a/docs/content/develop/release.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: Release
-caption: How we release Marigold.
----
-
-Releases are automated through changeset’s release action. In order to cut a new release go to Marigold’s open pull requests. If there are any changes to be published, there is a pull request called `“release: version packages”`.
-
-Inside the pull request you will find a list of all the changes and version bumps that will happen. After you review the pull request, approve it and then merge it. This will trigger the `Release` action which will [publish packages to npm](https://www.npmjs.com/search?q=%40marigold), send a notification to our Slack channel and deploy the documentation.
-
-## Deploying with Vercel
-
-In Vercel, the deploying process is straightforward and automated. Once you connect your Git repository to Vercel, it continuously monitors for changes. When you push new code or updates to the repository, Vercel automatically triggers a build process to compile and optimize your project.
-
-You can have a view on our Vercel Board right here [Link to Vercel](https://vercel.com/marigold)
diff --git a/docs/content/develop/scripts.mdx b/docs/content/develop/scripts.mdx
deleted file mode 100644
index 9551d3825f..0000000000
--- a/docs/content/develop/scripts.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Scripts
-caption: List of all the scripts.
----
-
-We use several scripts to make developing Marigold easier and more convenient.
-
-Run `$ pnpm <script name>` in your favorite terminal.
-
-## Developing
-
-### `watch`
-
-Boot up [Storybook](https://storybook.js.org/) to maintain or develop new components or themes. This tool is especially useful to debug or make visual changes, check if a11y rules are satisfied or make interactive [play](https://storybook.js.org/docs/react/writing-stories/play-function) examples.
-
-### `test (-w)`
-
-Run the test suite. If you append `-w` the suite will run in watch mode, meaning test that are affacted by your changes will be automatically re-run.
-
-### `start`
-
-Boot up the documentation website. This is helpful if you're writing or editing any documentation. Changes will be automatically detected and force a rebuild of the docs without you having to refresh the page in a browser.
-
-### `coverage`
-
-Same as `test` but will output a coverage report into your terminal.
-
-### `lint`
-
-Run [`eslint`](https://eslint.org/) to check if source files adhere our lint standards. We basically using [CRA](https://create-react-app.dev/)'s rules which are very lax and won't unnecessarily annoy you.
-
-### `format`
-
-Run [`prettier`](https://prettier.io/) and format source files. We don't care how our source code is formated as long everyone uses the same format.
-
-### `typecheck`
-
-Run the [TypeScript](https://www.typescriptlang.org/) compiler to find any inconsistent or wrong types.
-
-## Build
-
-### `build`
-
-Build all the packages.
-
-### `build:themes`
-
-Build all the tailwind themes.
-
-### `build:storybook`
-
-Build just storybook.
-
-### `build:docs`
-
-Build just the documentation.
-
-## Release
-
-If you want to know how to release Marigold, go to the [Release](./release) page.
-
-### `release`
-
-Run our release script to create a new release and deploy the documentation.
-
-### `release:docs`
-
-Deploy documentation.
-
-### `changeset`
-
-Use changeset, see [CLI options](https://github.com/changesets/changesets/blob/main/docs/command-line-options.md) for more information.
-
-## Troubleshoot
-
-### `clean`
-
-Sometimes node modules have hick ups. This command will remove all `node_module` and build folders so that you have a clean repo like you just git cloned it.
-
-### `clean:build`
-
-Same as `clean` except it will only remove all build folders.
diff --git a/docs/content/introduction/design-token-guidelines.mdx b/docs/content/foundations/design-token-guidelines.mdx
similarity index 99%
rename from docs/content/introduction/design-token-guidelines.mdx
rename to docs/content/foundations/design-token-guidelines.mdx
index 667a7787f7..02929516b5 100644
--- a/docs/content/introduction/design-token-guidelines.mdx
+++ b/docs/content/foundations/design-token-guidelines.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tokens Guidelines
 caption: Learn about the structure and application of our design tokens
-order: 4
+order: 3
 ---
 
 On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem.
diff --git a/docs/content/introduction/design-tokens.mdx b/docs/content/foundations/design-tokens.mdx
similarity index 99%
rename from docs/content/introduction/design-tokens.mdx
rename to docs/content/foundations/design-tokens.mdx
index 72b952503d..aa013f9e71 100644
--- a/docs/content/introduction/design-tokens.mdx
+++ b/docs/content/foundations/design-tokens.mdx
@@ -1,7 +1,7 @@
 ---
 title: Design Tokens
 caption: Here are all design tokens for each theme listet.
-order: 3
+order: 2
 ---
 
 Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.
diff --git a/docs/content/concepts/elevation.mdx b/docs/content/foundations/elevation.mdx
similarity index 99%
rename from docs/content/concepts/elevation.mdx
rename to docs/content/foundations/elevation.mdx
index c6e77b6d11..7b9f0d7906 100644
--- a/docs/content/concepts/elevation.mdx
+++ b/docs/content/foundations/elevation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Elevation
 caption: Learn how to use elevation with Marigold.
-order: 2
+order: 1
 ---
 
 Elevations serve as the foundational layers of the UI, providing a clean slate upon which various UI elements can be placed. It is important for creating visual hierarchy, depth, and clarity within a user interface. It guides user attention, improves usability, and enhances the overall user experience by providing feedback, organizing elements, and maintaining consistency in branding.
diff --git a/docs/content/concepts/icons.mdx b/docs/content/foundations/icons.mdx
similarity index 100%
rename from docs/content/concepts/icons.mdx
rename to docs/content/foundations/icons.mdx
diff --git a/docs/content/concepts/surface-default.demo.tsx b/docs/content/foundations/surface-default.demo.tsx
similarity index 100%
rename from docs/content/concepts/surface-default.demo.tsx
rename to docs/content/foundations/surface-default.demo.tsx
diff --git a/docs/content/concepts/surface-overlay.demo.tsx b/docs/content/foundations/surface-overlay.demo.tsx
similarity index 100%
rename from docs/content/concepts/surface-overlay.demo.tsx
rename to docs/content/foundations/surface-overlay.demo.tsx
diff --git a/docs/content/concepts/surface-raised.demo.tsx b/docs/content/foundations/surface-raised.demo.tsx
similarity index 100%
rename from docs/content/concepts/surface-raised.demo.tsx
rename to docs/content/foundations/surface-raised.demo.tsx
diff --git a/docs/content/concepts/surface-sunken.demo.tsx b/docs/content/foundations/surface-sunken.demo.tsx
similarity index 100%
rename from docs/content/concepts/surface-sunken.demo.tsx
rename to docs/content/foundations/surface-sunken.demo.tsx
diff --git a/docs/content/introduction/about.mdx b/docs/content/introduction/about.mdx
deleted file mode 100644
index 1307cc5831..0000000000
--- a/docs/content/introduction/about.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: About
-caption: Learn about the goals of Marigold and how it aims to help building user interfaces.
-order: 2
----
-
-_Marigold_ is a React implementation of Reservix' design language. It aims to provides a robust and modular foundation for building digital products that are accessible and adaptive across screen sizes while delivering a consistent, delightful experience for all users.
-
-- **Building Blocks:** As a foundation for digital product development, Marigold offers a set of reusable components and guidance for teams to efficiently build high-quality and accessible user interfaces.
-- **Cross-brand Theming**: Marigold comes with a set of ready-to-use themes for common use cases. However, it also provides a simple way to kickoff a new theme or customize a existing one. You can change colors, fonts, breakpoints and everything else you need.
-- **Accessibility:** Marigold focuses heavily on enabling our products to deliver delightful experiences to all users, regardless of visual, hearing, motor or cognitive disabilities.
-- **Guidelines:** While the styles and components can be assembled together in a variety of ways for different situations, the guidelines and standards of Marigold ensure cohesive experiences between products.
-
-If you want to dig deeper and learn how these capabilities are implemented, head over to the [concepts behind Marigold](/introduction/02-concepts).
-
-## What makes Marigold different?
-
-The goal of Marigold is to build an easy and compelling to use platform, regardless if you are a developer, designer or sales person.
-
-As much as possible, we want the written code to make sense to non-developers. This is why we are focused on the simplicity and composability of Marigold's API. We want to allow our teams to spend less time polishing mock ups and more time polishing the product.
-
-Marigold is maintained by a core team of designers and developers that are dedicated to developing and supporting an ever growing and evolving system that can only thrive with feedback from our teams and customers.
-
-## Support
-
-If you work at Reservix and have a design related or technical question, you can head over to our dedicated [slack channel](https://reservix.slack.com/archives/C02727BNZ3J). We try to respond to everyone as quickly as we can and we're always happy to help.
diff --git a/docs/content/develop/component-guidelines.mdx b/docs/content/resources/component-guidelines.mdx
similarity index 100%
rename from docs/content/develop/component-guidelines.mdx
rename to docs/content/resources/component-guidelines.mdx
diff --git a/docs/content/introduction/faq.mdx b/docs/content/resources/faq.mdx
similarity index 89%
rename from docs/content/introduction/faq.mdx
rename to docs/content/resources/faq.mdx
index 4e1c104ab1..23d7f0bc89 100644
--- a/docs/content/introduction/faq.mdx
+++ b/docs/content/resources/faq.mdx
@@ -25,9 +25,7 @@ That said, one of the primary benefits of a design system is the ability to quic
 
 ## Who decide which component is implemented?
 
-We work strongly together with the Reservix UX/UI Team. If the component is in more than in one product the designers will research its use cases, after that we all will discussing the behaviour, the look and feel.
-Also we will looking up the technical possibilities - if it all fits the component will be implemented.
-The same applies to the improvement of a component.
+We worked on a process of how changes and additions are made to the Design System, you can have a look on our [Governance Process](../introduction/governance-process) and read through it.
 
 ## Why should I use this Design System?
 
@@ -35,8 +33,12 @@ The goal of Marigold is to build an easy and compelling to use platform, regardl
 
 The purpose of this Design System is to create a set of guidelines and components that are scalable and reusable, so that designers and developers can efficiently and comfortably develop Reservix products.
 
+All new products have to be build with the Design System.
+
 ## Can I contribute?
 
 If you work at Reservix and have a design related or technical question, you can head over to our dedicated [slack channel](https://reservix.slack.com/archives/C02727BNZ3J). We try to respond to everyone as quickly as we can and we're always happy to help.
 
+## I found a bug, how can I contact you?
+
 If you have a bug report or feature request you can visit our [github](https://github.com/marigold-ui/marigold) and write an issue. We have templates for feature requests, bugs and component updates.
diff --git a/docs/content/introduction/get-in-touch.mdx b/docs/content/resources/get-in-touch.mdx
similarity index 100%
rename from docs/content/introduction/get-in-touch.mdx
rename to docs/content/resources/get-in-touch.mdx
diff --git a/docs/lib/config.ts b/docs/lib/config.ts
index b5bb867263..6594bc741b 100644
--- a/docs/lib/config.ts
+++ b/docs/lib/config.ts
@@ -18,6 +18,10 @@ export const siteConfig = {
       name: 'Concepts',
       slug: 'concepts',
     },
+    {
+      name: 'Foundations',
+      slug: 'foundations',
+    },
     {
       name: 'Components',
       slug: 'components',
@@ -69,8 +73,8 @@ export const siteConfig = {
       slug: 'recipes',
     },
     {
-      name: 'Develop',
-      slug: 'develop',
+      name: 'Resources',
+      slug: 'resources',
     },
   ],
 } as const;

From 7ce1ca560a8a666346c5bfeed5581e8865b8cc41 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Wed, 11 Sep 2024 17:17:00 +0200
Subject: [PATCH 02/31] adjust recipes

---
 .../{ => form-recipes}/bookings-form.demo.tsx |  0
 .../{ => form-recipes}/form-recipes.mdx       |  0
 .../organization-search.demo.tsx              |  0
 .../multiselect-basic.demo.tsx                |  0
 .../multiselect-recipe.mdx                    |  0
 .../{ => navigation-recipes}/NavItem.tsx      |  0
 .../{ => navigation-recipes}/ReservixLogo.tsx |  0
 .../navigation-recipes.mdx                    |  0
 .../topnavigation.demo.tsx                    |  0
 docs/content/recipes/overview.mdx             | 79 +++++++++++++++++++
 .../core-table-print.demo.tsx                 |  0
 .../{ => table-recipes}/table-recipes.mdx     |  0
 12 files changed, 79 insertions(+)
 rename docs/content/recipes/{ => form-recipes}/bookings-form.demo.tsx (100%)
 rename docs/content/recipes/{ => form-recipes}/form-recipes.mdx (100%)
 rename docs/content/recipes/{ => form-recipes}/organization-search.demo.tsx (100%)
 rename docs/content/recipes/{ => multiselect-recipes}/multiselect-basic.demo.tsx (100%)
 rename docs/content/recipes/{ => multiselect-recipes}/multiselect-recipe.mdx (100%)
 rename docs/content/recipes/{ => navigation-recipes}/NavItem.tsx (100%)
 rename docs/content/recipes/{ => navigation-recipes}/ReservixLogo.tsx (100%)
 rename docs/content/recipes/{ => navigation-recipes}/navigation-recipes.mdx (100%)
 rename docs/content/recipes/{ => navigation-recipes}/topnavigation.demo.tsx (100%)
 create mode 100644 docs/content/recipes/overview.mdx
 rename docs/content/recipes/{ => table-recipes}/core-table-print.demo.tsx (100%)
 rename docs/content/recipes/{ => table-recipes}/table-recipes.mdx (100%)

diff --git a/docs/content/recipes/bookings-form.demo.tsx b/docs/content/recipes/form-recipes/bookings-form.demo.tsx
similarity index 100%
rename from docs/content/recipes/bookings-form.demo.tsx
rename to docs/content/recipes/form-recipes/bookings-form.demo.tsx
diff --git a/docs/content/recipes/form-recipes.mdx b/docs/content/recipes/form-recipes/form-recipes.mdx
similarity index 100%
rename from docs/content/recipes/form-recipes.mdx
rename to docs/content/recipes/form-recipes/form-recipes.mdx
diff --git a/docs/content/recipes/organization-search.demo.tsx b/docs/content/recipes/form-recipes/organization-search.demo.tsx
similarity index 100%
rename from docs/content/recipes/organization-search.demo.tsx
rename to docs/content/recipes/form-recipes/organization-search.demo.tsx
diff --git a/docs/content/recipes/multiselect-basic.demo.tsx b/docs/content/recipes/multiselect-recipes/multiselect-basic.demo.tsx
similarity index 100%
rename from docs/content/recipes/multiselect-basic.demo.tsx
rename to docs/content/recipes/multiselect-recipes/multiselect-basic.demo.tsx
diff --git a/docs/content/recipes/multiselect-recipe.mdx b/docs/content/recipes/multiselect-recipes/multiselect-recipe.mdx
similarity index 100%
rename from docs/content/recipes/multiselect-recipe.mdx
rename to docs/content/recipes/multiselect-recipes/multiselect-recipe.mdx
diff --git a/docs/content/recipes/NavItem.tsx b/docs/content/recipes/navigation-recipes/NavItem.tsx
similarity index 100%
rename from docs/content/recipes/NavItem.tsx
rename to docs/content/recipes/navigation-recipes/NavItem.tsx
diff --git a/docs/content/recipes/ReservixLogo.tsx b/docs/content/recipes/navigation-recipes/ReservixLogo.tsx
similarity index 100%
rename from docs/content/recipes/ReservixLogo.tsx
rename to docs/content/recipes/navigation-recipes/ReservixLogo.tsx
diff --git a/docs/content/recipes/navigation-recipes.mdx b/docs/content/recipes/navigation-recipes/navigation-recipes.mdx
similarity index 100%
rename from docs/content/recipes/navigation-recipes.mdx
rename to docs/content/recipes/navigation-recipes/navigation-recipes.mdx
diff --git a/docs/content/recipes/topnavigation.demo.tsx b/docs/content/recipes/navigation-recipes/topnavigation.demo.tsx
similarity index 100%
rename from docs/content/recipes/topnavigation.demo.tsx
rename to docs/content/recipes/navigation-recipes/topnavigation.demo.tsx
diff --git a/docs/content/recipes/overview.mdx b/docs/content/recipes/overview.mdx
new file mode 100644
index 0000000000..e0413f4d7a
--- /dev/null
+++ b/docs/content/recipes/overview.mdx
@@ -0,0 +1,79 @@
+---
+title: Overview
+caption: Have a look on predefined recipes
+order: 1
+---
+
+Recipes are specific compositions of design system components that are to be consistently used across a product, but aren’t agnostic enough to live in the design system.
+
+If you have also found a good recipe please send it to us so we can also provide these.
+
+<TeaserList
+  items={[
+    {
+      title: 'Form',
+      href: '/recipes/form-recipes',
+      caption: 'Copy pasteable forms.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M12 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
+          <path d="M18.375 2.625a2.121 2.121 0 113 3L12 15l-4 1 1-4z" />
+        </svg>
+      ),
+    },
+    {
+      title: 'Multiselect',
+      href: '/recipes/multiselect-recipes',
+      caption: 'A Multiselect component build with Tags and Combobox.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M3 17l2 2 4-4M3 7l2 2 4-4M13 6h8M13 12h8M13 18h8" />
+        </svg>
+      ),
+    },
+    {
+      title: 'Feedback Messages',
+      href: '/patterns/feedback-messages',
+      caption: 'Learn when to use which message.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={24}
+          height={24}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>
diff --git a/docs/content/recipes/core-table-print.demo.tsx b/docs/content/recipes/table-recipes/core-table-print.demo.tsx
similarity index 100%
rename from docs/content/recipes/core-table-print.demo.tsx
rename to docs/content/recipes/table-recipes/core-table-print.demo.tsx
diff --git a/docs/content/recipes/table-recipes.mdx b/docs/content/recipes/table-recipes/table-recipes.mdx
similarity index 100%
rename from docs/content/recipes/table-recipes.mdx
rename to docs/content/recipes/table-recipes/table-recipes.mdx

From 75e37fe243843ed6f9d95af708b547cc50452a47 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 09:36:19 +0200
Subject: [PATCH 03/31] add icons to overview

---
 docs/app/_components/SiteMenu.tsx             |  1 +
 .../design-principles.mdx                     |  2 +-
 .../design-token-guidelines.mdx               |  2 +-
 .../governance-principles.mdx                 |  2 +-
 .../governance-process.mdx                    |  2 +-
 docs/content/concepts/style-props.mdx         |  2 +-
 .../{ => validation}/validation-base.demo.tsx |  0
 .../validation-custom-message.demo.tsx        |  0
 .../validation-custom-validation.demo.tsx     |  0
 .../validation-realtime.demo.tsx              |  0
 .../validation-server-error.demo.tsx          |  0
 .../{ => validation}/validation-zod.demo.tsx  |  0
 .../concepts/{ => validation}/validation.mdx  |  2 +-
 .../foundations/{ => elevation}/elevation.mdx |  0
 .../{ => elevation}/surface-default.demo.tsx  |  0
 .../{ => elevation}/surface-overlay.demo.tsx  |  0
 .../{ => elevation}/surface-raised.demo.tsx   |  0
 .../{ => elevation}/surface-sunken.demo.tsx   |  0
 .../layouts}/concepts-layouts.demo.tsx        |  0
 .../layouts}/layouts.mdx                      |  2 +-
 docs/content/recipes/overview.mdx             | 40 ++++++++++++++-----
 21 files changed, 37 insertions(+), 18 deletions(-)
 rename docs/content/{introduction => concepts}/design-principles.mdx (99%)
 rename docs/content/{foundations => concepts}/design-token-guidelines.mdx (99%)
 rename docs/content/{introduction => concepts}/governance-principles.mdx (99%)
 rename docs/content/{introduction => concepts}/governance-process.mdx (99%)
 rename docs/content/concepts/{ => validation}/validation-base.demo.tsx (100%)
 rename docs/content/concepts/{ => validation}/validation-custom-message.demo.tsx (100%)
 rename docs/content/concepts/{ => validation}/validation-custom-validation.demo.tsx (100%)
 rename docs/content/concepts/{ => validation}/validation-realtime.demo.tsx (100%)
 rename docs/content/concepts/{ => validation}/validation-server-error.demo.tsx (100%)
 rename docs/content/concepts/{ => validation}/validation-zod.demo.tsx (100%)
 rename docs/content/concepts/{ => validation}/validation.mdx (99%)
 rename docs/content/foundations/{ => elevation}/elevation.mdx (100%)
 rename docs/content/foundations/{ => elevation}/surface-default.demo.tsx (100%)
 rename docs/content/foundations/{ => elevation}/surface-overlay.demo.tsx (100%)
 rename docs/content/foundations/{ => elevation}/surface-raised.demo.tsx (100%)
 rename docs/content/foundations/{ => elevation}/surface-sunken.demo.tsx (100%)
 rename docs/content/{concepts => foundations/layouts}/concepts-layouts.demo.tsx (100%)
 rename docs/content/{concepts => foundations/layouts}/layouts.mdx (99%)

diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx
index 42c872dfcd..73615cd39b 100644
--- a/docs/app/_components/SiteMenu.tsx
+++ b/docs/app/_components/SiteMenu.tsx
@@ -38,6 +38,7 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => {
     }
   });
 
+  console.log(items);
   return { name, slug, items };
 });
 
diff --git a/docs/content/introduction/design-principles.mdx b/docs/content/concepts/design-principles.mdx
similarity index 99%
rename from docs/content/introduction/design-principles.mdx
rename to docs/content/concepts/design-principles.mdx
index d2b6bc4270..b7ab559413 100644
--- a/docs/content/introduction/design-principles.mdx
+++ b/docs/content/concepts/design-principles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Design Principles
 caption: Guidelines for the creation of effective and user-friendly interfaces.
-order: 10
+order: 3
 ---
 
 Design principles guide the creation of cohesive, user-friendly software applications. They define and communicate key product characteristics to stakeholders, including clients, colleagues, and team members. By setting clear goals, design principles ensure that all decisions align, keeping the products in harmony and focused.
diff --git a/docs/content/foundations/design-token-guidelines.mdx b/docs/content/concepts/design-token-guidelines.mdx
similarity index 99%
rename from docs/content/foundations/design-token-guidelines.mdx
rename to docs/content/concepts/design-token-guidelines.mdx
index 02929516b5..667a7787f7 100644
--- a/docs/content/foundations/design-token-guidelines.mdx
+++ b/docs/content/concepts/design-token-guidelines.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tokens Guidelines
 caption: Learn about the structure and application of our design tokens
-order: 3
+order: 4
 ---
 
 On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem.
diff --git a/docs/content/introduction/governance-principles.mdx b/docs/content/concepts/governance-principles.mdx
similarity index 99%
rename from docs/content/introduction/governance-principles.mdx
rename to docs/content/concepts/governance-principles.mdx
index 4639c708d3..b5a5839d53 100644
--- a/docs/content/introduction/governance-principles.mdx
+++ b/docs/content/concepts/governance-principles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Governance Principles
 caption: Our governance values and principles on how we make decisions in the design system.
-order: 7
+order: 2
 ---
 
 “How does the design system team make decisions?”
diff --git a/docs/content/introduction/governance-process.mdx b/docs/content/concepts/governance-process.mdx
similarity index 99%
rename from docs/content/introduction/governance-process.mdx
rename to docs/content/concepts/governance-process.mdx
index 62aca372ed..fb30d0f7bd 100644
--- a/docs/content/introduction/governance-process.mdx
+++ b/docs/content/concepts/governance-process.mdx
@@ -1,7 +1,7 @@
 ---
 title: Governance Process
 caption: Making changes and additions to Marigold.
-order: 6
+order: 1
 ---
 
 Product teams are primarily focused on getting the job done. In their quest to achieve this, they sometimes need to take on design debt—improvising styles, crafting unique components, or even bypassing the design system entirely. To help teams avoid unnecessary debt, we've established a governance process that guides both the product teams and us on managing changes and additions within Marigold.
diff --git a/docs/content/concepts/style-props.mdx b/docs/content/concepts/style-props.mdx
index f679390c35..2f175e665c 100644
--- a/docs/content/concepts/style-props.mdx
+++ b/docs/content/concepts/style-props.mdx
@@ -1,7 +1,7 @@
 ---
 title: Style Props
 caption: Style props are a set of properties that can be used to apply custom styling to a component.
-order: 2
+order: 5
 ---
 
 Style props are a concept used in component to enable easy and consistent styling of components in React applications. They provide a convenient way to apply CSS styling directly to components using JSX syntax. Instead of writing traditional CSS classes or inline styles, you can use these "style props" to define the appearance and layout of your components.
diff --git a/docs/content/concepts/validation-base.demo.tsx b/docs/content/concepts/validation/validation-base.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation-base.demo.tsx
rename to docs/content/concepts/validation/validation-base.demo.tsx
diff --git a/docs/content/concepts/validation-custom-message.demo.tsx b/docs/content/concepts/validation/validation-custom-message.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation-custom-message.demo.tsx
rename to docs/content/concepts/validation/validation-custom-message.demo.tsx
diff --git a/docs/content/concepts/validation-custom-validation.demo.tsx b/docs/content/concepts/validation/validation-custom-validation.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation-custom-validation.demo.tsx
rename to docs/content/concepts/validation/validation-custom-validation.demo.tsx
diff --git a/docs/content/concepts/validation-realtime.demo.tsx b/docs/content/concepts/validation/validation-realtime.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation-realtime.demo.tsx
rename to docs/content/concepts/validation/validation-realtime.demo.tsx
diff --git a/docs/content/concepts/validation-server-error.demo.tsx b/docs/content/concepts/validation/validation-server-error.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation-server-error.demo.tsx
rename to docs/content/concepts/validation/validation-server-error.demo.tsx
diff --git a/docs/content/concepts/validation-zod.demo.tsx b/docs/content/concepts/validation/validation-zod.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation-zod.demo.tsx
rename to docs/content/concepts/validation/validation-zod.demo.tsx
diff --git a/docs/content/concepts/validation.mdx b/docs/content/concepts/validation/validation.mdx
similarity index 99%
rename from docs/content/concepts/validation.mdx
rename to docs/content/concepts/validation/validation.mdx
index f6b1b8db35..4e158d78f6 100644
--- a/docs/content/concepts/validation.mdx
+++ b/docs/content/concepts/validation/validation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Validation
 caption: Learn about how to use form validation with Marigold.
-order: 3
+order: 6
 ---
 
 HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like `required` and input types such as `email` or `number` to provide users with feedback.
diff --git a/docs/content/foundations/elevation.mdx b/docs/content/foundations/elevation/elevation.mdx
similarity index 100%
rename from docs/content/foundations/elevation.mdx
rename to docs/content/foundations/elevation/elevation.mdx
diff --git a/docs/content/foundations/surface-default.demo.tsx b/docs/content/foundations/elevation/surface-default.demo.tsx
similarity index 100%
rename from docs/content/foundations/surface-default.demo.tsx
rename to docs/content/foundations/elevation/surface-default.demo.tsx
diff --git a/docs/content/foundations/surface-overlay.demo.tsx b/docs/content/foundations/elevation/surface-overlay.demo.tsx
similarity index 100%
rename from docs/content/foundations/surface-overlay.demo.tsx
rename to docs/content/foundations/elevation/surface-overlay.demo.tsx
diff --git a/docs/content/foundations/surface-raised.demo.tsx b/docs/content/foundations/elevation/surface-raised.demo.tsx
similarity index 100%
rename from docs/content/foundations/surface-raised.demo.tsx
rename to docs/content/foundations/elevation/surface-raised.demo.tsx
diff --git a/docs/content/foundations/surface-sunken.demo.tsx b/docs/content/foundations/elevation/surface-sunken.demo.tsx
similarity index 100%
rename from docs/content/foundations/surface-sunken.demo.tsx
rename to docs/content/foundations/elevation/surface-sunken.demo.tsx
diff --git a/docs/content/concepts/concepts-layouts.demo.tsx b/docs/content/foundations/layouts/concepts-layouts.demo.tsx
similarity index 100%
rename from docs/content/concepts/concepts-layouts.demo.tsx
rename to docs/content/foundations/layouts/concepts-layouts.demo.tsx
diff --git a/docs/content/concepts/layouts.mdx b/docs/content/foundations/layouts/layouts.mdx
similarity index 99%
rename from docs/content/concepts/layouts.mdx
rename to docs/content/foundations/layouts/layouts.mdx
index 66c5a4d780..7183e20e3d 100644
--- a/docs/content/concepts/layouts.mdx
+++ b/docs/content/foundations/layouts/layouts.mdx
@@ -1,7 +1,7 @@
 ---
 title: Layouts
 caption: Learn about how layouting is handled in Marigold
-order: 1
+order: 3
 ---
 
 Having a comprehensive collection of reusable components for common tasks (like buttons, cards and form fields) is great but it's not enough to build a whole application. An essential part is missing: components to build layout for application pages.
diff --git a/docs/content/recipes/overview.mdx b/docs/content/recipes/overview.mdx
index e0413f4d7a..887986f135 100644
--- a/docs/content/recipes/overview.mdx
+++ b/docs/content/recipes/overview.mdx
@@ -4,9 +4,9 @@ caption: Have a look on predefined recipes
 order: 1
 ---
 
-Recipes are specific compositions of design system components that are to be consistently used across a product, but aren’t agnostic enough to live in the design system.
+Recipes are specific combinations of design system components, tailored for specific use cases within a product. These compositions ensure consistency and cohesion across the product experience, while addressing scenarios that require more flexibility than a standard, agnostic design system component offers.
 
-If you have also found a good recipe please send it to us so we can also provide these.
+If you've created or discovered a useful recipe, feel free to share it with us. We'd love to review and include it in our collection to benefit the broader community.
 
 <TeaserList
   items={[
@@ -52,25 +52,43 @@ If you have also found a good recipe please send it to us so we can also provide
       ),
     },
     {
-      title: 'Feedback Messages',
-      href: '/patterns/feedback-messages',
-      caption: 'Learn when to use which message.',
+      title: 'Core Table',
+      href: '/recipes/table-recipes',
+      caption: 'A typical core table.',
       icon: (
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width={24}
-          height={24}
+          fill="none"
           viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+          />
+        </svg>
+      ),
+    },
+    {
+      title: 'Navigation',
+      href: '/recipes/navigation-recipes',
+      caption: 'The navigation from b2b products.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
           fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
           stroke="currentColor"
-          strokeWidth={2}
-          strokeLinecap="round"
-          strokeLinejoin="round"
+          className="size-6"
         >
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
-            d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+            d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z"
           />
         </svg>
       ),

From 3a308329f03afcbe1b759a06b1f4239d6a967b7f Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 09:44:28 +0200
Subject: [PATCH 04/31] remove loog

---
 docs/app/_components/SectionNavigation.tsx | 2 --
 docs/app/_components/SiteMenu.tsx          | 1 -
 docs/content/recipes/overview.mdx          | 2 +-
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/docs/app/_components/SectionNavigation.tsx b/docs/app/_components/SectionNavigation.tsx
index b805c6b272..7713afc8a7 100644
--- a/docs/app/_components/SectionNavigation.tsx
+++ b/docs/app/_components/SectionNavigation.tsx
@@ -16,8 +16,6 @@ export const SectionNavigation = () => {
     section => section.name.toLocaleLowerCase() === formattedSectionName
   );
 
-  console.log(navigation.find(section => section.name.toLocaleLowerCase()));
-
   return (
     <nav className="flex flex-col gap-2">
       <p className="font-semibold">{currentSection?.name}</p>
diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx
index 73615cd39b..42c872dfcd 100644
--- a/docs/app/_components/SiteMenu.tsx
+++ b/docs/app/_components/SiteMenu.tsx
@@ -38,7 +38,6 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => {
     }
   });
 
-  console.log(items);
   return { name, slug, items };
 });
 
diff --git a/docs/content/recipes/overview.mdx b/docs/content/recipes/overview.mdx
index 887986f135..09c305f819 100644
--- a/docs/content/recipes/overview.mdx
+++ b/docs/content/recipes/overview.mdx
@@ -1,6 +1,6 @@
 ---
 title: Overview
-caption: Have a look on predefined recipes
+caption: Copy pastable combinations of components.
 order: 1
 ---
 

From 3e8176acfe55fc8e161ce484fa6886c7bb1327e4 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 10:57:42 +0200
Subject: [PATCH 05/31] add overview page to concepts and foundation

---
 docs/content/concepts/design-principles.mdx   |  2 +-
 .../concepts/design-token-guidelines.mdx      |  2 +-
 .../concepts/governance-principles.mdx        |  2 +-
 docs/content/concepts/governance-process.mdx  |  2 +-
 docs/content/concepts/overview.mdx            | 99 +++++++++++++++++++
 docs/content/concepts/style-props.mdx         |  2 +-
 docs/content/foundations/design-tokens.mdx    |  2 +-
 .../foundations/elevation/elevation.mdx       |  2 +-
 docs/content/foundations/icons.mdx            |  2 +-
 docs/content/foundations/layouts/layouts.mdx  |  2 +-
 docs/content/foundations/overview.mdx         | 54 ++++++++++
 11 files changed, 162 insertions(+), 9 deletions(-)
 create mode 100644 docs/content/concepts/overview.mdx
 create mode 100644 docs/content/foundations/overview.mdx

diff --git a/docs/content/concepts/design-principles.mdx b/docs/content/concepts/design-principles.mdx
index b7ab559413..ce3a6a076e 100644
--- a/docs/content/concepts/design-principles.mdx
+++ b/docs/content/concepts/design-principles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Design Principles
 caption: Guidelines for the creation of effective and user-friendly interfaces.
-order: 3
+order: 4
 ---
 
 Design principles guide the creation of cohesive, user-friendly software applications. They define and communicate key product characteristics to stakeholders, including clients, colleagues, and team members. By setting clear goals, design principles ensure that all decisions align, keeping the products in harmony and focused.
diff --git a/docs/content/concepts/design-token-guidelines.mdx b/docs/content/concepts/design-token-guidelines.mdx
index 667a7787f7..960806e124 100644
--- a/docs/content/concepts/design-token-guidelines.mdx
+++ b/docs/content/concepts/design-token-guidelines.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tokens Guidelines
 caption: Learn about the structure and application of our design tokens
-order: 4
+order: 5
 ---
 
 On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem.
diff --git a/docs/content/concepts/governance-principles.mdx b/docs/content/concepts/governance-principles.mdx
index b5a5839d53..aea6d732f6 100644
--- a/docs/content/concepts/governance-principles.mdx
+++ b/docs/content/concepts/governance-principles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Governance Principles
 caption: Our governance values and principles on how we make decisions in the design system.
-order: 2
+order: 3
 ---
 
 “How does the design system team make decisions?”
diff --git a/docs/content/concepts/governance-process.mdx b/docs/content/concepts/governance-process.mdx
index fb30d0f7bd..dba7e05042 100644
--- a/docs/content/concepts/governance-process.mdx
+++ b/docs/content/concepts/governance-process.mdx
@@ -1,7 +1,7 @@
 ---
 title: Governance Process
 caption: Making changes and additions to Marigold.
-order: 1
+order: 2
 ---
 
 Product teams are primarily focused on getting the job done. In their quest to achieve this, they sometimes need to take on design debt—improvising styles, crafting unique components, or even bypassing the design system entirely. To help teams avoid unnecessary debt, we've established a governance process that guides both the product teams and us on managing changes and additions within Marigold.
diff --git a/docs/content/concepts/overview.mdx b/docs/content/concepts/overview.mdx
new file mode 100644
index 0000000000..da2a00dccd
--- /dev/null
+++ b/docs/content/concepts/overview.mdx
@@ -0,0 +1,99 @@
+---
+title: Overview
+caption: About why things are done a certain way.
+order: 1
+---
+
+Concepts refer to the underlying principles, philosophies, and approaches that guide the design system. They are high-level ideas that shape how and why components, patterns, or design choices are made. Its focused on guiding the thinking behind design decisions.
+
+<TeaserList
+  items={[
+    {
+      title: 'Governance Process',
+      href: '/concepts/governance-process',
+      caption: 'The foundational layers of the UI.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
+      </svg>
+      ),
+    },
+    {
+      title: 'Governance Principles',
+      href: '/concepts/governance-principles',
+      caption: 'Design tokens are the foundational elements of our design system.',
+      icon: (
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
+    </svg>
+
+      ),
+    },
+    {
+      title: 'Design Principles',
+      href: '/concepts/design-principles',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z"
+          />
+        </svg>
+      ),
+    },
+    {
+      title: 'Token Guidelines',
+      href: '/concepts/design-token-guidelines',
+      caption: 'A list of all available icons.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" />
+</svg>
+
+      ),
+    },
+     {
+      title: 'Style Props',
+      href: '/concepts/style-props',
+      caption: 'A list of all available icons.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+      ),
+    },
+    {
+    title: 'Validation',
+    href: '/concepts/validation',
+    caption: 'Learn how to validate your forms.',
+    icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
+  />
+</svg>
+
+    ),
+
+},
+]} />
diff --git a/docs/content/concepts/style-props.mdx b/docs/content/concepts/style-props.mdx
index 2f175e665c..bf0ed5d1ab 100644
--- a/docs/content/concepts/style-props.mdx
+++ b/docs/content/concepts/style-props.mdx
@@ -1,7 +1,7 @@
 ---
 title: Style Props
 caption: Style props are a set of properties that can be used to apply custom styling to a component.
-order: 5
+order: 6
 ---
 
 Style props are a concept used in component to enable easy and consistent styling of components in React applications. They provide a convenient way to apply CSS styling directly to components using JSX syntax. Instead of writing traditional CSS classes or inline styles, you can use these "style props" to define the appearance and layout of your components.
diff --git a/docs/content/foundations/design-tokens.mdx b/docs/content/foundations/design-tokens.mdx
index aa013f9e71..72b952503d 100644
--- a/docs/content/foundations/design-tokens.mdx
+++ b/docs/content/foundations/design-tokens.mdx
@@ -1,7 +1,7 @@
 ---
 title: Design Tokens
 caption: Here are all design tokens for each theme listet.
-order: 2
+order: 3
 ---
 
 Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.
diff --git a/docs/content/foundations/elevation/elevation.mdx b/docs/content/foundations/elevation/elevation.mdx
index 7b9f0d7906..c6e77b6d11 100644
--- a/docs/content/foundations/elevation/elevation.mdx
+++ b/docs/content/foundations/elevation/elevation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Elevation
 caption: Learn how to use elevation with Marigold.
-order: 1
+order: 2
 ---
 
 Elevations serve as the foundational layers of the UI, providing a clean slate upon which various UI elements can be placed. It is important for creating visual hierarchy, depth, and clarity within a user interface. It guides user attention, improves usability, and enhances the overall user experience by providing feedback, organizing elements, and maintaining consistency in branding.
diff --git a/docs/content/foundations/icons.mdx b/docs/content/foundations/icons.mdx
index 576e06ffac..0822152544 100644
--- a/docs/content/foundations/icons.mdx
+++ b/docs/content/foundations/icons.mdx
@@ -1,7 +1,7 @@
 ---
 title: Icons
 caption: List of all icons from Marigold.
-order: 4
+order: 5
 ---
 
 Select a Marigold icon and use it as described [here](../../components/icon)
diff --git a/docs/content/foundations/layouts/layouts.mdx b/docs/content/foundations/layouts/layouts.mdx
index 7183e20e3d..9d249ee3bd 100644
--- a/docs/content/foundations/layouts/layouts.mdx
+++ b/docs/content/foundations/layouts/layouts.mdx
@@ -1,7 +1,7 @@
 ---
 title: Layouts
 caption: Learn about how layouting is handled in Marigold
-order: 3
+order: 4
 ---
 
 Having a comprehensive collection of reusable components for common tasks (like buttons, cards and form fields) is great but it's not enough to build a whole application. An essential part is missing: components to build layout for application pages.
diff --git a/docs/content/foundations/overview.mdx b/docs/content/foundations/overview.mdx
new file mode 100644
index 0000000000..55c89fa7bc
--- /dev/null
+++ b/docs/content/foundations/overview.mdx
@@ -0,0 +1,54 @@
+---
+title: Overview
+caption: About what is used to create the design.
+order: 1
+---
+
+Foundations are the essential building blocks or core elements of the design system that serve as the starting point for building interfaces. These are more concrete and are the technical or visual standards that components and patterns are built upon.
+
+<TeaserList
+  items={[
+    {
+      title: 'Elevation',
+      href: '/foundations/elevation',
+      caption: 'The foundational layers of the UI.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
+        </svg>
+      ),
+    },
+    {
+      title: 'Design Tokens',
+      href: '/foundations/design-tokens',
+      caption: 'Design tokens are the foundational elements of our design system.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+        </svg>
+      ),
+    },
+    {
+      title: 'Layouts',
+      href: '/foundations/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z" />
+        </svg>
+      ),
+    },
+    {
+      title: 'Icons',
+      href: '/foundations/icons',
+      caption: 'A list of all available icons.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
+        </svg>
+
+      ),
+    },
+
+]}
+/>

From e36eacad4753cf68f1138211c7004d19f9cffbac Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 11:28:11 +0200
Subject: [PATCH 06/31] add overview for resources

---
 docs/content/resources/overview.mdx | 43 +++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 docs/content/resources/overview.mdx

diff --git a/docs/content/resources/overview.mdx b/docs/content/resources/overview.mdx
new file mode 100644
index 0000000000..33b03c8879
--- /dev/null
+++ b/docs/content/resources/overview.mdx
@@ -0,0 +1,43 @@
+---
+title: Overview
+caption: Everything helpful.
+order: 1
+---
+
+Here you can find everything for support, contact info, FAQs, and internal guides. Whether you need help, answers to common questions, or detailed documentation, this section has everything to keep you informed and supported.
+
+<TeaserList
+  items={[
+    {
+      title: 'Get in Touch',
+      href: '/resources/get-in-touch',
+      caption: 'How to reach out to us.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+</svg>
+      ),
+    },
+    {
+      title: 'FAQ',
+      href: '/resources/faq',
+      caption: 'Most asked questions to the design sytem.',
+      icon: (
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
+</svg>
+      ),
+    },
+    {
+      title: 'Development Guidelines',
+      href: '/resources/component-guidelines',
+      caption: 'Internal guidelines on how to build components for the design dystem.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
+</svg>
+      ),
+    },
+
+]} />

From 4ac555eff5faad56a305e3550390aec85515a043 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 11:33:27 +0200
Subject: [PATCH 07/31] update overview page

---
 docs/content/resources/component-guidelines.mdx | 1 +
 docs/content/resources/faq.mdx                  | 2 +-
 docs/content/resources/get-in-touch.mdx         | 2 +-
 docs/content/resources/overview.mdx             | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/content/resources/component-guidelines.mdx b/docs/content/resources/component-guidelines.mdx
index 579a2163ed..709442bed5 100644
--- a/docs/content/resources/component-guidelines.mdx
+++ b/docs/content/resources/component-guidelines.mdx
@@ -1,6 +1,7 @@
 ---
 title: Development Guidelines
 caption: Guidelines for Developers on how to implement Marigold Components.
+order: 4
 ---
 
 ## Definitions
diff --git a/docs/content/resources/faq.mdx b/docs/content/resources/faq.mdx
index 23d7f0bc89..125a245fba 100644
--- a/docs/content/resources/faq.mdx
+++ b/docs/content/resources/faq.mdx
@@ -1,7 +1,7 @@
 ---
 title: FAQ
 caption: This pages aims to help with the most common questions and inquiries.
-order: 8
+order: 3
 ---
 
 ## What is a design system?
diff --git a/docs/content/resources/get-in-touch.mdx b/docs/content/resources/get-in-touch.mdx
index d1c56e21be..f0c7de5d33 100644
--- a/docs/content/resources/get-in-touch.mdx
+++ b/docs/content/resources/get-in-touch.mdx
@@ -1,7 +1,7 @@
 ---
 title: Get in touch
 caption: Here you can find out how to reach us, report bugs and ask for support!
-order: 5
+order: 2
 ---
 
 We receive many questions and inquiries regarding Marigold and our design system,and we're here to help. Whether you're stuck or seeking information, our aim is to support you every step of the way.
diff --git a/docs/content/resources/overview.mdx b/docs/content/resources/overview.mdx
index 33b03c8879..874886c3ee 100644
--- a/docs/content/resources/overview.mdx
+++ b/docs/content/resources/overview.mdx
@@ -4,7 +4,7 @@ caption: Everything helpful.
 order: 1
 ---
 
-Here you can find everything for support, contact info, FAQs, and internal guides. Whether you need help, answers to common questions, or detailed documentation, this section has everything to keep you informed and supported.
+Here you can find everything for support, contact info, FAQs, and internal guides. Whether you need help or answers to common questions, this section has everything to keep you informed and supported.
 
 <TeaserList
   items={[

From 46d8f6aa50bc7d619596e936da41c393a7f4c6a3 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 13:11:46 +0200
Subject: [PATCH 08/31] add overview page for components

---
 docs/content/components/overview.mdx | 142 +++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 docs/content/components/overview.mdx

diff --git a/docs/content/components/overview.mdx b/docs/content/components/overview.mdx
new file mode 100644
index 0000000000..db0aad6561
--- /dev/null
+++ b/docs/content/components/overview.mdx
@@ -0,0 +1,142 @@
+---
+title: Overview
+caption: Our Marigold Components.
+order: 1
+---
+
+Components are the reusable building blocks of our design system, designed to address specific interaction or UI needs. Each component is crafted to seamlessly integrate with others, forming patterns that deliver intuitive and cohesive user experiences.
+
+We seperate the components into different sections based on their use case. >ou can find those sections here.
+
+<TeaserList
+  items={[
+    {
+      title: 'Application',
+      href: '/components/application/provider',
+      caption: 'Components need for base setup.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4.867 19.125h.008v.008h-.008v-.008Z" />
+            </svg>
+
+      ),
+    },
+    {
+      title: 'Layout',
+      href: '/components/layout/aside',
+      caption: 'Components for layouting the pages.',
+      icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+  />
+</svg>
+
+      ),
+    },
+    {
+      title: 'Form',
+      href: '/components/form/autocomplete',
+      caption: 'Components which should be used in forms.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Collection',
+      href: '/components/collection/accordion',
+      caption: 'Components which uses collection elements.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Navigation',
+      href: '/components/navigation/tabs',
+      caption: 'Components which are used for navigating.',
+      icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Overlay',
+      href: '/components/overlay/dialog',
+      caption: 'Components which have an overlay.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+
+      ),
+    },
+        {
+      title: 'Content',
+      href: '/components/content/badge',
+      caption: 'Components which are used for displaying content.',
+      icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+  />
+</svg>
+
+      ),
+    },
+     {
+      title: 'Formatters',
+      href: '/components/formatters/dateformat',
+      caption: 'Components which help formatting specific data.',
+      icon: (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+
+  <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
+      ),
+    },
+     {
+      title: 'Hooks and Utils',
+      href: '/components/hooks-and-utils/cn',
+      caption: 'Hooks and helper functions to make you writing code easier.',
+      icon: (
+       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+  <path strokeLinecap="round" strokeLinejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
+</svg>
+
+      ),
+    },
+
+]} />

From 125c4d4b9f1ab588186a9709607bbbcaa332e882 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 13:13:05 +0200
Subject: [PATCH 09/31] typo

---
 docs/content/components/overview.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/components/overview.mdx b/docs/content/components/overview.mdx
index db0aad6561..2b331eed0d 100644
--- a/docs/content/components/overview.mdx
+++ b/docs/content/components/overview.mdx
@@ -6,7 +6,7 @@ order: 1
 
 Components are the reusable building blocks of our design system, designed to address specific interaction or UI needs. Each component is crafted to seamlessly integrate with others, forming patterns that deliver intuitive and cohesive user experiences.
 
-We seperate the components into different sections based on their use case. >ou can find those sections here.
+We seperate the components into different sections based on their use case. You can find those sections here.
 
 <TeaserList
   items={[

From 3dc649159b5e5a827ce14b2b389316d05aacf8b6 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 14:08:40 +0200
Subject: [PATCH 10/31] make link correctly and add better responsible nav

---
 docs/app/_components/SiteHeader.tsx           | 2 +-
 docs/app/_components/SiteNavigation.tsx       | 5 +----
 docs/content/components/overview.mdx          | 4 ++--
 docs/content/introduction/getting-started.mdx | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/docs/app/_components/SiteHeader.tsx b/docs/app/_components/SiteHeader.tsx
index 3c4ee8b57f..44cb7bfa18 100644
--- a/docs/app/_components/SiteHeader.tsx
+++ b/docs/app/_components/SiteHeader.tsx
@@ -14,7 +14,7 @@ export const SiteHeader = () => (
       <SiteLogo />
       <SiteNavigation />
     </div>
-    <div className="hidden md:block">
+    <div className="hidden lg:block">
       <Link href="https://marigold-rapp.vercel.app/" variant="cta">
         <span className="hidden 2xl:inline">Discover new </span>Tutorials!
       </Link>
diff --git a/docs/app/_components/SiteNavigation.tsx b/docs/app/_components/SiteNavigation.tsx
index d10df3a85d..82a08f1fde 100644
--- a/docs/app/_components/SiteNavigation.tsx
+++ b/docs/app/_components/SiteNavigation.tsx
@@ -10,10 +10,7 @@ export const SiteNavigation = () => {
   const sections = navigation.map(section => ({
     name: section.name,
     slug: section.slug,
-    link:
-      section.subsections.length > 0
-        ? section.subsections[0].links[0]
-        : section.links[0],
+    link: section.links[0],
   }));
 
   return (
diff --git a/docs/content/components/overview.mdx b/docs/content/components/overview.mdx
index 2b331eed0d..7aac2fa5d7 100644
--- a/docs/content/components/overview.mdx
+++ b/docs/content/components/overview.mdx
@@ -86,9 +86,9 @@ We seperate the components into different sections based on their use case. You
       href: '/components/overlay/dialog',
       caption: 'Components which have an overlay.',
       icon: (
-       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
 
-  <path strokeLinecap="round" strokeLinejoin="round" d="m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+  <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
 </svg>
 
       ),
diff --git a/docs/content/introduction/getting-started.mdx b/docs/content/introduction/getting-started.mdx
index 106c41ef1b..00d808b5bd 100644
--- a/docs/content/introduction/getting-started.mdx
+++ b/docs/content/introduction/getting-started.mdx
@@ -253,4 +253,4 @@ import '@fontsource-variable/inter';
 
 ## Next Steps
 
-Now that you've bootstrapped your app, you can dive into the documentation to [explore the available components](/components/application/provider) in detail. Additionally, you can read about our principles to understand the driving factors behind our decisions and the constraints associated with our approach.
+Now that you've bootstrapped your app, you can dive into the documentation to [explore the available components](/components/overview) in detail. Additionally, you can read about our principles to understand the driving factors behind our decisions and the constraints associated with our approach.

From 102057ecf3486d72b98e347aa06cf3ba15fe3ed2 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Thu, 12 Sep 2024 14:42:29 +0200
Subject: [PATCH 11/31] fix types in navigation

---
 docs/app/_components/Navigation.tsx | 31 ++++++++++++++++-------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/docs/app/_components/Navigation.tsx b/docs/app/_components/Navigation.tsx
index 569e938070..9beef3197d 100644
--- a/docs/app/_components/Navigation.tsx
+++ b/docs/app/_components/Navigation.tsx
@@ -29,7 +29,7 @@ interface NavigationSection {
 export const useNavigation = (): NavigationSection[] => {
   const navigation = siteConfig.navigation;
 
-  return navigation.map(({ name, slug, subsections = [] }) => {
+  return navigation.map(({ name, slug, subsections = [] }: any) => {
     // Section Page = has a section but NO subsection
     const sectionPages = allContentPages.filter(
       page => page.section === slug && !page.subsection
@@ -44,19 +44,22 @@ export const useNavigation = (): NavigationSection[] => {
         href: `/${page.slug}`,
         badge: page.badge,
       })),
-      subsections: subsections.map(subsection => ({
-        name: subsection.name,
-        links: allContentPages
-          .filter(
-            // Subsection Page = has a section AND a subsection
-            page => page.section === slug && page.subsection === subsection.slug
-          )
-          .map(page => ({
-            name: page.title,
-            href: `/${page.slug}`,
-            badge: page.badge,
-          })),
-      })),
+      subsections: subsections.map(
+        (subsection: { name: string; slug: string }) => ({
+          name: subsection.name,
+          links: allContentPages
+            .filter(
+              // Subsection Page = has a section AND a subsection
+              page =>
+                page.section === slug && page.subsection === subsection.slug
+            )
+            .map(page => ({
+              name: page.title,
+              href: `/${page.slug}`,
+              badge: page.badge,
+            })),
+        })
+      ),
     };
   });
 };

From 5ad30c2b93386fc7b2193c3154bdcb00d1fe05de Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:49:28 +0200
Subject: [PATCH 12/31] Create sweet-toys-shop.md

---
 .changeset/sweet-toys-shop.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/sweet-toys-shop.md

diff --git a/.changeset/sweet-toys-shop.md b/.changeset/sweet-toys-shop.md
new file mode 100644
index 0000000000..4eb942d6dc
--- /dev/null
+++ b/.changeset/sweet-toys-shop.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs[DST-519]: Clean up Marigold Docs/ Improve Nav

From e6231f973cc94572b1651b34e25c213da1ccebef Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Fri, 13 Sep 2024 15:59:43 +0200
Subject: [PATCH 13/31] update overview page

---
 docs/content/concepts/overview.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/content/concepts/overview.mdx b/docs/content/concepts/overview.mdx
index da2a00dccd..ab0eca9af9 100644
--- a/docs/content/concepts/overview.mdx
+++ b/docs/content/concepts/overview.mdx
@@ -11,7 +11,7 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
     {
       title: 'Governance Process',
       href: '/concepts/governance-process',
-      caption: 'The foundational layers of the UI.',
+      caption: 'Guide on how to make changes and additions in Marigold.',
       icon: (
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
         <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
@@ -21,7 +21,7 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
     {
       title: 'Governance Principles',
       href: '/concepts/governance-principles',
-      caption: 'Design tokens are the foundational elements of our design system.',
+      caption: 'Principles we follow for taking changes in Marigold.',
       icon: (
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
       <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
@@ -32,7 +32,7 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
     {
       title: 'Design Principles',
       href: '/concepts/design-principles',
-      caption: 'Learn how to build layouts.',
+      caption: 'Base for our design decisions.',
       icon: (
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -53,7 +53,7 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
     {
       title: 'Token Guidelines',
       href: '/concepts/design-token-guidelines',
-      caption: 'A list of all available icons.',
+      caption: 'How our tokens are structured.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
 
@@ -65,7 +65,7 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
      {
       title: 'Style Props',
       href: '/concepts/style-props',
-      caption: 'A list of all available icons.',
+      caption: 'Properties our components use.',
       icon: (
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
         <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />

From 9612453af398bc0c5bcb0234aa410cb8ed64b11e Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 16:05:27 +0200
Subject: [PATCH 14/31] adjust overview page for foundations

---
 docs/content/foundations/overview.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/foundations/overview.mdx b/docs/content/foundations/overview.mdx
index 55c89fa7bc..c84906f903 100644
--- a/docs/content/foundations/overview.mdx
+++ b/docs/content/foundations/overview.mdx
@@ -21,7 +21,7 @@ Foundations are the essential building blocks or core elements of the design sys
     {
       title: 'Design Tokens',
       href: '/foundations/design-tokens',
-      caption: 'Design tokens are the foundational elements of our design system.',
+      caption: 'Have an overview over our design tokens.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
         <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />

From 478e68efa989cb9c4447f3230ee9fe4a27d2e1b5 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 16:05:44 +0200
Subject: [PATCH 15/31] change order of foundations

---
 docs/content/foundations/design-tokens.mdx       | 2 +-
 docs/content/foundations/elevation/elevation.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/content/foundations/design-tokens.mdx b/docs/content/foundations/design-tokens.mdx
index 72b952503d..aa013f9e71 100644
--- a/docs/content/foundations/design-tokens.mdx
+++ b/docs/content/foundations/design-tokens.mdx
@@ -1,7 +1,7 @@
 ---
 title: Design Tokens
 caption: Here are all design tokens for each theme listet.
-order: 3
+order: 2
 ---
 
 Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.
diff --git a/docs/content/foundations/elevation/elevation.mdx b/docs/content/foundations/elevation/elevation.mdx
index c6e77b6d11..403445eaa0 100644
--- a/docs/content/foundations/elevation/elevation.mdx
+++ b/docs/content/foundations/elevation/elevation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Elevation
 caption: Learn how to use elevation with Marigold.
-order: 2
+order: 3
 ---
 
 Elevations serve as the foundational layers of the UI, providing a clean slate upon which various UI elements can be placed. It is important for creating visual hierarchy, depth, and clarity within a user interface. It guides user attention, improves usability, and enhances the overall user experience by providing feedback, organizing elements, and maintaining consistency in branding.

From b43ac3660747cf454a3a1c1501af59458d7f2d44 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 16:18:07 +0200
Subject: [PATCH 16/31] rename getting started to installation

---
 .../components/application/provider/provider.mdx   |  2 +-
 .../installation.mdx}                              |  2 +-
 docs/lib/config.ts                                 |  4 ++--
 docs/next.config.js                                | 14 --------------
 4 files changed, 4 insertions(+), 18 deletions(-)
 rename docs/content/{introduction/getting-started.mdx => getting-started/installation.mdx} (99%)

diff --git a/docs/content/components/application/provider/provider.mdx b/docs/content/components/application/provider/provider.mdx
index c9b4729668..3f222b1bf8 100644
--- a/docs/content/components/application/provider/provider.mdx
+++ b/docs/content/components/application/provider/provider.mdx
@@ -7,7 +7,7 @@ caption: Provider which applies the theme.
 Without the `<MarigoldProvider>` you can't get the theme on your components. So it is necessary to use.
 
 You just have to wrap your components around the `<MarigoldProvider>` to make it work.
-If you want to get more information about the setup go to [Getting Started](/introduction/getting-started/#bootstrapping).
+If you want to get more information about the setup go to [Getting Started](/getting-started/installation/#bootstrapping).
 
 ```tsx
 import { Button, MarigoldProvider } from '@marigold/components';
diff --git a/docs/content/introduction/getting-started.mdx b/docs/content/getting-started/installation.mdx
similarity index 99%
rename from docs/content/introduction/getting-started.mdx
rename to docs/content/getting-started/installation.mdx
index 00d808b5bd..091b2deaaa 100644
--- a/docs/content/introduction/getting-started.mdx
+++ b/docs/content/getting-started/installation.mdx
@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: Installation
 caption: How to setup and get started with Marigold.
 order: 1
 ---
diff --git a/docs/lib/config.ts b/docs/lib/config.ts
index 6594bc741b..e5c35070f9 100644
--- a/docs/lib/config.ts
+++ b/docs/lib/config.ts
@@ -11,8 +11,8 @@ export const siteConfig = {
   defaultTheme: 'core',
   navigation: [
     {
-      name: 'Introduction',
-      slug: 'introduction',
+      name: 'Getting Started',
+      slug: 'getting-started',
     },
     {
       name: 'Concepts',
diff --git a/docs/next.config.js b/docs/next.config.js
index 10548fb96d..c7573454b7 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -21,20 +21,6 @@ const nextConfig = {
   env: {
     version: pkg.version,
   },
-  async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/introduction/getting-started',
-        permanent: true,
-      },
-      {
-        source: '/components',
-        destination: '/components/provider',
-        permanent: true,
-      },
-    ];
-  },
 };
 
 module.exports = withContentlayer(nextConfig);

From e416db659c32572b1dd9fba5153823e4adb76959 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 16:36:52 +0200
Subject: [PATCH 17/31] moving stuff around

---
 docs/content/foundations/overview.mdx         | 34 ++++++++++
 .../{concepts => foundations}/style-props.mdx |  0
 .../validation/validation-base.demo.tsx       |  0
 .../validation-custom-message.demo.tsx        |  0
 .../validation-custom-validation.demo.tsx     |  0
 .../validation/validation-realtime.demo.tsx   |  0
 .../validation-server-error.demo.tsx          |  0
 .../validation/validation-zod.demo.tsx        |  0
 .../validation/validation.mdx                 |  0
 .../design-principles.mdx                     |  0
 .../design-token-guidelines.mdx               |  2 +-
 .../governance-principles.mdx                 |  2 +-
 .../governance-process.mdx                    |  2 +-
 .../overview.mdx                              | 66 +++++++------------
 14 files changed, 59 insertions(+), 47 deletions(-)
 rename docs/content/{concepts => foundations}/style-props.mdx (100%)
 rename docs/content/{concepts => foundations}/validation/validation-base.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/validation/validation-custom-message.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/validation/validation-custom-validation.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/validation/validation-realtime.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/validation/validation-server-error.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/validation/validation-zod.demo.tsx (100%)
 rename docs/content/{concepts => foundations}/validation/validation.mdx (100%)
 rename docs/content/{concepts => getting-started}/design-principles.mdx (100%)
 rename docs/content/{concepts => getting-started}/design-token-guidelines.mdx (99%)
 rename docs/content/{concepts => getting-started}/governance-principles.mdx (99%)
 rename docs/content/{concepts => getting-started}/governance-process.mdx (99%)
 rename docs/content/{concepts => getting-started}/overview.mdx (67%)

diff --git a/docs/content/foundations/overview.mdx b/docs/content/foundations/overview.mdx
index c84906f903..6c45c43fdd 100644
--- a/docs/content/foundations/overview.mdx
+++ b/docs/content/foundations/overview.mdx
@@ -49,6 +49,40 @@ Foundations are the essential building blocks or core elements of the design sys
 
       ),
     },
+     {
+      title: 'Style Props',
+      href: '/foundations/style-props',
+      caption: 'Properties our components use.',
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+      ),
+    },
+    {
+    title: 'Validation',
+    href: '/foundations/validation',
+    caption: 'Learn how to validate your forms.',
+    icon: (
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  strokeWidth={1.5}
+  stroke="currentColor"
+  className="size-6"
+>
+  <path
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
+  />
+</svg>
+
+    ),
+
+},
 
 ]}
 />
diff --git a/docs/content/concepts/style-props.mdx b/docs/content/foundations/style-props.mdx
similarity index 100%
rename from docs/content/concepts/style-props.mdx
rename to docs/content/foundations/style-props.mdx
diff --git a/docs/content/concepts/validation/validation-base.demo.tsx b/docs/content/foundations/validation/validation-base.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation/validation-base.demo.tsx
rename to docs/content/foundations/validation/validation-base.demo.tsx
diff --git a/docs/content/concepts/validation/validation-custom-message.demo.tsx b/docs/content/foundations/validation/validation-custom-message.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation/validation-custom-message.demo.tsx
rename to docs/content/foundations/validation/validation-custom-message.demo.tsx
diff --git a/docs/content/concepts/validation/validation-custom-validation.demo.tsx b/docs/content/foundations/validation/validation-custom-validation.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation/validation-custom-validation.demo.tsx
rename to docs/content/foundations/validation/validation-custom-validation.demo.tsx
diff --git a/docs/content/concepts/validation/validation-realtime.demo.tsx b/docs/content/foundations/validation/validation-realtime.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation/validation-realtime.demo.tsx
rename to docs/content/foundations/validation/validation-realtime.demo.tsx
diff --git a/docs/content/concepts/validation/validation-server-error.demo.tsx b/docs/content/foundations/validation/validation-server-error.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation/validation-server-error.demo.tsx
rename to docs/content/foundations/validation/validation-server-error.demo.tsx
diff --git a/docs/content/concepts/validation/validation-zod.demo.tsx b/docs/content/foundations/validation/validation-zod.demo.tsx
similarity index 100%
rename from docs/content/concepts/validation/validation-zod.demo.tsx
rename to docs/content/foundations/validation/validation-zod.demo.tsx
diff --git a/docs/content/concepts/validation/validation.mdx b/docs/content/foundations/validation/validation.mdx
similarity index 100%
rename from docs/content/concepts/validation/validation.mdx
rename to docs/content/foundations/validation/validation.mdx
diff --git a/docs/content/concepts/design-principles.mdx b/docs/content/getting-started/design-principles.mdx
similarity index 100%
rename from docs/content/concepts/design-principles.mdx
rename to docs/content/getting-started/design-principles.mdx
diff --git a/docs/content/concepts/design-token-guidelines.mdx b/docs/content/getting-started/design-token-guidelines.mdx
similarity index 99%
rename from docs/content/concepts/design-token-guidelines.mdx
rename to docs/content/getting-started/design-token-guidelines.mdx
index 960806e124..02929516b5 100644
--- a/docs/content/concepts/design-token-guidelines.mdx
+++ b/docs/content/getting-started/design-token-guidelines.mdx
@@ -1,7 +1,7 @@
 ---
 title: Tokens Guidelines
 caption: Learn about the structure and application of our design tokens
-order: 5
+order: 3
 ---
 
 On this page, you'll discover detailed specifications for design tokens — the foundational elements that unify the visual language of your brand or products. Explore how design tokens are constructed and find information on where each token is applied within the design ecosystem.
diff --git a/docs/content/concepts/governance-principles.mdx b/docs/content/getting-started/governance-principles.mdx
similarity index 99%
rename from docs/content/concepts/governance-principles.mdx
rename to docs/content/getting-started/governance-principles.mdx
index aea6d732f6..c40a180b79 100644
--- a/docs/content/concepts/governance-principles.mdx
+++ b/docs/content/getting-started/governance-principles.mdx
@@ -1,7 +1,7 @@
 ---
 title: Governance Principles
 caption: Our governance values and principles on how we make decisions in the design system.
-order: 3
+order: 6
 ---
 
 “How does the design system team make decisions?”
diff --git a/docs/content/concepts/governance-process.mdx b/docs/content/getting-started/governance-process.mdx
similarity index 99%
rename from docs/content/concepts/governance-process.mdx
rename to docs/content/getting-started/governance-process.mdx
index dba7e05042..4be786c1f2 100644
--- a/docs/content/concepts/governance-process.mdx
+++ b/docs/content/getting-started/governance-process.mdx
@@ -1,7 +1,7 @@
 ---
 title: Governance Process
 caption: Making changes and additions to Marigold.
-order: 2
+order: 5
 ---
 
 Product teams are primarily focused on getting the job done. In their quest to achieve this, they sometimes need to take on design debt—improvising styles, crafting unique components, or even bypassing the design system entirely. To help teams avoid unnecessary debt, we've established a governance process that guides both the product teams and us on managing changes and additions within Marigold.
diff --git a/docs/content/concepts/overview.mdx b/docs/content/getting-started/overview.mdx
similarity index 67%
rename from docs/content/concepts/overview.mdx
rename to docs/content/getting-started/overview.mdx
index ab0eca9af9..b02aab5040 100644
--- a/docs/content/concepts/overview.mdx
+++ b/docs/content/getting-started/overview.mdx
@@ -1,37 +1,27 @@
 ---
 title: Overview
-caption: About why things are done a certain way.
+caption: First steps into the design system.
 order: 1
 ---
 
-Concepts refer to the underlying principles, philosophies, and approaches that guide the design system. They are high-level ideas that shape how and why components, patterns, or design choices are made. Its focused on guiding the thinking behind design decisions.
+Here you will find everything you need to know to get started, alongside installation instructions and concepts relating to the underlying principles, philosophies and approaches that guide the design system.
 
 <TeaserList
   items={[
-    {
-      title: 'Governance Process',
-      href: '/concepts/governance-process',
-      caption: 'Guide on how to make changes and additions in Marigold.',
+     {
+      title: 'Installation',
+      href: '/getting-started/installation',
+      caption: 'Guide for installing Marigold on your project.',
       icon: (
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
         <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
       </svg>
       ),
     },
-    {
-      title: 'Governance Principles',
-      href: '/concepts/governance-principles',
-      caption: 'Principles we follow for taking changes in Marigold.',
-      icon: (
-     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
-    </svg>
-
-      ),
-    },
+  
     {
       title: 'Design Principles',
-      href: '/concepts/design-principles',
+      href: '/getting-started/design-principles',
       caption: 'Base for our design decisions.',
       icon: (
         <svg
@@ -52,7 +42,7 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
     },
     {
       title: 'Token Guidelines',
-      href: '/concepts/design-token-guidelines',
+      href: '/getting-started/design-token-guidelines',
       caption: 'How our tokens are structured.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
@@ -62,38 +52,26 @@ Concepts refer to the underlying principles, philosophies, and approaches that g
 
       ),
     },
-     {
-      title: 'Style Props',
-      href: '/concepts/style-props',
-      caption: 'Properties our components use.',
+       {
+      title: 'Governance Process',
+      href: '/getting-started/governance-process',
+      caption: 'Guide on how to make changes and additions in Marigold.',
       icon: (
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
       </svg>
       ),
     },
     {
-    title: 'Validation',
-    href: '/concepts/validation',
-    caption: 'Learn how to validate your forms.',
-    icon: (
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  fill="none"
-  viewBox="0 0 24 24"
-  strokeWidth={1.5}
-  stroke="currentColor"
-  className="size-6"
->
-  <path
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"
-  />
-</svg>
+      title: 'Governance Principles',
+      href: '/getting-started/governance-principles',
+      caption: 'Principles we follow for taking changes in Marigold.',
+      icon: (
+     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
+    </svg>
 
-    ),
+      ),
 
 },
 ]} />

From daec023aee301f24dde200e335082ef1578d50cb Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 16:37:11 +0200
Subject: [PATCH 18/31] update installation

---
 docs/content/getting-started/installation.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/getting-started/installation.mdx b/docs/content/getting-started/installation.mdx
index 091b2deaaa..017353f8e8 100644
--- a/docs/content/getting-started/installation.mdx
+++ b/docs/content/getting-started/installation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Installation
 caption: How to setup and get started with Marigold.
-order: 1
+order: 2
 ---
 
 To integrate Marigold into your React app, follow the steps outlined below. Marigold provides a wide range of pre-designed UI components. However, Marigold's components come with no styling by default. To ensure a perfect fit with your product's appearance, you must also install one of the predefined themes.

From adff0b23db962cb187a5e76da2db2b13a8233021 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:02:25 +0200
Subject: [PATCH 19/31] better icon and  remove concepts

---
 docs/content/getting-started/overview.mdx | 7 ++++---
 docs/lib/config.ts                        | 4 ----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/docs/content/getting-started/overview.mdx b/docs/content/getting-started/overview.mdx
index b02aab5040..49db59ae9d 100644
--- a/docs/content/getting-started/overview.mdx
+++ b/docs/content/getting-started/overview.mdx
@@ -14,11 +14,12 @@ Here you will find everything you need to know to get started, alongside install
       caption: 'Guide for installing Marigold on your project.',
       icon: (
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
-      </svg>
+  <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
+</svg>
+
       ),
     },
-  
+
     {
       title: 'Design Principles',
       href: '/getting-started/design-principles',
diff --git a/docs/lib/config.ts b/docs/lib/config.ts
index e5c35070f9..2b2a2d732a 100644
--- a/docs/lib/config.ts
+++ b/docs/lib/config.ts
@@ -14,10 +14,6 @@ export const siteConfig = {
       name: 'Getting Started',
       slug: 'getting-started',
     },
-    {
-      name: 'Concepts',
-      slug: 'concepts',
-    },
     {
       name: 'Foundations',
       slug: 'foundations',

From 3bb242ddcad247390e66c7aa03748f9d730fb2d3 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:27:25 +0200
Subject: [PATCH 20/31] fix type error in navigation

---
 docs/app/_components/Navigation.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/app/_components/Navigation.tsx b/docs/app/_components/Navigation.tsx
index 9beef3197d..adc4f4929b 100644
--- a/docs/app/_components/Navigation.tsx
+++ b/docs/app/_components/Navigation.tsx
@@ -17,19 +17,19 @@ interface NavigationLink {
 
 interface NavigationSubsection {
   name: string;
-  links: NavigationLink[];
+  links?: NavigationLink[];
 }
 interface NavigationSection {
   name: string;
-  slug: string;
+  slug?: string;
   links: NavigationLink[];
-  subsections: NavigationSubsection[];
+  subsections?: NavigationSubsection[];
 }
 
 export const useNavigation = (): NavigationSection[] => {
-  const navigation = siteConfig.navigation;
+  const navigation = [...siteConfig.navigation] as NavigationSection[];
 
-  return navigation.map(({ name, slug, subsections = [] }: any) => {
+  return navigation.map(({ name, slug, subsections = [] }) => {
     // Section Page = has a section but NO subsection
     const sectionPages = allContentPages.filter(
       page => page.section === slug && !page.subsection
@@ -82,7 +82,7 @@ export const Navigation = ({ onClick }: NavigationProps) => {
         <div key={section.name} className="flex flex-col gap-2">
           <div className="font-semibold">{section.name}</div>
           <div className="border-secondary-300 ml-0.5 flex flex-col border-l">
-            {section.links.map(({ name, href, badge }) => (
+            {section?.links.map(({ name, href, badge }) => (
               <NavLink
                 className="flex items-center gap-4"
                 key={href}
@@ -102,7 +102,7 @@ export const Navigation = ({ onClick }: NavigationProps) => {
                   {name}
                 </div>
                 <div className="border-secondary-300 ml-0.5 flex flex-col border-l">
-                  {links.map(({ name, href, badge }) => (
+                  {links?.map(({ name, href, badge }) => (
                     <div key={href}>
                       <NavLink
                         className="flex items-center gap-4"

From 83366768c20206d83ee284aeca8f587d0666e640 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:28:05 +0200
Subject: [PATCH 21/31] changeback

---
 docs/app/_components/Navigation.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/app/_components/Navigation.tsx b/docs/app/_components/Navigation.tsx
index adc4f4929b..495bdcd60c 100644
--- a/docs/app/_components/Navigation.tsx
+++ b/docs/app/_components/Navigation.tsx
@@ -21,9 +21,9 @@ interface NavigationSubsection {
 }
 interface NavigationSection {
   name: string;
-  slug?: string;
+  slug: string;
   links: NavigationLink[];
-  subsections?: NavigationSubsection[];
+  subsections: NavigationSubsection[];
 }
 
 export const useNavigation = (): NavigationSection[] => {
@@ -82,7 +82,7 @@ export const Navigation = ({ onClick }: NavigationProps) => {
         <div key={section.name} className="flex flex-col gap-2">
           <div className="font-semibold">{section.name}</div>
           <div className="border-secondary-300 ml-0.5 flex flex-col border-l">
-            {section?.links.map(({ name, href, badge }) => (
+            {section.links.map(({ name, href, badge }) => (
               <NavLink
                 className="flex items-center gap-4"
                 key={href}

From 72420bc8ea6cd92d4332a91a5c57858b64387cad Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:31:06 +0200
Subject: [PATCH 22/31] upsi

---
 docs/next.config.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/docs/next.config.js b/docs/next.config.js
index c7573454b7..b027e8f7b1 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -21,6 +21,15 @@ const nextConfig = {
   env: {
     version: pkg.version,
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/getting-started/overview',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = withContentlayer(nextConfig);

From 2d3b2b5ee456da14bf9cdddaee6f530ee31dedbd Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:34:52 +0200
Subject: [PATCH 23/31] uodate concept links

---
 docs/content/components/content/icon/icon.mdx               | 6 +++---
 .../components/content/section-message/section-message.mdx  | 6 +++---
 docs/content/components/form/form/form.mdx                  | 6 +++---
 docs/content/components/layout/inline/inline.mdx            | 4 ++--
 docs/content/components/layout/split/split.mdx              | 2 +-
 docs/content/components/layout/stack/stack.mdx              | 4 ++--
 docs/content/patterns/building-forms/building-forms.mdx     | 2 +-
 .../patterns/feedback-messages/feedback-messages.mdx        | 6 +++---
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/docs/content/components/content/icon/icon.mdx b/docs/content/components/content/icon/icon.mdx
index 15de001328..cf2cea6afe 100644
--- a/docs/content/components/content/icon/icon.mdx
+++ b/docs/content/components/content/icon/icon.mdx
@@ -3,13 +3,13 @@ title: Icon
 caption: Component to render Icons.
 ---
 
-On this page you can learn how [Marigold Icons](/concepts/icons/) should be used.
+On this page you can learn how [Marigold Icons](/foundations/icons/) should be used.
 Icons itself can be used to improve visual interest and get users attention.
 
 The size of the icon can be change via the `size` prop. The default size is `24px`.
 The color of the icon refers to the property [`currentcolor`](https://www.w3schools.com/colors/colors_currentcolor.asp).
 
-For a full list of the available Icons go to the [Marigold Icons](/concepts/icons/).
+For a full list of the available Icons go to the [Marigold Icons](/foundations/icons/).
 
 ## Import
 
@@ -33,7 +33,7 @@ To import a specific component you just have to use the name of the icon directl
 import { DesignTicket } from '@marigold/icons';
 ```
 
-Alternatively you can go to [Marigold Icons](/concepts/icons/) and click on an Icon in the list to copy them as `<svg>` Element.
+Alternatively you can go to [Marigold Icons](/foundations/icons/) and click on an Icon in the list to copy them as `<svg>` Element.
 
 ## Props
 
diff --git a/docs/content/components/content/section-message/section-message.mdx b/docs/content/components/content/section-message/section-message.mdx
index a28db0fe8a..bd22b1c592 100644
--- a/docs/content/components/content/section-message/section-message.mdx
+++ b/docs/content/components/content/section-message/section-message.mdx
@@ -39,18 +39,18 @@ import { SectionMessage } from '@marigold/components';
 
 ### Info Section Message
 
-This is the default info `<SectionMessage>`. The color is in a blue tone and contains the [`<Info>`](/concepts/icons/#info) icon.
+This is the default info `<SectionMessage>`. The color is in a blue tone and contains the [`<Info>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-info.demo.tsx" />
 
 ### Warning Section Message
 
-Here you can see the warning `<SectionMessage>`. The color is in a yellow tone and contains the[`<Notification>`](/concepts/icons/#info) icon.
+Here you can see the warning `<SectionMessage>`. The color is in a yellow tone and contains the[`<Notification>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-warn.demo.tsx" />
 
 ### Error Section Message
 
-The error `<SectionMessage>` is colored in a red tone and contains the [`<Exclamation>`](/concepts/icons/#info) icon.
+The error `<SectionMessage>` is colored in a red tone and contains the [`<Exclamation>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-error.demo.tsx" />
diff --git a/docs/content/components/form/form/form.mdx b/docs/content/components/form/form/form.mdx
index b2a5f328ba..ce5be40524 100644
--- a/docs/content/components/form/form/form.mdx
+++ b/docs/content/components/form/form/form.mdx
@@ -5,7 +5,7 @@ caption: Wrap your fields to submit user data and enable input validation.
 
 The `<Form>` component acts as a container for a set of fields, enabling data transmission to a server. It operates like a standard HTML form, initiating either a request based on the specified `method` attribute.
 
-Additionally, the `<Form>` allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the [Validation](/concepts/validation) guide to learn more about form validation.
+Additionally, the `<Form>` allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the [Validation](/foundations/validation) guide to learn more about form validation.
 
 ## Import
 
@@ -41,7 +41,7 @@ The `<Form>` component handles passed errors, typically received from a server a
 
 <ComponentDemo file="./form-validation-errors.demo.tsx" />
 
-For more information about form validation, see the [Validation](/concepts/validation) guide.
+For more information about form validation, see the [Validation](/foundations/validation) guide.
 
 ### Focus Management
 
@@ -54,6 +54,6 @@ As you can see in the previous server errors example, when a user submits a form
 <SectionMessage type="info">
   <SectionMessage.Title>Want more?!</SectionMessage.Title>
   <SectionMessage.Content>
- You can find more examples and usages of the `<Form>` component on the [Validation](/concepts/validation) page and in the [Forms](/recipes/form-recipes) recipes.
+ You can find more examples and usages of the `<Form>` component on the [Validation](/foundations/validation) page and in the [Forms](/recipes/form-recipes) recipes.
   </SectionMessage.Content>
 </SectionMessage>
diff --git a/docs/content/components/layout/inline/inline.mdx b/docs/content/components/layout/inline/inline.mdx
index de56e413dd..8e765ec32c 100644
--- a/docs/content/components/layout/inline/inline.mdx
+++ b/docs/content/components/layout/inline/inline.mdx
@@ -6,7 +6,7 @@ badge: updated
 
 The `<Inline>` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). It aligns its content horizontally in a row and automatically wraps to a new line when there isn't enough space on the screen.
 
-Use the inline component in combination with other layout components to easily [create customized layouts](../../concepts/layouts).
+Use the inline component in combination with other layout components to easily [create customized layouts](../../foundations/layouts).
 
 ## Usage
 
@@ -51,7 +51,7 @@ For horizontally alignment you can use the `alignX` prop.
   items={[
         {
       title: 'Building layouts',
-      href: '../../concepts/layouts',
+      href: '../../foundations/layouts',
       caption: 'Learn how to build layouts.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
diff --git a/docs/content/components/layout/split/split.mdx b/docs/content/components/layout/split/split.mdx
index b3da0f5959..643154526e 100644
--- a/docs/content/components/layout/split/split.mdx
+++ b/docs/content/components/layout/split/split.mdx
@@ -40,7 +40,7 @@ What applies to the inline is also possible with the stack component. You have t
   items={[
     {
       title: 'Building layouts',
-      href: '../../concepts/layouts',
+      href: '../../foundations/layouts',
       caption: 'Learn how to build layouts.',
       icon: (
         <svg
diff --git a/docs/content/components/layout/stack/stack.mdx b/docs/content/components/layout/stack/stack.mdx
index ea1fd17618..c4196956f3 100644
--- a/docs/content/components/layout/stack/stack.mdx
+++ b/docs/content/components/layout/stack/stack.mdx
@@ -6,7 +6,7 @@ badge: updated
 
 The `<Stack>` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). The stack is basically a flexbox column that acts as a container that aligns its children vertically in new lines. The component should be used wherever you need to arrange elements stacked on top of each other.
 
-Use the stack component in combination with other layout components to easily [create customized layouts](../../concepts/layouts).
+Use the stack component in combination with other layout components to easily [create customized layouts](../../foundations/layouts).
 
 ## Usage
 
@@ -59,7 +59,7 @@ The following example shows how stacks can be nested within each other. You see
   items={[
     {
       title: 'Building layouts',
-      href: '../../concepts/layouts',
+      href: '../../foundations/layouts',
       caption: 'Learn how to build layouts.',
       icon: (
         <svg
diff --git a/docs/content/patterns/building-forms/building-forms.mdx b/docs/content/patterns/building-forms/building-forms.mdx
index d2661dcccb..b2bac0a5fc 100644
--- a/docs/content/patterns/building-forms/building-forms.mdx
+++ b/docs/content/patterns/building-forms/building-forms.mdx
@@ -70,7 +70,7 @@ When the state or props change, React will automatically re-render the component
 
 ## Interactive Forms
 
-Interactive forms can have several features like error handling, [validation](/concepts/validation), real-time feedback (password-strength indicator), logic (hide fields if a several field is checked etc.) or autocomplete.
+Interactive forms can have several features like error handling, [validation](/foundations/validation), real-time feedback (password-strength indicator), logic (hide fields if a several field is checked etc.) or autocomplete.
 All these features help to make interactive fields more user friendly and more efficient.
 
 ### Error Handling
diff --git a/docs/content/patterns/feedback-messages/feedback-messages.mdx b/docs/content/patterns/feedback-messages/feedback-messages.mdx
index d8a1c59aec..960db1dd3f 100644
--- a/docs/content/patterns/feedback-messages/feedback-messages.mdx
+++ b/docs/content/patterns/feedback-messages/feedback-messages.mdx
@@ -45,7 +45,7 @@ You might send a system-generated message when:
 Don’t use messages when the information does not have a significant impact on the user’s current task or overall experience, or when the same information can be communicated in a less obtrusive way. For example:
 
 - To draw attention to a new element or piece of content, you can use a [badge](/components/content/badge).
-- To draw attention to the status of just one UI element, you can use an [icon](/concepts/icon) with a [tooltip](/components/overlay/tooltip) for short, non-essential supporting information. (Tooltips have lower accessibility and usability across device types than messages, so do not use them for critical information.)
+- To draw attention to the status of just one UI element, you can use an [icon](/foundations/icon) with a [tooltip](/components/overlay/tooltip) for short, non-essential supporting information. (Tooltips have lower accessibility and usability across device types than messages, so do not use them for critical information.)
 - Messages that describe permanent, non-resolvable aspects or features of a page may be better communicated through headings, description text, or information architecture.
 
 ## Message Statuses
@@ -159,7 +159,7 @@ It is used to provide feedback about a user’s input, typically as part of a fo
 
 <ComponentDemo file="./inputfield-validation.demo.tsx" />
 
-A custom-written validation message is not always required. Browsers come with their own default validation error messages that can be used in place of a customized one. See more on the [Validation](/concepts/validation) page.
+A custom-written validation message is not always required. Browsers come with their own default validation error messages that can be used in place of a customized one. See more on the [Validation](/foundations/validation) page.
 
 ### Section Message
 
@@ -230,4 +230,4 @@ A [section message](/components/section-message) is a block-level component that
 
 - [Dialog](/components/overlay/dialog)
 - [SectionMessage](/components/content/section-message)
-- [Validation](/concepts/validation)
+- [Validation](/foundations/validation)

From c434a275ca50703f8e1a40d88c7be5a924055505 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:35:07 +0200
Subject: [PATCH 24/31] .

---
 docs/content/resources/component-guidelines.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/resources/component-guidelines.mdx b/docs/content/resources/component-guidelines.mdx
index 709442bed5..0f752b55d2 100644
--- a/docs/content/resources/component-guidelines.mdx
+++ b/docs/content/resources/component-guidelines.mdx
@@ -317,7 +317,7 @@ Example of structures for surface colors:
 
 ### Usage and Structure of Style Props
 
-- [Style props](../concepts/style-props) are using tokens from TailwindCSS by default.
+- [Style props](../foundations/style-props) are using tokens from TailwindCSS by default.
 - Every layout component should have style props to make its layout adatable.
 - UI Components should have style props when there it is possible to configure properties related to layouting the component (e.g., text alignment, spacing, …).
 - Values of the style props have to correspond to a scale in TailwindCSS (e.g., `width={full}` will be translated to the class `w-full` ).

From 68d5de3990560184e884099531b943f95b4a1947 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Mon, 16 Sep 2024 18:38:32 +0200
Subject: [PATCH 25/31] update other links from getting started and foundations

---
 .../components/collection/table/table.mdx     |  2 +-
 docs/content/components/content/svg/svg.mdx   |  2 +-
 .../useResponsiveValue/useResponsiveValue.mdx |  2 +-
 .../components/layout/inline/inline.mdx       |  2 +-
 .../content/components/layout/stack/stack.mdx |  2 +-
 .../foundations/elevation/elevation.mdx       |  4 ++--
 docs/content/foundations/style-props.mdx      |  2 +-
 .../design-token-guidelines.mdx               |  4 ++--
 .../getting-started/governance-principles.mdx |  2 +-
 .../getting-started/governance-process.mdx    |  4 ++--
 .../resources/component-guidelines.mdx        |  2 +-
 docs/content/resources/faq.mdx                |  2 +-
 packages/components/src/Card/Card.tsx         |  4 ++--
 packages/components/src/Inset/Inset.tsx       |  6 +++---
 packages/system/src/style-props.tsx           | 20 +++++++++----------
 15 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/docs/content/components/collection/table/table.mdx b/docs/content/components/collection/table/table.mdx
index 0d481a4cfb..dad41afdd9 100644
--- a/docs/content/components/collection/table/table.mdx
+++ b/docs/content/components/collection/table/table.mdx
@@ -317,7 +317,7 @@ Choosing the right alternative to data tables is crucial for effectively display
   </li>
 </ul>
 
-Is there still not the right alternative for you please [get in touch](../../introduction/get-in-touch) with us!
+Is there still not the right alternative for you please [get in touch](../../resources/get-in-touch) with us!
 
 ## Related
 
diff --git a/docs/content/components/content/svg/svg.mdx b/docs/content/components/content/svg/svg.mdx
index 24eec3c5da..ebcfda6278 100644
--- a/docs/content/components/content/svg/svg.mdx
+++ b/docs/content/components/content/svg/svg.mdx
@@ -27,6 +27,6 @@ In this example you can see how to use the `<SVG>` element.
 
 ### Colorize
 
-To modify the color, adjust the `color` prop using a [design token](/introduction/design-tokens).
+To modify the color, adjust the `color` prop using a [design token](/foundations/design-tokens).
 
 <ComponentDemo file="./svg-color.demo.tsx" />
diff --git a/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx b/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx
index 3737d95a15..a7b1556d55 100644
--- a/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx
+++ b/docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx
@@ -10,7 +10,7 @@ You can pass the following parameters to your useResponsiveValue hook:
 
 The first parameter of the hook will be the values as array which defines the breakpoints. The second argument must be the `defaultIndex` which points opn the default value.
 
-If you want to have a look on all possible breakpoints from the theme you can have a look [here](../introduction/design-tokens#breakpoints).
+If you want to have a look on all possible breakpoints from the theme you can have a look [here](../foundations/design-tokens#breakpoints).
 
 Also with Tailwind some new class names came along which you can use to add styles by using the responsive modifiers (like: sm:text-sm).
 
diff --git a/docs/content/components/layout/inline/inline.mdx b/docs/content/components/layout/inline/inline.mdx
index 8e765ec32c..0d90361ca3 100644
--- a/docs/content/components/layout/inline/inline.mdx
+++ b/docs/content/components/layout/inline/inline.mdx
@@ -11,7 +11,7 @@ Use the inline component in combination with other layout components to easily [
 ## Usage
 
 If you have more than two elements you can use the `<Inline>` component to arrange elements horizontally according to the space required.
-For adding the space between the elements you need to use the `space` property and set it to a supported [space value](../../introduction/design-tokens#spacing).
+For adding the space between the elements you need to use the `space` property and set it to a supported [space value](../../foundations/design-tokens#spacing).
 
 <ComponentDemo file="./inline-elements.demo.tsx" />
 
diff --git a/docs/content/components/layout/stack/stack.mdx b/docs/content/components/layout/stack/stack.mdx
index c4196956f3..bc9295e3ca 100644
--- a/docs/content/components/layout/stack/stack.mdx
+++ b/docs/content/components/layout/stack/stack.mdx
@@ -10,7 +10,7 @@ Use the stack component in combination with other layout components to easily [c
 
 ## Usage
 
-The use of `<Stack>` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../introduction/design-tokens#spacing).
+The use of `<Stack>` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../foundations/design-tokens#spacing).
 
 In this example you can see, the space prop ensures that each child is separated by the same space which maintains visual consistency.
 
diff --git a/docs/content/foundations/elevation/elevation.mdx b/docs/content/foundations/elevation/elevation.mdx
index 403445eaa0..5fcbb089ae 100644
--- a/docs/content/foundations/elevation/elevation.mdx
+++ b/docs/content/foundations/elevation/elevation.mdx
@@ -89,5 +89,5 @@ In this example all elevation levels are shown in a full page example layout. Th
 
 ## Related
 
-- [List of all Design Tokens](/introduction/design-tokens)
-- [Design Token Guidelines](/introduction/design-token-guidelines)
+- [List of all Design Tokens](/foundations/design-tokens)
+- [Design Token Guidelines](/getting-started/design-token-guidelines)
diff --git a/docs/content/foundations/style-props.mdx b/docs/content/foundations/style-props.mdx
index bf0ed5d1ab..d1a018100a 100644
--- a/docs/content/foundations/style-props.mdx
+++ b/docs/content/foundations/style-props.mdx
@@ -8,7 +8,7 @@ Style props are a concept used in component to enable easy and consistent stylin
 
 This approach simplifies the styling process, promotes consistency, and makes it easier to manage the appearance of your components, especially when working with design systems or complex UIs.
 
-For example `space` style prop which is used for `gap`. `space='4'` is equivalent to `gap: 16px` , [ you can check the values for `space` property](/introduction/design-tokens#spacing).
+For example `space` style prop which is used for `gap`. `space='4'` is equivalent to `gap: 16px` , [ you can check the values for `space` property](/foundations/design-tokens#spacing).
 
 Here's an example using style props for `Stack` component :
 
diff --git a/docs/content/getting-started/design-token-guidelines.mdx b/docs/content/getting-started/design-token-guidelines.mdx
index 02929516b5..1aa5e3ecd6 100644
--- a/docs/content/getting-started/design-token-guidelines.mdx
+++ b/docs/content/getting-started/design-token-guidelines.mdx
@@ -223,7 +223,7 @@ There are no semantic values assigned to these tokens, as their usage does not n
 
 Width tokens follow a 4-pixel grid convention, implying that their values are adjusted in increments of 4 pixels. Each token represents a multiplier of that grid. For example, a value of 2 would equate to 8 pixels.
 
-You can explore all the available [spacing options](/introduction/design-tokens#spacing) on the design tokens page.
+You can explore all the available [spacing options](/foundations/design-tokens#spacing) on the design tokens page.
 
 ### Radius
 
@@ -233,4 +233,4 @@ Radius tokens are used to apply specific radius to an element. They are equivale
 
 There are no semantic values assigned to these tokens, as their usage does not necessitate them. This is because the primary focus of these tokens is on visual styling rather than conveying specific semantic meaning. Additionally, the tokens often serve as a direct representation of their intended visual outcome, eliminating the need for additional semantic values.
 
-Radius tokens adhere to T-shirt size conventions, with designations such as lg (large), md (medium), and so on. You can explore them on the [design tokens page](/introduction/design-tokens#radius).
+Radius tokens adhere to T-shirt size conventions, with designations such as lg (large), md (medium), and so on. You can explore them on the [design tokens page](/foundations/design-tokens#radius).
diff --git a/docs/content/getting-started/governance-principles.mdx b/docs/content/getting-started/governance-principles.mdx
index c40a180b79..3f55dbe708 100644
--- a/docs/content/getting-started/governance-principles.mdx
+++ b/docs/content/getting-started/governance-principles.mdx
@@ -8,7 +8,7 @@ order: 6
 ”How does the design system team prioritise?”
 ”What can I use as a guide when I have a request for the design system team?”
 
-We have been asked these questions many times by our stakeholders and they have motivated us to find ways to provide more transparency. So we worked on a framework which we and our stakeholders can use as a guide to become more confident in dealing with the design system.The process of how we handle changes and additions is written down in the page [Governance process](/introduction/governance-process).
+We have been asked these questions many times by our stakeholders and they have motivated us to find ways to provide more transparency. So we worked on a framework which we and our stakeholders can use as a guide to become more confident in dealing with the design system.The process of how we handle changes and additions is written down in the page [Governance process](/getting-started/governance-process).
 
 Governance Values are meaningful key terms that help ensure a consistent and solid decision-making process. They serve as a compass during complex strategic phases, anchor us to our principles and ensure that we can evaluate and critique our work in a positive way.
 
diff --git a/docs/content/getting-started/governance-process.mdx b/docs/content/getting-started/governance-process.mdx
index 4be786c1f2..bbf6dcf79f 100644
--- a/docs/content/getting-started/governance-process.mdx
+++ b/docs/content/getting-started/governance-process.mdx
@@ -6,7 +6,7 @@ order: 5
 
 Product teams are primarily focused on getting the job done. In their quest to achieve this, they sometimes need to take on design debt—improvising styles, crafting unique components, or even bypassing the design system entirely. To help teams avoid unnecessary debt, we've established a governance process that guides both the product teams and us on managing changes and additions within Marigold.
 
-This process ensures that any modifications to the design system are carefully evaluated to maintain consistency, stability, and user-friendliness. We prioritize updates that meet specific user needs, adhere to industry standards, and offer high reusability. Guided by our [Governance values and principles](/introduction/governance-principles), this approach helps uphold the quality and integrity of our design system.
+This process ensures that any modifications to the design system are carefully evaluated to maintain consistency, stability, and user-friendliness. We prioritize updates that meet specific user needs, adhere to industry standards, and offer high reusability. Guided by our [Governance values and principles](/getting-started/governance-principles), this approach helps uphold the quality and integrity of our design system.
 
 If you ever asked yourself what we do with your feature requests or what you should do if we declined your request, you've come to the right place.
 
@@ -17,7 +17,7 @@ We have created a flowchart, divided into 3 phases, that illustrates how incomin
   <SectionMessage.Content>
     ug fixes aren't subject to the same rigorous evaluation process and are
     handled differently. To read more about how to report bugs go
-    [here](/introduction//get-in-touch/#report-bugs).
+    [here](/resources//get-in-touch/#report-bugs).
   </SectionMessage.Content>
 </SectionMessage>
 
diff --git a/docs/content/resources/component-guidelines.mdx b/docs/content/resources/component-guidelines.mdx
index 0f752b55d2..471c723173 100644
--- a/docs/content/resources/component-guidelines.mdx
+++ b/docs/content/resources/component-guidelines.mdx
@@ -288,7 +288,7 @@ export const Select: ThemeComponent<'Select'> = {
 
 ### Structure of Color Design Tokens
 
-- [Color design tokens](../introduction/design-tokens) need to have a semantic name that reflects their use case. (e.g., `bg-disabled` for disabled backgrounds)
+- [Color design tokens](../foundations/design-tokens) need to have a semantic name that reflects their use case. (e.g., `bg-disabled` for disabled backgrounds)
 - Every color token needs to have a description when and where to use it.
 - Prevent using the color pallete directly (e.g., instead of using `bg-red-700` use `bg-error`)
 
diff --git a/docs/content/resources/faq.mdx b/docs/content/resources/faq.mdx
index 125a245fba..ebb7e0982b 100644
--- a/docs/content/resources/faq.mdx
+++ b/docs/content/resources/faq.mdx
@@ -25,7 +25,7 @@ That said, one of the primary benefits of a design system is the ability to quic
 
 ## Who decide which component is implemented?
 
-We worked on a process of how changes and additions are made to the Design System, you can have a look on our [Governance Process](../introduction/governance-process) and read through it.
+We worked on a process of how changes and additions are made to the Design System, you can have a look on our [Governance Process](../getting-started/governance-process) and read through it.
 
 ## Why should I use this Design System?
 
diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx
index fc0773c8f9..158696f859 100644
--- a/packages/components/src/Card/Card.tsx
+++ b/packages/components/src/Card/Card.tsx
@@ -36,7 +36,7 @@ export interface CardProps
   size?: string;
 
   /**
-   * Padding of the component. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Padding of the component. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   p?: PaddingSpaceProp['space'];
 
@@ -46,7 +46,7 @@ export interface CardProps
   px?: PaddingSpacePropX['spaceX'];
 
   /**
-   * Padding vertical (top and bottom) of the component. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Padding vertical (top and bottom) of the component. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   py?: PaddingSpacePropY['spaceY'];
 }
diff --git a/packages/components/src/Inset/Inset.tsx b/packages/components/src/Inset/Inset.tsx
index c1b456571b..db531d1207 100644
--- a/packages/components/src/Inset/Inset.tsx
+++ b/packages/components/src/Inset/Inset.tsx
@@ -17,18 +17,18 @@ export type InsetProps =
       children: ReactNode;
       space?: never;
       /**
-       * Horizontal alignment for the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+       * Horizontal alignment for the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
        */
       spaceX?: PaddingSpacePropX['spaceX'];
       /**
-       * Vertical alignment for the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+       * Vertical alignment for the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
        */
       spaceY?: PaddingSpacePropY['spaceY'];
     }
   | {
       children: ReactNode;
       /**
-       * The space between the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+       * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
        */
       space?: PaddingSpaceProp['space'];
       spaceX?: never;
diff --git a/packages/system/src/style-props.tsx b/packages/system/src/style-props.tsx
index 3dd8a0c419..a7ecf22b56 100644
--- a/packages/system/src/style-props.tsx
+++ b/packages/system/src/style-props.tsx
@@ -610,14 +610,14 @@ export type FontStyleProp = {
 
 export type FontWeightProp = {
   /**
-   * Set the font weight for the text element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#typography).
+   * Set the font weight for the text element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#typography).
    */
   weight?: keyof typeof fontWeight;
 };
 
 export type FontSizeProp = {
   /**
-   * Set the font size for the text element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#typography).
+   * Set the font size for the text element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#typography).
    */
   fontSize?: keyof typeof textSize;
 };
@@ -631,7 +631,7 @@ export type GridColsAlignProp = {
 
 export type GapSpaceProp = {
   /**
-   * The space between the children. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   space?: keyof typeof gapSpace;
 };
@@ -652,49 +652,49 @@ export type ObjectPositionProp = {
 
 export type PaddingSpaceProp = {
   /**
-   * Set the padding space for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the padding space for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   space?: keyof typeof paddingSpace;
 };
 
 export type PaddingSpacePropX = {
   /**
-   * Set the horizontal padding space for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the horizontal padding space for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   spaceX?: keyof typeof paddingSpaceX;
 };
 
 export type PaddingSpacePropY = {
   /**
-   * Set the vertical padding space for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the vertical padding space for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   spaceY?: keyof typeof paddingSpaceY;
 };
 
 export type PaddingRightProp = {
   /**
-   * Set the right padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the right padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   pr?: keyof typeof paddingRight;
 };
 
 export type PaddingLeftProp = {
   /**
-   * Set the left padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the left padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   pl?: keyof typeof paddingLeft;
 };
 
 export type PaddingTopProp = {
   /**
-   * Set the top padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the top padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   pt?: keyof typeof paddingTop;
 };
 
 export type PaddingBottomProp = {
   /**
-   * Set the bottom padding for the element. You can see allowed tokens [here](../../introduction/design-tokens?theme=core#spacing).
+   * Set the bottom padding for the element. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).
    */
   pb?: keyof typeof paddingBottom;
 };

From 21af07917902f72398b1650985b02667d1c6cfb7 Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Mon, 16 Sep 2024 18:40:00 +0200
Subject: [PATCH 26/31] Update sweet-toys-shop.md

---
 .changeset/sweet-toys-shop.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/sweet-toys-shop.md b/.changeset/sweet-toys-shop.md
index 4eb942d6dc..1cde4efb67 100644
--- a/.changeset/sweet-toys-shop.md
+++ b/.changeset/sweet-toys-shop.md
@@ -2,4 +2,4 @@
 "@marigold/docs": patch
 ---
 
-docs[DST-519]: Clean up Marigold Docs/ Improve Nav
+docs[DST-519]: Clean up Marigold Docs/ Improve Navigation

From e3921dda79397a484e077b19fd2359d57a5e8185 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Tue, 17 Sep 2024 08:36:19 +0200
Subject: [PATCH 27/31] change order

---
 docs/content/foundations/overview.mdx          | 18 +++++++++---------
 .../foundations/validation/validation.mdx      |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/content/foundations/overview.mdx b/docs/content/foundations/overview.mdx
index 6c45c43fdd..a22fadf57d 100644
--- a/docs/content/foundations/overview.mdx
+++ b/docs/content/foundations/overview.mdx
@@ -8,23 +8,23 @@ Foundations are the essential building blocks or core elements of the design sys
 
 <TeaserList
   items={[
-    {
-      title: 'Elevation',
-      href: '/foundations/elevation',
-      caption: 'The foundational layers of the UI.',
+     {
+      title: 'Design Tokens',
+      href: '/foundations/design-tokens',
+      caption: 'Have an overview over our design tokens.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-        <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
         </svg>
       ),
     },
     {
-      title: 'Design Tokens',
-      href: '/foundations/design-tokens',
-      caption: 'Have an overview over our design tokens.',
+      title: 'Elevation',
+      href: '/foundations/elevation',
+      caption: 'The foundational layers of the UI.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
-        <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
         </svg>
       ),
     },
diff --git a/docs/content/foundations/validation/validation.mdx b/docs/content/foundations/validation/validation.mdx
index 4e158d78f6..c2df7f5d32 100644
--- a/docs/content/foundations/validation/validation.mdx
+++ b/docs/content/foundations/validation/validation.mdx
@@ -1,7 +1,7 @@
 ---
 title: Validation
 caption: Learn about how to use form validation with Marigold.
-order: 6
+order: 7
 ---
 
 HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like `required` and input types such as `email` or `number` to provide users with feedback.

From b2fe163256dc85c0d6da7262affba3994af9d94c Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Tue, 17 Sep 2024 17:43:43 +0200
Subject: [PATCH 28/31] save

---
 .../formatters/dateformat/{dateFormat.mdx => gabdigbd.mdx}        | 0
 .../formatters/numericformat/{numericFormat.mdx => test.mdx}      | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename docs/content/components/formatters/dateformat/{dateFormat.mdx => gabdigbd.mdx} (100%)
 rename docs/content/components/formatters/numericformat/{numericFormat.mdx => test.mdx} (100%)

diff --git a/docs/content/components/formatters/dateformat/dateFormat.mdx b/docs/content/components/formatters/dateformat/gabdigbd.mdx
similarity index 100%
rename from docs/content/components/formatters/dateformat/dateFormat.mdx
rename to docs/content/components/formatters/dateformat/gabdigbd.mdx
diff --git a/docs/content/components/formatters/numericformat/numericFormat.mdx b/docs/content/components/formatters/numericformat/test.mdx
similarity index 100%
rename from docs/content/components/formatters/numericformat/numericFormat.mdx
rename to docs/content/components/formatters/numericformat/test.mdx

From 49ca06a06421df3d0148f07343992b39240b0eb3 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Tue, 17 Sep 2024 17:45:00 +0200
Subject: [PATCH 29/31] should work now

---
 .../formatters/dateformat/{gabdigbd.mdx => dateformat.mdx}        | 0
 .../formatters/numericformat/{test.mdx => numericformat.mdx}      | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename docs/content/components/formatters/dateformat/{gabdigbd.mdx => dateformat.mdx} (100%)
 rename docs/content/components/formatters/numericformat/{test.mdx => numericformat.mdx} (100%)

diff --git a/docs/content/components/formatters/dateformat/gabdigbd.mdx b/docs/content/components/formatters/dateformat/dateformat.mdx
similarity index 100%
rename from docs/content/components/formatters/dateformat/gabdigbd.mdx
rename to docs/content/components/formatters/dateformat/dateformat.mdx
diff --git a/docs/content/components/formatters/numericformat/test.mdx b/docs/content/components/formatters/numericformat/numericformat.mdx
similarity index 100%
rename from docs/content/components/formatters/numericformat/test.mdx
rename to docs/content/components/formatters/numericformat/numericformat.mdx

From e29e0b89d6f92f3a0b08326d3c8b08f837594ce0 Mon Sep 17 00:00:00 2001
From: ssarahgm <sarahgosmann@gmail.com>
Date: Tue, 17 Sep 2024 17:46:05 +0200
Subject: [PATCH 30/31] update correctly

---
 docs/content/components/collection/table/table.mdx         | 2 +-
 docs/content/components/form/number-field/number-field.mdx | 2 +-
 docs/content/foundations/design-tokens.mdx                 | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/content/components/collection/table/table.mdx b/docs/content/components/collection/table/table.mdx
index dad41afdd9..c8cfa3c276 100644
--- a/docs/content/components/collection/table/table.mdx
+++ b/docs/content/components/collection/table/table.mdx
@@ -187,7 +187,7 @@ To make async sorting more convenient, you can use the `useAsyncList` hook. The
 
 ### Handling numeric values
 
-With our formatting helper components for dates and numeric values you can easily ensure consistent and accurate display. See [NumericFormat](../formatters/numericformat/numericFormat), [DateFormat](../formatters/dateformat/dateFormat) for more informations.
+With our formatting helper components for dates and numeric values you can easily ensure consistent and accurate display. See [NumericFormat](../formatters/numericformat), [DateFormat](../formatters/dateformat) for more informations.
 
 Also you see how to use the `align` property on the columns. With that you can set the content of a column to left, center or right.
 
diff --git a/docs/content/components/form/number-field/number-field.mdx b/docs/content/components/form/number-field/number-field.mdx
index 265001f7ed..828dd814cf 100644
--- a/docs/content/components/form/number-field/number-field.mdx
+++ b/docs/content/components/form/number-field/number-field.mdx
@@ -324,7 +324,7 @@ the user about the error. The message disappears automatically when all requirem
     },
     {
       title: 'NumericFormat',
-      href: '../formatters/numericformat/numericFormat',
+      href: '../formatters/numericformat',
       caption:
         'Helper component for formatting numeric based on the current language and locale-specific conventions.',
       icon: (
diff --git a/docs/content/foundations/design-tokens.mdx b/docs/content/foundations/design-tokens.mdx
index aa013f9e71..945dab3310 100644
--- a/docs/content/foundations/design-tokens.mdx
+++ b/docs/content/foundations/design-tokens.mdx
@@ -29,7 +29,7 @@ If you are not sure which token to use, please visit our [design token guideline
 ## Typography
 
 With a defined font family and various font sizes and weights, our typography maintains readability and hierarchy. The consistent use of typography contributes to a polished and cohesive user experience.
-For formatting dates or numbers we already have some helper components: [NumericFormat](../components/formatters/numericformat/numericFormat), [DateFormat](../components/formatters/dateformat/dateFormat).
+For formatting dates or numbers we already have some helper components: [NumericFormat](../components/formatters/numericformat), [DateFormat](../components/formatters/dateformat).
 
 The `Value` corresponds to the class name from [Tailwind CSS](https://tailwindcss.com/docs/font-size).
 

From a8cdd978200577f98956ae7a7c917ca63670c7d2 Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:37:30 +0200
Subject: [PATCH 31/31] Update sweet-toys-shop.md

---
 .changeset/sweet-toys-shop.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/.changeset/sweet-toys-shop.md b/.changeset/sweet-toys-shop.md
index 1cde4efb67..778142bf3d 100644
--- a/.changeset/sweet-toys-shop.md
+++ b/.changeset/sweet-toys-shop.md
@@ -3,3 +3,10 @@
 ---
 
 docs[DST-519]: Clean up Marigold Docs/ Improve Navigation
+
+- deleted old files (scripts, about , release)
+- updated some faqs
+- improved the navigation structure
+- added overview pages
+- improved folder structure in code (a bit)
+- adjust some links