Add images and logos

src/lib/images/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" role="img" aria-label="Torus">
+  <title>Torus</title>
+  <rect width="512" height="512" fill="#09090B"/>
+  <rect x="64" y="64" width="384" height="384" rx="84" ry="84" fill="#1C1C20"/>
+  <circle cx="256" cy="256" r="112" fill="none" stroke="#3F3F46" stroke-width="28"/>
+  <circle cx="256" cy="256" r="64" fill="none" stroke="#FF5C1A" stroke-width="28"/>
+</svg>

src/lib/images/logo_white.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128" role="img" aria-label="Torus mark">
+  <title>Torus mark</title>
+  <circle cx="64" cy="64" r="44" fill="none" stroke="#3F3F46" stroke-width="12"/>
+  <circle cx="64" cy="64" r="24" fill="none" stroke="#FF5C1A" stroke-width="12"/>
+</svg>

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import favicon from '$lib/assets/favicon.svg';
+	import favicon from '$lib/images/logo_white.svg';
 	import '$lib/torus.css';
 
 	let { children } = $props();

src/routes/+page.svelte

@@ -1,4 +1,7 @@
 <script>
+	import logoMark from '$lib/images/logo_white.svg';
+	import torusImage from '$lib/images/torus.webp';
+
 	const features = [
 		{
 			title: 'Log sets fast',
@@ -33,7 +36,7 @@
 <div class="page">
 	<header class="top">
 		<a class="brand" href="/">
-			<span class="brand-mark" aria-hidden="true"></span>
+			<img class="brand-mark" src={logoMark} alt="" width="28" height="28" />
 			<span class="brand-name">Torus</span>
 		</a>
 		<nav class="nav" aria-label="Primary">
@@ -118,6 +121,19 @@
 			</div>
 		</section>
 
+		<section class="brand-band" aria-label="Torus">
+			<img
+				class="brand-band-image"
+				src={torusImage}
+				alt=""
+				width="784"
+				height="1168"
+				decoding="async"
+			/>
+			<div class="brand-band-shade"></div>
+			<p class="brand-band-copy">Strength first. Any modality.</p>
+		</section>
+
 		<section class="features" id="features">
 			<div class="features-head">
 				<h2>Built for the floor</h2>
@@ -143,7 +159,10 @@
 	</main>
 
 	<footer class="foot">
-		<span class="brand-name foot-brand">Torus</span>
+		<a class="brand foot-brand" href="/">
+			<img class="brand-mark foot-mark" src={logoMark} alt="" width="22" height="22" />
+			<span class="brand-name">Torus</span>
+		</a>
 		<span class="foot-note">Strength first. Any modality.</span>
 	</footer>
 </div>
@@ -178,11 +197,10 @@
 	}
 
 	.brand-mark {
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--ember);
-		box-shadow: 0 0 0 3px var(--ember-soft);
+		display: block;
+		width: 28px;
+		height: 28px;
+		flex-shrink: 0;
 	}
 
 	.brand-name {
@@ -442,6 +460,57 @@
 		font-variant-numeric: tabular-nums;
 	}
 
+	.brand-band {
+		position: relative;
+		margin: 40px 0 8px;
+		height: 180px;
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		border: 1px solid var(--border);
+		background: var(--surface);
+		isolation: isolate;
+	}
+
+	.brand-band-image {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		object-position: center 42%;
+		transform: scale(1.08);
+	}
+
+	.brand-band-shade {
+		position: absolute;
+		inset: 0;
+		background:
+			linear-gradient(
+				90deg,
+				color-mix(in srgb, var(--void) 82%, transparent) 0%,
+				color-mix(in srgb, var(--void) 35%, transparent) 55%,
+				color-mix(in srgb, var(--void) 55%, transparent) 100%
+			),
+			linear-gradient(
+				180deg,
+				color-mix(in srgb, var(--void) 25%, transparent),
+				color-mix(in srgb, var(--void) 55%, transparent)
+			);
+		z-index: 1;
+	}
+
+	.brand-band-copy {
+		position: absolute;
+		z-index: 2;
+		left: 20px;
+		bottom: 18px;
+		margin: 0;
+		color: var(--bone);
+		font-size: 0.95rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+	}
+
 	.features {
 		padding: 56px 0 24px;
 		scroll-margin-top: 72px;
@@ -520,6 +589,7 @@
 	.foot {
 		display: flex;
 		flex-wrap: wrap;
+		align-items: center;
 		justify-content: space-between;
 		gap: 8px;
 		padding: 20px;
@@ -528,9 +598,13 @@
 		font-size: 13px;
 	}
 
+	.foot-mark {
+		width: 22px;
+		height: 22px;
+	}
+
 	.foot-brand {
 		color: var(--text);
-		font-weight: 700;
 	}
 
 	@media (min-width: 720px) {
@@ -552,6 +626,17 @@
 			padding: 72px 0 32px;
 		}
 
+		.brand-band {
+			height: 220px;
+			margin: 48px 0 12px;
+		}
+
+		.brand-band-copy {
+			left: 28px;
+			bottom: 22px;
+			font-size: 1.05rem;
+		}
+
 		.feature-grid {
 			grid-template-columns: repeat(2, 1fr);
 		}

src/routes/register/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+	import logoMark from '$lib/images/logo_white.svg';
+
 	let name = $state('');
 	let email = $state('');
 	let password = $state('');
@@ -16,7 +18,7 @@
 <div class="page">
 	<header class="top">
 		<a class="brand" href="/">
-			<span class="brand-mark" aria-hidden="true"></span>
+			<img class="brand-mark" src={logoMark} alt="" width="28" height="28" />
 			<span class="brand-name">Torus</span>
 		</a>
 		<a class="btn btn-ghost" href="/login">Log in</a>
@@ -25,6 +27,7 @@
 	<main>
 		<section class="card" aria-labelledby="register-title">
 			<div class="card-head">
+				<img class="card-logo" src={logoMark} alt="" width="36" height="36" />
 				<h1 id="register-title">Create account</h1>
 				<p class="lede">Name, email, password. Then get to work.</p>
 			</div>
@@ -115,11 +118,10 @@
 	}
 
 	.brand-mark {
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: var(--ember);
-		box-shadow: 0 0 0 3px var(--ember-soft);
+		display: block;
+		width: 28px;
+		height: 28px;
+		flex-shrink: 0;
 	}
 
 	.brand-name {
@@ -146,6 +148,11 @@
 		margin-bottom: 24px;
 	}
 
+	.card-logo {
+		display: block;
+		margin-bottom: 14px;
+	}
+
 	h1 {
 		margin: 0;
 		font-size: 1.6rem;