diff --git a/apps/web/src/components/acquisition-link-grid.tsx b/apps/web/src/components/acquisition-link-grid.tsx
index b97e13dc9b..c6070ee883 100644
--- a/apps/web/src/components/acquisition-link-grid.tsx
+++ b/apps/web/src/components/acquisition-link-grid.tsx
@@ -21,43 +21,56 @@ export function AcquisitionLinkGrid({
   }
 
   return (
-    <section className={cn(["border-t border-neutral-200 pt-8", className])}>
-      <div className="max-w-6xl">
-        <div className="mb-6 flex max-w-3xl flex-col gap-2 text-left">
-          <h2 className="text-fg font-mono text-2xl tracking-tight sm:text-3xl">
+    <section className={cn(["border-color-brand border-t pt-8", className])}>
+      <div className="">
+        <div className="mb-8 flex flex-col gap-2 text-left">
+          <h2 className="text-color font-sans text-2xl tracking-tight">
             {title}
           </h2>
           {description ? (
-            <p className="text-fg-muted text-base leading-7 sm:text-lg">
+            <p className="text-color-secondary text-base leading-7 sm:text-lg">
               {description}
             </p>
           ) : null}
         </div>
 
-        <div className="grid gap-4 md:grid-cols-3">
-          {items.map((item) => (
-            <a
-              key={item.href}
-              href={item.href}
-              className={cn([
-                "group rounded-2xl border border-neutral-200 bg-white p-5 text-left transition-colors",
-                "hover:border-stone-300 hover:bg-stone-50",
-              ])}
-            >
-              {item.eyebrow ? (
-                <div className="mb-3 font-mono text-[11px] tracking-[0.18em] text-stone-500 uppercase">
-                  {item.eyebrow}
+        <div className="border-color-brand grid overflow-hidden rounded-2xl border md:grid-cols-3">
+          {items.map((item, index) => {
+            const cols = 3;
+            const isLast = index === items.length - 1;
+            const isRightEdge = (index + 1) % cols === 0;
+            const isBottomRow =
+              Math.floor(index / cols) === Math.ceil(items.length / cols) - 1;
+
+            return (
+              <a
+                key={item.href}
+                href={item.href}
+                className={cn([
+                  "group border-color-brand p-8 text-left transition-colors",
+                  !isLast && "border-b",
+                  isBottomRow && "md:border-b-0",
+                  !isRightEdge && "md:border-r",
+                  "hover:bg-white",
+                ])}
+              >
+                {item.eyebrow ? (
+                  <div className="mb-3 font-mono text-[11px] tracking-[0.18em] text-stone-500 uppercase">
+                    {item.eyebrow}
+                  </div>
+                ) : null}
+                <h3 className="text-color mb-2 font-mono text-lg font-medium">
+                  {item.title}
+                </h3>
+                <p className="text-color-secondary text-sm leading-5">
+                  {item.description}
+                </p>
+                <div className="mt-4 text-sm font-medium text-stone-700 transition-colors group-hover:text-stone-950">
+                  Explore
                 </div>
-              ) : null}
-              <h3 className="text-fg mb-2 font-mono text-lg">{item.title}</h3>
-              <p className="text-fg-muted text-sm leading-6">
-                {item.description}
-              </p>
-              <div className="mt-4 text-sm font-medium text-stone-700 transition-colors group-hover:text-stone-950">
-                Explore
-              </div>
-            </a>
-          ))}
+              </a>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/apps/web/src/components/cta-section.tsx b/apps/web/src/components/cta-section.tsx
index e5c712928c..01dbe290b4 100644
--- a/apps/web/src/components/cta-section.tsx
+++ b/apps/web/src/components/cta-section.tsx
@@ -50,7 +50,9 @@ export function CTASection({
         <h2 className="text-color font-mono text-2xl tracking-wide md:text-6xl">
           {title}
         </h2>
-        <p className="text-fg-muted mx-auto max-w-2xl text-lg">{description}</p>
+        <p className="text-color-secondary mx-auto max-w-2xl text-lg">
+          {description}
+        </p>
         <div className="flex flex-col items-center justify-center gap-4 pt-6 sm:flex-row">
           {platformCTA.action === "download" ? (
             <DownloadButton />
diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index ac254507eb..cc8324e39d 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -7,6 +7,7 @@ import { cn } from "@hypr/utils";
 
 import { EmailSubscribeField } from "@/components/email-subscribe-field";
 import { CookiePreferencesButton } from "@/components/privacy-consent";
+import { CharLogo } from "@/components/sidebar";
 import { brandPageNoiseBackgroundImage } from "@/lib/brand-noise";
 import { sortedSolutions } from "@/lib/solutions";
 
@@ -107,7 +108,7 @@ export function Footer() {
 function BrandSection({ currentYear }: { currentYear: number }) {
   return (
     <div className="lg:flex-1">
-      <Link to="/" className="text-fg mb-4 inline-block">
+      <Link to="/" className="text-color mb-4 inline-block">
         <svg
           width="auto"
           height="24"
@@ -142,7 +143,7 @@ function BrandSection({ currentYear }: { currentYear: number }) {
           href="/x"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-fg-subtle hover:text-fg transition-colors"
+          className="text-color-secondary hover:text-color transition-colors"
           aria-label="Twitter"
         >
           <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
@@ -153,7 +154,7 @@ function BrandSection({ currentYear }: { currentYear: number }) {
           href="/discord"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-fg-subtle hover:text-fg transition-colors"
+          className="text-color-secondary hover:text-color transition-colors"
           aria-label="Discord"
         >
           <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
@@ -164,7 +165,7 @@ function BrandSection({ currentYear }: { currentYear: number }) {
           href="/youtube"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-fg-subtle hover:text-fg transition-colors"
+          className="text-color-secondary hover:text-color transition-colors"
           aria-label="YouTube"
         >
           <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
@@ -175,7 +176,7 @@ function BrandSection({ currentYear }: { currentYear: number }) {
           href="/linkedin"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-fg-subtle hover:text-fg transition-colors"
+          className="text-color-secondary hover:text-color transition-colors"
           aria-label="LinkedIn"
         >
           <svg className="size-4" viewBox="0 0 24 24" fill="currentColor">
@@ -184,7 +185,7 @@ function BrandSection({ currentYear }: { currentYear: number }) {
         </a>
       </div>
 
-      <p className="text-fg-muted text-sm">
+      <p className="text-color-secondary text-sm">
         <Link
           to="/legal/$slug/"
           params={{ slug: "terms" }}
@@ -203,7 +204,7 @@ function BrandSection({ currentYear }: { currentYear: number }) {
         {" · "}
         <CookiePreferencesButton />
       </p>
-      <p className="text-fg mt-2 text-sm opacity-30">
+      <p className="text-color-secondary mt-2 text-sm">
         Fastrepl © {currentYear}
       </p>
     </div>
@@ -224,12 +225,14 @@ function LinksGrid() {
 function ProductLinks() {
   return (
     <div>
-      <h3 className="text-fg mb-4 font-mono text-sm font-semibold">Product</h3>
+      <h3 className="text-color-secondary mb-4 font-mono text-sm font-semibold">
+        Product
+      </h3>
       <ul className="flex flex-col gap-3">
         <li>
           <Link
             to="/download/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Download
           </Link>
@@ -237,7 +240,7 @@ function ProductLinks() {
         <li>
           <Link
             to="/changelog/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Changelog
           </Link>
@@ -245,7 +248,7 @@ function ProductLinks() {
         <li>
           <Link
             to="/docs/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Docs
           </Link>
@@ -255,7 +258,7 @@ function ProductLinks() {
             href="https://github.com/fastrepl/char"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-fg-muted hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             GitHub
             <ExternalLinkIcon className="size-3" />
@@ -266,7 +269,7 @@ function ProductLinks() {
             href="https://status.hyprnote.com"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-fg-muted hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Status
             <ExternalLinkIcon className="size-3" />
@@ -335,14 +338,14 @@ function ResourcesLinks() {
 
   return (
     <div ref={ref}>
-      <h3 className="text-fg mb-4 font-mono text-sm font-semibold">
+      <h3 className="text-color-secondary mb-4 font-mono text-sm font-semibold">
         Resources
       </h3>
       <ul className="flex flex-col gap-3">
         <li>
           <Link
             to="/pricing/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Pricing
           </Link>
@@ -350,7 +353,7 @@ function ResourcesLinks() {
         <li>
           <a
             href="/docs/faq"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             FAQ
           </a>
@@ -358,7 +361,7 @@ function ResourcesLinks() {
         <li>
           <Link
             to="/company-handbook/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Company Handbook
           </Link>
@@ -366,7 +369,7 @@ function ResourcesLinks() {
         <li>
           <Link
             to="/gallery/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Prompt Gallery
           </Link>
@@ -376,7 +379,7 @@ function ResourcesLinks() {
             href="https://github.com/fastrepl/char/discussions"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-fg-muted hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Discussions
             <ExternalLinkIcon className="size-3" />
@@ -385,7 +388,7 @@ function ResourcesLinks() {
         <li>
           <a
             href="mailto:support@hyprnote.com"
-            className="text-fg-muted hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color inline-flex items-center gap-1 text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Support
             <MailIcon className="size-3" />
@@ -396,7 +399,7 @@ function ResourcesLinks() {
             to="/solution/$slug/"
             params={{ slug: currentUseCase.slug }}
             className={cn(
-              "text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted",
+              "text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted",
               "inline-flex items-center gap-1",
             )}
             aria-label={`Char for ${currentUseCase.label}`}
@@ -424,19 +427,12 @@ function ResourcesLinks() {
             to="/vs/$slug/"
             params={{ slug: currentVs.slug }}
             className={cn(
-              "text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted",
+              "text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted",
               "inline-flex items-center gap-1",
             )}
             aria-label={`Versus ${currentVs.name}`}
           >
-            <img
-              src="/api/assets/hyprnote/icon.png"
-              alt="Char"
-              width={12}
-              height={12}
-              className="inline size-4 rounded border border-neutral-100"
-            />{" "}
-            vs{" "}
+            <CharLogo compact className="inline size-4" /> vs{" "}
             <span className="inline-grid">
               {vsList.map((v, i) => (
                 <span
@@ -460,12 +456,14 @@ function ResourcesLinks() {
 function CompanyLinks() {
   return (
     <div>
-      <h3 className="text-fg mb-4 font-mono text-sm font-semibold">Company</h3>
+      <h3 className="text-color-secondary mb-4 font-mono text-sm font-semibold">
+        Company
+      </h3>
       <ul className="flex flex-col gap-3">
         <li>
           <Link
             to="/blog/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Blog
           </Link>
@@ -473,7 +471,7 @@ function CompanyLinks() {
         <li>
           <Link
             to="/updates/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Updates
           </Link>
@@ -481,7 +479,7 @@ function CompanyLinks() {
         <li>
           <Link
             to="/about/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             About us
           </Link>
@@ -489,7 +487,7 @@ function CompanyLinks() {
         <li>
           <Link
             to="/brand/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Brand
           </Link>
@@ -497,7 +495,7 @@ function CompanyLinks() {
         <li>
           <Link
             to="/press-kit/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Press Kit
           </Link>
@@ -505,7 +503,7 @@ function CompanyLinks() {
         <li>
           <Link
             to="/opensource/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Open Source
           </Link>
@@ -518,12 +516,14 @@ function CompanyLinks() {
 function ToolsLinks() {
   return (
     <div>
-      <h3 className="text-fg mb-4 font-mono text-sm font-semibold">Tools</h3>
+      <h3 className="text-color-secondary mb-4 font-mono text-sm font-semibold">
+        Tools
+      </h3>
       <ul className="flex flex-col gap-3">
         <li>
           <Link
             to="/eval/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             AI Eval
           </Link>
@@ -531,7 +531,7 @@ function ToolsLinks() {
         <li>
           <Link
             to="/product/notepad/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             Notepad
           </Link>
@@ -539,7 +539,7 @@ function ToolsLinks() {
         <li>
           <Link
             to="/oss-friends/"
-            className="text-fg-muted hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
+            className="text-color hover:text-color text-sm no-underline transition-colors hover:underline hover:decoration-dotted"
           >
             OSS Navigator
           </Link>
diff --git a/apps/web/src/components/github-open-source.tsx b/apps/web/src/components/github-open-source.tsx
index edc8611f55..56a567acec 100644
--- a/apps/web/src/components/github-open-source.tsx
+++ b/apps/web/src/components/github-open-source.tsx
@@ -254,7 +254,7 @@ export function GitHubOpenSource() {
           ])}
         >
           <div className="flex flex-col items-center gap-4 md:items-start">
-            <p className="text-fg-muted max-w-md text-center text-base leading-relaxed md:text-left">
+            <p className="text-color-secondary max-w-md text-center text-base leading-relaxed md:text-left">
               Char values privacy and community, so it's been transparent from
               day one.
             </p>
diff --git a/apps/web/src/components/privacy-consent.tsx b/apps/web/src/components/privacy-consent.tsx
index 2dab8ea3af..bee2f9594e 100644
--- a/apps/web/src/components/privacy-consent.tsx
+++ b/apps/web/src/components/privacy-consent.tsx
@@ -121,8 +121,8 @@ export function CookiePreferencesButton() {
       type="button"
       onClick={openPreferences}
       className={cn([
-        "text-fg-muted cursor-pointer p-0 font-sans text-sm transition-colors",
-        "hover:text-fg hover:underline hover:decoration-dotted",
+        "text-color-secondary cursor-pointer p-0 font-sans text-sm transition-colors",
+        "hover:text-color hover:underline hover:decoration-dotted",
         "hover:cursor-pointer",
       ])}
       style={{ cursor: COOKIE_CURSOR }}
diff --git a/apps/web/src/components/right-panel.tsx b/apps/web/src/components/right-panel.tsx
index 53af33c832..d4f7ca82bc 100644
--- a/apps/web/src/components/right-panel.tsx
+++ b/apps/web/src/components/right-panel.tsx
@@ -78,7 +78,7 @@ export function RightPanel({
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label={link.label}
-                className="text-fg-muted hover:text-color transition-colors"
+                className="text-color-secondary hover:text-color transition-colors"
               >
                 <Icon icon={link.icon} width={18} height={18} />
               </a>
diff --git a/apps/web/src/components/sidebar-navigation.tsx b/apps/web/src/components/sidebar-navigation.tsx
index 935e236279..d31b4c3f1a 100644
--- a/apps/web/src/components/sidebar-navigation.tsx
+++ b/apps/web/src/components/sidebar-navigation.tsx
@@ -55,8 +55,8 @@ export function SidebarNavigation<T extends { slug: string; title: string }>({
                   ref={isActive ? activeLinkRef : undefined}
                   className={`block rounded-xs py-1.5 pr-3 pl-5 text-sm transition-colors ${
                     isActive
-                      ? "text-fg font-medium underline decoration-dotted underline-offset-4"
-                      : "text-fg opacity-50 hover:underline hover:decoration-dotted hover:underline-offset-4 hover:opacity-100"
+                      ? "text-color font-medium underline decoration-dotted underline-offset-4"
+                      : "text-color opacity-50 hover:underline hover:decoration-dotted hover:underline-offset-4 hover:opacity-100"
                   }`}
                 >
                   {doc.title}
diff --git a/apps/web/src/components/sidebar.tsx b/apps/web/src/components/sidebar.tsx
index dbf4a80d71..731c5f0908 100644
--- a/apps/web/src/components/sidebar.tsx
+++ b/apps/web/src/components/sidebar.tsx
@@ -121,9 +121,9 @@ export function CharLogo({
   if (compact) {
     return (
       <svg
-        width="26"
+        width="30"
         height="30"
-        viewBox="0 0 26 30"
+        viewBox="0 0 30 30"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         className={className}
@@ -132,7 +132,7 @@ export function CharLogo({
           d="M7.871 4.147C7.871 5.658 7.082 7.039 6.099 8.214C4.65 9.946 3.77 12.161 3.77 14.575C3.77 16.99 4.65 19.205 6.099 20.937C7.082 22.112 7.871 23.493 7.871 25.004V29.151H2.965V24.319C2.965 22.735 2.165 21.249 0.822 20.34L0 19.783V9.235L0.822 8.678C2.165 7.769 2.965 6.284 2.965 4.699V0L7.871 0V4.147Z"
           fill="currentColor"
         />
-        <g transform="translate(-76.875, 0)">
+        <g transform="translate(-76, 0)">
           <path
             d="M94.746 4.147C94.746 5.658 95.535 7.039 96.519 8.214C97.967 9.946 98.847 12.161 98.847 14.575C98.847 16.99 97.967 19.205 96.519 20.937C95.535 22.112 94.746 23.493 94.746 25.004V29.151H99.653V24.319C99.653 22.735 100.452 21.249 101.795 20.34L102.617 19.783V9.235L101.795 8.678C100.452 7.769 99.653 6.284 99.653 4.699V0L94.746 0V4.147Z"
             fill="currentColor"
diff --git a/apps/web/src/components/social-card.tsx b/apps/web/src/components/social-card.tsx
index 530b788aed..677ed12a1e 100644
--- a/apps/web/src/components/social-card.tsx
+++ b/apps/web/src/components/social-card.tsx
@@ -133,13 +133,13 @@ export function SocialCard(props: SocialCardProps) {
           filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.06))",
         }}
       >
-        <div className="bg-surface rounded-2xl rounded-bl-none px-5 py-4">
-          <p className="text-fg-muted text-base leading-relaxed md:line-clamp-[20]">
+        <div className="surface border-color-brand rounded-2xl rounded-bl-none border px-5 py-4">
+          <p className="text-color-secondary text-base leading-relaxed md:line-clamp-[20]">
             <HighlightedBody text={body} />
           </p>
         </div>
         <div
-          className="bg-surface absolute left-0"
+          className="surface absolute left-0"
           style={{
             width: TAIL_R,
             height: TAIL_R,
@@ -160,7 +160,7 @@ export function SocialCard(props: SocialCardProps) {
           <AuthorAvatar author={author} avatar={avatar} />
           <div className="flex flex-col">
             <div className="flex items-center gap-1.5">
-              <p className="text-fg text-base leading-relaxed font-medium">
+              <p className="text-color text-base leading-relaxed font-medium">
                 {author}
               </p>
               <svg
@@ -172,7 +172,7 @@ export function SocialCard(props: SocialCardProps) {
               </svg>
             </div>
             {subtitle && (
-              <span className="text-fg-subtle text-xs">{subtitle}</span>
+              <span className="text-color-secondary text-xs">{subtitle}</span>
             )}
           </div>
         </a>
diff --git a/apps/web/src/routes/_view/app/-account-access.tsx b/apps/web/src/routes/_view/app/-account-access.tsx
index 86a4ea1658..5e522f3388 100644
--- a/apps/web/src/routes/_view/app/-account-access.tsx
+++ b/apps/web/src/routes/_view/app/-account-access.tsx
@@ -42,32 +42,33 @@ export function AccountAccessSection() {
   });
 
   return (
-    <div className="rounded-xs border border-neutral-100">
-      <div className="p-4">
-        <h3 className="mb-2 font-serif text-lg font-semibold">Access</h3>
-        <p className="text-sm text-neutral-600">
+    <div className="border-color-brand surface rounded-lg border">
+      <div className="px-8 pt-8">
+        <h3 className="text-color mb-2 font-sans text-lg font-semibold">
+          Access
+        </h3>
+        <p className="text-color-secondary text-sm">
           Session controls and destructive account actions
         </p>
       </div>
 
-      <div className="flex flex-col gap-4 border-t border-neutral-100 p-4 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <div className="text-sm font-medium text-neutral-900">Sign out</div>
-          <p className="text-sm text-neutral-600">
-            End your current session on this device
-          </p>
+      <div className="border-color-brand flex w-full flex-col border-b p-8">
+        <div className="flex flex-col gap-4 md:flex-row md:justify-between">
+          <div className="text-color-secondary text-base">Sign out</div>
+          <div className="flex items-center gap-3">
+            <p className="text-base">End your current session on this device</p>
+            <button
+              onClick={() => signOut.mutate()}
+              disabled={signOut.isPending}
+              className="border-color-brand text-color-secondary flex h-7 items-center rounded-full border bg-linear-to-b from-white to-stone-50 px-3 text-xs shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
+            >
+              {signOut.isPending ? "Signing out..." : "Sign out"}
+            </button>
+          </div>
         </div>
-
-        <button
-          onClick={() => signOut.mutate()}
-          disabled={signOut.isPending}
-          className="flex h-8 cursor-pointer items-center justify-center rounded-full border border-neutral-300 bg-linear-to-b from-white to-stone-50 px-4 text-sm text-neutral-700 shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
-        >
-          {signOut.isPending ? "Signing out..." : "Sign out"}
-        </button>
       </div>
 
-      <div className="border-t border-neutral-100 px-4">
+      <div className="px-8 py-8">
         <Accordion
           type="single"
           collapsible
@@ -79,7 +80,7 @@ export function AccountAccessSection() {
           }}
         >
           <AccordionItem value="delete-account" className="border-none">
-            <AccordionTrigger className="py-4 text-sm font-medium text-red-700 hover:text-red-800 hover:no-underline">
+            <AccordionTrigger className="py-4 font-sans text-base text-red-700 hover:text-red-800 hover:no-underline">
               Delete account
             </AccordionTrigger>
             <AccordionContent className="pb-4">
@@ -107,7 +108,7 @@ export function AccountAccessSection() {
                       <button
                         onClick={() => deleteAccountMutation.mutate()}
                         disabled={deleteAccountMutation.isPending}
-                        className="flex h-8 items-center rounded-full bg-red-600 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
+                        className="flex h-8 items-center rounded-full bg-linear-to-t from-stone-600 to-stone-500 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
                       >
                         {deleteAccountMutation.isPending
                           ? "Deleting..."
diff --git a/apps/web/src/routes/_view/app/-account-profile-info.tsx b/apps/web/src/routes/_view/app/-account-profile-info.tsx
index 13d65f33cf..a28ebcbf3a 100644
--- a/apps/web/src/routes/_view/app/-account-profile-info.tsx
+++ b/apps/web/src/routes/_view/app/-account-profile-info.tsx
@@ -39,24 +39,31 @@ export function ProfileInfoSection({ email }: { email?: string }) {
   };
 
   return (
-    <div className="rounded-xs border border-neutral-100">
-      <div className="p-4">
-        <h3 className="mb-2 font-serif text-lg font-semibold">Profile</h3>
-        <p className="text-sm text-neutral-600">Your personal information</p>
+    <div className="border-color-brand surface rounded-lg border">
+      <div className="px-8 pt-8">
+        <h3 className="text-color mb-2 font-sans text-lg font-semibold">
+          Profile
+        </h3>
+        <p className="text-color-secondary text-sm">
+          Your personal information
+        </p>
       </div>
 
-      <div className="flex flex-col gap-4 border-t border-neutral-100 p-4">
-        <div>
-          <div className="mb-1 text-sm text-neutral-500">Email</div>
+      <div className="flex w-full flex-col p-8">
+        <div className="flex flex-col gap-4 md:flex-row md:justify-between">
+          <div className="text-color-secondary text-base">Email</div>
           {isEditing ? (
-            <form onSubmit={handleSubmit} className="flex flex-col gap-3">
-              <div className="flex gap-2">
+            <form
+              onSubmit={handleSubmit}
+              className="flex w-full flex-1 flex-col justify-start gap-3 md:justify-end"
+            >
+              <div className="flex w-full justify-start gap-2 md:justify-end">
                 <input
                   type="email"
                   value={newEmail}
                   onChange={(e) => setNewEmail(e.target.value)}
                   placeholder={email || "Enter new email"}
-                  className="flex-1 rounded-md border border-neutral-200 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-stone-500 focus:outline-none"
+                  className="border-color-brand flex-1 rounded-md border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-stone-900 focus:outline-none"
                   autoFocus
                 />
               </div>
@@ -66,7 +73,7 @@ export function ProfileInfoSection({ email }: { email?: string }) {
                     "Failed to update email"}
                 </p>
               )}
-              <div className="flex gap-2">
+              <div className="flex w-full justify-start gap-2 md:justify-end">
                 <button
                   type="submit"
                   disabled={
@@ -82,7 +89,7 @@ export function ProfileInfoSection({ email }: { email?: string }) {
                   type="button"
                   onClick={handleCancel}
                   disabled={updateEmailMutation.isPending}
-                  className="flex h-8 items-center rounded-full border border-neutral-300 bg-linear-to-b from-white to-stone-50 px-4 text-sm text-neutral-700 shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50"
+                  className="border-color-brand text-color-secondary flex h-8 items-center rounded-full border bg-linear-to-b from-white to-stone-50 px-4 text-sm shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50"
                 >
                   Cancel
                 </button>
diff --git a/apps/web/src/routes/_view/app/account.tsx b/apps/web/src/routes/_view/app/account.tsx
index f8127c60ae..61893b378c 100644
--- a/apps/web/src/routes/_view/app/account.tsx
+++ b/apps/web/src/routes/_view/app/account.tsx
@@ -67,24 +67,21 @@ function Component() {
 
   return (
     <div>
-      <div className="mx-auto min-h-[calc(100vh-200px)] max-w-6xl border-x border-neutral-100">
-        <div className="flex items-center justify-center border-b border-neutral-100 bg-linear-to-b from-stone-50/30 to-stone-100/30 py-20">
-          <h1 className="text-center font-serif text-3xl font-medium">
+      <div className="mx-auto min-h-[calc(100vh-200px)] max-w-6xl">
+        <div className="border-color-brand flex items-center justify-start border-b py-20">
+          <h1 className="text-color text-left font-mono text-3xl font-medium">
             Welcome back {user?.email?.split("@")[0] || "Guest"}
           </h1>
         </div>
 
-        <div className="mx-auto mt-8 flex max-w-4xl flex-col gap-10 px-4 pb-20">
+        <div className="mx-auto mt-8 flex flex-col gap-10 pb-20">
           <section className="space-y-4">
             <div className="space-y-2 px-1">
-              <p className="text-xs font-medium tracking-[0.18em] text-neutral-400 uppercase">
-                Account
-              </p>
               <div>
-                <h2 className="font-serif text-2xl font-medium text-stone-950">
+                <h2 className="text-fg font-mono text-2xl font-medium">
                   Profile and account access
                 </h2>
-                <p className="text-sm text-neutral-600">
+                <p className="text-fg-muted text-sm">
                   Update your email here. Billing and integrations are managed
                   in the desktop app.
                 </p>
@@ -98,14 +95,11 @@ function Component() {
 
           <section className="space-y-4">
             <div className="space-y-2 px-1">
-              <p className="text-xs font-medium tracking-[0.18em] text-neutral-400 uppercase">
-                Access
-              </p>
               <div>
-                <h2 className="font-serif text-2xl font-medium text-stone-950">
+                <h2 className="text-color font-mono text-2xl font-medium">
                   Session controls
                 </h2>
-                <p className="text-sm text-neutral-600">
+                <p className="text-color-muted text-sm">
                   Sign out quickly, while keeping account deletion tucked behind
                   an extra deliberate step.
                 </p>
diff --git a/apps/web/src/routes/_view/callback/auth.tsx b/apps/web/src/routes/_view/callback/auth.tsx
index 778a93c9c2..b008daf181 100644
--- a/apps/web/src/routes/_view/callback/auth.tsx
+++ b/apps/web/src/routes/_view/callback/auth.tsx
@@ -234,10 +234,10 @@ function Component() {
       <div className="flex min-h-screen items-center justify-center p-6">
         <div className="flex w-full max-w-md flex-col gap-8 text-center">
           <div className="flex flex-col gap-3">
-            <h1 className="font-serif text-3xl tracking-tight text-stone-700">
+            <h1 className="text-color font-mono text-3xl">
               {hasTokens ? "Sign-in successful" : "Signing in..."}
             </h1>
-            <p className="text-neutral-600">
+            <p className="text-color-secondary">
               {hasTokens
                 ? "Click the button below to return to the app"
                 : "Please wait while we complete the sign-in"}
@@ -260,7 +260,6 @@ function Component() {
                 onClick={handleCopy}
                 className={cn([
                   "flex w-full cursor-pointer flex-col items-center gap-3 p-4 text-left transition-all",
-                  "rounded-lg border border-stone-100 bg-stone-50 hover:bg-stone-100 active:scale-[99%]",
                 ])}
               >
                 <p className="text-sm text-stone-500">
diff --git a/apps/web/src/routes/_view/index.tsx b/apps/web/src/routes/_view/index.tsx
index 0b88664977..1d211664be 100644
--- a/apps/web/src/routes/_view/index.tsx
+++ b/apps/web/src/routes/_view/index.tsx
@@ -253,7 +253,7 @@ function HeroSection({
                 >
                   Meeting Notes <br /> You Own
                 </h1>
-                <p className="font-regular text-fg-muted text-base leading-relaxed break-words sm:text-xl">
+                <p className="font-regular text-color text-base leading-relaxed break-words sm:text-xl">
                   Char captures every meeting without a bot and keeps data on
                   your device.
                 </p>
@@ -284,7 +284,7 @@ function HeroSection({
                           <div
                             className={cn([
                               "items-left relative flex overflow-hidden rounded-full border-2 transition-all duration-200",
-                              shake && "animate-shake border-stone-600",
+                              shake && "animate-shake border-color-brand",
                               !shake && mutation.isError && "border-red-500",
                               !shake &&
                                 mutation.isSuccess &&
@@ -342,12 +342,12 @@ function HeroSection({
                                 to={heroCTA.subtextLink}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className="text-fg-muted hover:text-color mt-4 block text-sm decoration-dotted transition-colors hover:underline"
+                                className="text-color-secondary hover:text-color mt-4 block text-sm decoration-dotted transition-colors hover:underline"
                               >
                                 {heroCTA.subtext}
                               </Link>
                             ) : (
-                              <p className="text-fg-muted mt-4 text-sm">
+                              <p className="text-color-secondary mt-4 text-sm">
                                 {heroCTA.subtext}
                               </p>
                             ))}
@@ -414,7 +414,7 @@ function SocialTestimonialsSection() {
     <section className="px-4 pt-16 pb-16">
       <h2 className="text-color border-color-brand mb-10 border-b pb-8 font-mono text-2xl tracking-wide md:text-4xl">
         <span className="mb-2 block">What people are saying</span>
-        <span className="text-fg-muted block font-sans text-sm font-normal tracking-normal md:text-base">
+        <span className="text-color-secondary block font-sans text-sm font-normal tracking-normal md:text-base">
           Char was formerly Hyprnote.{" "}
           <Link
             to="/blog/$slug/"
@@ -633,7 +633,7 @@ export function HowItWorksSection() {
         {/* Block 1: Listen & Write */}
         <div className="flex flex-col md:flex-row">
           <div className="flex flex-col justify-end gap-4 py-8 md:w-1/2 md:pr-8 md:pb-16">
-            <p className="text-fg font-mono text-xs tracking-widest uppercase opacity-50">
+            <p className="text-color-secondary font-mono text-xs tracking-widest uppercase opacity-50">
               During meeting
             </p>
             <p className="font-regular text-color text-lg leading-relaxed md:text-2xl lg:text-3xl">
@@ -1004,7 +1004,7 @@ export function HowItWorksSection() {
                 <h4 className="text-color mb-4 font-mono text-base font-medium md:text-xl">
                   Own your <br /> data
                 </h4>
-                <p className="text-color text-base">
+                <p className="text-color-secondary text-base">
                   Data stays on your device and not locked in a cloud.
                 </p>
               </div>
@@ -1031,7 +1031,7 @@ export function HowItWorksSection() {
                   Local or cloud,
                   <br /> your choice
                 </h4>
-                <p className="text-color text-base">
+                <p className="text-color-secondary text-base">
                   Run fully local, bring your own API key, or use Char cloud.
                   Switch anytime.
                 </p>
@@ -1072,7 +1072,7 @@ export function HowItWorksSection() {
                 <h4 className="text-color mb-4 font-mono text-base font-medium md:text-xl">
                   Works <br /> everywhere
                 </h4>
-                <p className="text-color text-base">
+                <p className="text-color-secondary text-base">
                   Captures system audio. Works on Zoom, Teams, Meet, in-person,
                   or offline.
                 </p>
@@ -1140,7 +1140,7 @@ export function HowItWorksSection() {
                 <h4 className="text-color mb-4 font-mono text-base font-medium md:text-xl">
                   Upload existing recordings
                 </h4>
-                <p className="text-color text-base">
+                <p className="text-color-secondary text-base">
                   Drop in audio files or transcripts to turn them into
                   searchable notes.
                 </p>
@@ -1154,9 +1154,9 @@ export function HowItWorksSection() {
               </div>
               <div className="flex min-h-0 flex-col justify-start gap-2 md:max-h-[200px]">
                 <h4 className="text-color mb-4 font-mono text-base font-medium md:text-xl">
-                  40+ <br /> languages
+                  40+ languages
                 </h4>
-                <p className="text-color text-base">
+                <p className="text-color-secondary text-base">
                   Char uses best-in-class transcription models and updates them
                   continuously. Speak in the language you think in.
                 </p>
@@ -1529,7 +1529,7 @@ export function AISection() {
         <h2 className="text-fg font-mono text-2xl tracking-wide md:text-4xl">
           Get more from every note with AI
         </h2>
-        <p className="text-fg-muted">
+        <p className="text-color-secondary">
           Ask questions, execute tasks, and grow your knowledge base—all from
           your meeting notes.
         </p>
@@ -1547,13 +1547,13 @@ export function AISection() {
             ])}
             onMouseEnter={() => setActiveBlock(0)}
           >
-            <p className="text-fg-muted font-mono text-xs tracking-widest uppercase">
+            <p className="text-color-muted font-mono text-xs tracking-widest uppercase">
               Before meeting
             </p>
             <p className="text-color font-regular text-lg leading-relaxed md:text-2xl">
               Get a quick brief before the call
             </p>
-            <p className="text-color-muted text-base leading-relaxed">
+            <p className="text-color-secondary text-base leading-relaxed">
               Get the relevant info about people, goals and previous meetings.
               Char links contacts and conversations, search through them and get
               a whole picture.
@@ -1577,13 +1577,13 @@ export function AISection() {
             ])}
             onMouseEnter={() => setActiveBlock(1)}
           >
-            <p className="text-fg-muted font-mono text-xs tracking-widest uppercase">
+            <p className="text-color-muted font-mono text-xs tracking-widest uppercase">
               During meeting
             </p>
             <p className="text-color font-regular text-lg leading-relaxed md:text-2xl">
               Chat during live meetings
             </p>
-            <p className="text-color-muted text-base leading-relaxed">
+            <p className="text-color-secondary text-base leading-relaxed">
               Get instant answers from the current transcript and past meeting
               context without breaking your flow.
             </p>
@@ -1613,7 +1613,7 @@ export function AISection() {
             <p className="text-color font-regular text-lg leading-relaxed md:text-2xl">
               Chat with your notes
             </p>
-            <p className="text-color-muted text-base leading-relaxed">
+            <p className="text-color-secondary text-base leading-relaxed">
               Query your entire conversation history. Find decisions, action
               items, or topics discussed in previous meetings in natural
               language.
@@ -1697,13 +1697,13 @@ export function GrowsWithYouSection() {
           <h2 className="text-color font-mono text-2xl tracking-wide md:text-4xl">
             Char grows with you
           </h2>
-          <p className="text-md text-color-muted max-w-2xl pb-4">
+          <p className="text-md text-color-secondary max-w-2xl pb-4">
             Add people from meetings in contacts, grow knowledge about your
             chats and context of previous meetings
           </p>
           <Link
             to="/product/mini-apps/"
-            className="text-md text-color-muted hover:text-color flex items-center gap-1 underline"
+            className="text-md text-color-secondary hover:text-color flex items-center gap-1 underline"
           >
             Explore all features
             <Icon icon="mdi:arrow-top-right" className="text-sm" />
@@ -1720,19 +1720,19 @@ export function GrowsWithYouSection() {
                   </div>
                   <div>
                     <p className="text-color text-sm font-medium">Sarah Chen</p>
-                    <p className="text-color-muted text-xs">
+                    <p className="text-color-secondary text-xs">
                       Product Lead · Acme Inc
                     </p>
                   </div>
                 </div>
-                <div className="text-color-muted mb-2 text-xs">
+                <div className="text-color-secondary mb-2 text-xs">
                   sarah@acme.com · +1 (415) 555-0123
                 </div>
                 <div className="border-color-brand bg-surface-subtle rounded border p-3">
-                  <p className="text-color-muted mb-1 text-xs font-medium">
+                  <p className="text-color mb-1 text-xs font-medium">
                     Last conversation
                   </p>
-                  <p className="text-color-muted text-xs">
+                  <p className="text-color text-xs">
                     Discussed Q2 roadmap priorities and timeline for the mobile
                     redesign. Agreed to share updated specs by Friday.
                   </p>
@@ -1743,18 +1743,18 @@ export function GrowsWithYouSection() {
               <h3 className="text-color mb-3 font-mono text-2xl leading-[1.3]">
                 Have your contacts in one place
               </h3>
-              <p className="text-color-muted mb-4 text-base leading-relaxed md:max-w-2/3">
+              <p className="text-color-secondary mb-4 text-base leading-relaxed md:max-w-2/3">
                 Import contacts and watch them come alive with context once you
                 actually meet.
               </p>
               <ul className="flex flex-col gap-3">
                 <li className="flex items-start gap-3">
-                  <span className="text-md text-color-muted">
+                  <span className="text-md text-color">
                     All your chats linked
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <span className="text-md text-color-muted">
+                  <span className="text-md text-color">
                     Generate summaries from meetings
                   </span>
                 </li>
@@ -1767,13 +1767,13 @@ export function GrowsWithYouSection() {
                 <div className="flex items-center gap-3">
                   <Icon
                     icon="mdi:calendar"
-                    className="text-color-muted text-xl"
+                    className="text-color-secondary text-xl"
                   />
                   <div>
                     <p className="text-color text-sm font-medium">
                       Weekly Team Sync
                     </p>
-                    <p className="text-color-muted text-xs">
+                    <p className="text-color-secondary text-xs">
                       Starting in 2 min
                     </p>
                   </div>
@@ -1787,23 +1787,23 @@ export function GrowsWithYouSection() {
               <h3 className="text-color mb-3 font-mono text-2xl">
                 Work with your calendar
               </h3>
-              <p className="text-color-muted mb-4 text-base leading-relaxed">
+              <p className="text-color-secondary mb-4 text-base leading-relaxed">
                 Connect your calendar for intelligent meeting preparation and
                 automatic note organization.
               </p>
               <ul className="flex flex-col gap-3">
                 <li className="flex items-start gap-3">
-                  <span className="text-md text-color-muted">
+                  <span className="text-md text-color">
                     Automatic meeting linking
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <span className="text-md text-color-muted">
+                  <span className="text-md text-color">
                     Pre-meeting context and preparation
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <span className="text-md text-color-muted">
+                  <span className="text-md text-color">
                     Timeline view with notes
                   </span>
                 </li>
@@ -2276,7 +2276,7 @@ export function TemplatesSection() {
           search={{ type: "template" }}
           className={cn([
             "inline-flex items-center gap-2",
-            "text-fg-muted hover:text-color",
+            "text-color hover:text-color",
             "font-medium transition-colors",
           ])}
         >
@@ -2680,13 +2680,13 @@ function BlogSection() {
         <h2 className="text-color mb-2 font-mono text-2xl tracking-wide md:text-4xl">
           Latest from our blog
         </h2>
-        <p className="text-fg-muted font-base">
+        <p className="text-color-secondary font-base">
           Insights, updates, and stories from the Char team
         </p>
         <div className="mt-4 text-left">
           <Link
             to="/blog/"
-            className="text-fg-muted hover:text-color inline-flex items-center gap-2 font-medium transition-colors"
+            className="text-color hover:text-color inline-flex items-center gap-2 font-medium transition-colors"
           >
             View all articles
             <svg
@@ -2716,20 +2716,20 @@ function BlogSection() {
               params={{ slug: article.slug }}
               className="group block h-full"
             >
-              <article className="bg-surface border-color-brand flex h-full flex-col overflow-hidden rounded-md border p-2 transition-all duration-300 hover:shadow-lg">
+              <article className="bg-surface border-color-brand flex h-full flex-col overflow-hidden rounded-md border p-4 transition-all duration-300 hover:shadow-lg">
                 <div className="flex flex-1 flex-col px-2 pt-4">
-                  <h3 className="text-color text-fg mb-2 line-clamp-2 font-mono text-xl font-medium">
+                  <h3 className="text-color mb-4 line-clamp-2 font-mono text-2xl font-medium">
                     {article.display_title || article.meta_title}
                   </h3>
 
-                  <p className="text-fg-muted text-fg mb-4 line-clamp-3 flex-1 text-base leading-relaxed">
+                  <p className="text-color-secondary mb-4 line-clamp-3 flex-1 text-base leading-relaxed">
                     {article.meta_description}
                   </p>
 
                   <div className="flex items-center justify-between gap-4 py-4">
                     <time
                       dateTime={article.date}
-                      className="text-fg-muted text-xs"
+                      className="text-color-secondary text-xs"
                     >
                       {new Date(article.date).toLocaleDateString("en-US", {
                         month: "short",
@@ -2738,7 +2738,7 @@ function BlogSection() {
                       })}
                     </time>
 
-                    <span className="text-fg-muted group-hover:text-fg-muted text-xs font-medium transition-colors">
+                    <span className="text-color-secondary group-hover:text-color text-xs font-medium transition-colors">
                       Read →
                     </span>
                   </div>
diff --git a/apps/web/src/routes/_view/route.tsx b/apps/web/src/routes/_view/route.tsx
index a05a21bfdf..42d4a5de94 100644
--- a/apps/web/src/routes/_view/route.tsx
+++ b/apps/web/src/routes/_view/route.tsx
@@ -36,6 +36,7 @@ function Component() {
   const isHomePage = pathname === "/";
   const hasHeroCTA =
     isHomePage || pathname.startsWith("/product/ai-notetaking");
+  const isAppPage = pathname.startsWith("/app");
   const isResourcePage = [
     "/docs",
     "/blog",
@@ -90,7 +91,7 @@ function Component() {
               }}
             >
               <div className="relative flex min-h-screen flex-col">
-                {!isResourcePage && (
+                {!isResourcePage && !isAppPage && (
                   <>
                     <div
                       aria-hidden="true"
diff --git a/apps/web/src/routes/auth.tsx b/apps/web/src/routes/auth.tsx
index 1b6f436902..9faf899bc8 100644
--- a/apps/web/src/routes/auth.tsx
+++ b/apps/web/src/routes/auth.tsx
@@ -2,12 +2,13 @@ import { Icon } from "@iconify-icon/react";
 import { useMutation } from "@tanstack/react-query";
 import { createFileRoute, Link, redirect } from "@tanstack/react-router";
 import { ArrowLeftIcon, MailIcon } from "lucide-react";
+import { motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import { cn } from "@hypr/utils";
 
-import { Image } from "@/components/image";
+import { CharLogo } from "@/components/sidebar";
 import {
   createDesktopSession,
   doAuth,
@@ -89,8 +90,8 @@ function Component() {
     return (
       <Container>
         <Header />
-        <div className="flex flex-col gap-4">
-          <p className="text-center text-sm text-neutral-600">
+        <div className="flex flex-col gap-4 p-8">
+          <p className="text-fg-muted text-center text-sm">
             Refreshing your {provider} access for admin actions.
           </p>
           <OAuthButton
@@ -115,7 +116,7 @@ function Component() {
       <Header />
       {view === "main" && (
         <>
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col gap-2 px-8">
             {showGoogle && (
               <OAuthButton
                 flow={flow}
@@ -138,12 +139,12 @@ function Component() {
                 onClick={() => setView("email")}
                 className={cn([
                   "w-full cursor-pointer px-4 py-2",
-                  "border border-neutral-300",
-                  "rounded-lg font-medium text-neutral-700",
-                  "hover:bg-neutral-50",
+                  "border-color-brand border",
+                  "text-fg rounded-full font-sans",
+                  "hover:bg-brand-dark/10",
                   "focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-hidden",
                   "transition-colors",
-                  "flex items-center justify-center gap-2",
+                  "flex items-center justify-center gap-3",
                 ])}
               >
                 <MailIcon className="size-4" />
@@ -167,15 +168,34 @@ function Component() {
 }
 
 function Container({ children }: { children: React.ReactNode }) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | "auto">("auto");
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      setHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div
       className={cn([
-        "flex min-h-screen items-center justify-center p-4",
-        "bg-linear-to-b from-stone-50 via-stone-100/50 to-stone-50",
+        "flex min-h-screen items-center justify-center",
+        "bg-page",
+        "bg-dotted-dark",
       ])}
     >
-      <div className="mx-auto max-w-md rounded-xs border border-neutral-200 bg-white p-8">
-        {children}
+      <div className="border-color-brand surface mx-auto w-md min-w-[320px] overflow-hidden rounded-xl border shadow-md">
+        <motion.div
+          animate={{ height }}
+          transition={{ duration: 0.3, ease: "easeInOut" }}
+        >
+          <div ref={contentRef}>{children}</div>
+        </motion.div>
       </div>
     </div>
   );
@@ -186,23 +206,14 @@ function Header() {
     <div className="mb-8 text-center">
       <div
         className={cn([
-          "mx-auto mb-6 size-28",
-          "border border-neutral-200 shadow-xl",
-          "flex items-center justify-center",
-          "rounded-4xl bg-transparent",
+          "mx-auto mb-8 p-8",
+          "flex items-center justify-between",
+          "border-color-brand border-b",
         ])}
       >
-        <Image
-          src="/api/assets/hyprnote/icon.png"
-          alt="Char"
-          width={96}
-          height={96}
-          className={cn(["size-24", "rounded-3xl border border-neutral-200"])}
-        />
+        <CharLogo compact className="text-fg h-10 w-auto" />
+        <h1 className="text-fg py-4 font-mono text-xl">Welcome to Char</h1>
       </div>
-      <h1 className="mb-2 font-serif text-3xl text-stone-800">
-        Welcome to Char
-      </h1>
     </div>
   );
 }
@@ -236,7 +247,7 @@ function DesktopReauthView({
     retryMutation.isError || (retryMutation.isSuccess && !retryMutation.data);
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 p-8">
       {!hasRetryFailed && (
         <div className="text-center">
           <p className="text-neutral-600">Signing in as {email}...</p>
@@ -262,7 +273,7 @@ function DesktopReauthView({
 
 function LegalText() {
   return (
-    <p className="mt-4 text-center text-xs text-neutral-500">
+    <p className="mt-4 px-8 pb-8 text-center text-xs text-neutral-500">
       By signing up, you agree to our{" "}
       <a
         href="https://char.com/legal/terms"
@@ -298,7 +309,7 @@ function EmailAuthView({
   const [mode, setMode] = useState<EmailMode>("password");
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 px-8">
       <button
         onClick={onBack}
         className="-mt-2 mb-1 flex items-center gap-1 self-start text-sm text-neutral-500 transition-colors hover:text-neutral-700"
@@ -307,11 +318,11 @@ function EmailAuthView({
         Back
       </button>
 
-      <div className="flex gap-1 rounded-lg bg-neutral-100 p-1">
+      <div className="flex gap-1 rounded-full bg-neutral-100 p-1">
         <button
           onClick={() => setMode("password")}
           className={cn([
-            "flex-1 rounded-md py-1.5 text-sm font-medium transition-colors",
+            "flex-1 rounded-full py-1.5 font-sans text-sm font-medium transition-colors",
             mode === "password"
               ? "bg-white text-neutral-900 shadow-sm"
               : "text-neutral-500 hover:text-neutral-700",
@@ -322,7 +333,7 @@ function EmailAuthView({
         <button
           onClick={() => setMode("magic-link")}
           className={cn([
-            "flex-1 rounded-md py-1.5 text-sm font-medium transition-colors",
+            "flex-1 rounded-full py-1.5 font-sans text-sm font-medium transition-colors",
             mode === "magic-link"
               ? "bg-white text-neutral-900 shadow-sm"
               : "text-neutral-500 hover:text-neutral-700",
@@ -462,7 +473,7 @@ function PasswordForm({
         className={cn([
           "w-full px-4 py-2",
           "rounded-lg border border-neutral-300",
-          "text-neutral-700 placeholder:text-neutral-400",
+          "text-fg placeholder:text-fg-muted",
           "focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-hidden",
         ])}
       />
@@ -475,7 +486,7 @@ function PasswordForm({
         className={cn([
           "w-full px-4 py-2",
           "rounded-lg border border-neutral-300",
-          "text-neutral-700 placeholder:text-neutral-400",
+          "text-fg placeholder:text-fg-muted",
           "focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-hidden",
         ])}
       />
@@ -489,8 +500,8 @@ function PasswordForm({
           className={cn([
             "w-full px-4 py-2",
             "rounded-lg border border-neutral-300",
-            "text-neutral-700 placeholder:text-neutral-400",
-            "focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-hidden",
+            "text-fg placeholder:text-fg-muted",
+            "focus:ring-2 focus:ring-stone-800 focus:ring-offset-2 focus:outline-hidden",
           ])}
         />
       )}
@@ -504,13 +515,14 @@ function PasswordForm({
         }
         className={cn([
           "w-full cursor-pointer px-4 py-2",
-          "border border-neutral-300",
-          "rounded-lg font-medium text-neutral-700",
-          "hover:bg-neutral-50",
+          "font rounded-full font-sans",
           "focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-hidden",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "transition-colors",
-          "flex items-center justify-center gap-2",
+          "flex items-center justify-center gap-3",
+          isSignUp
+            ? "border-color-border text-fg hover:bg-brand-dark/10 rounded-full border"
+            : "bg-fg hover:bg-fg/80 text-white",
         ])}
       >
         {isPending ? "Loading..." : isSignUp ? "Create account" : "Sign in"}
@@ -523,7 +535,7 @@ function PasswordForm({
             setErrorMessage("");
             setConfirmPassword("");
           }}
-          className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          className="text-fg-muted hover:text-fg font-sans text-sm transition-colors hover:underline"
         >
           {isSignUp
             ? "Already have an account? Sign in"
@@ -532,7 +544,7 @@ function PasswordForm({
         {!isSignUp && (
           <Link
             to="/reset-password/"
-            className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+            className="text-fg-muted hover:text-fg text-sm transition-colors hover:underline"
           >
             Forgot password?
           </Link>
@@ -697,13 +709,13 @@ function OAuthButton({
       disabled={isPending}
       className={cn([
         "w-full cursor-pointer px-4 py-2",
-        "border border-neutral-300",
-        "rounded-lg font-medium text-neutral-700",
-        "hover:bg-neutral-50",
+        "border-color-brand border",
+        "text-fg rounded-full font-sans",
+        "hover:bg-brand-dark/10",
         "focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:outline-hidden",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "transition-colors",
-        "flex items-center justify-center gap-2",
+        "flex items-center justify-center gap-3",
       ])}
     >
       {provider === "google" && <Icon icon="logos:google-icon" />}
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 0f1142cd96..4dba2a2077 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -75,6 +75,7 @@
   /* ── Colors: greys ────────────────────────────── */
   --grey-900: oklch(0.3 0.0197 81.53);
   --grey-700: oklch(0.4922 0.0127 67.79);
+  --grey-600: oklch(0.6182 0.0018 67.8);
   --grey-500: oklch(0.7782 0.0018 67.8);
   --grey-300: oklch(0.9213 0.0027 106.45);
   --grey-100: oklch(0.9558 0.0045 78.3);
@@ -86,8 +87,8 @@
 
   /* ── Colors: foreground / text ───────────────── */
   --color-fg: var(--grey-900);
-  --color-fg-muted: #57534e;
-  --color-fg-subtle: var(--color-border);
+  --color-fg-muted: var(--grey-500);
+  --color-fg-secondary: var(--grey-600);
 
   /* ── Colors: borders ─────────────────────────── */
   --color-border: var(--grey-500);
@@ -471,6 +472,10 @@
   );
 }
 
+.bg-page {
+  background-color: var(--color-page);
+}
+
 .prose
   :where(code):not(:where([class~="not-prose"], [class~="not-prose"]
     *))::before,
@@ -524,6 +529,10 @@
   color: var(--color-fg-muted);
 }
 
+.text-color-secondary {
+  color: var(--color-fg-secondary);
+}
+
 .brackets-footer {
   color: var(--color-page);
 }