From f6a4fc788728df9a0a21f1115c9f8df435371d22 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 9 Mar 2026 13:49:30 -0500
Subject: [PATCH] fix(site): rebrand polish (#775)

---
 site/src/components/Aside.astro               |   6 +-
 site/src/components/DialNav.tsx               | 121 +++++++++++-------
 site/src/components/Footer.astro              |   8 +-
 site/src/components/FooterDocs.astro          |   8 +-
 site/src/components/NavBar/MobileNav.tsx      |   2 +-
 site/src/components/Search/Search.tsx         |   6 +-
 site/src/components/Tabs.tsx                  |   4 +-
 site/src/components/docs/SidebarItem.astro    |   4 +-
 .../TableOfContents.mobile.tsx                |   2 +-
 site/src/components/frames/Minimal.astro      |   2 +-
 site/src/components/home/Demo/Demo.tsx        |   2 +-
 site/src/components/home/Header.astro         |  10 +-
 .../components/typography/Blockquote.astro    |   4 +-
 site/src/components/typography/H1.astro       |   2 +-
 site/src/components/typography/H2.astro       |   3 +-
 .../components/typography/H2Markdown.astro    |   2 +-
 site/src/components/typography/H3.astro       |   4 +-
 .../components/typography/H3Markdown.astro    |   2 +-
 site/src/components/typography/H4.astro       |   2 +-
 site/src/components/typography/H5.astro       |   2 +-
 site/src/components/typography/H6.astro       |   2 +-
 site/src/components/typography/Hr.astro       |   2 +-
 site/src/components/typography/Img.astro      |   2 +-
 site/src/components/typography/Ol.astro       |   2 +-
 site/src/components/typography/P.astro        |   2 +-
 site/src/components/typography/Table.astro    |  10 +-
 site/src/components/typography/Td.astro       |   2 +-
 site/src/components/typography/Th.astro       |   2 +-
 site/src/components/typography/Ul.astro       |   2 +-
 site/src/components/typography/styles.ts      |   4 +-
 site/src/content/pages/privacy.mdx            |   2 +-
 site/src/layouts/Markdown.astro               |   6 +-
 site/src/pages/auth/success.astro             |   8 +-
 site/src/pages/blog/[...page].astro           |   2 +-
 site/src/pages/blog/[...slug].astro           |   8 +-
 .../framework/[framework]/[...slug].astro     |  15 ++-
 site/src/utils/twMerge.ts                     |   1 +
 37 files changed, 160 insertions(+), 108 deletions(-)

diff --git a/site/src/components/Aside.astro b/site/src/components/Aside.astro
index 854c3f75..e0438848 100644
--- a/site/src/components/Aside.astro
+++ b/site/src/components/Aside.astro
@@ -39,7 +39,7 @@ const renderTitle = title ?? defaultTitles[type];
 <aside
   class={twMerge(
     clsx(
-      "mx-auto my-6 flex w-full max-w-3xl overflow-hidden rounded-xs border border-manila-75 dark:border-warm-gray",
+      "mx-auto my-4 flex w-full max-w-3xl overflow-hidden rounded-xs border border-manila-75 dark:border-warm-gray",
     ),
     className,
   )}
@@ -54,7 +54,7 @@ const renderTitle = title ?? defaultTitles[type];
     )}
   >
   </div>
-  <div class={clsx("flex flex-1 gap-4 p-6 pl-4")}>
+  <div class={clsx("flex flex-1 gap-4 p-4 pl-4")}>
     <div class="mt-0.75 shrink-0">
       <Icon
         size={18}
@@ -70,7 +70,7 @@ const renderTitle = title ?? defaultTitles[type];
     </div>
     <div class="min-w-0 flex-1">
       <p class="mb-2 font-bold">{renderTitle}</p>
-      <div class="[&>*:last-child]:mb-0! [&>.my-12]:my-4 [&>.my-6]:my-2">
+      <div class="[&>*:last-child]:mb-0! [&>.my-4]:my-2 [&>.my-8]:my-4">
         <slot />
       </div>
     </div>
diff --git a/site/src/components/DialNav.tsx b/site/src/components/DialNav.tsx
index 052c1ab5..559461c4 100644
--- a/site/src/components/DialNav.tsx
+++ b/site/src/components/DialNav.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import DialInner from '@/components/icons/dial-inner.svg?react';
 import DialOuter from '@/components/icons/dial-outer.svg?react';
+import GetStartedLink from '@/components/NavBar/GetStartedLink';
 
 type Link = { href: string; label: string; angle: number };
 
@@ -17,13 +18,14 @@ export default function DialNav({ left, right }: DialNavProps) {
   const [activeHref, setActiveHref] = useState<string | null>(null);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  function handleClick(e: React.MouseEvent, link: Link) {
+  function handleClick(e: React.MouseEvent<HTMLAnchorElement>, link: Link) {
     e.preventDefault();
+    const resolvedHref = e.currentTarget.href;
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setActiveAngle(link.angle);
     setActiveHref(link.href);
     timeoutRef.current = setTimeout(() => {
-      window.location.href = link.href;
+      window.location.href = resolvedHref;
     }, TRANSITION_MS);
   }
 
@@ -47,57 +49,78 @@ export default function DialNav({ left, right }: DialNavProps) {
     <div className="flex items-center gap-0">
       {/* Left links */}
       <div className="flex flex-col gap-2">
-        {left.map((link) => (
-          <a
-            key={link.href}
-            href={link.href}
-            onClick={(e) => handleClick(e, link)}
-            className={clsx(
-              'flex rounded-xs min-w-44 items-center gap-2 px-6 py-6 text-h5 font-display-compact font-bold uppercase text-faded-black dark:text-manila-light',
-              'justify-end pr-15 -mr-12 bg-manila-50 dark:bg-black'
-            )}
-          >
-            {link.label}
-            <span
-              className="w-2.5 h-2.5 rounded-full border border-faded-black dark:border-manila-light"
-              style={dotStyle(link.href)}
-            />
-          </a>
-        ))}
+        {left.map((link) => {
+          const Tag = link.href === '/docs' ? GetStartedLink : 'a';
+          return (
+            <Tag
+              key={link.href}
+              href={link.href}
+              onClick={(e) => handleClick(e, link)}
+              className={clsx(
+                'flex rounded-xs min-w-44 items-center gap-2 px-6 py-6 text-h5 font-display-compact font-bold uppercase text-faded-black dark:text-manila-light',
+                'justify-end pr-15 -mr-12 bg-manila-50 dark:bg-black'
+              )}
+            >
+              {link.label}
+              <span
+                className="w-2.5 h-2.5 rounded-full border border-faded-black dark:border-manila-light"
+                style={dotStyle(link.href)}
+              />
+            </Tag>
+          );
+        })}
       </div>
 
-      <a
-        key={left[0].href}
-        href={left[0].href}
-        onClick={(e) => handleClick(e, left[0])}
-        className="w-20 h-20 md:w-32 md:h-32 shrink-0 relative z-10 text-manila-light dark:text-faded-black"
-      >
-        <DialOuter
-          className="outline-8 rounded-full outline-manila-dark dark:outline-faded-black"
-          width={'100%'}
-          height={'auto'}
-        />
-        <DialInner style={needleStyle} className="absolute inset-0" width={'100%'} height={'auto'} />
-      </a>
+      {left[0].href === '/docs' ? (
+        <GetStartedLink
+          key={left[0].href}
+          onClick={(e) => handleClick(e, left[0])}
+          className="w-20 h-20 md:w-32 md:h-32 shrink-0 relative z-10 text-manila-light dark:text-faded-black"
+        >
+          <DialOuter
+            className="outline-8 rounded-full outline-manila-dark dark:outline-faded-black"
+            width={'100%'}
+            height={'auto'}
+          />
+          <DialInner style={needleStyle} className="absolute inset-0" width={'100%'} height={'auto'} />
+        </GetStartedLink>
+      ) : (
+        <a
+          key={left[0].href}
+          href={left[0].href}
+          onClick={(e) => handleClick(e, left[0])}
+          className="w-20 h-20 md:w-32 md:h-32 shrink-0 relative z-10 text-manila-light dark:text-faded-black"
+        >
+          <DialOuter
+            className="outline-8 rounded-full outline-manila-dark dark:outline-faded-black"
+            width={'100%'}
+            height={'auto'}
+          />
+          <DialInner style={needleStyle} className="absolute inset-0" width={'100%'} height={'auto'} />
+        </a>
+      )}
 
       <div className="flex flex-col gap-2">
-        {right.map((link) => (
-          <a
-            key={link.href}
-            href={link.href}
-            onClick={(e) => handleClick(e, link)}
-            className={clsx(
-              'flex rounded-xs min-w-44 items-center gap-2 px-6 py-6 text-h5 font-display-compact font-bold uppercase text-faded-black dark:text-manila-light',
-              'pl-15 -ml-12 bg-manila-50 dark:bg-black'
-            )}
-          >
-            <span
-              className="w-2.5 h-2.5 rounded-full border border-faded-black dark:border-manila-light"
-              style={dotStyle(link.href)}
-            />
-            {link.label}
-          </a>
-        ))}
+        {right.map((link) => {
+          const Tag = link.href === '/docs' ? GetStartedLink : 'a';
+          return (
+            <Tag
+              key={link.href}
+              href={link.href}
+              onClick={(e) => handleClick(e, link)}
+              className={clsx(
+                'flex rounded-xs min-w-44 items-center gap-2 px-6 py-6 text-h5 font-display-compact font-bold uppercase text-faded-black dark:text-manila-light',
+                'pl-15 -ml-12 bg-manila-50 dark:bg-black'
+              )}
+            >
+              <span
+                className="w-2.5 h-2.5 rounded-full border border-faded-black dark:border-manila-light"
+                style={dotStyle(link.href)}
+              />
+              {link.label}
+            </Tag>
+          );
+        })}
       </div>
     </div>
   );
diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
index 1c1d6550..f333205a 100644
--- a/site/src/components/Footer.astro
+++ b/site/src/components/Footer.astro
@@ -4,6 +4,7 @@ import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 import Discord from './icons/discord.svg?react';
 import GitHub from './icons/github.svg?react';
 import LogoMonoVersion from './icons/logo-mono.svg?react';
+import GetStartedLink from './NavBar/GetStartedLink';
 import { ThemeToggle } from './ThemeToggle';
 
 type NavLink = {
@@ -12,7 +13,6 @@ type NavLink = {
   external?: boolean;
 };
 const navLinks: NavLink[] = [
-  { href: '/docs', label: 'Docs' },
   { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
 ];
@@ -38,6 +38,12 @@ const { class: className } = Astro.props;
       <div
         class="flex justify-between border-t border-b border-faded-black pt-3 pb-3 md:justify-center md:border-0 md:pt-0 md:pb-0 dark:border-manila-light"
       >
+        <GetStartedLink
+          client:idle
+          className="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+        >
+          Docs
+        </GetStartedLink>
         {
           navLinks.map((link) => (
             <a
diff --git a/site/src/components/FooterDocs.astro b/site/src/components/FooterDocs.astro
index 53deed6e..7f3bbc41 100644
--- a/site/src/components/FooterDocs.astro
+++ b/site/src/components/FooterDocs.astro
@@ -4,6 +4,7 @@ import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 import Discord from './icons/discord.svg?react';
 import GitHub from './icons/github.svg?react';
 import LogoMonoVersion from './icons/logo-mono.svg?react';
+import GetStartedLink from './NavBar/GetStartedLink';
 import { ThemeToggle } from './ThemeToggle';
 
 type NavLink = {
@@ -12,7 +13,6 @@ type NavLink = {
   external?: boolean;
 };
 const navLinks: NavLink[] = [
-  { href: '/docs', label: 'Docs' },
   { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
 ];
@@ -33,6 +33,12 @@ const { class: className } = Astro.props;
       <div
         class="flex justify-between border-t border-b border-faded-black pt-3 pb-3 lg:justify-center lg:border-0 lg:pt-0 lg:pb-0 dark:border-manila-light"
       >
+        <GetStartedLink
+          client:idle
+          className="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+        >
+          Docs
+        </GetStartedLink>
         {
           navLinks.map((link) => (
             <a
diff --git a/site/src/components/NavBar/MobileNav.tsx b/site/src/components/NavBar/MobileNav.tsx
index 9a95028e..6ffe6007 100644
--- a/site/src/components/NavBar/MobileNav.tsx
+++ b/site/src/components/NavBar/MobileNav.tsx
@@ -115,8 +115,8 @@ export default function MobileNav({ navLinks, currentPath, children }: MobileNav
                 GitHub
               </a>
             </nav>
+            <p className="text-center p-6 mt-auto text-p2">The open source player for the web</p>
           </div>
-          <p className="text-center p-6 mt-auto text-p2">The open source player for the web</p>
         </Dialog.Popup>
       </Dialog.Portal>
     </Dialog.Root>
diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
index e766865f..37c5974e 100644
--- a/site/src/components/Search/Search.tsx
+++ b/site/src/components/Search/Search.tsx
@@ -1,7 +1,7 @@
 import { Dialog } from '@base-ui/react/dialog';
 import { useStore } from '@nanostores/react';
 import { useEffect, useRef, useState } from 'react';
-import { currentFramework, currentStyle } from '@/stores/preferences';
+import { currentFramework } from '@/stores/preferences';
 
 interface SearchProps {
   children: React.ReactNode;
@@ -14,7 +14,6 @@ interface SearchProps {
 export default function Search({ children, className, baseUrl, bundlePath, searchId, searchStyle }: SearchProps) {
   const [open, setOpen] = useState(false);
   const framework = useStore(currentFramework);
-  const style = useStore(currentStyle);
   const searchRef = useRef<HTMLDivElement>(null);
 
   // load Pagefind when opened
@@ -37,14 +36,13 @@ export default function Search({ children, className, baseUrl, bundlePath, searc
       });
       search.triggerFilters({
         framework: [framework],
-        style: [style],
       });
     };
     init();
     return () => {
       search.destroy();
     };
-  }, [baseUrl, bundlePath, framework, open, searchId, style]);
+  }, [baseUrl, bundlePath, framework, open, searchId]);
 
   // open with cmd+k or ctrl+k
   useEffect(() => {
diff --git a/site/src/components/Tabs.tsx b/site/src/components/Tabs.tsx
index 3fa701d6..df0b2a88 100644
--- a/site/src/components/Tabs.tsx
+++ b/site/src/components/Tabs.tsx
@@ -75,7 +75,7 @@ export function TabsRoot({ children, maxWidth = true, className, id: propId, var
       ref={ref}
       className={twMerge(
         clsx(
-          'overflow-hidden flex flex-col my-6 border border-faded-black dark:border-manila-dark rounded-xs bg-manila-light dark:bg-faded-black',
+          'overflow-hidden flex flex-col my-8 border border-faded-black dark:border-manila-dark rounded-xs bg-manila-light dark:bg-faded-black',
           variant === 'compact' && 'border px-2.5 pb-2.5',
           maxWidth && 'w-full max-w-3xl mx-auto',
           className
@@ -112,7 +112,7 @@ export function TabsList({ label, children, variant = 'compact' }: TabsListProps
           target: '[role="tabpanel"]:not([hidden])',
         }}
         className={clsx(
-          'ml-auto sticky right-0 h-7 px-2.5 flex items-center justify-center cursor-pointer disabled:cursor-wait intent:bg-warm-gray rounded-xs'
+          'ml-auto sticky right-0 h-7 px-2.5 flex items-center justify-center cursor-pointer disabled:cursor-wait intent:bg-manila-dark dark:intent:bg-warm-gray rounded-xs'
         )}
         copied={<Check size={20} />}
       >
diff --git a/site/src/components/docs/SidebarItem.astro b/site/src/components/docs/SidebarItem.astro
index b71c9380..40aefe87 100644
--- a/site/src/components/docs/SidebarItem.astro
+++ b/site/src/components/docs/SidebarItem.astro
@@ -57,7 +57,9 @@ function getGroupRotate(depth: number) {
         class:list={[
           "flex items-center gap-4 py-2 text-faded-black dark:text-manila-light",
           "cursor-pointer",
-          depth === 0 ? "font-display text-h4 uppercase" : "text-p3",
+          depth === 0
+            ? "font-display text-h4 leading-tight uppercase"
+            : "text-p3",
           depth > 0 && "border-l pl-4",
           isActive ? "border-orange" : "border-manila-75 dark:border-warm-gray",
           getGroupMargin(depth),
diff --git a/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx b/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx
index b6388132..06db16df 100644
--- a/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx
+++ b/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx
@@ -25,7 +25,7 @@ export function TableOfContentsMobile({ headings, activeId, onNavigate, classNam
   return (
     <div
       className={clsx(
-        'border-y md:border-t-0 border-manila-75 dark:border-warm-gray bg-manila-light dark:bg-faded-black px-6 lg:px-12 flex items-center',
+        'border-b border-manila-75 dark:border-warm-gray bg-manila-light dark:bg-faded-black px-6 lg:px-12 flex items-center',
         className
       )}
       style={{ height: 'var(--mobile-toc-h)' }}
diff --git a/site/src/components/frames/Minimal.astro b/site/src/components/frames/Minimal.astro
index d3541712..9005b3bf 100644
--- a/site/src/components/frames/Minimal.astro
+++ b/site/src/components/frames/Minimal.astro
@@ -25,7 +25,7 @@ type Props = {
 
 const { class: className, margins = 'default' } = Astro.props;
 
-const marginClass = margins === 'lg' ? 'my-12' : 'my-6';
+const marginClass = margins === 'lg' ? 'my-8' : 'my-4';
 ---
 
 <div
diff --git a/site/src/components/home/Demo/Demo.tsx b/site/src/components/home/Demo/Demo.tsx
index 7d61b6cb..f1cdf64f 100644
--- a/site/src/components/home/Demo/Demo.tsx
+++ b/site/src/components/home/Demo/Demo.tsx
@@ -23,7 +23,7 @@ export default function Demo() {
         <FrameworkControl className="mb-5 md:hidden" />
         <BaseDemo className="lg:h-100 m-0" />
       </section>
-      <section className="grid lg:grid-rows-subgrid row-span-4 lg:border-t lg:py-10 border-y border-faded-black dark:border-manila-light">
+      <section className="grid lg:grid-rows-subgrid row-span-4 lg:border-t lg:py-10 border-faded-black dark:border-manila-light">
         <h2 className="text-h2 dark:text-manila-light text-faded-black text-center font-display uppercase mb-2.5 lg:mb-1.25">
           Take full control
         </h2>
diff --git a/site/src/components/home/Header.astro b/site/src/components/home/Header.astro
index f3829438..30a6fafb 100644
--- a/site/src/components/home/Header.astro
+++ b/site/src/components/home/Header.astro
@@ -45,15 +45,17 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
     poster={poster}
   />
   <p
-    class="mb-11 flex items-center justify-center gap-2.5 md:mb-20 md:justify-end md:pr-6 md:font-display md:text-(length:--md-text) md:uppercase"
-    style="grid-area:mux;--md-text:0.75rem;"
+    class="mb-11 flex items-center justify-center gap-1.5 text-p3 md:mb-20 md:justify-end md:gap-2 md:pr-6 md:font-display md:text-(length:--md-text) md:uppercase"
+    style="grid-area:mux;--md-text:0.6875rem;"
   >
     Video hosting sponsored by <a
-      class="inline-flex"
+      class="relative inline-flex w-11 items-center justify-center md:w-12.5"
       href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
       target="_blank"
-      rel="noopener"><MuxLogoSmall width="3.25rem" /></a
+      rel="noopener"
     >
+      <MuxLogoSmall width="100%" />
+    </a>
   </p>
   <div
     class="grid grid-cols-1 items-center justify-center gap-9 md:grid-cols-2"
diff --git a/site/src/components/typography/Blockquote.astro b/site/src/components/typography/Blockquote.astro
index 49981fcf..eaa57f7a 100644
--- a/site/src/components/typography/Blockquote.astro
+++ b/site/src/components/typography/Blockquote.astro
@@ -15,8 +15,8 @@ const { as: Tag = 'blockquote', maxWidth = true, class: className, ...props } =
 <Tag
   class={twMerge(
     clsx(
-      "my-12 border-l border-manila-75 pl-6 dark:border-warm-gray",
-      "[&>*:last-child]:mb-0! [&>.my-12]:my-4 [&>.my-6]:my-2",
+      "my-8 border-l border-manila-75 pl-4 dark:border-warm-gray",
+      "[&>*:last-child]:mb-0! [&>.my-4]:my-2 [&>.my-8]:my-4",
       maxWidth && "mx-auto max-w-3xl",
     ),
     className,
diff --git a/site/src/components/typography/H1.astro b/site/src/components/typography/H1.astro
index 5adc2c2f..06efbf3f 100644
--- a/site/src/components/typography/H1.astro
+++ b/site/src/components/typography/H1.astro
@@ -14,7 +14,7 @@ const { as: Tag = 'h1', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("mb-6 text-h1", maxWidth && "mx-auto max-w-3xl"),
+    clsx("mb-4 text-h1", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/H2.astro b/site/src/components/typography/H2.astro
index a20b175c..bbd280a0 100644
--- a/site/src/components/typography/H2.astro
+++ b/site/src/components/typography/H2.astro
@@ -15,13 +15,12 @@ const { as: Tag = 'h2', maxWidth = true, class: className, ...props } = Astro.pr
 <Tag
   class={twMerge(
     clsx(
-      "mt-18 mb-6 font-display text-h2 uppercase",
+      "mt-16 mb-8 font-display text-h3 leading-tight uppercase @lg:text-h25",
       maxWidth && "mx-auto max-w-3xl",
     ),
     className,
   )}
   {...props}
-  style={{ fontSize: "1.5rem" }}
 >
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H2Markdown.astro b/site/src/components/typography/H2Markdown.astro
index ec3c6e78..92e3dc7d 100644
--- a/site/src/components/typography/H2Markdown.astro
+++ b/site/src/components/typography/H2Markdown.astro
@@ -7,7 +7,7 @@ const { class: className, ...props } = Astro.props;
 
 <H2
   as="h2"
-  class:list={["mt-18 [&+.contents>h3]:mt-6 [&+h3]:mt-6", className]}
+  class:list={["[&+.contents>h3]:mt-8 [&+h3]:mt-8", className]}
   {...props}
 >
   <slot />
diff --git a/site/src/components/typography/H3.astro b/site/src/components/typography/H3.astro
index 14e13c58..22ba2014 100644
--- a/site/src/components/typography/H3.astro
+++ b/site/src/components/typography/H3.astro
@@ -15,13 +15,13 @@ const { as: Tag = 'h3', maxWidth = true, class: className, ...props } = Astro.pr
 <Tag
   class={twMerge(
     clsx(
-      "mt-12 mb-6 font-display text-h3 [&+.contents>h4]:mt-6 [&+h4]:mt-6",
+      "my-8 font-display text-h3 leading-tight @lg:text-(length:--lg-text) [&+.contents>h4]:mt-4 [&+h4]:mt-4",
       maxWidth && "mx-auto max-w-3xl",
     ),
     className,
   )}
   {...props}
-  style={{ fontSize: "1.25rem" }}
+  style={{ "--lg-text": "1.25rem" }}
 >
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H3Markdown.astro b/site/src/components/typography/H3Markdown.astro
index 51bfecfc..fed7ee02 100644
--- a/site/src/components/typography/H3Markdown.astro
+++ b/site/src/components/typography/H3Markdown.astro
@@ -5,6 +5,6 @@ import H3 from './H3.astro';
 const { class: className, ...props } = Astro.props;
 ---
 
-<H3 as="h3" class:list={["mt-12", className]} {...props}>
+<H3 as="h3" class:list={["mt-8", className]} {...props}>
   <slot />
 </H3>
diff --git a/site/src/components/typography/H4.astro b/site/src/components/typography/H4.astro
index 51cfd339..11b0b70e 100644
--- a/site/src/components/typography/H4.astro
+++ b/site/src/components/typography/H4.astro
@@ -14,7 +14,7 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("mt-12 mb-6 text-p2 font-bold", maxWidth && "mx-auto max-w-3xl"),
+    clsx("mt-8 mb-4 text-p2 font-bold", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/H5.astro b/site/src/components/typography/H5.astro
index 3e856ea3..a2668de6 100644
--- a/site/src/components/typography/H5.astro
+++ b/site/src/components/typography/H5.astro
@@ -14,7 +14,7 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("mt-9 mb-6 text-p2 italic", maxWidth && "mx-auto max-w-3xl"),
+    clsx("my-4 text-p2 italic", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/H6.astro b/site/src/components/typography/H6.astro
index a64f3142..3b77e0c2 100644
--- a/site/src/components/typography/H6.astro
+++ b/site/src/components/typography/H6.astro
@@ -14,7 +14,7 @@ const { as: Tag = 'h6', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx("text-p3 italic", maxWidth && "mx-auto max-w-3xl"),
+    clsx("my-4 text-p3 italic", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/Hr.astro b/site/src/components/typography/Hr.astro
index c2f05915..0e2cabb5 100644
--- a/site/src/components/typography/Hr.astro
+++ b/site/src/components/typography/Hr.astro
@@ -15,7 +15,7 @@ const { as: Tag = 'hr', maxWidth = true, class: className, ...props } = Astro.pr
 <Tag
   class={twMerge(
     clsx(
-      "my-12 border-t border-manila-75 dark:border-warm-gray",
+      "my-8 border-t border-manila-75 dark:border-warm-gray",
       maxWidth && "mx-auto max-w-3xl",
       className,
     ),
diff --git a/site/src/components/typography/Img.astro b/site/src/components/typography/Img.astro
index 741aa19a..d96116c9 100644
--- a/site/src/components/typography/Img.astro
+++ b/site/src/components/typography/Img.astro
@@ -9,4 +9,4 @@ const { class: className, ...rest } = Astro.props;
 ---
 
 {/* @ts-expect-error tbh I don't know how to tell ts that inferSize is ok */}
-<Image class={twMerge("my-12", className)} inferSize {...rest} />
+<Image class={twMerge("my-8", className)} inferSize {...rest} />
diff --git a/site/src/components/typography/Ol.astro b/site/src/components/typography/Ol.astro
index fa4cc46e..8af27d0b 100644
--- a/site/src/components/typography/Ol.astro
+++ b/site/src/components/typography/Ol.astro
@@ -16,7 +16,7 @@ const { as: Tag = 'ol', maxWidth = true, class: className, ...props } = Astro.pr
 <Tag
   class={twMerge(
     shared.ol,
-    clsx("mb-6", maxWidth && "mx-auto max-w-3xl"),
+    clsx("mb-4", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/P.astro b/site/src/components/typography/P.astro
index d8cc0b09..4485bbdc 100644
--- a/site/src/components/typography/P.astro
+++ b/site/src/components/typography/P.astro
@@ -13,7 +13,7 @@ const { as: Tag = 'p', maxWidth = true, class: className, ...props } = Astro.pro
 ---
 
 <Tag
-  class={twMerge(clsx("my-6", maxWidth && "mx-auto max-w-3xl"), className)}
+  class={twMerge(clsx("my-4", maxWidth && "mx-auto max-w-3xl"), className)}
   {...props}
 >
   <slot />
diff --git a/site/src/components/typography/Table.astro b/site/src/components/typography/Table.astro
index 4344966b..f54e9ff4 100644
--- a/site/src/components/typography/Table.astro
+++ b/site/src/components/typography/Table.astro
@@ -12,12 +12,10 @@ type Props<Tag extends HTMLTag = 'table'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'table', maxWidth = true, outerClass, class: className, ...props } = Astro.props;
 ---
 
-<div
-  class={twMerge(clsx("my-12", maxWidth && "mx-auto max-w-3xl"), outerClass)}
->
-  <div class="-mx-6 flex overflow-x-auto">
+<div class={twMerge(clsx("my-8", maxWidth && "mx-auto max-w-3xl"), outerClass)}>
+  <div class="-mx-4 flex overflow-x-auto">
     <div
-      class="pointer-events-none sticky left-0 z-10 shrink-0 basis-6 bg-linear-to-r from-manila-light to-transparent dark:from-faded-black"
+      class="pointer-events-none sticky left-0 z-10 shrink-0 basis-4 bg-linear-to-r from-manila-light to-transparent dark:from-faded-black"
       aria-hidden="true"
     >
     </div>
@@ -25,7 +23,7 @@ const { as: Tag = 'table', maxWidth = true, outerClass, class: className, ...pro
       <slot />
     </Tag>
     <div
-      class="pointer-events-none sticky right-0 z-10 shrink-0 basis-6 bg-linear-to-l from-manila-light to-transparent dark:from-faded-black"
+      class="pointer-events-none sticky right-0 z-10 shrink-0 basis-4 bg-linear-to-l from-manila-light to-transparent dark:from-faded-black"
       aria-hidden="true"
     >
     </div>
diff --git a/site/src/components/typography/Td.astro b/site/src/components/typography/Td.astro
index bd9eb94d..c9189a35 100644
--- a/site/src/components/typography/Td.astro
+++ b/site/src/components/typography/Td.astro
@@ -10,6 +10,6 @@ type Props<Tag extends HTMLTag = 'td'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'td', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge("px-6 py-3 text-p2", className)} {...props}>
+<Tag class={twMerge("px-4 py-2 text-p2", className)} {...props}>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Th.astro b/site/src/components/typography/Th.astro
index 85660ff4..1e144da2 100644
--- a/site/src/components/typography/Th.astro
+++ b/site/src/components/typography/Th.astro
@@ -11,7 +11,7 @@ const { as: Tag = 'th', class: className, ...props } = Astro.props;
 ---
 
 <Tag
-  class={twMerge("px-6 py-3 text-left text-p3 font-bold", className)}
+  class={twMerge("px-4 py-2 text-left text-p3 font-bold", className)}
   {...props}
 >
   <slot />
diff --git a/site/src/components/typography/Ul.astro b/site/src/components/typography/Ul.astro
index 734c7631..ec48013d 100644
--- a/site/src/components/typography/Ul.astro
+++ b/site/src/components/typography/Ul.astro
@@ -16,7 +16,7 @@ const { as: Tag = 'ul', maxWidth = true, class: className, ...props } = Astro.pr
 <Tag
   class={twMerge(
     shared.ul,
-    clsx("mb-6", maxWidth && "mx-auto max-w-3xl"),
+    clsx("mb-4", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/styles.ts b/site/src/components/typography/styles.ts
index 46bbe4f6..f871e477 100644
--- a/site/src/components/typography/styles.ts
+++ b/site/src/components/typography/styles.ts
@@ -11,7 +11,7 @@ export const shared = {
   codeBlock: 'font-mono text-code',
   em: 'font-bold',
   li: 'text-p2',
-  ol: 'list-decimal list-outside pl-6 space-y-1',
+  ol: 'list-decimal list-outside pl-4 space-y-1',
   strong: 'font-bold',
-  ul: 'list-disc list-outside pl-6 space-y-1',
+  ul: 'list-disc list-outside pl-4 space-y-1',
 } as const;
diff --git a/site/src/content/pages/privacy.mdx b/site/src/content/pages/privacy.mdx
index d1a1f38c..4969de45 100644
--- a/site/src/content/pages/privacy.mdx
+++ b/site/src/content/pages/privacy.mdx
@@ -64,7 +64,7 @@ These cookies are required for secure authentication flows related to Mux upload
 
 We store documentation display preferences so the site can remember your preferred view:
 
-- **Cookie:** `vjs_docs_framework` remembers your preferred docs framework (HTML, React, or React Native).
+- **Cookie:** `vjs_docs_framework` remembers your preferred docs framework (e.g., HTML or React).
 - **localStorage:** `vjs_docs_style_<framework>` remembers your preferred style for each framework.
 - **Duration:** `vjs_docs_framework` is set for up to 1 year. localStorage values persist until you clear browser storage.
 - **Purpose:** Show documentation and code examples in your preferred format.
diff --git a/site/src/layouts/Markdown.astro b/site/src/layouts/Markdown.astro
index 54c91919..caea3073 100644
--- a/site/src/layouts/Markdown.astro
+++ b/site/src/layouts/Markdown.astro
@@ -19,7 +19,11 @@ const { title, subtitle, description } = Astro.props;
   <main class="mt-10 px-6 pb-24 md:mt-20 md:px-10">
     <article class="@container">
       <header class="border-light-40 mx-auto mb-10 max-w-3xl border-b pb-10">
-        <h1 class="mb-2 font-display text-h2 uppercase">{title}</h1>
+        <h1
+          class="mb-2 font-display text-h2 leading-tight uppercase @lg:text-h25"
+        >
+          {title}
+        </h1>
         <p class="">{description}</p>
       </header>
       <slot />
diff --git a/site/src/pages/auth/success.astro b/site/src/pages/auth/success.astro
index 2a4a7fa8..47749ea9 100644
--- a/site/src/pages/auth/success.astro
+++ b/site/src/pages/auth/success.astro
@@ -1,6 +1,6 @@
 ---
 import { ArrowLeft } from 'lucide-react';
-
+import GetStartedLink from '@/components/NavBar/GetStartedLink';
 import AuthResult from '@/layouts/AuthResult.astro';
 ---
 
@@ -9,9 +9,9 @@ import AuthResult from '@/layouts/AuthResult.astro';
   description="You may close this window."
   variant="success"
 >
-  <a
+  <GetStartedLink
     slot="action"
-    href="/docs"
+    client:load
     class="group inline-flex items-center gap-1 intent:underline"
   >
     <ArrowLeft
@@ -19,7 +19,7 @@ import AuthResult from '@/layouts/AuthResult.astro';
       className="transition-transform group-intent:-translate-x-1"
     />
     Return to docs
-  </a>
+  </GetStartedLink>
 </AuthResult>
 
 <script>
diff --git a/site/src/pages/blog/[...page].astro b/site/src/pages/blog/[...page].astro
index b7fb9431..fcaf2a41 100644
--- a/site/src/pages/blog/[...page].astro
+++ b/site/src/pages/blog/[...page].astro
@@ -54,7 +54,7 @@ const jsonLdSchema = createBlogCollectionSchema({
     class="mx-auto mb-10 w-full max-w-4xl overflow-hidden rounded-xs border border-manila-dark text-center md:mb-20 dark:border-transparent dark:bg-soot"
   >
     <div class="mx-auto max-w-3xl px-5 py-20">
-      <h1 class="mb-4 font-display text-h2 uppercase lg:text-h1">
+      <h1 class="mb-4 font-display text-h15 uppercase lg:text-h1">
         Video.js Blog
       </h1>
       <p class="font-display text-h5 leading-tight text-balance">
diff --git a/site/src/pages/blog/[...slug].astro b/site/src/pages/blog/[...slug].astro
index 5ec104c8..e668b71f 100644
--- a/site/src/pages/blog/[...slug].astro
+++ b/site/src/pages/blog/[...slug].astro
@@ -56,18 +56,20 @@ const jsonLdSchema = createBlogPostingSchema({
       class="relative mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
     >
       <div
-        class="mb-3 flex gap-4 font-display text-h4 font-bold text-orange uppercase"
+        class="mb-3 flex flex-col gap-2 font-display text-h4 font-bold text-orange uppercase sm:flex-row sm:gap-4"
       >
         <FormattedDate
           data-pagefind-sort={`date:${post.data.pubDate.toISOString()}`}
           date={post.data.pubDate}
         />
-        <span>&bull;</span>
+        <span class="hidden sm:inline">&bull;</span>
         <span data-pagefind-ignore data-llms-ignore
           >{remarkPluginFrontmatter.minutesRead}</span
         >
       </div>
-      <h1 class="mb-2 font-display text-h15 uppercase">{post.data.title}</h1>
+      <h1 class="mb-2 font-display text-h2 leading-tight uppercase sm:text-h15">
+        {post.data.title}
+      </h1>
       <div class="">
         By {
           new Intl.ListFormat("en", { style: "long", type: "conjunction" })
diff --git a/site/src/pages/docs/framework/[framework]/[...slug].astro b/site/src/pages/docs/framework/[framework]/[...slug].astro
index c7636ceb..22ccd30d 100644
--- a/site/src/pages/docs/framework/[framework]/[...slug].astro
+++ b/site/src/pages/docs/framework/[framework]/[...slug].astro
@@ -1,6 +1,7 @@
 ---
 import type { CollectionEntry } from 'astro:content';
 import { getCollection, render } from 'astro:content';
+import clsx from 'clsx';
 import CopyMarkdownButton from '@/components/CopyMarkdownButton';
 import DocsNavigation from '@/components/docs/DocsNavigation.astro';
 import EditPageButton from '@/components/docs/EditPageButton.astro';
@@ -89,6 +90,9 @@ const jsonLdSchema = createTechArticleSchema({
   readingTime: remarkPluginFrontmatter.readingTimeMinutes,
   articleSection: sections.length > 0 ? sections.join(' > ') : undefined,
 });
+
+// Leaving this in in case we change our minds
+// const isCamelOrPascalCase = (str: string) => /[a-z][A-Z]/.test(str);
 ---
 
 <DocsLayout doc={doc} framework={framework} slug={slug}>
@@ -139,9 +143,16 @@ const jsonLdSchema = createTechArticleSchema({
           ]}
         >
           <div>
-            <H2Markdown as="h1" class="mt-0 mb-4"
-              >{getDocTitle(doc, framework)}</H2Markdown
+            <H2Markdown
+              as="h1"
+              class={clsx(
+                "mt-0 mb-4 text-h25 @lg:text-h2",
+                // leaving this in in case we change our minds
+                // isCamelOrPascalCase(getDocTitle(doc, framework)) && "normal-case",
+              )}
             >
+              {getDocTitle(doc, framework)}
+            </H2Markdown>
             <p class="text-p2">{doc.data.description}</p>
           </div>
           <CopyMarkdownButton client:idle />
diff --git a/site/src/utils/twMerge.ts b/site/src/utils/twMerge.ts
index c3945272..b135e01d 100644
--- a/site/src/utils/twMerge.ts
+++ b/site/src/utils/twMerge.ts
@@ -7,6 +7,7 @@ export const twMerge = extendTailwindMerge({
         'text-h1',
         'text-h15',
         'text-h2',
+        'text-h25',
         'text-h3',
         'text-h4',
         'text-h5',