Zoo rebrand (#1228)

* Add new logomarks

* Replace KittyCAD and KCMA with Zoo and ZMA anywhere it's safe

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Make README logo a PNG instead of an SVG

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 The KittyCAD Authors
+Copyright (c) 2023 The Zoo Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,17 +1,17 @@
-![KittyCAD Modeling App](/public/kcma-logomark-outlined.png)
+![Zoo Modeling App](/public/zma-logomark-outlined.png)
 
-## KittyCAD Modeling App
+## Zoo Modeling App
 
-live at [app.kittycad.io](https://app.kittycad.io/)
+live at [app.zoo.dev](https://app.zoo.dev/)
 
-A CAD application from the future, brought to you by the [KittyCAD team](https://kittycad.io).
+A CAD application from the future, brought to you by the [Zoo team](https://zoo.dev).
 
-The KittyCAD modeling app is our take on what a modern modelling experience can be. It is applying several lessons learned in the decades since most major CAD tools came into existence:
+Modeling App is our take on what a modern modelling experience can be. It is applying several lessons learned in the decades since most major CAD tools came into existence:
 
 - All artifacts—including parts and assemblies—should be represented as human-readable code. At the end of the day, your CAD project should be "plain text"
   - This makes version control—which is a solved problem in software engineering—trivial for CAD
 - All GUI (or point-and-click) interactions should be actions performed on this code representation under the hood
-  - This unlocks a hybrid approach to modeling. Whether you point-and-click as you always have or you write your own KCL code, you are performing the same action in KittyCAD Modeling App
+  - This unlocks a hybrid approach to modeling. Whether you point-and-click as you always have or you write your own KCL code, you are performing the same action in Modeling App
 - Everything graphics _has_ to be built for the GPU
   - Most CAD applications have had to retrofit support for GPUs, but our geometry engine is made for GPUs (primarily Nvidia's Vulkan), getting the order of magnitude rendering performance boost with it
 - Make the resource-intensive pieces of an application auto-scaling
@@ -19,9 +19,9 @@ The KittyCAD modeling app is our take on what a modern modelling experience can
 
 We are excited about what a small team of people could build in a short time with our API. We welcome you to try our API, build your own applications, or contribute to ours!
 
-KittyCAD Modeling App is a _hybrid_ user interface for CAD modeling. You can point-and-click to design parts (and soon assemblies), but everything you make is really just [`kcl` code](https://github.com/KittyCAD/kcl-experiments) under the hood. All of your CAD models can be checked into source control such as GitHub and responsibly versioned, rolled back, and more.
+Modeling App is a _hybrid_ user interface for CAD modeling. You can point-and-click to design parts (and soon assemblies), but everything you make is really just [`kcl` code](https://github.com/KittyCAD/kcl-experiments) under the hood. All of your CAD models can be checked into source control such as GitHub and responsibly versioned, rolled back, and more.
 
-The 3D view in KittyCAD Modeling App is just a video stream from our hosted geometry engine. The app sends new modeling commands to the engine via WebSockets, which returns back video frames of the view within the engine.
+The 3D view in Modeling App is just a video stream from our hosted geometry engine. The app sends new modeling commands to the engine via WebSockets, which returns back video frames of the view within the engine.
 
 ## Tools
 
@@ -185,7 +185,7 @@ First time running plawright locally, you'll need to add the secrets file
 touch ./e2e/playwright/playwright-secrets.env
 echo 'token="your-token"\nsnapshottoken="your-snapshot-token"' > ./e2e/playwright/playwright-secrets2.env
 ```
-then replace "your-token" with a dev token from dev.kittycad.io/account/api-tokens
+then replace "your-token" with a dev token from dev.zoo.dev/account/api-tokens
 
 then:
 run playwright

e2e/playwright/snapshot-tests.spec.ts

@@ -6,6 +6,7 @@ import { getUtils } from './test-utils'
 import { Models } from '@kittycad/lib'
 import fsp from 'fs/promises'
 import { spawn } from 'child_process'
+import { APP_NAME } from 'lib/constants'
 
 test.beforeEach(async ({ context, page }) => {
   await context.addInitScript(async (token) => {
@@ -196,7 +197,7 @@ const part001 = startSketchOn('-XZ')
   await page.waitForTimeout(1000)
   await u.clearAndCloseDebugPanel()
 
-  await page.getByRole('button', { name: 'KittyCAD Modeling App' }).click()
+  await page.getByRole('button', { name: APP_NAME }).click()
 
   interface Paths {
     modelPath: string

index.html

@@ -7,12 +7,12 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="An open-source CAD modeling tool from the future by KittyCAD."
+      content="An open-source CAD modeling tool from the future by Zoo."
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
     <script defer data-domain="app.kittycad.io" src="https://plausible.corp.kittycad.io/js/script.js"></script>
-    <title>KittyCAD Modeling App</title>
+    <title>Modeling App</title>
   </head>
   <body class="body-bg">
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/roadmap.md

@@ -1,4 +1,4 @@
-## KittyCAD Modeling App Roadmap
+## Zoo Modeling App Roadmap
 
 This document ties into our [GH Discussions Feature List](https://github.com/KittyCAD/modeling-app/discussions). Please upvote any features that you want to see next, or add ones that are not listed and we will review. 
 

public/zoo-logo.svg

@@ -0,0 +1,7 @@
+<svg width="438" height="145" viewBox="0 0 438 145" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path 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="white"/>
+<path 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="white"/>
+<path 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="white"/>
+<path 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="white"/>
+<path 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="white"/>
+</svg>

src/Auth.tsx

@@ -8,7 +8,7 @@ export const Auth = ({ children }: React.PropsWithChildren) => {
 
   return isLoggingIn ? (
     <Loading>
-      <span data-testid="initial-load">Loading KittyCAD Modeling App...</span>
+      <span data-testid="initial-load">Loading Modeling App...</span>
     </Loading>
   ) : (
     <>{children}</>

src/components/AppHeader.tsx

@@ -33,7 +33,7 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
+        ' overlaid-panes sticky top-0 z-20 py-1 px-2 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
         className
       }
     >

src/components/DownloadAppBanner.tsx

@@ -19,7 +19,7 @@ const DownloadAppBanner = () => {
         <div className="max-w-3xl mx-auto">
           <div className="flex gap-2 justify-between items-start">
             <h2 className="text-xl font-bold mb-4">
-              KittyCAD Modeling App is better as a desktop app!
+              Zoo Modeling App is better as a desktop app!
             </h2>
             <ActionButton
               Element="button"
@@ -42,7 +42,7 @@ const DownloadAppBanner = () => {
             </code>
             , and isn't backed up anywhere! Visit{' '}
             <a
-              href="https://kittycad.io/modeling-app/download"
+              href="https://zoo.dev/modeling-app/download"
               rel="noopener noreferrer"
               target="_blank"
               className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"

src/components/Logo.tsx

@@ -0,0 +1,33 @@
+export const Logo = ({
+  className = 'w-auto h-5 text-chalkboard-120 dark:text-chalkboard-10',
+  ...props
+}: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    className={className}
+    viewBox="0 0 438 145"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      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="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="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="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
+      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>
+)

src/components/ProjectSidebarMenu.test.tsx

@@ -4,6 +4,7 @@ import ProjectSidebarMenu from './ProjectSidebarMenu'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import { GlobalStateProvider } from './GlobalStateProvider'
 import CommandBarProvider from './CommandBar/CommandBar'
+import { APP_NAME } from 'lib/constants'
 
 const now = new Date()
 const projectWellFormed = {
@@ -71,9 +72,7 @@ describe('ProjectSidebarMenu tests', () => {
 
     fireEvent.click(screen.getByTestId('project-sidebar-toggle'))
 
-    expect(screen.getByTestId('projectName')).toHaveTextContent(
+    expect(screen.getByTestId('projectName')).toHaveTextContent(APP_NAME)
-      'KittyCAD Modeling App'
-    )
   })
 
   test('Renders as a link if set to do so', () => {

src/components/ProjectSidebarMenu.tsx

@@ -8,6 +8,8 @@ import { ExportButton } from './ExportButton'
 import { Fragment } from 'react'
 import { FileTree } from './FileTree'
 import { sep } from '@tauri-apps/api/path'
+import { Logo } from './Logo'
+import { APP_NAME } from 'lib/constants'
 
 const ProjectSidebarMenu = ({
   project,
@@ -21,37 +23,29 @@ const ProjectSidebarMenu = ({
   return renderAsLink ? (
     <Link
       to={paths.HOME}
-      className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
+      className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
       data-testid="project-sidebar-link"
     >
-      <img
+      <Logo />
-        src="/kitt-8bit-winking.svg"
-        alt="KittyCAD App"
-        className="w-auto h-9"
-      />
       <span
         className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
         data-testid="project-sidebar-link-name"
       >
-        {project?.name ? project.name : 'KittyCAD Modeling App'}
+        {project?.name ? project.name : APP_NAME}
       </span>
     </Link>
   ) : (
     <Popover className="relative">
       <Popover.Button
-        className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 p-0.5 pr-2 flex items-center gap-4 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
+        className="rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center gap-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-energy-50 dark:hover:bg-chalkboard-90"
         data-testid="project-sidebar-toggle"
       >
-        <img
+        <Logo />
-          src="/kitt-8bit-winking.svg"
-          alt="KittyCAD App"
-          className="w-auto h-full"
-        />
         <div className="flex flex-col items-start py-0.5">
           <span className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block">
             {isTauri() && file?.name
               ? file.name.slice(file.name.lastIndexOf(sep) + 1)
-              : 'KittyCAD Modeling App'}
+              : APP_NAME}
           </span>
           {isTauri() && project?.name && (
             <span className="hidden text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap lg:block">
@@ -88,18 +82,13 @@ const ProjectSidebarMenu = ({
           {({ close }) => (
             <>
               <div className="flex items-center gap-4 px-4 py-3">
-                <img
+                <Logo />
-                  src="/kitt-8bit-winking.svg"
-                  alt="KittyCAD App"
-                  className="w-auto h-9"
-                />
-
                 <div>
                   <p
                     className="m-0 text-chalkboard-100 dark:text-energy-10 text-mono"
                     data-testid="projectName"
                   >
-                    {project?.name ? project.name : 'KittyCAD Modeling App'}
+                    {project?.name ? project.name : APP_NAME}
                   </p>
                   {project?.entrypointMetadata && (
                     <p

src/lib/constants.ts

@@ -0,0 +1 @@
+export const APP_NAME = 'Modeling App'

src/routes/Onboarding/Camera.tsx

@@ -27,7 +27,7 @@ export default function Units() {
     <div className="fixed inset-0 z-50 grid items-end justify-start px-4 pointer-events-none">
       <div
         className={
-          'max-w-2xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/CmdK.tsx

@@ -14,7 +14,7 @@ export default function CmdK() {
     <div className="fixed inset-0 z-50 grid items-end justify-center pointer-events-none">
       <div
         className={
-          'max-w-full xl:max-w-4xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-full xl:max-w-4xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
@@ -34,8 +34,8 @@ export default function CmdK() {
         </p>
         <p className="my-4">
           We are working on a command bar that will allow you to quickly see and
-          search for any available commands. We are building KittyCAD Modeling
+          search for any available commands. We are building Zoo Modeling App's
-          App's state management system on top of{' '}
+          state management system on top of{' '}
           <a
             href="https://xstate.js.org/"
             rel="noreferrer noopener"

src/routes/Onboarding/CodeEditor.tsx

@@ -17,7 +17,7 @@ export default function CodeEditor() {
       ></div>
       <div
         className={
-          'z-10 max-w-xl h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/Export.tsx

@@ -1,3 +1,4 @@
+import { APP_NAME } from 'lib/constants'
 import { OnboardingButtons, onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
 
@@ -12,7 +13,7 @@ export default function Export() {
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-full xl:max-w-2xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-full xl:max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
@@ -22,9 +23,9 @@ export default function Export() {
             Try opening the project menu and clicking "Export Model".
           </p>
           <p className="my-4">
-            KittyCAD Modeling App uses{' '}
+            {APP_NAME} uses{' '}
             <a
-              href="https://kittycad.io/gltf-format-extension"
+              href="https://zoo.dev/gltf-format-extension"
               rel="noopener noreferrer"
               target="_blank"
             >
@@ -32,7 +33,7 @@ export default function Export() {
             </a>{' '}
             for the GLTF file format.{' '}
             <a
-              href="https://kittycad.io/docs/api/convert-cad-file"
+              href="https://zoo.dev/docs/api/convert-cad-file"
               rel="noopener noreferrer"
               target="_blank"
             >

src/routes/Onboarding/FutureWork.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react'
 import { bracket } from 'lib/exampleKcl'
 import { kclManager } from 'lang/KclSinglton'
 import { useModelingContext } from 'hooks/useModelingContext'
+import { APP_NAME } from 'lib/constants'
 
 export default function FutureWork() {
   const { send } = useModelingContext()
@@ -22,7 +23,7 @@ export default function FutureWork() {
 
   return (
     <div className="fixed grid justify-center items-center inset-0 bg-chalkboard-100/50 z-50">
-      <div className="max-w-full xl:max-w-2xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded">
+      <div className="max-w-full xl:max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded">
         <h1 className="text-2xl font-bold">Future Work</h1>
         <p className="my-4">
           We have curves, cuts, and many more CAD features coming soon. We want
@@ -32,10 +33,10 @@ export default function FutureWork() {
         </p>
         <p className="my-4">
           If you make anything with the app we'd love to see it! Thank you for
-          taking time to try out KittyCAD Modeling App, and build the future of
+          taking time to try out {APP_NAME}, and build the future of hardware
-          hardware design with us 💚.
+          design with us.
         </p>
-        <p className="my-4">— The KittyCAD Team</p>
+        <p className="my-4">💚 The Zoo Team</p>
         <OnboardingButtons
           className="mt-6"
           dismiss={dismiss}

src/routes/Onboarding/InteractiveNumbers.tsx

@@ -17,7 +17,7 @@ export default function InteractiveNumbers() {
       ></div>
       <div
         className={
-          'z-10 max-w-xl h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/Introduction.tsx

@@ -21,6 +21,7 @@ import { paths } from 'Router'
 import { useEffect } from 'react'
 import { kclManager } from 'lang/KclSinglton'
 import { sep } from '@tauri-apps/api/path'
+import { APP_NAME } from 'lib/constants'
 
 function OnboardingWithNewFile() {
   const navigate = useNavigate()
@@ -129,8 +130,8 @@ export default function Introduction() {
       <div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
         <h1 className="flex flex-wrap items-center gap-4 text-2xl font-bold">
           <img
-            src={`/kcma-logomark${getLogoTheme()}.svg`}
+            src={`/zma-logomark${getLogoTheme()}.svg`}
-            alt="KittyCAD Modeling App"
+            alt={APP_NAME}
             className="h-20 max-w-full"
           />
           <span className="px-3 py-1 text-base rounded-full bg-energy-10 text-energy-80">
@@ -139,11 +140,11 @@ export default function Introduction() {
         </h1>
         <section className="my-12">
           <p className="my-4">
-            Welcome to KittyCAD Modeling App! This is a hardware design tool
+            Welcome to {APP_NAME}! This is a hardware design tool that lets you
-            that lets you edit visually, with code, or both. It's powered by the
+            edit visually, with code, or both. It's powered by the first API
-            first API created for anyone to build hardware design tools. The 3D
+            created for anyone to build hardware design tools. The 3D view is
-            view is not running on your computer, but is instead being streamed
+            not running on your computer, but is instead being streamed to you
-            to you from a remote GPU as video.
+            from a remote GPU as video.
           </p>
           <p className="my-4">
             This is an alpha release, so you will encounter bugs and missing

src/routes/Onboarding/ParametricModeling.tsx

@@ -29,7 +29,7 @@ export default function ParametricModeling() {
       ></div>
       <div
         className={
-          'z-10 max-w-xl h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'z-10 max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/ProjectMenu.tsx

@@ -13,7 +13,7 @@ export default function ProjectMenu() {
     <div className="fixed grid justify-center items-start inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-xl flex flex-col border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/Onboarding/Sketching.tsx

@@ -22,7 +22,7 @@ export default function Sketching() {
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-full xl:max-w-2xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-full xl:max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
@@ -35,7 +35,7 @@ export default function Sketching() {
         </p>
         <p className="my-4">
           Watch the code pane as you click. Point-and-click interactions are
-          always just modifying and generating code in KittyCAD Modeling App.
+          always just modifying and generating code in Zoo Modeling App.
         </p>
         <OnboardingButtons
           className="mt-6"

src/routes/Onboarding/Streaming.tsx

@@ -12,7 +12,7 @@ export default function Streaming() {
     <div className="fixed grid justify-start items-center inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-xl h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg h-3/4 flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
@@ -20,18 +20,18 @@ export default function Streaming() {
           <h2 className="text-2xl">Streaming Video</h2>
           <p className="my-4">
             The 3D view is not running on your computer. Instead, our
-            infrastructure spins up the KittyCAD Geometry Engine on a remote
+            infrastructure spins up the Zoo Geometry Engine on a remote GPU, Zoo
-            GPU, KittyCAD Modeling App sends it a series of commands via
+            Modeling App sends it a series of commands via Websockets and
-            Websockets and WebRTC, and the Geometry Engine sends back a video
+            WebRTC, and the Geometry Engine sends back a video stream of the 3D
-            stream of the 3D view.
+            view.
           </p>
           <p className="my-4">
-            This means that you could run KittyCAD Modeling App on a Chromebook,
+            This means that you could run Zoo Modeling App on a Chromebook, a
-            a tablet, or even a phone, as long as you have a good internet
+            tablet, or even a phone, as long as you have a good internet
             connection.
           </p>
           <p className="my-4">
-            It also means that whatever tools you build on top of the KittyCAD
+            It also means that whatever tools you build on top of the Zoo
             Geometry Engine will be able to run on any device with a browser,
             and you won't have to worry about the performance of the device.
           </p>

src/routes/Onboarding/UserMenu.tsx

@@ -12,7 +12,7 @@ export default function UserMenu() {
     <div className="fixed grid justify-center items-start inset-0 z-50 pointer-events-none">
       <div
         className={
-          'max-w-xl flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
+          'max-w-xl flex flex-col border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >

src/routes/SignIn.tsx

@@ -5,6 +5,7 @@ import { VITE_KC_SITE_BASE_URL, VITE_KC_API_BASE_URL } from '../env'
 import { Themes, getSystemTheme } from '../lib/theme'
 import { paths } from '../Router'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import { APP_NAME } from 'lib/constants'
 
 const SignIn = () => {
   const {
@@ -45,20 +46,20 @@ const SignIn = () => {
           </span>
         </div>
         <h1 className="font-bold text-2xl mt-12 mb-6">
-          Sign in to get started with the KittyCAD Modeling App
+          Sign in to get started with the {APP_NAME}
         </h1>
         <p className="py-4">
-          KCMA is an open-source CAD application for creating accurate 3D models
+          ZMA is an open-source CAD application for creating accurate 3D models
-          for use in manufacturing. It is built on top of the KittyCAD API.
+          for use in manufacturing. It is built on top of KittyCAD, the design
-          KittyCAD is the first software infrastructure company built
+          API from Zoo. Zoo is the first software infrastructure company built
-          specifically for the needs of the manufacturing industry. With KCMA we
+          specifically for the needs of the manufacturing industry. With ZMA we
-          are showing how the KittyCAD API can be used to build entirely new
+          are showing how the KittyCAD API from Zoo can be used to build
-          kinds of software for manufacturing.
+          entirely new kinds of software for manufacturing.
         </p>
         <p className="py-4">
-          KCMA is currently in development. If you would like to be notified
+          ZMA is currently in development. If you would like to be notified when
-          when KCMA is ready for production, please sign up for our mailing list
+          ZMA is ready for production, please sign up for our mailing list at{' '}
-          at <a href="https://kittycad.io">kittycad.io</a>.
+          <a href="https://zoo.dev">zoo.dev</a>.
         </p>
         {isTauri() ? (
           <ActionButton