feat: implement design system with consistent layout tokens

- Created design-tokens.ts with standardized width, typography, spacing, padding, and grid constants
- Reduced max-w-7xl to max-w-6xl across homepage and major landing pages (Index, Labs, Realms, Foundation)
- Reduced oversized hero text-7xl to text-6xl for better readability
- Applied consistent design standards to dev platform pages (Templates, Marketplace, CodeExamples, DevLanding)
- Improved visual consistency and content readability site-wide

client/lib/design-tokens.ts

@@ -0,0 +1,101 @@
+/**
+ * AeThex Design System Tokens
+ * Centralized design constants for consistent layout, typography, and spacing
+ */
+
+export const DESIGN_TOKENS = {
+  /**
+   * Content Width Constraints
+   * Use appropriate container based on content type
+   */
+  width: {
+    // Text-heavy content (docs, articles, reading material)
+    prose: "max-w-5xl",
+    // Standard content sections (most pages)
+    content: "max-w-6xl",
+    // Wide layouts (dashboards, data tables, complex grids)
+    wide: "max-w-7xl",
+  },
+
+  /**
+   * Typography Scale
+   * Consistent heading and text sizes across the application
+   */
+  typography: {
+    // Page hero headings (H1)
+    hero: "text-4xl md:text-5xl lg:text-6xl",
+    // Major section headings (H2)
+    sectionHeading: "text-3xl md:text-4xl",
+    // Subsection headings (H3)
+    subsectionHeading: "text-2xl md:text-3xl",
+    // Card/component titles (H4)
+    cardTitle: "text-xl md:text-2xl",
+    // Stats and large numbers
+    statNumber: "text-3xl md:text-4xl",
+    // Body text (large)
+    bodyLarge: "text-lg md:text-xl",
+    // Body text (standard)
+    body: "text-base",
+    // Body text (small)
+    bodySmall: "text-sm",
+  },
+
+  /**
+   * Spacing Scale
+   * Vertical spacing between sections and elements
+   */
+  spacing: {
+    // Tight spacing within components
+    tight: "space-y-4",
+    // Standard spacing between related elements
+    standard: "space-y-6",
+    // Spacing between sections
+    section: "space-y-12",
+    // Major page sections
+    page: "space-y-20",
+  },
+
+  /**
+   * Padding Scale
+   * Internal padding for cards and containers
+   */
+  padding: {
+    // Compact elements
+    compact: "p-4",
+    // Standard cards and containers
+    standard: "p-6",
+    // Feature cards with more emphasis
+    feature: "p-8",
+    // Hero sections and CTAs
+    hero: "p-12",
+    // Responsive vertical padding for page sections
+    sectionY: "py-16 lg:py-24",
+  },
+
+  /**
+   * Grid Layouts
+   * Standard grid configurations for responsive layouts
+   */
+  grid: {
+    // Two-column layout
+    cols2: "grid-cols-1 md:grid-cols-2",
+    // Three-column layout
+    cols3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    // Four-column layout
+    cols4: "grid-cols-2 md:grid-cols-4",
+    // Standard gap between grid items
+    gapStandard: "gap-6",
+    // Larger gap for emphasized spacing
+    gapLarge: "gap-8",
+  },
+} as const;
+
+/**
+ * Helper function to combine design tokens
+ * Usage: cn(DESIGN_TOKENS.width.content, "mx-auto", "px-4")
+ */
+export const getContentContainer = (
+  width: keyof typeof DESIGN_TOKENS.width = "content"
+) => {
+  return `${DESIGN_TOKENS.width[width]} mx-auto px-4`;
+};

client/pages/Foundation.tsx

@@ -72,7 +72,7 @@ export default function Foundation() {
       <div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black">
         {/* Persistent Info Banner */}
         <div className="bg-red-500/10 border-b border-red-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
-          <div className="container mx-auto max-w-7xl px-4">
+          <div className="container mx-auto max-w-6xl px-4">
             <div className="flex items-center justify-between gap-4 flex-wrap">
               <div className="flex items-center gap-3">
                 <ExternalLink className="h-5 w-5 text-red-400" />
@@ -95,7 +95,7 @@ export default function Foundation() {
           </div>
         </div>
 
-        <div className="container mx-auto px-4 max-w-7xl space-y-20 py-16 lg:py-24">
+        <div className="container mx-auto px-4 max-w-6xl space-y-20 py-16 lg:py-24">
           {/* Hero Section */}
           <div className="text-center space-y-8 animate-slide-down">
             <div className="flex justify-center mb-6">

client/pages/Index.tsx

@@ -392,7 +392,7 @@ export default function Index() {
             </p>
           </motion.div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
             {ecosystemPillars.map((pillar, index) => (
               <motion.div
                 key={pillar.title}
@@ -545,7 +545,7 @@ export default function Index() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.6, delay: 0.3 }}
-                className="text-5xl md:text-7xl font-black leading-tight"
+                className="text-4xl md:text-5xl lg:text-6xl font-black leading-tight"
               >
                 Ready to Build Something
                 <br />

client/pages/Labs.tsx

@@ -128,7 +128,7 @@ export default function Labs() {
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
         {/* Persistent Info Banner */}
         <div className="bg-yellow-500/10 border-b border-yellow-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
-          <div className="container mx-auto max-w-7xl px-4">
+          <div className="container mx-auto max-w-6xl px-4">
             <div className="flex items-center justify-between gap-4 flex-wrap">
               <div className="flex items-center gap-3">
                 <ExternalLink className="h-5 w-5 text-yellow-400" />
@@ -161,7 +161,7 @@ export default function Labs() {
         <main className="relative z-10">
           {/* Hero Section */}
           <section className="relative overflow-hidden py-20 lg:py-32">
-            <div className="container mx-auto max-w-7xl px-4">
+            <div className="container mx-auto max-w-6xl px-4">
               <div className="text-center space-y-8">
                 <div className="flex justify-center mb-6">
                   <img

client/pages/Realms.tsx

@@ -75,7 +75,7 @@ export default function Realms() {
         />
       </div>
 
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-7xl relative">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-6xl relative">
         {/* Hero Section */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -87,7 +87,7 @@ export default function Realms() {
             <Sparkles className="w-4 h-4 mr-2 inline animate-pulse" />
             Six Specialized Realms
           </Badge>
-          <h1 className="text-5xl md:text-7xl font-black tracking-tight">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight">
             Choose Your{" "}
             <span className="text-primary drop-shadow-[0_0_25px_rgba(168,85,247,0.8)]">Realm</span>
           </h1>

client/pages/dev-platform/CodeExamples.tsx

@@ -167,7 +167,7 @@ export default function CodeExamples() {
   return (
     <Layout>
       <SEO pageTitle="Code Examples Repository" description="Production-ready code examples for common use cases and integrations" />
-      <div className="max-w-7xl mx-auto space-y-8">
+      <div className="max-w-6xl mx-auto space-y-8">
         {/* Hero Section */}
         <div className="grid md:grid-cols-3 gap-4">
           <Card className="p-6">

client/pages/dev-platform/DevLanding.tsx

@@ -62,7 +62,7 @@ await game.deploy(['roblox', 'fortnite', 'web']);`;
       {/* Hero Section */}
       <section className="container py-20 md:py-32">
         <div className="mx-auto max-w-5xl text-center">
-          <h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
+          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
             Build Once.{" "}
             <span className="text-primary">Deploy Everywhere.</span>
           </h1>

client/pages/dev-platform/Marketplace.tsx

@@ -177,7 +177,7 @@ export default function Marketplace() {
   return (
     <Layout>
       <SEO pageTitle="Developer Marketplace" description="Premium integrations, plugins, and tools to supercharge your projects" />
-      <div className="max-w-7xl mx-auto space-y-8">
+      <div className="max-w-6xl mx-auto space-y-8">
         {/* Hero Section */}
         <div className="grid md:grid-cols-3 gap-4">
           <Card className="p-6 border-primary/20 bg-primary/5">

client/pages/dev-platform/Templates.tsx

@@ -167,7 +167,7 @@ export default function Templates() {
   return (
     <Layout>
       <SEO pageTitle="Templates Gallery" description="Pre-built templates and starter kits to accelerate your development" />
-      <div className="max-w-7xl mx-auto space-y-8">
+      <div className="max-w-6xl mx-auto space-y-8">
         {/* Search & Filters */}
         <div className="flex flex-col md:flex-row gap-4">
           <div className="flex-1 relative">