diff --git a/app/about/page.tsx b/app/about/page.tsx
index de0fd59..72e081d 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -165,7 +165,7 @@ export default function AboutPage() {
           transition={{ duration: 0.5 }}
           className="mt-8 p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200 dark:border-neutral-800"
         >
-          <h3 className="text-lg font-bold mb-2 text-neutral-900 dark:text-white">What about Plausible?</h3>
+          <h3 className="text-xl font-bold mb-2 text-neutral-900 dark:text-white">What about Plausible?</h3>
           <p className="text-neutral-600 dark:text-neutral-400 text-sm">
             We love Plausible! They paved the way for privacy-friendly analytics. 
             Pulse offers a similar philosophy but with a focus on even deeper integration with the Ciphera ecosystem 
diff --git a/app/faq/page.tsx b/app/faq/page.tsx
index ea63f70..f7f574b 100644
--- a/app/faq/page.tsx
+++ b/app/faq/page.tsx
@@ -58,7 +58,7 @@ function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full py-6 flex items-center justify-between text-left hover:text-brand-orange transition-colors"
+        className="w-full py-6 flex items-center justify-between text-left hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
       >
         <h3 className="text-lg font-semibold text-neutral-900 dark:text-white pr-4">
           {faq.question}
@@ -104,7 +104,7 @@ export default function FAQPage() {
           className="text-center mb-16"
         >
           <span className="badge-primary mb-4 inline-flex">FAQ</span>
-          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-4">
+          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-4">
             Frequently asked questions
           </h1>
           <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
index 12ec2c4..270e73a 100644
--- a/app/integrations/nextjs/page.tsx
+++ b/app/integrations/nextjs/page.tsx
@@ -31,7 +31,7 @@ export default function NextJsIntegrationPage() {
               <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
             </svg>
           </div>
-          <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
             Next.js Integration
           </h1>
         </div>
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index 81116d2..dabb37e 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -88,7 +88,7 @@ export default function IntegrationsPage() {
             >
               <Link 
                 href={`/integrations/${integration.id}`}
-                className="group relative p-8 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block"
+                className="group relative p-8 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
               >
               <div className="flex items-start justify-between mb-6">
                 <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
@@ -118,7 +118,7 @@ export default function IntegrationsPage() {
             transition={{ duration: 0.5, delay: integrations.length * 0.1 }}
             className="p-8 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
           >
-            <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">
+            <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
               Missing something?
             </h3>
             <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
@@ -126,7 +126,7 @@ export default function IntegrationsPage() {
             </p>
             <a 
               href="mailto:support@ciphera.net" 
-              className="text-sm font-medium text-brand-orange hover:underline"
+              className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
             >
               Request Integration
             </a>
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
index 18a848a..d8d07cb 100644
--- a/app/integrations/react/page.tsx
+++ b/app/integrations/react/page.tsx
@@ -32,7 +32,7 @@ export default function ReactIntegrationPage() {
               <circle cx="64" cy="64" r="10.6" />
             </svg>
           </div>
-          <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
             React Integration
           </h1>
         </div>
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
index 40adb04..f5bd66e 100644
--- a/app/integrations/vue/page.tsx
+++ b/app/integrations/vue/page.tsx
@@ -32,7 +32,7 @@ export default function VueIntegrationPage() {
               <path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
             </svg>
           </div>
-          <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
             Vue.js Integration
           </h1>
         </div>
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
index a1db8ef..873a2cf 100644
--- a/app/integrations/wordpress/page.tsx
+++ b/app/integrations/wordpress/page.tsx
@@ -31,7 +31,7 @@ export default function WordPressIntegrationPage() {
               <path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
             </svg>
           </div>
-          <h1 className="text-3xl md:text-4xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
             WordPress Integration
           </h1>
         </div>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index f65220d..bb4a731 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -19,7 +19,7 @@ export default function NotFound() {
         <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500 dark:from-white dark:to-neutral-500 mb-4">
           404
         </h1>
-        <h2 className="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-6">
+        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
           Page not found
         </h2>
         <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 1be720f..934c8ff 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -44,13 +44,13 @@ export default function OnboardingPage() {
   if (loading) return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Creating Organization..." />
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-neutral-900 px-4">
+    <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-900 px-4">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">
+          <h2 className="mt-6 text-2xl font-bold text-neutral-900 dark:text-white">
             Welcome to Pulse
           </h2>
-          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+          <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
             To get started, please create an organization for your team.
           </p>
         </div>
@@ -80,7 +80,7 @@ export default function OnboardingPage() {
                 value={slug}
                 onChange={(e) => setSlug(e.target.value)}
               />
-              <p className="text-xs text-gray-500 mt-1">
+              <p className="text-xs text-neutral-500 mt-1">
                 This will be used in your organization's URL.
               </p>
             </div>
diff --git a/app/page.tsx b/app/page.tsx
index fbbc409..a620a5e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -48,7 +48,7 @@ function ComparisonSection() {
   return (
     <div className="w-full max-w-4xl mx-auto mb-32">
       <div className="text-center mb-12">
-        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">Why choose Pulse?</h2>
+        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">Why choose Pulse?</h2>
         <p className="text-neutral-500">The lightweight, privacy-friendly alternative.</p>
       </div>
 
@@ -270,7 +270,7 @@ export default function HomePage() {
             transition={{ duration: 0.5 }}
             className="text-center mb-20"
           >
-            <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
+            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
             <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
               Start your free trial
             </Button>
@@ -355,11 +355,11 @@ export default function HomePage() {
               )}
               <div className="mt-2 flex gap-2">
                 {subscription.has_payment_method ? (
-                  <Link href="/org-settings?tab=billing" className="text-sm font-medium text-brand-orange hover:underline">
+                  <Link href="/org-settings?tab=billing" className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded">
                     Manage billing
                   </Link>
                 ) : (
-                  <Link href="/pricing" className="text-sm font-medium text-brand-orange hover:underline">
+                  <Link href="/pricing" className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded">
                     Upgrade
                   </Link>
                 )}
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 1ff9d3b..56359e8 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -270,7 +270,7 @@ export default function PublicDashboardPage() {
                         <div className="w-2 h-2 rounded-full bg-brand-orange animate-pulse" />
                         <span className="text-sm font-medium text-brand-orange uppercase tracking-wider">Public Dashboard</span>
                     </div>
-                    <h1 className="text-3xl font-bold text-neutral-900 dark:text-white flex items-center gap-3">
+                    <h1 className="text-2xl font-bold text-neutral-900 dark:text-white flex items-center gap-3">
                     <img 
                         src={`https://www.google.com/s2/favicons?domain=${site.domain}&sz=64`}
                         alt={site.name}
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 775e650..8f78661 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -104,7 +104,7 @@ export default function FunnelsPage() {
                 <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 hover:border-brand-orange/50 transition-colors">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-lg font-medium text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
+                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
                         {funnel.name}
                       </h3>
                       {funnel.description && (
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 0cc200c..65361be 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -236,7 +236,7 @@ export default function SiteDashboardPage() {
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-4">
             <div>
-              <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
+              <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
                 {site.name}
               </h1>
               <p className="text-neutral-600 dark:text-neutral-400">
diff --git a/app/sites/[id]/realtime/page.tsx b/app/sites/[id]/realtime/page.tsx
index 40e9351..f3be638 100644
--- a/app/sites/[id]/realtime/page.tsx
+++ b/app/sites/[id]/realtime/page.tsx
@@ -98,7 +98,7 @@ export default function RealtimePage() {
       <div className="mb-6 flex items-center justify-between">
         <div>
             <div className="flex items-center gap-2 mb-1">
-                <button onClick={() => router.push(`/sites/${siteId}`)} className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors">
+                <button onClick={() => router.push(`/sites/${siteId}`)} className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded">
                     &larr; Back to Dashboard
                 </button>
             </div>
@@ -108,18 +108,18 @@ export default function RealtimePage() {
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                 <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
             </span>
-            <span className="text-lg font-normal text-neutral-500">
+            <span className="text-lg font-normal text-neutral-500" aria-live="polite" aria-atomic="true">
                 {visitors.length} active now
             </span>
             </h1>
         </div>
       </div>
 
-      <div className="flex flex-1 gap-6 min-h-0">
+      <div className="flex flex-col md:flex-row flex-1 gap-6 min-h-0">
         {/* Visitors List */}
-        <div className="w-1/3 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden flex flex-col bg-white dark:bg-neutral-900">
+        <div className="w-full md:w-1/3 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden flex flex-col bg-white dark:bg-neutral-900">
           <div className="p-4 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50">
-            <h2 className="font-semibold text-neutral-900 dark:text-white">Active Sessions</h2>
+            <h2 className="text-xl font-semibold text-neutral-900 dark:text-white">Active Sessions</h2>
           </div>
           <div className="overflow-y-auto flex-1">
             {visitors.length === 0 ? (
@@ -145,7 +145,7 @@ export default function RealtimePage() {
                       exit={{ opacity: 0, x: -10 }}
                       transition={{ duration: 0.2 }}
                       onClick={() => handleSelectVisitor(visitor)}
-                      className={`w-full text-left p-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors ${
+                      className={`w-full text-left p-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset ${
                         selectedVisitor?.session_id === visitor.session_id ? 'bg-neutral-50 dark:bg-neutral-800/50 ring-1 ring-inset ring-neutral-200 dark:ring-neutral-700' : ''
                       }`}
                     >
@@ -181,7 +181,7 @@ export default function RealtimePage() {
         {/* Session Details */}
         <div className="flex-1 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden flex flex-col bg-white dark:bg-neutral-900">
             <div className="p-4 border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50 flex justify-between items-center">
-                <h2 className="font-semibold text-neutral-900 dark:text-white">
+                <h2 className="text-xl font-semibold text-neutral-900 dark:text-white">
                     {selectedVisitor ? 'Session Journey' : 'Select a visitor'}
                 </h2>
                 {selectedVisitor && (
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index f1fe4d7..8ea491f 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -306,7 +306,7 @@ export default function SiteSettingsPage() {
     <div className="min-h-screen pt-12 pb-12 px-4 sm:px-6">
       <div className="max-w-4xl mx-auto space-y-8">
         <div>
-          <h1 className="text-3xl font-bold text-neutral-900 dark:text-white">Site Settings</h1>
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Site Settings</h1>
           <p className="mt-2 text-neutral-600 dark:text-neutral-400">
             Manage settings for <span className="font-medium text-neutral-900 dark:text-white">{site.domain}</span>
           </p>
@@ -314,10 +314,12 @@ export default function SiteSettingsPage() {
 
         <div className="flex flex-col md:flex-row gap-8">
         {/* Sidebar Navigation */}
-        <nav className="w-full md:w-64 flex-shrink-0 space-y-1">
+        <nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Site settings sections">
           <button
             onClick={() => setActiveTab('general')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'general'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'general'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -328,7 +330,9 @@ export default function SiteSettingsPage() {
           </button>
           <button
             onClick={() => setActiveTab('visibility')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'visibility'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'visibility'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -339,7 +343,9 @@ export default function SiteSettingsPage() {
           </button>
           <button
             onClick={() => setActiveTab('data')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'data'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'data'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -350,7 +356,9 @@ export default function SiteSettingsPage() {
           </button>
           <button
             onClick={() => setActiveTab('goals')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'goals'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'goals'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -381,7 +389,7 @@ export default function SiteSettingsPage() {
               <div className="space-y-12">
                 <form onSubmit={handleSubmit} className="space-y-6">
                   <div>
-                    <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">General Configuration</h2>
+                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">General Configuration</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Update your site details and tracking script.</p>
                   </div>
 
@@ -433,7 +441,7 @@ export default function SiteSettingsPage() {
                   </div>
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Tracking Script</h3>
+                    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">Tracking Script</h3>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
                       Add this script to your website to start tracking visitors.
                     </p>
@@ -455,7 +463,7 @@ export default function SiteSettingsPage() {
                       <button
                         type="button"
                         onClick={() => setShowVerificationModal(true)}
-                        className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium"
+                        className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
                       >
                         <ZapIcon className="w-4 h-4" />
                         Verify Installation
@@ -490,9 +498,9 @@ export default function SiteSettingsPage() {
                   {canEdit && (
                   <div className="space-y-6">
                     <div>
-                      <h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
+                      <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for your site.</p>
-                  </div>
+                    </div>
 
                   <div className="space-y-4">
                     <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
@@ -502,7 +510,7 @@ export default function SiteSettingsPage() {
                       </div>
                       <button
                         onClick={handleResetData}
-                        className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-sm font-medium"
+                        className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                       >
                         Reset Data
                       </button>
@@ -515,7 +523,7 @@ export default function SiteSettingsPage() {
                       </div>
                       <button
                         onClick={handleDeleteSite}
-                        className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
+                        className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                       >
                         Delete Site
                       </button>
@@ -530,7 +538,7 @@ export default function SiteSettingsPage() {
               <div className="space-y-12">
                 <form onSubmit={handleSubmit} className="space-y-6">
                   <div>
-                    <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Visibility Settings</h2>
+                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Visibility Settings</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Manage who can view your dashboard.</p>
                   </div>
 
@@ -555,7 +563,7 @@ export default function SiteSettingsPage() {
                           onChange={(e) => setFormData({ ...formData, is_public: e.target.checked })}
                           className="sr-only peer"
                         />
-                        <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                        <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                       </label>
                     </div>
 
@@ -581,7 +589,7 @@ export default function SiteSettingsPage() {
                               <button
                                 type="button"
                                 onClick={copyLink}
-                                className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-900 dark:text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
+                                className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-900 dark:text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
                               >
                                 {linkCopied ? 'Copied!' : 'Copy Link'}
                               </button>
@@ -607,7 +615,7 @@ export default function SiteSettingsPage() {
                                   }}
                                   className="sr-only peer"
                                 />
-                                <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                                <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                               </label>
                             </div>
 
@@ -664,7 +672,7 @@ export default function SiteSettingsPage() {
               <div className="space-y-12">
                 <form onSubmit={handleSubmit} className="space-y-6">
                   <div>
-                    <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Data & Privacy</h2>
+                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Data & Privacy</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
                   </div>
 
@@ -688,7 +696,7 @@ export default function SiteSettingsPage() {
                             onChange={(e) => setFormData({ ...formData, collect_page_paths: e.target.checked })}
                             className="sr-only peer"
                           />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                         </label>
                       </div>
                     </div>
@@ -709,7 +717,7 @@ export default function SiteSettingsPage() {
                             onChange={(e) => setFormData({ ...formData, collect_referrers: e.target.checked })}
                             className="sr-only peer"
                           />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                         </label>
                       </div>
                     </div>
@@ -730,7 +738,7 @@ export default function SiteSettingsPage() {
                             onChange={(e) => setFormData({ ...formData, collect_device_info: e.target.checked })}
                             className="sr-only peer"
                           />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                         </label>
                       </div>
                     </div>
@@ -775,7 +783,7 @@ export default function SiteSettingsPage() {
                             onChange={(e) => setFormData({ ...formData, collect_screen_resolution: e.target.checked })}
                             className="sr-only peer"
                           />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                         </label>
                       </div>
                     </div>
@@ -799,7 +807,7 @@ export default function SiteSettingsPage() {
                             onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
                             className="sr-only peer"
                           />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                         </label>
                       </div>
                     </div>
@@ -823,7 +831,7 @@ export default function SiteSettingsPage() {
                             onChange={(e) => setFormData({ ...formData, enable_performance_insights: e.target.checked })}
                             className="sr-only peer"
                           />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
+                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
                         </label>
                       </div>
                     </div>
@@ -921,7 +929,7 @@ export default function SiteSettingsPage() {
             {activeTab === 'goals' && (
               <div className="space-y-6">
                 <div>
-                  <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Goals & Events</h2>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Goals & Events</h2>
                   <p className="text-sm text-neutral-500 dark:text-neutral-400">
                     Define goals to label custom events (e.g. signup, purchase). Track with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs">pulse.track(&apos;event_name&apos;)</code> in your snippet.
                   </p>
diff --git a/app/sites/new/page.tsx b/app/sites/new/page.tsx
index 8cb7715..0350d07 100644
--- a/app/sites/new/page.tsx
+++ b/app/sites/new/page.tsx
@@ -55,7 +55,7 @@ export default function NewSitePage() {
 
   return (
     <div className="container mx-auto px-4 py-8 max-w-2xl">
-      <h1 className="text-3xl font-bold mb-8 text-neutral-900 dark:text-white">
+      <h1 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">
         Create New Site
       </h1>
 
diff --git a/app/tools/page.tsx b/app/tools/page.tsx
index 5904741..e33bf6d 100644
--- a/app/tools/page.tsx
+++ b/app/tools/page.tsx
@@ -7,7 +7,7 @@ export default function ToolsPage() {
     <div className="max-w-2xl mx-auto py-10 px-4">
       <h1 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">Tools</h1>
       <div className="bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800">
-        <h2 className="text-lg font-semibold mb-4 text-neutral-900 dark:text-white">UTM Campaign Builder</h2>
+        <h2 className="text-2xl font-bold mb-4 text-neutral-900 dark:text-white">UTM Campaign Builder</h2>
         <UtmBuilder />
       </div>
     </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 3fc5060..9c28614 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -51,13 +51,13 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
               © 2024-{year} Ciphera. All rights reserved.
             </div>
             <div className="flex gap-6 text-sm font-medium text-neutral-600 dark:text-neutral-300">
-              <Component href="/about" className="hover:text-brand-orange transition-colors">
+              <Component href="/about" className="hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded">
                 Why {appName}
               </Component>
-              <Component href="/pricing" className="hover:text-brand-orange transition-colors">
+              <Component href="/pricing" className="hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded">
                 Pricing
               </Component>
-              <Component href="/faq" className="hover:text-brand-orange transition-colors">
+              <Component href="/faq" className="hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded">
                 FAQ
               </Component>
             </div>
@@ -102,7 +102,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
                 href="https://github.com/ciphera-net"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+                className="w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange"
                 aria-label="GitHub"
               >
                 <GithubIcon className="w-5 h-5" />
@@ -111,7 +111,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
                 href="https://x.com/cipheranet"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+                className="w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange"
                 aria-label="X (Twitter)"
               >
                 <TwitterIcon className="w-5 h-5" />
@@ -130,14 +130,14 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
                       href={link.href}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                     >
                       {link.name}
                     </a>
                   ) : (
                     <Component
                       href={link.href}
-                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                     >
                       {link.name}
                     </Component>
@@ -158,14 +158,14 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
                       href={link.href}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                     >
                       {link.name}
                     </a>
                   ) : (
                     <Component
                       href={link.href}
-                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                     >
                       {link.name}
                     </Component>
@@ -186,14 +186,14 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
                       href={link.href}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                     >
                       {link.name}
                     </a>
                   ) : (
                     <Component
                       href={link.href}
-                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                      className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                     >
                       {link.name}
                     </Component>
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index f1001f1..04d8b1f 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -219,7 +219,7 @@ export default function PricingSection() {
         transition={{ duration: 0.5 }}
         className="text-center mb-12"
       >
-        <h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6 tracking-tight">
+        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
           Transparent Pricing
         </h2>
         <p className="text-xl text-neutral-600 dark:text-neutral-400">
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index c19277d..7f6852b 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -96,18 +96,20 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
               >
                 View All
               </button>
             )}
           </div>
-          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
+          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Content view tabs">
             {(['top_pages', 'entry_pages', 'exit_pages'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
-                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors ${
+                role="tab"
+                aria-selected={activeTab === tab}
+                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
                   activeTab === tab
                     ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
                     : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 98519f1..56df267 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -196,18 +196,20 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
               >
                 View All
               </button>
             )}
           </div>
-          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
+          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Location view tabs">
             {(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
-                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize ${
+                role="tab"
+                aria-selected={activeTab === tab}
+                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
                   activeTab === tab
                     ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
                     : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 493c9e0..c0f78ba 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -119,18 +119,20 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+                className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
               >
                 View All
               </button>
             )}
           </div>
-          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
+          <div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg" role="tablist" aria-label="Technology view tabs">
             {(['browsers', 'os', 'devices', 'screens'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
-                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize ${
+                role="tab"
+                aria-selected={activeTab === tab}
+                className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors capitalize focus:outline-none focus:ring-2 focus:ring-brand-orange ${
                   activeTab === tab
                     ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
                     : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 20a3631..9d43b1c 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -63,7 +63,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
           {showViewAll && (
             <button
               onClick={() => setIsModalOpen(true)}
-              className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors"
+              className="text-xs font-medium text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
             >
               View All
             </button>
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index 3a6eea7..03b8ac4 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/components/settings/OrganizationSettings.tsx
@@ -353,7 +353,7 @@ export default function OrganizationSettings() {
   return (
     <div className="max-w-4xl mx-auto space-y-8">
       <div>
-        <h1 className="text-3xl font-bold text-neutral-900 dark:text-white">Organization Settings</h1>
+        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Organization Settings</h1>
         <p className="mt-2 text-neutral-600 dark:text-neutral-400">
           Manage your organization workspace and members.
         </p>
@@ -361,10 +361,12 @@ export default function OrganizationSettings() {
 
       <div className="flex flex-col md:flex-row gap-8">
         {/* Sidebar Navigation */}
-        <nav className="w-full md:w-64 flex-shrink-0 space-y-1">
+        <nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Organization settings sections">
           <button
             onClick={() => handleTabChange('general')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'general'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'general'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -375,7 +377,9 @@ export default function OrganizationSettings() {
           </button>
           <button
             onClick={() => handleTabChange('members')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'members'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'members'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -386,7 +390,9 @@ export default function OrganizationSettings() {
           </button>
           <button
             onClick={() => handleTabChange('billing')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'billing'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'billing'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -397,7 +403,9 @@ export default function OrganizationSettings() {
           </button>
           <button
             onClick={() => handleTabChange('audit')}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
+            role="tab"
+            aria-selected={activeTab === 'audit'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 ${
               activeTab === 'audit'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
@@ -420,9 +428,9 @@ export default function OrganizationSettings() {
             {activeTab === 'general' && (
               <div className="space-y-12">
                  <div>
-                    <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">General Information</h2>
+                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">General Information</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Basic details about your organization.</p>
-                 </div>
+                  </div>
 
                  <form onSubmit={handleUpdateOrg} className="space-y-4">
                     <div className="space-y-1.5">
@@ -497,7 +505,7 @@ export default function OrganizationSettings() {
 
                  <div className="space-y-6">
                   <div>
-                    <h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
+                    <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for this organization.</p>
                   </div>
 
@@ -521,7 +529,7 @@ export default function OrganizationSettings() {
               <div className="space-y-12">
                 {/* Invite Section */}
                 <div>
-                  <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Organization Members</h2>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Organization Members</h2>
                   <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">Manage who has access to this organization.</p>
                   
                   <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
@@ -647,7 +655,7 @@ export default function OrganizationSettings() {
             {activeTab === 'billing' && (
               <div className="space-y-12">
                 <div>
-                  <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Billing & Subscription</h2>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Billing & Subscription</h2>
                   <p className="text-sm text-neutral-500 dark:text-neutral-400">Manage your subscription plan and payment methods.</p>
                 </div>
 
@@ -832,7 +840,7 @@ export default function OrganizationSettings() {
             {activeTab === 'audit' && (
               <div className="space-y-12">
                 <div>
-                  <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Audit log</h2>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Audit log</h2>
                   <p className="text-sm text-neutral-500 dark:text-neutral-400">Who did what and when for this organization.</p>
                 </div>
 
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index 13e1268..37bf960 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -27,7 +27,7 @@ export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
   if (sites.length === 0) {
     return (
       <div className="rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 p-12 text-center">
-        <h3 className="text-lg font-medium text-neutral-900 dark:text-white">No sites yet</h3>
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">No sites yet</h3>
         <p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400">Create your first site to get started.</p>
       </div>
     )
@@ -105,7 +105,7 @@ export default function SiteList({ sites, loading, onDelete }: SiteListProps) {
               <button
                 type="button"
                 onClick={() => onDelete(site.id)}
-                className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                 title="Delete Site"
               >
                 <SettingsIcon className="h-4 w-4" />
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
new file mode 100644
index 0000000..5074e20
--- /dev/null
+++ b/docs/DESIGN_SYSTEM.md
@@ -0,0 +1,1042 @@
+# Pulse Design System
+
+**Version:** 1.0  
+**Last Updated:** 2026-02-06  
+**Maintained by:** Ciphera Design Team
+
+---
+
+## Overview
+
+This document defines the visual language and design patterns for Pulse Analytics. All components and pages should follow these standards to ensure consistency, accessibility, and brand alignment.
+
+---
+
+## 🎨 Colors
+
+### Brand Colors
+
+```css
+/* Primary Brand Color */
+--brand-orange: #FD5E0F;
+--brand-orange-hover: #E54E00; /* Darker for hover states */
+
+/* Usage */
+- Primary CTAs, links, focus rings
+- Accent elements, badges
+- Never use for large backgrounds (too vibrant)
+```
+
+### Neutral Scale
+
+Using Tailwind's neutral palette (50-950):
+
+| Token | Light Mode | Dark Mode | Usage |
+|-------|------------|-----------|--------|
+| `neutral-50` | #FAFAFA | - | Subtle backgrounds |
+| `neutral-100` | #F5F5F5 | - | Card backgrounds, disabled states |
+| `neutral-200` | #E5E5E5 | - | Borders, dividers |
+| `neutral-300` | #D4D4D4 | - | Borders (hover) |
+| `neutral-400` | #A3A3A3 | #A3A3A3 | Secondary text (dark mode) |
+| `neutral-500` | #737373 | - | Tertiary text, placeholders |
+| `neutral-600` | #525252 | - | Body text (light mode) |
+| `neutral-700` | #404040 | - | - |
+| `neutral-800` | #262626 | #262626 | Borders, backgrounds (dark mode) |
+| `neutral-900` | #171717 | #171717 | Headings, primary text |
+| `neutral-950` | #0A0A0A | - | - |
+
+### Semantic Colors
+
+```css
+--color-success: #10B981; /* Green for success states */
+--color-warning: #F59E0B; /* Amber for warnings */
+--color-error: #EF4444;   /* Red for errors, destructive actions */
+```
+
+### Color Usage Rules
+
+**Text Colors:**
+- **Headings:** `text-neutral-900 dark:text-white`
+- **Body text:** `text-neutral-600 dark:text-neutral-400`
+- **Secondary text:** `text-neutral-500 dark:text-neutral-400`
+- **Tertiary/disabled:** `text-neutral-400 dark:text-neutral-500`
+- **Links:** `text-brand-orange hover:text-brand-orange-hover`
+
+**Backgrounds:**
+- **Page:** `bg-white dark:bg-neutral-900`
+- **Cards:** `bg-white dark:bg-neutral-900`
+- **Subtle sections:** `bg-neutral-50 dark:bg-neutral-800/50`
+- **Overlays:** `bg-white/80 dark:bg-neutral-900/80` (with backdrop-blur)
+
+**Borders:**
+- **Standard:** `border-neutral-200 dark:border-neutral-800`
+- **Subtle:** `border-neutral-200/50 dark:border-neutral-800/50`
+- **Focus rings:** `ring-brand-orange`
+- **Danger actions:** `border-red-200 dark:border-red-900`
+
+---
+
+## 📝 Typography
+
+### Font Family
+
+```tsx
+font-family: 'Plus Jakarta Sans', system-ui, sans-serif
+```
+
+Loaded via Next.js `next/font/google` in root layout.
+
+### Heading Scale
+
+| Element | Size (Mobile → Desktop) | Weight | Usage |
+|---------|-------------------------|--------|-------|
+| **H1 (Marketing)** | `text-4xl → text-5xl` | `font-bold` | Landing pages, about, FAQ, installation |
+| **H1 (Hero)** | `text-5xl → text-7xl` | `font-bold` | Home page hero only |
+| **H1 (App)** | `text-2xl` | `font-bold` | Dashboard, settings, app pages |
+| **H2 (Section)** | `text-2xl` | `font-bold` | Major page sections |
+| **H2 (Panel)** | `text-xl` | `font-semibold` | Panel headers (realtime, modals) |
+| **H3 (Section)** | `text-lg` | `font-semibold` | Dashboard widgets, subsections |
+| **H3 (Card)** | `text-xl` | `font-bold` | Feature cards, integration cards |
+| **H4 (Label)** | `text-base` | `font-semibold` | Footer sections, small headers |
+
+### Body Text
+
+| Size | Class | Usage |
+|------|-------|-------|
+| **Large** | `text-xl` | Hero descriptions, intro paragraphs |
+| **Base** | `text-base` (default) | Body text, card descriptions |
+| **Small** | `text-sm` | Help text, labels, metadata |
+| **Micro** | `text-xs` | Badges, timestamps, fine print |
+
+### Font Weights
+
+- `font-bold` (700): H1, H2, card titles, stat values
+- `font-semibold` (600): H2 panels, H3 sections, buttons
+- `font-medium` (500): Links, labels, secondary headings
+- `font-normal` (400): Body text
+
+### Line Height
+
+- **Headings:** Default tight (`leading-tight` or none)
+- **Body:** `leading-relaxed` for readability
+
+### Text Color Patterns
+
+```tsx
+// Headings
+className="text-neutral-900 dark:text-white"
+
+// Body text (most readable)
+className="text-neutral-600 dark:text-neutral-400"
+
+// Secondary/helper text
+className="text-neutral-500 dark:text-neutral-400"
+
+// Disabled/placeholder
+className="text-neutral-400 dark:text-neutral-500"
+```
+
+---
+
+## 📏 Spacing System
+
+### Padding Scale
+
+| Value | Size | Usage |
+|-------|------|-------|
+| `p-3` | 12px | Icon containers, compact badges |
+| `p-4` | 16px | Card headers, small cards, stat displays |
+| `p-6` | 24px | Standard cards, forms, modals |
+| `p-8` | 32px | Feature cards, spacious sections |
+| `p-10` | 40px | Page containers |
+| `p-12` | 48px | Empty states, hero sections |
+
+### Vertical Spacing (Sections)
+
+| Value | Size | Usage |
+|-------|------|-------|
+| `py-8` | 32px | App page containers |
+| `py-10` | 40px | Standard pages |
+| `py-16` | 64px | Content sections |
+| `py-20` | 80px | Marketing hero sections |
+
+### Gaps (Flexbox/Grid)
+
+| Value | Size | Usage |
+|-------|------|-------|
+| `gap-2` | 8px | Icon+text pairs, inline elements |
+| `gap-3` | 12px | Button groups, small layouts |
+| `gap-4` | 16px | Form fields, button bars |
+| `gap-6` | 24px | Card grids, main layouts |
+| `gap-8` | 32px | Large section spacing |
+
+### Margins
+
+| Value | Usage |
+|-------|-------|
+| `mb-2` to `mb-4` | Between related elements |
+| `mb-6` to `mb-8` | Between sections |
+| `mb-16` to `mb-32` | Major page divisions |
+
+---
+
+## 🔲 Border Radius
+
+| Element | Radius | Class | Example |
+|---------|--------|-------|---------|
+| **Cards** | 16px | `rounded-2xl` | Dashboard cards, feature cards |
+| **Buttons** | 12px | `rounded-xl` | Primary, secondary buttons |
+| **Inputs** | 8px | `rounded-lg` | Text inputs, selects, textareas |
+| **Tabs** | 8px | `rounded-lg` | Tab buttons |
+| **Badges** | Full | `rounded-full` | Status badges, tags |
+| **Small UI** | 8px | `rounded-lg` | Small buttons, icons |
+
+**Rule:** Larger elements = larger radius. Cards are most prominent, so `rounded-2xl`.
+
+---
+
+## 🎭 Shadows
+
+### Shadow Scale
+
+```tsx
+// Subtle (cards at rest)
+shadow-sm
+
+// Medium (hover states)
+shadow-md, shadow-lg
+
+// Prominent (elevated elements, popovers)
+shadow-xl, shadow-2xl
+
+// Glow effects (CTAs)
+shadow-lg shadow-brand-orange/20
+```
+
+### Usage Examples
+
+```tsx
+// Card at rest
+className="rounded-2xl border border-neutral-200 dark:border-neutral-800 shadow-sm"
+
+// Card hover
+className="hover:shadow-xl hover:-translate-y-1 transition-all"
+
+// Primary CTA
+className="shadow-lg shadow-brand-orange/20"
+```
+
+---
+
+## 🎯 Focus States
+
+### Standard Focus Pattern
+
+For most interactive elements:
+```tsx
+focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2
+```
+
+### Compact Pattern (Links, Small Elements)
+
+```tsx
+focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded
+```
+
+### Danger Actions (Delete, Reset)
+
+```tsx
+focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2
+```
+
+### Inset Focus (Selected Elements)
+
+```tsx
+focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset
+```
+
+**Rule:** ALL interactive elements must have a visible focus state for keyboard accessibility (WCAG 2.1 Level AA).
+
+---
+
+## 🧩 Custom CSS Classes
+
+**Location:** `styles/globals.css`
+
+### `.card-glass`
+
+Glass card effect with backdrop blur (premium feel):
+```css
+.card-glass {
+  @apply bg-white/80 dark:bg-neutral-900/80;
+  @apply backdrop-blur-xl;
+  @apply border border-neutral-200/50 dark:border-neutral-800/50;
+  @apply rounded-2xl;
+  @apply transition-all duration-300 ease-out;
+}
+```
+
+**Usage:** Feature cards on home page, pricing cards
+
+---
+
+### `.gradient-text`
+
+Orange gradient for emphasized text:
+```css
+.gradient-text {
+  @apply bg-gradient-to-r from-brand-orange to-[#E54E00] bg-clip-text text-transparent;
+}
+```
+
+**Usage:** Hero headlines ("privacy-conscious" on home page)
+
+---
+
+### `.badge-primary`
+
+Primary badge style (orange theme):
+```css
+.badge-primary {
+  @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider;
+  @apply bg-brand-orange/10 text-brand-orange border border-brand-orange/20;
+}
+```
+
+**Usage:** "Privacy-First Analytics" badge, "FAQ" badge, page indicators
+
+---
+
+### `.bg-grid-pattern`
+
+Subtle dot grid background:
+```css
+.bg-grid-pattern {
+  background-image: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
+  background-size: 32px 32px;
+}
+```
+
+**Usage:** Marketing page backgrounds (with radial mask for fade effect)
+
+---
+
+## 🧱 Component Patterns
+
+### Button Variants
+
+**Primary (Brand Action):**
+```tsx
+<Button variant="primary">Get Started</Button>
+// Orange background, white text, shadow on hover
+```
+
+**Secondary (Neutral Action):**
+```tsx
+<Button variant="secondary">Cancel</Button>
+// White background, border, neutral text
+```
+
+**Danger (Destructive Action):**
+```tsx
+<Button variant="danger">Delete</Button>
+// Red background, white text (for critical actions)
+```
+
+---
+
+### Empty States
+
+**Pattern:**
+```tsx
+<div className="flex flex-col items-center justify-center text-center gap-3 p-8">
+  <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-3">
+    <IconComponent className="w-6 h-6 text-neutral-500 dark:text-neutral-400" />
+  </div>
+  <p className="text-sm font-medium text-neutral-900 dark:text-white">
+    No data yet
+  </p>
+  <p className="text-xs text-neutral-500 dark:text-neutral-400">
+    Data will appear here once visitors arrive
+  </p>
+</div>
+```
+
+**Usage:** Dashboard widgets with no data, empty site lists, etc.
+
+---
+
+### Loading States
+
+**Full Page Loading:**
+```tsx
+<LoadingOverlay 
+  logoSrc="/pulse_icon_no_margins.png"
+  title="Pulse"
+/>
+```
+
+**Inline Loading:**
+```tsx
+<Button isLoading={true}>
+  Saving...
+</Button>
+```
+
+**Skeleton Loading:**
+```tsx
+<div className="animate-pulse rounded-2xl bg-neutral-100 dark:bg-neutral-800 h-48" />
+```
+
+---
+
+### Success/Error States
+
+**Success Toast:**
+```tsx
+toast.success('Site created successfully')
+// Green toast with checkmark
+```
+
+**Error Toast:**
+```tsx
+toast.error('Failed to load data')
+// Red toast with X icon
+```
+
+**Error Display:**
+```tsx
+<div className="text-red-500 text-sm text-center">
+  {error}
+</div>
+```
+
+---
+
+## 🎬 Animations
+
+### Framer Motion Patterns
+
+#### Page Entrance
+```tsx
+<motion.div
+  initial={{ opacity: 0, y: 20 }}
+  animate={{ opacity: 1, y: 0 }}
+  transition={{ duration: 0.5 }}
+>
+  {content}
+</motion.div>
+```
+
+#### Stagger Animation
+```tsx
+{items.map((item, i) => (
+  <motion.div
+    key={i}
+    initial={{ opacity: 0, y: 20 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true }}
+    transition={{ duration: 0.5, delay: i * 0.1 }}
+  >
+    {item}
+  </motion.div>
+))}
+```
+
+#### Hover Scale
+```tsx
+<motion.div
+  whileHover={{ scale: 1.05 }}
+  transition={{ duration: 0.2 }}
+>
+  {content}
+</motion.div>
+```
+
+#### List Item Entry/Exit
+```tsx
+<AnimatePresence mode="popLayout">
+  {items.map(item => (
+    <motion.div
+      key={item.id}
+      initial={{ opacity: 0, x: -10 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: -10 }}
+      transition={{ duration: 0.2 }}
+    >
+      {item}
+    </motion.div>
+  ))}
+</AnimatePresence>
+```
+
+---
+
+### CSS Transitions
+
+**Duration Standards:**
+- **Fast (200ms):** Input focus, button clicks, immediate feedback
+- **Medium (300ms):** Hover effects, color changes, icon transforms
+- **Slow (500ms):** Page entrances, large movements
+
+**Easing:**
+- Default: `ease-out` (feels snappy)
+- Alternative: `ease-in-out` (smooth both ways)
+
+```tsx
+// Standard hover
+className="transition-colors duration-200 hover:text-brand-orange"
+
+// Card hover
+className="transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+```
+
+---
+
+## 📱 Responsive Breakpoints
+
+Using Tailwind defaults:
+
+| Breakpoint | Size | Usage |
+|------------|------|-------|
+| `sm:` | 640px | Small tablets, large phones |
+| `md:` | 768px | Tablets, small laptops |
+| `lg:` | 1024px | Laptops, desktops |
+| `xl:` | 1280px | Large desktops |
+
+### Common Patterns
+
+**Grid Layouts:**
+```tsx
+// 1 col mobile, 2 col tablet, 3 col desktop
+className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+```
+
+**Typography:**
+```tsx
+// Smaller on mobile, larger on desktop
+className="text-4xl md:text-5xl"
+```
+
+**Padding:**
+```tsx
+// Less padding on mobile
+className="px-4 sm:px-6"
+```
+
+---
+
+## 🔘 Buttons
+
+### Variant Usage
+
+**Primary (Orange):**
+- Main CTAs ("Get Started", "Create Site", "Save Changes")
+- Positive actions
+- One per screen section max
+
+**Secondary (Neutral):**
+- Cancel, Back, alternative actions
+- Can have multiple per section
+
+**Ghost (Minimal):**
+- Tertiary actions, "View All" links
+- Inline actions that shouldn't be prominent
+
+**Danger (Red):**
+- Delete, Reset Data, irreversible actions
+- Always confirm before action
+
+### Size Variants
+
+```tsx
+// Default
+<Button>Save</Button>
+
+// Large (CTAs)
+<Button className="px-8 py-4 text-lg">Get Started</Button>
+
+// Small (compact UI)
+<Button className="text-sm px-4 py-2">Add</Button>
+```
+
+---
+
+## 📦 Cards
+
+### Standard Card
+
+```tsx
+<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+  {content}
+</div>
+```
+
+### Glass Card (Premium Feel)
+
+```tsx
+<div className="card-glass p-8 hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+  {content}
+</div>
+```
+
+**When to use Glass:** Marketing pages, feature showcases, hero sections
+
+### Hover Effects
+
+```tsx
+// Subtle lift
+className="hover:-translate-y-1 hover:shadow-md transition-all"
+
+// Scale
+className="hover:scale-105 transition-transform"
+```
+
+---
+
+## 🏷️ Badges
+
+### Primary Badge
+```tsx
+<span className="badge-primary">
+  <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
+  Privacy-First Analytics
+</span>
+```
+
+### Status Badges
+
+**Active/Live:**
+```tsx
+<div className="flex items-center gap-2 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/20 dark:text-green-400">
+  <span className="relative flex h-2 w-2">
+    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+    <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+  </span>
+  Active
+</div>
+```
+
+---
+
+## 🎨 Special Effects
+
+### Background Glow (Atmosphere)
+
+```tsx
+<div className="absolute inset-0 -z-10 pointer-events-none">
+  <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
+  <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 rounded-full blur-[128px] opacity-40" />
+</div>
+```
+
+### Grid Pattern Background
+
+```tsx
+<div 
+  className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+  style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
+/>
+```
+
+### SVG Underline (Accent)
+
+```tsx
+<svg className="absolute -bottom-2 left-0 w-full h-3 text-brand-orange/30" viewBox="0 0 200 12" preserveAspectRatio="none">
+  <path d="M0 9C50 3 150 3 200 9" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
+</svg>
+```
+
+---
+
+## ♿ Accessibility
+
+### Focus Indicators
+
+**ALL interactive elements** must have visible focus states. See "Focus States" section above.
+
+### Semantic HTML
+
+- Use proper heading hierarchy (H1 → H2 → H3, no skipping)
+- Use `<button>` for actions, `<Link>` for navigation
+- Use `<nav>` for navigation sections
+- Use `<main>` for primary content
+
+### Alt Text
+
+- All images must have descriptive `alt` attributes
+- Decorative images use `alt=""` or `aria-hidden="true"`
+
+### Keyboard Navigation
+
+- Tab order should follow visual order
+- All actions accessible via keyboard
+- No keyboard traps
+- Focus visible at all times
+
+### ARIA Attributes
+
+**Current usage (limited but correct):**
+- `aria-label` on icon-only buttons (social links)
+- `aria-hidden="true"` on decorative elements (arrows, ornaments)
+
+**Could enhance:**
+- `role="tablist"` on tab navigation
+- `aria-live="polite"` on realtime counters
+- `role="dialog"` on modals
+
+---
+
+## 🌓 Dark Mode
+
+### Implementation
+
+Using Tailwind's `dark:` prefix with class-based switching.
+
+### Color Adjustments
+
+**Backgrounds:**
+- Light: `bg-white`, `bg-neutral-50`
+- Dark: `dark:bg-neutral-900`, `dark:bg-neutral-800`
+
+**Text:**
+- Light: `text-neutral-900`, `text-neutral-600`
+- Dark: `dark:text-white`, `dark:text-neutral-400`
+
+**Borders:**
+- Light: `border-neutral-200`
+- Dark: `dark:border-neutral-800`
+
+### Testing
+
+Always test both light and dark modes:
+- Color contrast (4.5:1 minimum in both modes)
+- Focus ring visibility (should stand out in both modes)
+- Glass effects (should work in both modes)
+
+---
+
+## 📊 Dashboard Widgets
+
+### Standard Widget Layout
+
+```tsx
+<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+  {/* Header */}
+  <div className="flex items-center justify-between mb-4">
+    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+      Widget Title
+    </h3>
+    <button className="text-xs font-medium text-neutral-500 hover:text-neutral-900 transition-colors focus:...">
+      View All
+    </button>
+  </div>
+  
+  {/* Content */}
+  <div className="flex-1 min-h-[200px]">
+    {hasData ? (
+      <DataDisplay />
+    ) : (
+      <EmptyState />
+    )}
+  </div>
+</div>
+```
+
+### Tab Toggles (Inside Widgets)
+
+```tsx
+<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
+  {tabs.map(tab => (
+    <button
+      key={tab}
+      onClick={() => setActiveTab(tab)}
+      className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+        activeTab === tab
+          ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
+      }`}
+    >
+      {tab}
+    </button>
+  ))}
+</div>
+```
+
+---
+
+## 📋 Forms
+
+### Input Styling
+
+```tsx
+<Input
+  id="field-name"
+  placeholder="Enter value"
+  className="rounded-lg"
+/>
+// Uses @ciphera-net/ui Input component
+// Automatically includes focus states, dark mode
+```
+
+### Label Pattern
+
+```tsx
+<label htmlFor="field-name" className="block text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">
+  Field Name
+</label>
+```
+
+### Help Text
+
+```tsx
+<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+  Additional information about this field.
+</p>
+```
+
+### Error Display
+
+```tsx
+{error && (
+  <div className="text-red-500 text-sm text-center">
+    {error}
+  </div>
+)}
+```
+
+---
+
+## 🎭 Code Blocks (Integration Pages)
+
+### VS Code-Style Syntax Highlighting
+
+```tsx
+<div className="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-neutral-800">
+  {/* Header bar */}
+  <div className="flex items-center px-4 py-3 bg-[#252526] border-b border-neutral-800">
+    <div className="flex gap-2">
+      <div className="w-3 h-3 rounded-full bg-red-500/20" />
+      <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
+      <div className="w-3 h-3 rounded-full bg-green-500/20" />
+    </div>
+    <span className="ml-4 text-xs text-neutral-500 font-mono">filename.tsx</span>
+  </div>
+  
+  {/* Code content */}
+  <div className="p-6 overflow-x-auto">
+    <code className="font-mono text-sm text-neutral-300">
+      {/* Syntax-highlighted code */}
+    </code>
+  </div>
+</div>
+```
+
+**Colors for syntax:**
+- Blue `#61AFEF`: Keywords, tags
+- Orange `#D19A66`: Strings
+- Purple `#C678DD`: Functions
+- Green `#98C379`: Comments
+- White `#ABB2BF`: Text
+
+---
+
+## 🌍 Internationalization (Future)
+
+**Currently:** English only  
+**When implementing i18n:**
+- Use `next-intl` or similar
+- Extract all strings to translation files
+- Maintain "Swiss infrastructure" messaging
+- Support: EN, DE, FR, IT (Swiss languages)
+
+---
+
+## 📐 Layout Patterns
+
+### Page Container
+
+```tsx
+// App pages
+<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+  {content}
+</div>
+
+// Marketing pages
+<div className="w-full max-w-4xl mx-auto px-4 pt-20 pb-10">
+  {content}
+</div>
+```
+
+### Two-Column Settings Layout
+
+```tsx
+<div className="flex flex-col md:flex-row gap-8">
+  {/* Sidebar */}
+  <nav className="w-full md:w-64 flex-shrink-0">
+    {tabs}
+  </nav>
+  
+  {/* Content */}
+  <div className="flex-1">
+    {content}
+  </div>
+</div>
+```
+
+---
+
+## 🔌 Integration with @ciphera-net/ui
+
+### Current Usage
+
+```tsx
+import { 
+  Button,
+  Input,
+  Select,
+  Modal,
+  LoadingOverlay,
+  DatePicker,
+  Captcha,
+  // Icons
+  CheckCircleIcon,
+  SettingsIcon,
+  // etc.
+} from '@ciphera-net/ui'
+```
+
+**Version:** `^0.0.45`
+
+### Preset
+
+Pulse uses the Ciphera UI Tailwind preset:
+```ts
+// tailwind.config.ts
+presets: [
+  require('@ciphera-net/ui/dist/tailwind-preset').default,
+]
+```
+
+**Provides:**
+- Brand colors (brand-orange)
+- Background gradients (bg-ciphera-gradient)
+- Neutral scale extension
+
+---
+
+## 🎯 Design Principles
+
+### 1. Privacy-First Visual Language
+- Clean, minimal design
+- No tracking pixels, no external fonts from CDNs
+- Swiss aesthetic (precision, trust, neutrality)
+
+### 2. Accessibility First
+- WCAG 2.1 Level AA compliance
+- Keyboard navigation throughout
+- Clear focus indicators
+- Readable text contrast
+
+### 3. Performance
+- Lightweight animations (opacity, translate only)
+- Optimized images
+- Code splitting by route
+- Fast transitions (200-500ms max)
+
+### 4. Brand Consistency
+- Orange used sparingly (accents only)
+- Neutral-heavy palette
+- Glass effects for premium feel
+- Consistent with other Ciphera products
+
+---
+
+## 🛠️ Component Library
+
+### Available from @ciphera-net/ui
+
+**Buttons:** Primary, Secondary, Danger variants  
+**Forms:** Input, Select, Checkbox, DatePicker  
+**Feedback:** Toast (Sonner), LoadingOverlay  
+**Security:** Captcha component  
+**Icons:** Full icon set from Lucide  
+**Layout:** Modal component  
+
+### Custom to Pulse
+
+**Dashboard:** Chart, TopPages, TopReferrers, Locations, TechSpecs, Campaigns, Goals, Performance  
+**Settings:** OrganizationSettings, ProfileSettings  
+**Sites:** SiteList, VerificationModal  
+**Tools:** UtmBuilder  
+
+---
+
+## 📏 Checklist for New Components
+
+When creating new components, ensure:
+
+- [ ] Uses standard color tokens (no hardcoded hex values)
+- [ ] Follows typography scale (no custom text sizes)
+- [ ] Has dark mode support (`dark:` variants)
+- [ ] Includes focus states on interactive elements
+- [ ] Uses spacing system (no arbitrary padding values)
+- [ ] Follows border radius standards
+- [ ] Has empty state if displays lists
+- [ ] Has loading state if async
+- [ ] Has error state if can fail
+- [ ] Responsive on mobile (<768px)
+- [ ] Accessible (semantic HTML, ARIA where needed)
+- [ ] Consistent with existing components
+
+---
+
+## 🔍 Testing Checklist
+
+Before deploying changes:
+
+### Visual
+- [ ] Light mode looks correct
+- [ ] Dark mode looks correct
+- [ ] Focus rings visible on all interactive elements
+- [ ] Typography hierarchy is clear
+- [ ] Spacing feels consistent
+
+### Responsive
+- [ ] Works on mobile (375px)
+- [ ] Works on tablet (768px)
+- [ ] Works on desktop (1280px+)
+
+### Accessibility
+- [ ] Can navigate with keyboard only
+- [ ] Focus visible at all times
+- [ ] Screen reader friendly (test with VoiceOver/NVDA)
+- [ ] Color contrast passes WCAG AA
+
+### Cross-Browser
+- [ ] Chrome/Edge (Chromium)
+- [ ] Firefox
+- [ ] Safari (macOS/iOS)
+
+---
+
+## 📚 References
+
+- **Tailwind CSS:** https://tailwindcss.com/docs
+- **Framer Motion:** https://www.framer.com/motion/
+- **WCAG Guidelines:** https://www.w3.org/WAI/WCAG21/quickref/
+- **Ciphera Brand:** (internal brand guidelines)
+
+---
+
+## 🔄 Changelog
+
+### v1.0 (2026-02-06)
+- Initial design system documentation
+- Documented Tier 1 + Tier 2 standardization results
+- Defined all component patterns
+- Established accessibility standards
+
+---
+
+**This is a living document.** Update as the design system evolves.