Brand update

docs/src/app/(public)/blog/page.tsx

@@ -29,7 +29,7 @@ export default async function Blog() {
 
   return (
     <>
-      <div className="mb-8 sm:text-center">
+      <div className="mb-8 pt-24 sm:text-center">
         <h1
           className="mb-8 text-3xl font-extrabold sm:text-4xl md:text-5xl"
           id={H1_ID}

docs/src/app/(public)/docs/layout.tsx

@@ -39,7 +39,7 @@ export default async function RootLayout({
       </SideNav>
 
       {/** CONTENT */}
-      <div className="flex-1 px-6 lg:pl-60 lg:pt-24">
+      <div className="flex-1 px-6 pt-24 lg:pl-60">
         <div className="py-10 lg:pl-12">
           <Main className="flex gap-8">
             {/** INNER CONTENT */}

docs/src/app/(public)/layout.tsx

@@ -10,7 +10,7 @@ export default async function RootLayout({
   const navigationMap = await getNavigationMap();
 
   return (
-    <div className="flex min-h-screen flex-col text-slate-12">
+    <div className="flex min-h-screen flex-col text-sand-12">
       <HeaderNav navigationMap={navigationMap} />
       {children}
     </div>

docs/src/app/(public)/page.tsx

@@ -15,8 +15,10 @@ export default function Homepage() {
         <Features />
         <CliVideo />
         <DocsLinks />
-        <MailingList />
-        <CallToAction />
+        <div className="grid sm:grid-cols-2">
+          <MailingList />
+          <CallToAction />
+        </div>
       </Main>
       <Footer />
     </>

docs/src/app/(public)/showcase/[slug]/page.tsx

@@ -31,7 +31,7 @@ export default async function Docs({ params }: { params: { slug: string } }) {
       : sortedProjects[0];
 
   return (
-    <div className="py-10">
+    <div className="py-10 pt-24">
       <header>
         <div className="grid grid-cols-2 items-end gap-12 md:grid-cols-[1fr,auto,1fr]">
           {/* Previous project */}
@@ -40,22 +40,22 @@ export default async function Docs({ params }: { params: { slug: string } }) {
             href={`/showcase/${previousProject.slug}`}
             className="group mb-2 flex flex-col gap-6"
           >
-            <span className="font-medium leading-none text-slate-9">
+            <span className="font-medium leading-none text-sand-9">
               &larr; Previous
             </span>
-            <span className="text-lg font-bold leading-none group-hover:underline">
+            <span className="text-lg font-medium leading-none group-hover:underline">
               {previousProject.entry.title}
             </span>
           </Link>
           {/* Current project */}
           <div className="col-span-2 row-start-1 text-center md:col-span-1 md:col-start-2">
             <Link
               href="/showcase"
-              className="font-medium text-slate-11 hover:underline"
+              className="font-medium text-sand-11 hover:underline"
             >
               Showcase
             </Link>
-            <h1 className="mt-2 text-3xl font-extrabold leading-none sm:text-4xl md:mt-4 md:text-5xl lg:mt-6">
+            <h1 className="mt-2 text-3xl font-medium leading-none sm:text-4xl md:mt-4 md:text-5xl lg:mt-6">
               {project.title}
             </h1>
           </div>
@@ -64,17 +64,17 @@ export default async function Docs({ params }: { params: { slug: string } }) {
             href={`/showcase/${nextProject.slug}`}
             className="group mb-2 flex flex-col gap-6 justify-self-end rounded-md text-right"
           >
-            <span className="font-medium leading-none text-slate-9">
+            <span className="font-medium leading-none text-sand-9">
               Next &rarr;
             </span>
-            <span className="text-lg font-bold leading-none group-hover:underline">
+            <span className="text-lg font-medium leading-none group-hover:underline">
               {nextProject.entry.title}
             </span>
           </Link>
         </div>
 
-        <div className="border-b-2 border-slate-5">
-          <div className="relative mt-8 aspect-[16/10.5] overflow-hidden rounded-t-2xl border-2 border-b-0 border-slate-5 md:mt-16 lg:mx-20">
+        <div className="border-b-2 border-sand-5">
+          <div className="relative mt-8 aspect-[16/10.5] overflow-hidden rounded-t-2xl border-2 border-b-0 border-sand-5 md:mt-16 lg:mx-20">
             {/* Window buttons fake UI */}
             <div
               className="absolute left-2.5 top-2.5 z-10 flex gap-1.5"
@@ -93,9 +93,7 @@ export default async function Docs({ params }: { params: { slug: string } }) {
           </div>
         </div>
         <div className="mx-auto mt-16 max-w-2xl [text-wrap:balance]">
-          <p className="text-center font-medium md:text-lg">
-            {project.summary}
-          </p>
+          <p className="text-center md:text-lg">{project.summary}</p>
           <div className="mt-10 flex items-center justify-center gap-2">
             {project.repoUrl && (
               <ActionButton
@@ -117,7 +115,7 @@ export default async function Docs({ params }: { params: { slug: string } }) {
 
       {content && (
         <>
-          <hr className="mx-auto mt-16 w-20 border-slate-5" />
+          <hr className="mx-auto mt-16 w-20 border-sand-5" />
           <main className="bg-white py-12">
             <div className="prose mx-auto px-4 lg:prose-lg sm:px-6 lg:px-8">
               <DocumentRenderer document={content} slug={slug} />

docs/src/app/(public)/showcase/page.tsx

@@ -30,10 +30,12 @@ export default async function Showcase() {
   const highlightedProjects = sortedProjects.splice(0, 2);
 
   return (
-    <div className="mb-20 mt-16">
+    <div className="mb-20 mt-24 pt-10">
       <div className="mx-auto max-w-2xl text-center">
-        <h1 className="text-5xl font-extrabold">Built with Keystatic</h1>
-        <div className="mt-4 space-y-4 text-lg font-medium md:mt-6">
+        <h1 className="text-4xl font-medium md:text-5xl">
+          Built with Keystatic
+        </h1>
+        <div className="mt-6 space-y-4 text-lg">
           <p>
             A collection of projects using Keystatic to manage parts of their
             codebase.
@@ -70,18 +72,18 @@ export default async function Showcase() {
 
 function ProjectCard({ entry, slug }: Project) {
   return (
-    <li className="relative flex flex-col overflow-hidden rounded-2xl border border-slate-3 bg-slate-3 p-8 @container">
+    <li className="relative flex flex-col overflow-hidden rounded-lg border border-sand-6 bg-sand-2 p-8 @container">
       <div className="flex-1">
         <div className="flex items-start justify-between gap-x-4">
-          <h2 className="text-xl font-bold group-hover:underline @sm:text-2xl">
+          <h2 className="text-xl font-medium group-hover:underline @sm:text-2xl">
             <Link href={`/showcase/${slug}`} className="hover:underline">
               {entry.title}
             </Link>
           </h2>
           {entry.type === 'demo' && <DemoBadge />}
         </div>
-        <p className="mt-6 text-sm text-slate-11">{entry.summary}</p>
-        <div className="mt-6 flex flex-wrap items-center gap-2">
+        <p className="mt-4">{entry.summary}</p>
+        <div className="mt-8 flex flex-wrap items-center gap-2">
           {/* TODO: New button styles */}
           <ActionButton href={entry.url ?? ''} icon={GlobeIcon}>
             Visit
@@ -100,14 +102,14 @@ function ProjectCard({ entry, slug }: Project) {
 
       <div className="relative aspect-[16/10] translate-x-12 translate-y-8 @sm:translate-y-20">
         {/* Image stack effect on large cards */}
-        <div className="absolute -right-8 -top-5 hidden h-full w-full rounded-xl border border-slate-3 bg-white @sm:block" />
-        <div className="absolute -right-4 -top-2.5 hidden h-full w-full rounded-xl border border-slate-3 bg-white @sm:block" />
+        <div className="absolute -right-8 -top-5 hidden h-full w-full rounded-xl border border-sand-6 bg-white @sm:block" />
+        <div className="absolute -right-4 -top-2.5 hidden h-full w-full rounded-xl border border-sand-6 bg-white @sm:block" />
 
         <Image
           src={entry.coverImage.src}
           layout="fill"
           alt=""
-          className="absolute inset-0 w-full rounded-tl-xl object-cover @sm:border-l @sm:border-t @sm:border-slate-3"
+          className="absolute inset-0 w-full rounded-tl-xl object-cover @sm:border-l @sm:border-t @sm:border-sand-6"
         />
       </div>
     </li>
@@ -126,8 +128,8 @@ function DemoBadge() {
         className="h-4 w-4"
       >
         <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
           d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
         />
       </svg>

docs/src/app/(public)/thank-you/page.tsx

@@ -31,30 +31,12 @@ export const metadata = {
 export default function ThankYouPage() {
   return (
     <>
-      <Main className="mx-auto flex w-full max-w-7xl flex-1 items-center px-6 pb-12 pt-6">
-        <div className="max-w-xl">
-          <h1
-            className="text-3xl font-extrabold sm:text-4xl md:text-5xl"
-            id={H1_ID}
-          >
-            Thank you for being{' '}
-            <span className="relative inline-block">
-              <svg
-                className="absolute -right-1 bottom-0 w-full"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 410 101"
-                aria-hidden="true"
-              >
-                <path
-                  fill="#F7DE5B"
-                  d="m5.158.403 96.893 5.068 105.224 9.473 103.466 9.547 98.65 4.995-22.978 8.574 14.51 10.25 2.849 8.767-15.582 5.694 8.105 5.662 8.106 5.661-15.474 5.69 11.444 9.797 3.915 10.861-97.861-3.907-104.581-8.007-122.06-5.809-79.73-11.36L13.65 63.35 1.33 53.62l5.972-10.128-4.696-7.611 17.604-.658L7.903 20.749l5.786-11.577-8.53-8.77Z"
-                />
-              </svg>
-              <span className="relative">curious!</span>
-            </span>
+      <Main className="mx-auto flex w-full max-w-7xl flex-1 items-center px-6 pb-24 pt-24">
+        <div className="flex max-w-xl flex-col gap-6 pt-10">
+          <h1 className="text-5xl font-medium" id={H1_ID}>
+            Thank you for being curious!
           </h1>
-          <p className="mt-8 text-lg text-slate-11">
+          <p className="text-lg">
             We're looking forward to sharing updates with you in the coming
             weeks and months.
           </p>

docs/src/app/layout.tsx

@@ -21,11 +21,11 @@ export const metadata = {
     description: 'Content management for your codebase.',
     images: [
       {
-        url: 'https://thinkmill-labs.keystatic.net/keystatic-site/images/x93u9oqzdwlv/og-image',
+        url: 'https://thinkmill-labs.keystatic.net/keystatic-site/images/lok6jo6bsuca/og-image',
         width: 1200,
         height: 630,
         alt: 'Keystatic cover image',
-        type: 'image/jpeg',
+        type: 'image/png',
       },
     ],
     siteName: 'Keystatic',