feat: New brand purple (#32)

package.json

@@ -16,7 +16,6 @@
     "@astrojs/react": "^3.4.0",
     "@astrojs/sitemap": "^3.1.5",
     "@axe-core/playwright": "^4.9.1",
-    "@radix-ui/colors": "^3.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.9.2",

src/layouts/BaseLayout.astro

@@ -25,8 +25,8 @@ const pageTitle = Astro.url.pathname === "/" ? title : `${title} · Namesake`;
     <meta name="generator" content={Astro.generator} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light" />
-    <link rel="icon" href="/favicon.ico?v2" sizes="32x32" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v2" />
+    <link rel="icon" href="/favicon.ico?v3" sizes="32x32" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v3" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="canonical" href={canonicalURL} />

src/pages/index.astro

@@ -2,7 +2,8 @@
 import { Image } from "astro:assets";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { RiArrowRightLine } from "react-icons/ri";
-import image from "./namesake-form.png";
+import illustration from "./namesake-form.png";
+import formIllustration from "./form-snail.png";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 ---
@@ -15,7 +16,7 @@ import Footer from "../components/Footer.astro";
   <main>
     <Image
       class="illustration"
-      src={image}
+      src={illustration}
       alt="Some snails and flowers on top of a court order document"
       width={600}
       densities={[1, 2]}
@@ -50,6 +51,13 @@ import Footer from "../components/Footer.astro";
         </p>
       </div>
       <form>
+        <Image
+          class="form-illustration"
+          src={formIllustration}
+          alt="A snail moving to the left"
+          width={240}
+          densities={[1, 2]}
+        />
         <strong>Get notified when we launch:</strong>
         <div class="input-group">
           <input type="email" name="email" placeholder="Your email" required />
@@ -91,7 +99,7 @@ import Footer from "../components/Footer.astro";
   main {
     flex: 1;
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: minmax(460px, 1fr) minmax(0, 1fr);
     gap: var(--space-2xl);
     padding: var(--space-2xl) var(--space-l);
     min-width: 0;
@@ -126,7 +134,7 @@ import Footer from "../components/Footer.astro";
   }
 
   .who-you-are {
-    color: var(--background);
+    color: var(--bg-purple);
   }
 
   .subhead {
@@ -138,14 +146,22 @@ import Footer from "../components/Footer.astro";
   }
 
   form {
-    color: var(--background);
-    background-color: var(--gray-12);
-    margin-block-start: var(--space-xl);
+    color: var(--bg-purple);
+    background-color: var(--text);
+    margin-block-start: var(--space-3xl);
     padding: var(--space-l) var(--space-m);
+    position: relative;
 
     @media (width < 540px) {
       width: 100%;
     }
+
+    .form-illustration {
+      width: 120px;
+      position: absolute;
+      bottom: calc(100% - 4px);
+      right: 20px;
+    }
   }
 
   .input-group {
@@ -158,21 +174,21 @@ import Footer from "../components/Footer.astro";
   input,
   button {
     border: none;
-    background: var(--background);
+    background: var(--bg-purple);
     border-radius: var(--radius-s);
-    color: var(--gray-12);
+    color: var(--text);
     padding: var(--space-s) var(--space-s);
   }
 
   input {
     flex: 1;
 
     &::placeholder {
-      color: var(--gray-a9);
+      color: var(--text-placeholder);
     }
 
     &:focus {
-      background-color: var(--white-a12);
+      background-color: var(--white);
     }
   }
 
@@ -187,12 +203,12 @@ import Footer from "../components/Footer.astro";
 
     @media (hover: hover) {
       &:hover {
-        background: var(--white-a12);
+        background: var(--white);
       }
     }
 
     &:focus-visible {
-      background: var(--white-a12);
+      background: var(--white);
     }
   }
 </style>

src/styles/base.css

@@ -4,10 +4,10 @@ html {
 }
 
 body {
-  color: var(--gray-12);
-  background-color: var(--background);
+  color: var(--text);
+  background-color: var(--bg-purple);
   background-image: url('/speckles-black.svg');
-  background-position: center;
+  background-position: center top;
   display: flex;
   min-height: 100dvh;
   position: relative;
@@ -26,14 +26,14 @@ body::after {
   position: absolute;
   inset: 0;
   background-image: url('/speckles-purple.svg');
-  background-position: center;
+  background-position: center top;
   pointer-events: none;
   z-index: 10;
 }
 
 ::selection {
-  background: var(--gray-12);
-  color: var(--background);
+  background: var(--text);
+  color: var(--bg-purple);
 }
 
 h1, h2, h3 {
@@ -75,7 +75,7 @@ small {
 
 a {
   text-decoration: underline;
-  text-decoration-color: var(--gray-a11);
+  text-decoration-color: var(--text);
   text-underline-offset: max(0.1em, 2.5px);
   transition:
     text-decoration-color 0.2s ease-in-out,
@@ -85,7 +85,7 @@ a {
 @media (hover: hover) {
   a:hover,
   a:focus {
-    text-decoration-color: var(--gray-12);
+    text-decoration-color: var(--text);
   }
 }
 
@@ -94,6 +94,6 @@ a {
 }
 
 :focus-visible {
-  outline: 2px solid var(--white-a12);
+  outline: 2px solid var(--white);
   outline-offset: 2px;
 }

src/styles/theme.css

@@ -1,8 +1,3 @@
-@import "@radix-ui/colors/gray.css";
-@import "@radix-ui/colors/gray-alpha.css";
-@import "@radix-ui/colors/violet.css";
-@import "@radix-ui/colors/white-alpha.css";
-
 :root {
   /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,22,1.25,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
   --step--1: clamp(0.9375rem, 0.881rem + 0.2826vi, 1.1rem);
@@ -40,6 +35,9 @@
   --radius-m: var(--space-m);
   --radius-l: var(--space-l);
 
-  /* Background */
-  --background: var(--violet-7);
+  /* Colors */
+  --bg-purple: #CDA5EF;
+  --text: #111111;
+  --text-placeholder: rgba(0, 0, 0, 0.5);
+  --white: #FFFFFF;
 }