Base module

frontend/src/App.vue

@@ -3,5 +3,49 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <RouterView />
+  <header class="navigation">
+    <div class="container">
+      <span class="brand">Haushalt</span>
+    </div>
+  </header>
+  <nav class="subnavigation">
+    <div class="container"></div>
+  </nav>
+  <main class="main-area">
+    <div class="container">
+      <RouterView />
+    </div>
+  </main>
 </template>
+
+<style scoped>
+.navigation {
+  background: var(--nav-bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.navigation .container {
+  display: flex;
+  align-items: center;
+  height: 3rem;
+}
+
+.brand {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.subnavigation {
+  background: var(--subnav-bg);
+  border-bottom: 1px solid var(--border);
+}
+
+.subnavigation .container {
+  height: 2rem;
+}
+
+.main-area .container {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+</style>

frontend/src/router/index.js

@@ -2,7 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [
+    {
+      path: '/',
+      name: 'start',
+      component: () => import('../views/Startpage.vue'),
+    },
+  ],
 })
 
 export default router

frontend/src/style.css

@@ -0,0 +1,26 @@
+:root {
+  --bg: #ffffff;
+  --text: #1a1a1a;
+  --border: #e5e5e5;
+  --nav-bg: #f7f7f8;
+  --subnav-bg: #f0f0f2;
+  color-scheme: light dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}

frontend/src/views/Startpage.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="start-page"></div>
+</template>