Bring +layout.svelte 'in-brand'

src/routes/+layout.svelte

@@ -1,11 +1,112 @@
 <script lang="ts">
+	import { page } from '$app/state';
+
 	import favicon from '$lib/assets/round-logo.svg';
+	import logoText from '$lib/assets/round-logo-text.svg';
+	import logoPlain from '$lib/assets/round-logo.svg';
 
 	let { children } = $props();
+
+	const isHome = $derived(page.url.pathname === '/');
+	const pageTitle = $derived(page.data.title ?? 'No Title');
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<header>
+	<a href="/" aria-label="OwlBoard Home" class="logo-link">
+		{#if isHome}
+			<img src={logoText} alt="OwlBoard Logo" height="55" />
+		{:else}
+			<img src={logoPlain} alt="OwlBoard Icon" height="55" />
+		{/if}
+	</a>
+	{#if !isHome}
+		<h1 class="page-title">{pageTitle}</h1>
+	{/if}
+</header>
+
+<main>
 {@render children()}
+</main>
+
+<nav>
+	<!-- Dynamic Nav Elements Here! -->
+</nav>
+
+<style>
+	:root {
+		/* Brand Colours */
+		--color-brand: #4fd1d1;
+		--color-accent: #3c6f79;
+		--color-title: #ebebeb;
+		--color-bg-light: #404c55;
+		--color-bg-dark: #2b343c;
+		
+		/* Shadows */
+		--color-shadow: hsla(210, 20%, 5%, 0.35);
+		--shadow-std: 0 4px 12px var(--color-shadow);
+		--shadow-up: 0 -4px 12px var(--color-shadow);
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: var(--color-accent);
+		overflow-x: hidden;
+	}
+	header, nav {
+		flex-shrink: 0;
+		height: 80px;
+		width: 100%;
+		background-color: var(--color-accent);
+		box-sizing: border-box;
+		left: 0;
+		position: fixed;
+		align-items: center;
+		padding: 0 1rem;
+		display: flex;
+		z-index: 100;
+		align-items: center;
+		gap: 0rem;
+	}
+
+	header {
+		top: 0;
+		box-shadow: var(--shadow-std);
+	}
+
+	nav {
+		bottom: 0;
+		box-shadow: var(--shadow-up);
+	}
+
+	.logo-link {
+		width: auto;
+		display: block;
+		height: 55px;
+	}
+
+	.logo-link img {
+		height: 55px;
+		width: auto;
+		display: block;
+	}
+
+	.page-title {
+		margin-left: 5px;
+		padding-bottom: 2px;
+		color: var(--color-title);
+	}
+
+	main {
+		padding-top: 80px;
+		padding-bottom: 80px;
+		min-height: 100dvh;
+		box-sizing: border-box;
+		background-color: var(--color-bg-dark);
+		background-image: radial-gradient(var(--color-bg-dark), var(--color-bg-light));
+	}
+</style>

src/routes/+page.svelte

@@ -1,2 +1 @@
-<h1>Welcome to SvelteKit</h1>
+<h2>OwlBoard</h2>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>