From adfafdc1263f9498e98c87378207715b4447917c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 25 Dec 2025 18:16:14 +0000
Subject: [PATCH] feat: apply docs page styling to match ui-mockup-01

- Created docs.css with exact mockup specifications
  * Typography: H1 42px, H2 30px, H3 24px with proper spacing
  * Content padding: 48px 64px
  * 3-column grid: 280px sidebar + max 900px content + 240px TOC
  * Responsive breakpoints at 1200px and 768px

- Updated docs layout to import docs.css and wrap content
- Refactored page.tsx to use semantic CSS classes
  * docs-main-layout for 3-column grid
  * docs-content for main content area
  * docs-content-meta for metadata section

- Updated all components to use CSS classes:
  * Sidebar: docs-sidebar, sidebar-section, sidebar-title, sidebar-link
  * TableOfContents: docs-toc, toc-title, toc-nav, toc-link
  * Breadcrumbs: docs-breadcrumbs, breadcrumb-link, breadcrumb-separator
  * NavigationFooter: nav-footer, nav-card, nav-card-label, nav-card-title

- Removed inline styles in favor of centralized CSS
- Build verified successful
---
 next-env.d.ts                       |   2 +-
 src/app/docs/[...slug]/page.tsx     |  49 ++--
 src/app/docs/docs.css               | 422 ++++++++++++++++++++++++++++
 src/app/docs/layout.tsx             |   5 +-
 src/components/Breadcrumbs.tsx      |   6 +-
 src/components/NavigationFooter.tsx |  16 +-
 src/components/Sidebar.tsx          |  52 +---
 src/components/TableOfContents.tsx  |  22 +-
 8 files changed, 470 insertions(+), 104 deletions(-)
 create mode 100644 src/app/docs/docs.css

diff --git a/next-env.d.ts b/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
index 33c8aac..9cdcc82 100644
--- a/src/app/docs/[...slug]/page.tsx
+++ b/src/app/docs/[...slug]/page.tsx
@@ -73,31 +73,28 @@ export default async function DocPage({ params }: PageProps) {
   }
 
   return (
-    <div className="flex min-h-screen">
+    <>
       {/* Mobile Navigation Drawer */}
       <MobileNav items={navRoots} />
 
       {/* 3-Column Layout: Sidebar + Content + TOC */}
-      {/* Desktop (>1200px): 3 columns, Tablet (768-1200px): 2 columns, Mobile (<768px): 1 column */}
-      <div className="flex-1 grid grid-cols-1 lg:grid-cols-[280px_1fr] xl:grid-cols-[280px_1fr_240px] max-w-[1920px] mx-auto w-full" style={{ minHeight: 'calc(100vh - 64px)' }}>
+      <div className="docs-main-layout">
         {/* Sidebar Navigation - Hidden on mobile */}
         <Sidebar items={navRoots} />
 
         {/* Main Content */}
-        <main className="content-area max-w-[900px] mx-auto lg:mx-0">
+        <main className="docs-content">
           <Breadcrumbs items={breadcrumbs} />
 
-          <h1 className="text-[42px] font-bold tracking-[-0.02em] mb-4 text-[var(--text)]" style={{ lineHeight: '1.2' }}>
-            {frontmatter.title}
-          </h1>
+          <h1>{frontmatter.title}</h1>
 
           {/* Reading Metadata */}
-          <div className="flex items-center gap-6 mb-8 pb-8 border-b border-[var(--border)] text-[14px] text-[var(--text-tertiary)]">
-            <div className="flex items-center gap-1.5">
+          <div className="docs-content-meta">
+            <div className="meta-item">
               <span>📖</span>
               <span>{readingTime} min read</span>
             </div>
-            <div className="flex items-center gap-1.5">
+            <div className="meta-item">
               <span>📅</span>
               <span>
                 Last updated: {new Date(lastModified).toLocaleDateString('en-US', {
@@ -108,7 +105,7 @@ export default async function DocPage({ params }: PageProps) {
               </span>
             </div>
             {frontmatter.author && (
-              <div className="flex items-center gap-1.5">
+              <div className="meta-item">
                 <span>👤</span>
                 <span>{frontmatter.author}</span>
               </div>
@@ -141,18 +138,16 @@ export default async function DocPage({ params }: PageProps) {
                   },
                   // Skip markdown h1 to avoid duplicate with page title
                   h1: () => null,
-                  h2: ({ node, ...props }: any) => <h2 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20 text-[30px] font-bold mt-12 mb-4 text-[var(--text)]" {...props} />,
-                  h3: ({ node, ...props }: any) => <h3 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20 text-[24px] font-semibold text-[var(--text)]" style={{ marginTop: '32px', marginBottom: '12px' }} {...props} />,
-                  h4: ({ node, ...props }: any) => <h4 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20 text-xl font-semibold mt-6 mb-2 text-[var(--text)]" {...props} />,
-                  h5: ({ node, ...props }: any) => <h5 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20 text-lg font-semibold mt-4 mb-2 text-[var(--text)]" {...props} />,
-                  h6: ({ node, ...props }: any) => <h6 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20 text-base font-semibold mt-4 mb-2 text-[var(--text)]" {...props} />,
-                  p: ({ node, ...props }: any) => <p className="mb-4 text-[var(--text-secondary)]" style={{ lineHeight: '1.7', fontWeight: 400 }} {...props} />,
-                  ul: ({ node, ...props }: any) => <ul className="mb-4 text-[var(--text-secondary)]" style={{ paddingLeft: '24px' }} {...props} />,
-                  ol: ({ node, ...props }: any) => <ol className="mb-4 text-[var(--text-secondary)]" style={{ paddingLeft: '24px' }} {...props} />,
-                  li: ({ node, ...props }: any) => <li className="mb-2 text-[var(--text-secondary)]" {...props} />,
-                  a: ({ node, ...props }: any) => (
-                    <a className="text-[var(--purple)] hover:underline" {...props} />
-                  ),
+                  h2: ({ node, ...props }: any) => <h2 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h3: ({ node, ...props }: any) => <h3 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h4: ({ node, ...props }: any) => <h4 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h5: ({ node, ...props }: any) => <h5 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  h6: ({ node, ...props }: any) => <h6 id={getTitleSlug(props.children?.[0])} className="scroll-mt-20" {...props} />,
+                  p: ({ node, ...props }: any) => <p {...props} />,
+                  ul: ({ node, ...props }: any) => <ul {...props} />,
+                  ol: ({ node, ...props }: any) => <ol {...props} />,
+                  li: ({ node, ...props }: any) => <li {...props} />,
+                  a: ({ node, ...props }: any) => <a {...props} />,
                 }}
               >
                 {body}
@@ -165,13 +160,9 @@ export default async function DocPage({ params }: PageProps) {
         </main>
 
         {/* Table of Contents - Hidden below 1200px to match mockup */}
-        {toc.length > 0 && (
-          <aside className="hidden xl:block">
-            <TableOfContents toc={toc} />
-          </aside>
-        )}
+        {toc.length > 0 && <TableOfContents toc={toc} />}
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/src/app/docs/docs.css b/src/app/docs/docs.css
new file mode 100644
index 0000000..5ecd3fe
--- /dev/null
+++ b/src/app/docs/docs.css
@@ -0,0 +1,422 @@
+/* EmberDocs Documentation Pages - Matching ui-mockup-01-documentation-page.html */
+
+/* Ensure docs pages use the correct color scheme */
+.docs-layout {
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}
+
+/* Sidebar Styling - Exact mockup match */
+.docs-sidebar {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  padding: 24px 0;
+  overflow-y: auto;
+  height: calc(100vh - 64px);
+  position: sticky;
+  top: 64px;
+  width: 280px;
+}
+
+.sidebar-section {
+  margin-bottom: 24px;
+}
+
+.sidebar-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0 24px;
+  margin-bottom: 8px;
+}
+
+.sidebar-link {
+  display: block;
+  padding: 8px 24px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.2s;
+  border-left: 2px solid transparent;
+}
+
+.sidebar-link:hover {
+  color: var(--text);
+  background: rgba(139, 92, 246, 0.1);
+}
+
+.sidebar-link.active {
+  color: var(--purple);
+  background: rgba(139, 92, 246, 0.1);
+  border-left-color: var(--purple);
+  font-weight: 500;
+}
+
+.sidebar-link.nested {
+  padding-left: 40px;
+  font-size: 13px;
+}
+
+/* Content Area - Exact mockup match */
+.docs-content {
+  padding: 48px 64px;
+  max-width: 900px;
+}
+
+@media (max-width: 768px) {
+  .docs-content {
+    padding: 24px !important;
+  }
+}
+
+/* Breadcrumbs */
+.docs-breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--text-tertiary);
+  margin-bottom: 32px;
+}
+
+.breadcrumb-link {
+  color: var(--text-tertiary);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.breadcrumb-link:hover {
+  color: var(--purple);
+}
+
+.breadcrumb-separator {
+  color: var(--border);
+}
+
+/* Typography - Exact mockup match */
+.docs-content h1 {
+  font-size: 42px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin-bottom: 16px;
+  color: var(--text);
+}
+
+.docs-content-meta {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 32px;
+  padding-bottom: 32px;
+  border-bottom: 1px solid var(--border);
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: var(--text-tertiary);
+}
+
+.docs-content h2 {
+  font-size: 30px;
+  font-weight: 700;
+  margin-top: 48px;
+  margin-bottom: 16px;
+  color: var(--text);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.docs-content h3 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  color: var(--text);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.docs-content h4 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 24px;
+  margin-bottom: 8px;
+  color: var(--text);
+}
+
+.docs-content h5 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-bottom: 8px;
+  color: var(--text);
+}
+
+.docs-content h6 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  color: var(--text);
+}
+
+.docs-content p {
+  margin-bottom: 16px;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  font-size: 16px;
+}
+
+.docs-content ul,
+.docs-content ol {
+  margin-bottom: 16px;
+  padding-left: 24px;
+  color: var(--text-secondary);
+}
+
+.docs-content li {
+  margin-bottom: 8px;
+  line-height: 1.7;
+}
+
+.docs-content a {
+  color: var(--purple);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.docs-content a:hover {
+  text-decoration: underline;
+}
+
+/* Inline Code */
+.docs-content code {
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  color: var(--amber);
+}
+
+/* Code blocks - already styled by CodeBlock.tsx but ensuring consistency */
+.docs-content pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+}
+
+/* Table of Contents */
+.docs-toc {
+  padding: 48px 24px;
+  height: calc(100vh - 64px);
+  position: sticky;
+  top: 64px;
+  overflow-y: auto;
+  width: 240px;
+}
+
+.toc-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 12px;
+}
+
+.toc-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-nav li {
+  margin-bottom: 8px;
+}
+
+.toc-link {
+  display: block;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  font-size: 13px;
+  transition: color 0.2s;
+  line-height: 1.4;
+}
+
+.toc-link:hover {
+  color: var(--purple);
+}
+
+.toc-link.active {
+  color: var(--purple);
+  font-weight: 500;
+}
+
+.toc-link.level-2 {
+  padding-left: 12px;
+}
+
+.toc-link.level-3 {
+  padding-left: 24px;
+  font-size: 12px;
+}
+
+/* Main Layout Grid */
+.docs-main-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr 240px;
+  max-width: 1920px;
+  margin: 0 auto;
+  min-height: calc(100vh - 64px);
+}
+
+/* Responsive breakpoints matching mockup */
+@media (max-width: 1200px) {
+  .docs-main-layout {
+    grid-template-columns: 280px 1fr;
+  }
+
+  .docs-toc {
+    display: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .docs-main-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .docs-sidebar {
+    display: none;
+  }
+}
+
+/* Navigation Footer */
+.nav-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 64px;
+  padding-top: 32px;
+  border-top: 1px solid var(--border);
+}
+
+.nav-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+  text-decoration: none;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-card:hover {
+  border-color: var(--purple);
+  background: var(--surface-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.nav-card-label {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+.nav-card-title {
+  font-size: 16px;
+  color: var(--text);
+  font-weight: 500;
+}
+
+.nav-card.prev {
+  text-align: left;
+}
+
+.nav-card.next {
+  text-align: right;
+}
+
+@media (max-width: 640px) {
+  .nav-footer {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Callout boxes (for tips, warnings, etc.) */
+.callout {
+  background: rgba(139, 92, 246, 0.1);
+  border-left: 3px solid var(--purple);
+  padding: 16px;
+  margin: 24px 0;
+  border-radius: 4px;
+}
+
+.callout-title {
+  font-weight: 600;
+  color: var(--purple);
+  margin-bottom: 8px;
+}
+
+.callout.warning {
+  background: rgba(245, 158, 11, 0.1);
+  border-left-color: var(--amber);
+}
+
+.callout.warning .callout-title {
+  color: var(--amber);
+}
+
+.callout.error {
+  background: rgba(239, 68, 68, 0.1);
+  border-left-color: var(--error);
+}
+
+.callout.error .callout-title {
+  color: var(--error);
+}
+
+.callout.info {
+  background: rgba(59, 130, 246, 0.1);
+  border-left-color: var(--info);
+}
+
+.callout.info .callout-title {
+  color: var(--info);
+}
+
+/* Scrollbar styling for dark theme */
+.docs-sidebar::-webkit-scrollbar,
+.docs-toc::-webkit-scrollbar {
+  width: 8px;
+}
+
+.docs-sidebar::-webkit-scrollbar-track,
+.docs-toc::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.docs-sidebar::-webkit-scrollbar-thumb,
+.docs-toc::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+.docs-sidebar::-webkit-scrollbar-thumb:hover,
+.docs-toc::-webkit-scrollbar-thumb:hover {
+  background: var(--surface-hover);
+}
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
index 8d133ee..6b9c5e5 100644
--- a/src/app/docs/layout.tsx
+++ b/src/app/docs/layout.tsx
@@ -1,5 +1,6 @@
 import { Header } from '@/components/Header';
 import { SearchPalette } from '@/components/SearchPalette';
+import './docs.css';
 
 export default function DocsLayout({
   children
@@ -9,7 +10,9 @@ export default function DocsLayout({
   return (
     <>
       <Header />
-      {children}
+      <div className="docs-layout">
+        {children}
+      </div>
       <SearchPalette />
     </>
   );
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
index 917fcc0..3a6eb01 100644
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -9,16 +9,16 @@ export function Breadcrumbs({ items }: BreadcrumbsProps): JSX.Element | null {
   if (items.length === 0) return null;
 
   return (
-    <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-sm mb-8 text-[var(--text-tertiary)]">
+    <nav aria-label="Breadcrumb" className="docs-breadcrumbs">
       {items.map((item, idx) => (
         <div key={item.href} className="flex items-center gap-2">
-          {idx > 0 && <span className="text-[var(--border)]">→</span>}
+          {idx > 0 && <span className="breadcrumb-separator">→</span>}
           {idx === items.length - 1 ? (
             <span>{item.label}</span>
           ) : (
             <Link
               href={item.href as any}
-              className="hover:text-[var(--purple)] transition-colors no-underline"
+              className="breadcrumb-link"
             >
               {item.label}
             </Link>
diff --git a/src/components/NavigationFooter.tsx b/src/components/NavigationFooter.tsx
index ea42250..16f39a7 100644
--- a/src/components/NavigationFooter.tsx
+++ b/src/components/NavigationFooter.tsx
@@ -13,17 +13,16 @@ export function NavigationFooter({ prev, next }: NavigationFooterProps): JSX.Ele
   }
 
   return (
-    <nav className="mt-16 pt-8 border-t border-[var(--border)] grid grid-cols-2 gap-4">
+    <nav className="nav-footer">
       {prev ? (
         <Link
           href={`${EMBERDOCS_BASE_ROUTE}${prev.path}` as any}
-          className="group rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--purple)] hover:bg-[var(--surface-hover)] transition-all no-underline"
-          style={{ padding: '20px' }}
+          className="nav-card prev"
         >
-          <div className="text-xs font-medium text-[var(--text-tertiary)] mb-1">
+          <div className="nav-card-label">
             ← Previous
           </div>
-          <div className="text-base font-semibold text-[var(--text)]">
+          <div className="nav-card-title">
             {prev.title}
           </div>
         </Link>
@@ -34,13 +33,12 @@ export function NavigationFooter({ prev, next }: NavigationFooterProps): JSX.Ele
       {next && (
         <Link
           href={`${EMBERDOCS_BASE_ROUTE}${next.path}` as any}
-          className="group rounded-lg border border-[var(--border)] bg-[var(--surface)] hover:border-[var(--purple)] hover:bg-[var(--surface-hover)] transition-all text-right no-underline"
-          style={{ padding: '20px' }}
+          className="nav-card next"
         >
-          <div className="text-xs font-medium text-[var(--text-tertiary)] mb-1">
+          <div className="nav-card-label">
             Next →
           </div>
-          <div className="text-base font-semibold text-[var(--text)]">
+          <div className="nav-card-title">
             {next.title}
           </div>
         </Link>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index fff893a..4a7aed1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -64,14 +64,7 @@ export function Sidebar({ items }: SidebarProps): JSX.Element {
         {isFolder ? (
           <button
             onClick={() => toggleFolder(node.id)}
-            className={`
-              w-full text-left transition-all flex items-center gap-2 leading-[1.5]
-              ${isCurrentlyActive
-                ? 'text-[var(--purple)] bg-[rgba(139,92,246,0.1)] border-l-2 border-[var(--purple)] font-medium'
-                : 'text-[var(--text-tertiary)] hover:text-[var(--text)] hover:bg-[rgba(139,92,246,0.1)]'
-              }
-            `}
-            style={{ paddingLeft: level > 0 ? `${24 + level * 16}px` : '24px', paddingRight: '24px', paddingTop: '8px', paddingBottom: '8px', fontSize: '14px' }}
+            className={`sidebar-link ${isCurrentlyActive ? 'active' : ''} ${level > 0 ? 'nested' : ''} flex items-center gap-2 w-full`}
           >
             <span className="inline-block w-4">
               {node.children && node.children.length > 0 && (
@@ -90,20 +83,7 @@ export function Sidebar({ items }: SidebarProps): JSX.Element {
         ) : (
           <Link
             href={`${EMBERDOCS_BASE_ROUTE}${node.path}` as any}
-            className={`
-              block transition-all border-l-2 leading-[1.5]
-              ${isCurrentlyActive
-                ? 'text-[var(--purple)] bg-[rgba(139,92,246,0.1)] border-[var(--purple)] font-medium'
-                : 'text-[var(--text-tertiary)] border-transparent hover:text-[var(--text)] hover:bg-[rgba(139,92,246,0.1)]'
-              }
-            `}
-            style={{ 
-              paddingLeft: level > 0 ? `${40 + level * 16}px` : '24px',
-              paddingRight: '24px',
-              paddingTop: '8px',
-              paddingBottom: '8px',
-              fontSize: level > 0 ? '13px' : '14px',
-            }}
+            className={`sidebar-link ${isCurrentlyActive ? 'active' : ''} ${level > 0 ? 'nested' : ''}`}
           >
             {node.title}
           </Link>
@@ -121,18 +101,12 @@ export function Sidebar({ items }: SidebarProps): JSX.Element {
   const renderSection = (node: NavigationNode): JSX.Element => {
     if (node.type === 'folder' && node.children && node.children.length > 0) {
       return (
-        <div key={node.id} className="mb-6">
-          <div className="text-[12px] font-semibold text-[var(--text-tertiary)] uppercase tracking-wider px-6 mb-2" style={{ letterSpacing: '0.05em' }}>
+        <div key={node.id} className="sidebar-section">
+          <div className="sidebar-title">
             {node.title}
           </div>
           <nav>
-            <ul className="list-none">
-              {node.children.map((child) => (
-                <li key={child.id} className="mb-0.5">
-                  {renderNode(child)}
-                </li>
-              ))}
-            </ul>
+            {node.children.map((child) => renderNode(child))}
           </nav>
         </div>
       );
@@ -141,20 +115,8 @@ export function Sidebar({ items }: SidebarProps): JSX.Element {
   };
 
   return (
-    <aside className="hidden lg:block bg-[var(--surface)] border-r border-[var(--border)] overflow-y-auto sticky w-[280px]">
-      <div
-        style={{
-          position: 'sticky',
-          top: '64px',
-          height: 'calc(100vh - 64px)',
-          paddingTop: '24px',
-          paddingBottom: '24px',
-        }}
-      >
-        <div className="space-y-6">
-          {items.map((node) => renderSection(node))}
-        </div>
-      </div>
+    <aside className="docs-sidebar">
+      {items.map((node) => renderSection(node))}
     </aside>
   );
 }
diff --git a/src/components/TableOfContents.tsx b/src/components/TableOfContents.tsx
index 72f7132..e5cd91a 100644
--- a/src/components/TableOfContents.tsx
+++ b/src/components/TableOfContents.tsx
@@ -34,26 +34,16 @@ export function TableOfContents({ toc }: TableOfContentsProps): JSX.Element {
   };
 
   return (
-    <nav className="sticky top-16 h-[calc(100vh-64px)] overflow-y-auto" style={{ padding: '48px 24px' }} aria-label="Table of contents">
-      <div className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wider mb-3" style={{ letterSpacing: '0.05em' }}>
+    <div className="docs-toc">
+      <div className="toc-title">
         On This Page
       </div>
-      <ul className="list-none">
+      <ul className="toc-nav">
         {toc.map((item) => (
-          <li key={item.slug} className="mb-2">
+          <li key={item.slug}>
             <button
               onClick={() => scrollToHeading(item.slug)}
-              className={`
-                text-[13px] text-left w-full transition-colors
-                ${activeId === item.slug
-                  ? 'text-[var(--purple)] font-medium'
-                  : 'text-[var(--text-tertiary)] hover:text-[var(--purple)]'
-                }
-              `}
-              style={{ 
-                paddingLeft: item.level > 1 ? '12px' : '0',
-                lineHeight: '1.4',
-              }}
+              className={`toc-link ${activeId === item.slug ? 'active' : ''} ${item.level === 2 ? 'level-2' : item.level === 3 ? 'level-3' : ''}`}
               aria-current={activeId === item.slug ? 'location' : undefined}
               title={item.title}
             >
@@ -62,6 +52,6 @@ export function TableOfContents({ toc }: TableOfContentsProps): JSX.Element {
           </li>
         ))}
       </ul>
-    </nav>
+    </div>
   );
 }