4 files changed, 203 insertions, 5 deletions
diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro
index 4fa05a9..0722f01 100644
--- a/src/components/Navbar/Navbar.astro
+++ b/src/components/Navbar/Navbar.astro
@@ -3,13 +3,19 @@ import Breadcrumbs from './Breadcrumbs.astro';
 import SwitchLanguageLink from '../SwitchLanguageLink.astro';
 import NavLinks from './NavLinks.astro';
 import Logo from './Logo.astro';
+
+interface Props {
+  noBreadcrumbs?: boolean;
+}
+
+const { noBreadcrumbs } = Astro.props;
 ---
 
 <nav class="nav">
   <Logo />
   <NavLinks />
   <div class="nav__bottom-row">
-    <Breadcrumbs />
+    {!noBreadcrumbs && <Breadcrumbs />}
     <SwitchLanguageLink />
   </div>
 </nav>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a5315be..938bfe5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,9 +10,10 @@ import type Locale from '$types/Locale';
 
 interface Props {
   title: string;
+  noBreadcrumbs?: boolean;
 }
 
-const { title } = Astro.props;
+const { noBreadcrumbs, title } = Astro.props;
 const locale = getLocaleFromPathOrDefault(Astro.url.pathname);
 const t = translate(locale);
 
@@ -55,7 +56,7 @@ function qualifiedLocalisedPath(newLocale: Locale) {
   </head>
   <body id="top">
     <a class="btn skip-to-content" href="#main">Skip to content</a>
-    <Navbar />
+    <Navbar noBreadcrumbs={noBreadcrumbs} />
     <slot />
     <Footer />
   </body>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index bc7a095..da75514 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -2,13 +2,14 @@
 import Layout from './Layout.astro';
 
 interface Props {
+  noBreadcrumbs?: boolean;
   title: string;
 }
 
-const { title } = Astro.props;
+const { noBreadcrumbs, title } = Astro.props;
 ---
 
-<Layout title={title}>
+<Layout noBreadcrumbs={noBreadcrumbs} title={title}>
   <main id="main">
     <slot />
   </main>
diff --git a/src/pages/[designSystem].astro b/src/pages/[designSystem].astro
new file mode 100644
index 0000000..4ab93f8
--- /dev/null
+++ b/src/pages/[designSystem].astro
@@ -0,0 +1,190 @@
+---
+import Page from '$layouts/Page.astro';
+import env from '$lib/env';
+
+export async function getStaticPaths() {
+  switch (env.ENVIRONMENT) {
+    case 'dev':
+      return [{ params: { designSystem: 'design-system' } }];
+    case 'prod':
+      return [];
+  }
+}
+---
+
+<Page title="Design system">
+  <section>
+    <h1>Heading level 1</h1>
+    <h2>Heading level 2</h2>
+    <h3>Heading level 3</h3>
+    <h4>Heading level 4</h4>
+    <h3>Heading level 3</h3>
+    <h4>Heading level 4</h4>
+    <h2>Heading level 2</h2>
+    <h3>Heading level 3</h3>
+    <h2>Heading level 2</h2>
+  </section>
+
+  <section>
+    <h1>Heading level 1</h1>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+    <p>
+      Est numquam sint consequatur culpa quo dolores. Aut eum aut non et est blanditiis tempore.
+      Enim voluptate accusamus id veniam.
+    </p>
+
+    <h2>Heading level 2</h2>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+
+    <h3>Heading level 3</h3>
+    <p>
+      Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi
+      tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum
+      est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore.
+    </p>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+
+    <h4>Heading level 4</h4>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+
+    <h3>Heading level 3</h3>
+    <p>
+      Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi
+      tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum
+      est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore.
+    </p>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+
+    <h4>Heading level 4</h4>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+
+    <h2>Heading level 2</h2>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+
+    <h3>Heading level 3</h3>
+    <p>
+      Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi
+      tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum
+      est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore.
+    </p>
+    <p>
+      Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut
+      aliquid. Perferendis aut nesciunt omnis est ea.
+    </p>
+
+    <h2>Heading level 2</h2>
+    <p>
+      Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea
+      est. Vitae recusandae odit impedit dolor sit.
+    </p>
+    <p>
+      Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam
+      repellat aut suscipit aut est et.
+    </p>
+  </section>
+
+  <section>
+    <h2>Lists</h2>
+
+    <h3>Unordered list</h3>
+    <ul>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>
+        Item 3
+        <ul>
+          <li>Item 3.1</li>
+          <li>Item 3.2</li>
+          <li>Item 3.3</li>
+        </ul>
+      </li>
+      <li>Item 4</li>
+    </ul>
+
+    <h3>Ordered list</h3>
+    <ol>
+      <li>Item 1</li>
+      <li>Item 2</li>
+      <li>
+        Item 3
+        <ol>
+          <li>Item 3.1</li>
+          <li>Item 3.2</li>
+          <li>Item 3.3</li>
+        </ol>
+      </li>
+      <li>Item 4</li>
+    </ol>
+  </section>
+
+  <section>
+    <h2>Buttons</h2>
+
+    <section>
+      <h3>Light mode</h3>
+      <button type="button">Button</button>
+      <button type="submit">Submit</button>
+      <button type="button" disabled>Disabled button</button>
+      <button type="submit" disabled>Disabled submit</button>
+    </section>
+
+    <section class="dark">
+      <h3>Dark mode</h3>
+      <button type="button">Button</button>
+      <button type="submit">Submit</button>
+      <button type="button" disabled>Disabled button</button>
+      <button type="submit" disabled>Disabled submit</button>
+    </section>
+  </section>
+
+  <section>
+    <h2>Hyperlinks</h2>
+
+    <section>
+      <h3>Light mode</h3>
+      <a href="#">Hyperlink</a>
+    </section>
+
+    <section class="dark">
+      <h3>Dark mode</h3>
+      <a href="#">Hyperlink</a>
+    </section>
+  </section>
+</Page>