my-app/.gitignore

@@ -25,3 +25,7 @@ dist-ssr
 
 *storybook.log
 storybook-static
+
+# Font files
+public/caecilia/
+public/the-sans/

my-app/src/components/layout/Navigation.jsx

@@ -70,7 +70,7 @@ const Navigation = () => {
 			<div className={styles.top}>
 				<div className={styles.left}>
 					<Link to="/" className={styles.logo}>
-						<img src="su-logo-darkblue.svg" alt="Logo" />
+						<img src="su-logo-white.svg" alt="Logo" />
 					</Link>
 					<span className={styles.brandText}>Studentportalen</span>
 				</div>

my-app/src/components/layout/Navigation.module.css

@@ -6,6 +6,8 @@
 	display: flex;
 	flex-direction: column;
 	background-color: var(--bg-secondary);
+	background-color: var(--su-blue);
+	color: white;
 	box-shadow: var(--shadow-md);
 	position: fixed;
 	top: 0;
@@ -27,7 +29,6 @@
 	align-items: center;
 	gap: var(--spacing-lg);
 	font-weight: var(--font-weight-semibold);
-	color: var(--header-brand-color);
 }
 
 .right {
@@ -39,18 +40,20 @@
 .logo img {
 	height: 40px;
 	transition: filter 0.2s ease;
+	color: white;
 }
 
 .brandText {
 	font-size: 1.1rem;
 	font-weight: var(--font-weight-semibold);
-	color: var(--header-brand-color);
+	color: white;
 }
 
 .menuIcon {
 	font-size: 24px;
 	cursor: pointer;
 	color: var(--text-primary);
+	color: white;
 	padding: var(--spacing-xs);
 	border-radius: var(--border-radius-md);
 	transition: var(--transition-fast);