Prep site for go-live (#68)

* Swap out colors and logos * JB style feedback
KittyCAD · Dec 18, 2023 · 7f67042 · 7f67042
1 parent 304f46c
commit 7f67042
Show file tree

Hide file tree

Showing 44 changed files with 206 additions and 141 deletions.
diff --git a/src/app.html b/src/app.html
@@ -3,8 +3,12 @@
 	<head>
 		<meta charset="utf-8" />
 		<!-- TODO: remove after we go live -->
-		<meta name="robots" content="noindex">
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="robots" content="noindex" />
+		<link rel="stylesheet" href="https://use.typekit.net/zzv8rvm.css" />
+		<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
+		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/components/AccountMenu.svelte b/src/components/AccountMenu.svelte
@@ -27,14 +27,14 @@
 		<menu class="contents">
 			<div class="p-4 pb-2">
 				<p class="font-mono">{user?.name || 'Unnamed User'}</p>
-				<p class="text-xs text-chalkboard-70 dark:text-chalkboard-40">
+				<p class="font-mono text-sm text-chalkboard-70 dark:text-chalkboard-40">
 					{user?.email || '[email protected]'}
 				</p>
 			</div>
 			<a
 				data-sveltekit-reload
 				href={paths.SIGN_OUT}
-				class="text-sm font-mono hover:bg-energy-10 dark:hover:bg-energy-80 text-center px-4 py-2 border-t"
+				class="text-sm font-mono uppercase tracking-[1px] hover:bg-green hover:text-chalkboard-120 text-center px-4 py-2 border-t"
 				on:keydown={dismiss}
 			>
 				Sign Out
@@ -47,8 +47,8 @@
 	.menu {
 		@apply absolute top-full -right-4;
 		@apply z-10 mt-1 mr-0;
-		@apply text-chalkboard-100 dark:text-chalkboard-20;
-		@apply bg-chalkboard-10 dark:bg-chalkboard-90;
+		@apply text-chalkboard-120 dark:text-chalkboard-10;
+		@apply bg-white dark:bg-chalkboard-90;
 		@apply border-solid border-2 border-chalkboard-100;
 		@apply border border-chalkboard-100 dark:border-chalkboard-20;
 		@apply flex flex-col gap-5;

diff --git a/src/components/DownloadButton.svelte b/src/components/DownloadButton.svelte
@@ -78,7 +78,7 @@
 <style lang="postcss">
 	.split-button {
 		@apply inline-flex justify-center items-center px-2 py-1 gap-4 relative;
-		@apply font-mono text-energy-100 bg-energy-20 hover:bg-energy-10;
+		@apply font-mono uppercase tracking-[1px] text-chalkboard-120 bg-green hover:hue-rotate-15;
 	}
 
 	.split-button:global(.loading),
@@ -91,11 +91,11 @@
 	}
 
 	select {
-		@apply bg-energy-10 border-0;
-		@apply uppercase text-sm font-mono text-energy-100;
+		@apply bg-green text-chalkboard-120 border-0;
+		@apply uppercase text-sm font-mono;
 		@apply shadow-inner;
 		@apply pl-2 pr-3 py-1 rounded-sm;
-		@apply border-transparent hover:border-energy-100 border-solid border;
+		@apply border-transparent hover:border-chalkboard-120 border-solid border;
 	}
 
 	.shimmer {
@@ -105,7 +105,7 @@
 	.shimmer::before {
 		content: '';
 		@apply absolute z-0 inset-0 -inset-y-1/2;
-		@apply bg-gradient-to-t from-transparent via-energy-20/40 to-transparent;
+		@apply bg-gradient-to-t from-transparent via-green/80 to-transparent;
 		animation: shimmer 1s ease-in-out infinite;
 	}
 

diff --git a/src/components/GenerationList.svelte b/src/components/GenerationList.svelte
@@ -73,9 +73,7 @@
 
 <section class="mt-24 mb-48">
 	<h2 class="text-4xl mb-8">
-		Your <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
-			>generations</span
-		>
+		Your <span class="text-green">generations</span>
 	</h2>
 	{#if $generations.length > 0}
 		<ul
@@ -85,11 +83,7 @@
 		>
 			{#each additionalGenerations as item, i}
 				<li id={item.id} class="first-of-type:mt-0 my-12" style={`opacity: ${intersectionInfo[i]}`}>
-					<GenerationListItem
-						data={item}
-						shouldRenderModel={intersectionInfo[i] > RENDER_THRESHOLD}
-						on:retryprompt
-					/>
+					<GenerationListItem data={item} on:retryprompt />
 				</li>
 			{/each}
 			{#each $generations as item, i}

diff --git a/src/components/GenerationListItem.svelte b/src/components/GenerationListItem.svelte
@@ -100,7 +100,7 @@
 				<li class="contents">
 					<a
 						href={`view/${data.id}`}
-						class="link font-mono flex-auto md:border-r reverse border-chalkboard-70 dark:border-chalkboard-40"
+						class="link font-mono uppercase text-sm tracking-[1px] flex-auto md:border-r reverse hover:text-chalkboard-120 hover:!bg-green border-chalkboard-70 dark:border-chalkboard-40"
 						>View</a
 					>
 				</li>
@@ -109,7 +109,7 @@
 		{:else if data.error}
 			<button
 				on:click={retry(data.prompt)}
-				class="link w-full justify-center flex items-center text-center border-b md:border-b-0"
+				class="font-mono uppercase tracking-[1px] text-sm link w-full justify-center flex items-center text-center border-b md:border-b-0"
 				>Retry Prompt</button
 			>
 		{/if}

diff --git a/src/components/GenerationalListItemSkeleton.svelte b/src/components/GenerationalListItemSkeleton.svelte
@@ -20,7 +20,7 @@
 	.shimmer-skeleton::before {
 		content: '';
 		@apply absolute z-0 inset-0 -inset-y-1/2;
-		@apply bg-gradient-to-t from-transparent via-energy-20/20 to-transparent;
+		@apply bg-gradient-to-t from-transparent via-green/80 to-transparent;
 		animation: shimmer 2s ease-in-out infinite;
 	}
 

diff --git a/src/components/Logo.svelte b/src/components/Logo.svelte
@@ -2,45 +2,25 @@
 	export let className = ''
 </script>
 
-<svg
-	width="240"
-	height="27"
-	class={className}
-	viewBox="0 0 240 27"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
+<svg class={className} viewBox="0 0 438 145" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
-		d="M111.109 0.679559L123.681 14.6107V26.7296H130.816V15.0637C130.816 15.0637 143.049 1.58565 143.728 0.679559H135.234C135.234 1.15932 129.706 7.00392 128.017 8.77926C127.751 9.05809 127.311 9.05936 127.043 8.78222C125.35 7.025 119.83 1.25486 119.83 0.679559H111.109Z"
-		fill="currentcolor"
+		d="M88.2136 25.3021V3.12744H0.595269V34.3994H79.827L0.609484 120.312H0.595269V120.326L0.581055 120.34L0.595269 120.355V141.364H20.8936L41.3341 119.189V141.364H128.952V110.092H49.7349L128.952 24.1649V3.12744L108.64 3.15587L88.2136 25.3021Z"
+		fill="currentColor"
 	/>
 	<path
-		d="M78.7164 0.679559V7.58848H90.1557V26.7296H97.2912V7.58848H108.731V0.679559H78.7164Z"
-		fill="currentcolor"
+		d="M167.36 72.4372C167.36 49.7366 185.824 31.2719 208.525 31.2719C216.514 31.2719 223.976 33.5605 230.288 37.5121L251.78 14.3709C239.698 5.34466 224.73 0 208.525 0C168.582 0 136.088 32.4944 136.088 72.4372C136.088 90.5465 142.769 107.135 153.828 119.857L175.32 96.7156C170.316 89.9069 167.36 81.5061 167.36 72.4372Z"
+		fill="currentColor"
 	/>
 	<path
-		d="M45.1911 0.679559V7.58848H56.6305V26.7296H63.7659V7.58848H75.2053V0.679559H45.1911Z"
-		fill="currentcolor"
+		d="M241.745 48.1442C246.734 54.9671 249.691 63.3679 249.691 72.4368C249.691 95.1232 231.226 113.588 208.525 113.588C200.537 113.588 193.088 111.299 186.777 107.348L165.271 130.503C177.353 139.515 192.321 144.86 208.525 144.86C248.468 144.86 280.963 112.365 280.963 72.4368C280.963 54.3133 274.282 37.7249 263.223 25.0029L241.745 48.1442Z"
+		fill="currentColor"
 	/>
 	<path
-		d="M0 0.566298V26.7296H7.2487V15.2902L20.84 26.7296H31.26L14.6097 13.277C14.3802 13.0916 14.3786 12.7455 14.6142 12.568C17.1382 10.6664 29.2921 1.49132 29.9009 0.679559H20.0472C19.8207 1.47239 7.2487 11.2128 7.2487 11.2128V0.566298H0Z"
-		fill="currentcolor"
+		d="M419.312 25.0029L397.834 48.1442C402.823 54.9671 405.779 63.3679 405.779 72.4368C405.779 95.1232 387.315 113.588 364.614 113.588C356.626 113.588 349.177 111.299 342.866 107.348L321.359 130.503C333.442 139.515 348.41 144.86 364.614 144.86C404.557 144.86 437.051 112.365 437.051 72.4368C437.051 54.3133 430.371 37.7249 419.312 25.0029Z"
+		fill="currentColor"
 	/>
 	<path
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M226.975 0.679566C228.685 0.679566 230.379 1.01647 231.959 1.67104C233.54 2.3256 234.976 3.28502 236.185 4.4945C237.395 5.70399 238.354 7.13985 239.009 8.72012C239.663 10.3004 240 11.9941 240 13.7046C240 15.415 239.663 17.1088 239.009 18.689C238.354 20.2693 237.395 21.7052 236.185 22.9147C234.976 24.1241 233.54 25.0836 231.959 25.7381C230.379 26.3927 228.685 26.7296 226.975 26.7296H210.212V3.05804L212.591 0.67956L226.975 0.679566ZM229.3 19.3175C228.563 19.6228 227.773 19.78 226.975 19.78H217.574V7.62919H226.975C227.773 7.62919 228.563 7.78634 229.3 8.09165C230.037 8.39697 230.707 8.84448 231.271 9.40863C231.835 9.97278 232.283 10.6425 232.588 11.3796C232.893 12.1167 233.05 12.9067 233.05 13.7046C233.05 14.5024 232.893 15.2924 232.588 16.0295C232.283 16.7666 231.835 17.4364 231.271 18.0005C230.707 18.5647 230.037 19.0122 229.3 19.3175Z"
-		fill="currentcolor"
-	/>
-	<path
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M199.453 26.7296H207.268C207.268 26.7296 197.754 5.88957 197.126 4.60591C196.521 3.36681 195.613 2.09038 194.292 1.25081C192.971 0.411244 191.333 -0.0302299 189.656 0.00160921C187.979 0.0334483 186.368 0.536631 185.097 1.42542C183.826 2.31421 183.024 3.62504 182.458 4.87586C181.897 6.11609 172.496 26.7296 172.496 26.7296H180.538L183.491 19.78H196.391L199.453 26.7296ZM193.896 14.1169L190.881 7.27109C190.481 6.36329 189.19 6.37174 188.802 7.2847L185.898 14.1169H189.825H193.896Z"
-		fill="currentcolor"
-	/>
-	<path d="M41.68 26.7296V0.679559H34.5446V24.3511L36.9231 26.7296H41.68Z" fill="currentcolor" />
-	<path
-		d="M155.054 0.679566C153.344 0.679566 151.65 1.01647 150.07 1.67104C148.49 2.3256 147.054 3.28502 145.844 4.4945C144.635 5.70399 143.675 7.13985 143.021 8.72012C142.366 10.3004 142.029 11.9941 142.029 13.7046C142.029 15.415 142.366 17.1088 143.021 18.689C143.675 20.2693 144.635 21.7052 145.844 22.9147C147.054 24.1241 148.49 25.0836 150.07 25.7381C151.65 26.3927 153.344 26.7296 155.054 26.7296H169.665V19.78H155.054C154.256 19.78 153.466 19.6228 152.729 19.3175C151.992 19.0122 151.322 18.5647 150.758 18.0005C150.194 17.4364 149.747 16.7666 149.441 16.0295C149.136 15.2924 148.979 14.5024 148.979 13.7046C148.979 12.9067 149.136 12.1167 149.441 11.3796C149.747 10.6425 150.194 9.97278 150.758 9.40863C151.322 8.84448 151.992 8.39697 152.729 8.09165C153.466 7.78634 154.256 7.62919 155.054 7.62919H169.665V0.679559L155.054 0.679566Z"
-		fill="currentcolor"
+		d="M323.449 72.4372C323.449 49.7366 341.913 31.2719 364.614 31.2719C372.603 31.2719 380.065 33.5605 386.376 37.5121L407.869 14.3709C395.786 5.34466 380.819 0 364.614 0C324.671 0 292.177 32.4944 292.177 72.4372C292.177 90.5465 298.858 107.135 309.916 119.857L331.409 96.7156C326.405 89.9069 323.449 81.5061 323.449 72.4372Z"
+		fill="currentColor"
 	/>
 </svg>
diff --git a/src/components/LogoMLephant.svelte b/src/components/LogoMLephant.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	export let className = ''
+</script>
+
+<svg class={className} viewBox="0 0 1050 147" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_93_12432)">
+		<path
+			d="M533.426 22.0637C532.847 20.1312 532.009 18.2631 530.914 16.4594C529.819 14.6558 528.423 12.7232 526.748 10.6619C523.399 6.92574 519.426 4.34907 514.853 2.93191C510.279 1.51474 505.298 0.806152 499.887 0.806152H440.945V146.753H464.715V85.643H499.887C505.298 85.643 510.279 84.9344 514.853 83.5173C519.426 82.1001 523.377 79.5234 526.748 75.7872C530.227 71.6646 532.46 67.6707 533.426 63.8057C534.393 59.9407 534.865 55.496 534.865 50.4715V35.0114C534.865 32.5636 534.779 30.2661 534.586 28.1618C534.393 26.036 534.006 23.9962 533.426 22.0852V22.0637ZM511.095 51.2445C511.095 55.1095 510.322 57.8579 508.776 59.4683C507.23 61.0788 504.46 61.8732 500.466 61.8732H464.715V24.5759H500.466C504.331 24.5759 507.058 25.3489 508.69 26.8949C510.301 28.4409 511.095 31.1464 511.095 35.0114V51.2445Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M176.879 15.5361V0.806152H153.131V146.732H234.962V122.962H176.901C176.901 122.962 176.901 15.6005 176.901 15.5361H176.879Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M56.2919 53.5635L18.8873 0.806152H0.850586V146.732H24.5989V50.085C24.5989 50.085 47.5098 82.2289 49.249 83.9038C50.9883 85.5786 53.3288 86.416 56.2919 86.416C59.2551 86.416 61.4453 85.5357 63.2489 83.8179C65.0526 82.0786 84.5065 55.0021 87.985 50.085V146.732H111.755V0.806152H93.6966L56.2919 53.5849V53.5635Z"
+			fill="currentColor"
+		/>
+		<path d="M278.166 57.9229H250.23V81.6926H278.166V57.9229Z" fill="currentColor" />
+		<path
+			d="M943.998 0.806152V24.5759L984.817 24.5545V146.753H1008.59V24.5545L1049.6 24.5759V0.806152H943.998Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M893.409 90.4748L842.841 0.785156H823.237V146.754H847.029V57.0425L897.853 146.754H917.135L917.178 0.806629H893.387L893.409 90.4748Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M636.903 57.8155H590.523V0.785156H566.753V146.754H590.523V81.5852H636.903L636.881 146.754H660.651V0.785156H636.881L636.903 57.8155Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M321.151 146.71H410.347V122.962H344.9V81.5848L393.985 81.6277V57.8579L344.9 57.815V24.5759H410.347V0.806152H321.151V146.71Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M792.405 62.4535C792.212 60.7142 791.524 58.932 790.365 57.1283L755.666 0.785156H728.246L693.525 57.1498C692.366 58.9535 691.678 60.7357 691.485 62.4749C691.292 64.2142 691.206 65.7817 691.206 67.2203V146.732H714.954V99.6649H768.893V146.732H792.641V67.1988C792.641 65.7817 792.534 64.1927 792.34 62.4535H792.405ZM768.914 75.7662H714.976V67.7786L741.945 22.5795L768.914 67.7786V75.7662Z"
+			fill="currentColor"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_93_12432">
+			<rect
+				width="1049.16"
+				height="146.054"
+				fill="white"
+				transform="translate(0.636719 0.742188)"
+			/>
+		</clipPath>
+	</defs>
+</svg>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -10,20 +10,24 @@
 
 <nav class="nav">
 	<a href={user ? paths.DASHBOARD : paths.HOME}>
-		<Logo className="h-6 md:h-12" />
+		<Logo className="h-6 lg:h-8 hover:text-green" />
 	</a>
 	{#if user}
 		<AccountMenu {user} />
 	{:else}
-		<a href={paths.SIGN_IN($page.url.origin.concat(paths.DASHBOARD))}>Sign in</a>
+		<a href={paths.SIGN_IN($page.url.origin.concat(paths.DASHBOARD))} class="sign-in">Sign in</a>
 	{/if}
 </nav>
 
 <style lang="postcss">
 	.nav {
-		@apply bg-chalkboard-10 dark:bg-chalkboard-100;
+		@apply bg-white dark:bg-chalkboard-120;
 		@apply mx-5 lg:mx-auto mt-2 lg:mt-4 max-w-5xl;
 		@apply sticky z-10 top-0 flex justify-between items-center;
 		@apply border px-2 md:px-4 py-1;
 	}
+
+	.sign-in {
+		@apply font-mono uppercase tracking-[1px] px-2 py-1 hover:bg-green hover:text-chalkboard-120;
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/stores'
 	import { paths } from '$lib/paths'
 	import { Canvas } from '@threlte/core'
+	import LogoMLephant from 'components/LogoMLephant.svelte'
 	import ModelPreviewer from 'components/ModelPreviewer.svelte'
 
 	const examples = [
@@ -13,17 +14,15 @@
 </script>
 
 <section class="mx-auto max-w-5xl my-12 md:my-48">
-	<div class="grid lg:grid-cols-2 gap-0 items-stretch min-h-[33vh]">
+	<div class="grid lg:grid-cols-3 gap-0 items-stretch min-h-[33vh]">
 		<h1
-			class="-order-1 md:order-none col-span-2 md:col-span-1 text-5xl md:text-7xl py-6 md:py-12 self-center pl-2 md:pl-4"
+			class="-order-1 md:order-none col-span-2 text-5xl md:text-7xl py-6 md:py-12 self-center pl-2 md:pl-4"
 		>
-			Text to <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
-				>CAD</span
-			>
+			Text-to-CAD <span class="text-green">UI</span>
 		</h1>
 		<div class="z-10 relative border md:border-b-0 col-span-2 md:col-span-1 min-h-[25vh]">
 			<div
-				class="animate-reveal absolute inset-0 -top-1/3 opacity-80 md:opacity-100 md:-top-full"
+				class="animate-reveal absolute inset-0 -top-1/4 opacity-80 md:opacity-100 md:-top-full"
 				style={`--delay-steps: ${examples[0].prompt.length}`}
 			>
 				<Canvas>
@@ -32,7 +31,7 @@
 			</div>
 		</div>
 		<div
-			class="-order-1 md:order-none w-full flex items-center justify-start col-span-2 text-lg md:text-4xl font-mono border border-b-0 md:border-b py-4 px-2 md:px-6"
+			class="-order-1 md:order-none w-full flex items-center justify-start lg:col-span-3 text-lg md:text-4xl font-mono border border-b-0 md:border-b py-4 px-2 md:px-6"
 		>
 			<div
 				class="typing-animation block text-chalkboard-70 dark:text-chalkboard-50"
@@ -41,13 +40,23 @@
 				<div class="block w-fit">{examples[0].prompt}</div>
 			</div>
 		</div>
-		<div class="col-span-2 flex flex-col md:flex-row items-center border border-t-0">
-			<p class="flex-1 pl-2 md:pl-4 py-2 text-chalkboard-70 dark:text-chalkboard-40">
-				Create B-Rep CAD files and meshes from natural language prompts. Powered by KittyCAD.
+		<div class="lg:col-span-3 flex flex-col md:flex-row items-center border border-t-0">
+			<p class="flex-1 pl-2 md:pl-4 py-2 text-chalkboard-80 dark:text-chalkboard-30 tracking-wider">
+				Create B-Rep CAD files and meshes from natural language prompts.{' '}<br />Powered by the
+				<a
+					href="https://zoo.dev/machine-learning-api"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="bg-chalkboard-120 rounded-sm dark:bg-transparent"
+					><LogoMLephant
+						className="h-[0.8em] text-green mx-[0.5ch] inline-block align-baseline"
+					/><span class="sr-only">ML-ephant</span></a
+				>
+				API from <a href="https://zoo.dev" target="_blank" rel="noopener noreferrer">Zoo</a>.
 			</p>
 			<a
 				href={paths.SIGN_IN($page.url.origin.concat(paths.DASHBOARD))}
-				class="self-stretch flex items-center justify-center text-center bg-energy-10/70 px-2 md:px-4 py-2 dark:bg-energy-60 border-0 border-t md:border-t-0 md:border-l font-mono hover:bg-energy-10 dark:hover:bg-energy-50 dark:hover:text-chalkboard-10"
+				class="self-stretch uppercase tracking-[1px] flex items-center justify-center text-center bg-green px-2 md:px-4 py-2 dark:bg-green dark:text-chalkboard-120 border-0 border-t md:border-t-0 md:border-l font-mono hover:hue-rotate-15"
 				>Sign in to get started</a
 			>
 		</div>
@@ -69,7 +78,7 @@
 	.typing-animation::before {
 		content: '';
 		position: absolute;
-		@apply bg-chalkboard-10 dark:bg-chalkboard-100;
+		@apply bg-white dark:bg-chalkboard-120;
 		@apply absolute inset-0;
 		--_final-width: 100%;
 		animation: typewriter calc(var(--step-timing) * calc(var(--steps, 20) - 1))
@@ -82,7 +91,7 @@
 		right: -1ch;
 		left: 1ch;
 		border-left: solid 1ch;
-		@apply border-l-energy-10 dark:border-l-energy-60;
+		@apply border-l-green dark:border-l-green;
 		--_final-width: calc(100% - 1ch);
 		animation: typewriter calc(var(--step-timing) * calc(var(--steps, 20) - 1))
 				steps(var(--steps, 20), end) forwards,

diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
@@ -38,9 +38,7 @@
 
 <section class="mx-auto max-w-2xl my-48">
 	<h1 class="text-5xl mb-2">
-		Text to <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
-			>CAD</span
-		>
+		Text-to-<span class="text-green">CAD</span>
 	</h1>
 	<form on:submit={submitForm} class="flex w-full text-lg" bind:this={form}>
 		<label class="flex-1">
@@ -66,8 +64,8 @@
 <style lang="postcss">
 	.submit {
 		@apply px-4 lg:px-6 py-1 border border-l-0;
+		@apply font-mono uppercase tracking-[1px] text-sm;
 		@apply border-chalkboard-100 dark:border-chalkboard-20;
-		@apply bg-energy-10 text-energy-100;
-		@apply dark:bg-energy-90 dark:text-energy-10;
+		@apply bg-green text-chalkboard-120 hover:hue-rotate-15;
 	}
 </style>
diff --git a/src/routes/view/[modelId]/+page.svelte b/src/routes/view/[modelId]/+page.svelte
@@ -13,16 +13,16 @@
 </script>
 
 <p class="font-display font-bold text-3xl ml-4 mb-8 md:mb-16">
-	Text to <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
-		>CAD</span
+	Text-to-CAD <span class="text-stroke text-stroke-chalkboard-100 dark:text-stroke-chalkboard-20"
+		>UI</span
 	>
 </p>
 <a
 	href="/"
 	class="block w-fit text-xs px-2 py-1 mb-4 hover:bg-chalkboard-20 dark:hover:bg-chalkboard-90"
 	>⬅ Back to home</a
 >
-<div>
+<div class="mb-24">
 	<div class="grid md:grid-cols-3 lg:grid-cols-4 border items-stretch">
 		<h1
 			class="font-normal font-mono md:col-span-2 lg:col-span-3 border-r px-2 py-6 lg:px-4 lg:py-16"
@@ -52,7 +52,3 @@
 		<p>Completed {data.body?.completed_at}</p>
 	</div>
 </div>
-<details>
-	<summary>page data</summary>
-	<pre>{JSON.stringify(data, null, 2)}</pre>
-</details>