Add core, pages, and shell stylesheets with comprehensive design system

- Introduced core.css for foundational styles including font definitions and CSS variables for theming.
- Created pages.css to define layout and styling for various page components, enhancing visual hierarchy and responsiveness.
- Implemented shell.css for site header, navigation, and footer styles, ensuring a cohesive user experience across the application.

Author: smiggleworth

src/components/doc-layout.tsx

@@ -1,3 +1,4 @@
+import { state } from '@askrjs/askr';
 import { currentRoute } from '@askrjs/askr/router';
 import { BookOpenIcon } from '@askrjs/lucide';
 import { Separator } from '../ui/primitives/separator';
@@ -12,7 +13,6 @@ import {
 } from '../pages/shared/content';
 import { SiteAnchor } from './site-link';
 import { SiteFrame } from './site-shell';
-import { BrandMark } from './site-primitives';
 
 export interface DocLayoutProps extends Props {
   title: string;
@@ -21,6 +21,17 @@ export interface DocLayoutProps extends Props {
   children?: unknown;
 }
 
+function toggleDocsNavigation() {
+  if (typeof document === 'undefined') return;
+
+  const sidebar = document.querySelector('.docs-sidebar');
+  const button = document.querySelector('.docs-mobile-nav-toggle');
+  const nextOpen = button?.getAttribute('aria-expanded') !== 'true';
+
+  sidebar?.classList.toggle('is-open', nextOpen);
+  button?.setAttribute('aria-expanded', nextOpen ? 'true' : 'false');
+}
+
 function renderSidebarItem(item: DocsNavItem, currentPath: string) {
   const current = currentPath === item.href;
 
@@ -116,6 +127,23 @@ export function DocLayout(props: DocLayoutProps) {
   const currentItem = props.meta
     ? findDocsNavItemBySlug(props.meta.slug)
     : null;
+  const [searchQuery, setSearchQuery] = state('');
+
+  const query = searchQuery().trim().toLowerCase();
+  const filteredSections = docsNavSections
+    .map((section) => ({
+      ...section,
+      items: section.items.filter((item) => {
+        if (!query) return true;
+        const summary = item.description?.toLowerCase() ?? '';
+        return (
+          item.label.toLowerCase().includes(query) ||
+          item.slug.toLowerCase().includes(query) ||
+          summary.includes(query)
+        );
+      }),
+    }))
+    .filter((section) => section.items.length > 0);
 
   const toc = props.meta?.toc;
   const hasToc = toc && toc.length > 0;
@@ -126,24 +154,52 @@ export function DocLayout(props: DocLayoutProps) {
         <div class={hasToc ? 'docs-shell has-toc' : 'docs-shell'}>
           <aside class="docs-sidebar">
             <div class="docs-sidebar-inner">
-              <SiteAnchor href="/docs" className="docs-sidebar-home">
-                <BrandMark compact />
-                <span class="docs-sidebar-kicker">
-                  Documentation control room
-                </span>
-              </SiteAnchor>
+              <span class="docs-sidebar-kicker">Documentation control room</span>
+              <button
+                class="docs-mobile-nav-toggle"
+                type="button"
+                aria-expanded="false"
+                onClick={toggleDocsNavigation}
+              >
+                Browse docs sections
+              </button>
+              <label class="docs-sidebar-search" for="docs-search">
+                <span>Search docs</span>
+                <input
+                  id="docs-search"
+                  type="search"
+                  placeholder="Filter pages, guides, and references"
+                  value={searchQuery}
+                  onInput={(event) => {
+                    const target = event.currentTarget as HTMLInputElement;
+                    setSearchQuery(target.value);
+                  }}
+                />
+              </label>
               <Separator class="docs-rule" decorative />
               <nav class="docs-sidebar-nav">
-                {docsNavSections.map((section) =>
+                {filteredSections.map((section) =>
                   renderSidebarSection(section, currentPath)
                 )}
+                {!filteredSections.length ? (
+                  <p class="docs-sidebar-empty">No docs pages match that search.</p>
+                ) : null}
               </nav>
             </div>
           </aside>
 
           <main class="docs-main">
             <div class="docs-main-inner">
               <header class="docs-header">
+                {currentItem ? (
+                  <nav class="docs-breadcrumb" aria-label="Breadcrumb">
+                    <SiteAnchor href="/docs">Docs</SiteAnchor>
+                    <span>/</span>
+                    <span>{currentItem.section}</span>
+                    <span>/</span>
+                    <span aria-current="page">{currentItem.label}</span>
+                  </nav>
+                ) : null}
                 <div class="docs-header-meta">
                   <span class="docs-kicker docs-header-kicker">
                     <BookOpenIcon size={15} />

src/pages/home/index.tsx

@@ -170,9 +170,9 @@ export function HomePage() {
     <SiteFrame>
       <main class="site-main home-main">
         <SignalHero
-          eyebrow="Precision reactive UI"
-          title="Askr"
-          intro="A fine-grained framework for static sites, apps, and docs that stay explainable from the first route to production output."
+          eyebrow="Serious infrastructure for developers"
+          title="Ask better questions."
+          intro="Type-safe interactive workflows for modern TypeScript applications. Keep rendering explicit, routing predictable, and output production-ready from first commit to deployment."
           primary={{
             href: docsStartPath,
             label: 'Start building',
@@ -200,24 +200,24 @@ export function HomePage() {
           />
 
           <SectionBand
-            kicker="Route to release"
-            title="A single path from first page to static output"
-            description="Every marketing claim has a matching guide, route, or code artifact. The site teaches the same architecture it uses."
+            kicker="Problem"
+            title="Most stacks hide intent as complexity grows"
+            description="Teams lose confidence when state, routing, and delivery paths diverge. Askr keeps the operational model visible so product decisions stay auditable."
           >
             <LaunchRail steps={launchPath} />
           </SectionBand>
 
           <SectionBand
-            kicker="How it works"
-            title="Reactivity, routing, and theme tokens in one model"
-            description="Askr keeps the moving parts explicit: state updates stay local, routes can render three ways, and theme tokens carry the visual system."
+            kicker="Solution"
+            title="One coherent model across runtime and output"
+            description="Fine-grained reactivity, route orchestration, and theme primitives stay connected. You can trace what changed, why it changed, and where it ships."
           >
             <ArchitecturePass nodes={architecturePass} />
           </SectionBand>
 
           <section class="build-confidence">
             <div>
-              <span class="section-kicker">Build with proof</span>
+              <span class="section-kicker">Developer experience</span>
               <h2>{model.featureSection.title}</h2>
               <p>{model.featureSection.description}</p>
             </div>
@@ -248,12 +248,11 @@ export function HomePage() {
           ))}
 
           <section class="home-final">
-            <span class="section-kicker">Next move</span>
-            <h2>Start with one route, then keep the system honest.</h2>
+            <span class="section-kicker">Production readiness</span>
+            <h2>Ship with a system your team can defend.</h2>
             <p>
-              The fastest way to evaluate Askr is to install the stack, render a
-              first page, and inspect how little framework machinery sits
-              between state and output.
+              Validate the architecture quickly: install once, render a working
+              route, then inspect the exact path from state to final output.
             </p>
             <div class="home-confidence-grid">
               <SiteAnchor href={docsStartPath} className="home-confidence-link">

src/pages/themes-landing/index.tsx

@@ -5,6 +5,7 @@ import {
   PaletteIcon,
   SunIcon,
 } from '@askrjs/lucide';
+import { Button } from '@askrjs/themes/controls';
 
 import { SiteFrame } from '../../components/site-shell';
 import { SiteAnchor } from '../../components/site-link';
@@ -76,6 +77,16 @@ const themeCode = `:root {
   border: 1px solid var(--ak-color-border);
 }`;
 
+function setTheme(nextTheme: 'light' | 'dark') {
+  if (typeof document === 'undefined') return;
+
+  document.documentElement.setAttribute('data-theme', nextTheme);
+
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('theme', nextTheme);
+  }
+}
+
 export function ThemesLandingPage() {
   return (
     <SiteFrame>
@@ -104,14 +115,20 @@ export function ThemesLandingPage() {
             </div>
             <div class="theme-lab" aria-label="Theme token lab">
               <div class="theme-lab-modes">
-                <span>
+                <Button
+                  className="theme-lab-mode theme-lab-mode-light"
+                  onPress={() => setTheme('light')}
+                >
                   <SunIcon size={16} />
                   light
-                </span>
-                <span>
+                </Button>
+                <Button
+                  className="theme-lab-mode theme-lab-mode-dark"
+                  onPress={() => setTheme('dark')}
+                >
                   <MoonIcon size={16} />
                   dark
-                </span>
+                </Button>
               </div>
               <div class="theme-lab-card">
                 <strong>token layer</strong>

src/styles.css

@@ -1,7 +1,6 @@
-@import './styles/foundation.css';
-@import './styles/layout.css';
-@import './styles/marketing.css';
-@import './styles/catalog.css';
+@import './styles/core.css';
+@import './styles/shell.css';
+@import './styles/pages.css';
+@import './styles/components.css';
 @import './styles/docs.css';
 @import './styles/responsive.css';
-@import './styles/apple-polish.css';