fix: implement pure black/white brutalist design system

- Update to strict black/white color palette with no gray tones in primary elements
- Add 4px black borders for brutalist aesthetic
- Remove all border radius for sharp, angular design
- Increase font weights to black/extra-bold for maximum contrast
- Update Button component with thicker borders and inverted hover states
- Black stats section with white text for high contrast
- Brutalist shadow effects on cards (4px solid black shadows)
- Update navigation and footer with thicker borders
- Uppercase typography throughout for stronger visual impact

docs-site/src/components/Footer.tsx

@@ -2,7 +2,7 @@ import { LuxIcon } from './LuxLogo'
 
 export default function Footer() {
   return (
-    <footer className="border-t-2 border-black py-12 mt-24 bg-black text-white">
+    <footer className="border-t-4 border-black py-12 mt-24 bg-black text-white">
       <div className="container">
         <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
           <div className="flex items-center space-x-3">

docs-site/src/components/Navigation.tsx

@@ -8,9 +8,9 @@ export default function Navigation() {
   const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <nav className="border-b border-black sticky top-0 z-50 bg-white">
+    <nav className="border-b-4 border-black sticky top-0 z-50 bg-white">
       <div className="container">
-        <div className="flex h-16 items-center justify-between">
+        <div className="flex h-20 items-center justify-between">
           {/* Logo */}
           <LuxLogo 
             href="/" 

docs-site/src/components/ui/button.tsx

@@ -15,18 +15,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Comp
         className={cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-none text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 uppercase tracking-wide",
+          "inline-flex items-center justify-center whitespace-nowrap text-sm font-black transition-all focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 uppercase tracking-wider",
           {
-            "bg-black text-white hover:bg-gray-800": variant === "default",
-            "border border-black bg-white hover:bg-gray-100 text-black": variant === "outline",
-            "hover:bg-gray-100 hover:text-black": variant === "ghost",
+            "bg-black text-white hover:bg-white hover:text-black border-2 border-black": variant === "default",
+            "border-2 border-black bg-white hover:bg-black hover:text-white text-black": variant === "outline",
+            "hover:bg-black hover:text-white": variant === "ghost",
             "text-black underline-offset-4 hover:underline": variant === "link",
           },
           {
-            "h-10 px-4 py-2": size === "default",
-            "h-9 px-3": size === "sm",
-            "h-11 px-8": size === "lg",
-            "h-10 w-10": size === "icon",
+            "h-12 px-6 py-2": size === "default",
+            "h-10 px-4": size === "sm",
+            "h-14 px-10": size === "lg",
+            "h-12 w-12": size === "icon",
           },
           className
         )}

docs-site/src/pages/HomePage.tsx

@@ -98,7 +98,7 @@ export default function HomePage() {
       </section>
 
       {/* Stats Grid */}
-      <section className="py-16 border-y-2 border-black bg-white">
+      <section className="py-16 bg-black text-white">
         <div className="container">
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
             {stats.map((stat, index) => (
@@ -109,12 +109,12 @@ export default function HomePage() {
                 transition={{ duration: 0.5, delay: index * 0.1 }}
                 className="text-center"
               >
-                <stat.icon className="w-8 h-8 mx-auto mb-2 text-gray-400" />
-                <div className="text-2xl font-bold font-mono">{stat.value}</div>
+                <stat.icon className="w-8 h-8 mx-auto mb-2" />
+                <div className="text-2xl font-black font-mono uppercase">{stat.value}</div>
                 {stat.unit && (
-                  <div className="text-xs text-gray-500 font-mono">{stat.unit}</div>
+                  <div className="text-xs opacity-75 font-mono">{stat.unit}</div>
                 )}
-                <div className="text-sm text-gray-600 mt-1">
+                <div className="text-sm opacity-75 mt-1 uppercase tracking-wider">
                   {stat.label}
                 </div>
               </motion.div>
@@ -131,7 +131,7 @@ export default function HomePage() {
             animate={{ opacity: 1 }}
             transition={{ duration: 0.5 }}
           >
-            <h2 className="text-3xl lg:text-4xl font-bold font-mono mb-12">
+            <h2 className="text-3xl lg:text-4xl font-black uppercase mb-12">
               Choose Your Implementation
             </h2>
             
@@ -145,7 +145,7 @@ export default function HomePage() {
                 >
                   <Link
                     to={`/docs/${lang.path}`}
-                    className="card block hover:border-black transition-all group bg-white"
+                    className="block border-2 border-black bg-white p-6 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all group"
                   >
                     <div className="flex items-start justify-between mb-4">
                       <div className="text-3xl">{lang.icon}</div>

docs-site/src/styles/globals.css

@@ -1,22 +1,20 @@
-/* Import Lux UI styles */
-@import '@luxfi/ui/style/lux-colors.css';
-@import '@luxfi/ui/style/lux-fonts.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
+    /* Pure black and white */
     --background: 255 255 255;
     --foreground: 0 0 0;
-    --border: 229 229 229;
-    --muted: 245 245 245;
+    --border: 0 0 0;
+    --muted: 250 250 250;
     --accent: 0 0 0;
   }
 
   * {
-    @apply border-gray-200;
+    @apply border-black;
+    border-radius: 0 !important;
   }
 
   body {
@@ -24,49 +22,42 @@
     @apply font-sans antialiased;
   }
 
-  /* Monochrome scrollbar */
+  /* Black scrollbar */
   ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 12px;
+    height: 12px;
   }
 
   ::-webkit-scrollbar-track {
-    @apply bg-gray-100;
+    @apply bg-white border-l border-black;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-gray-400;
-    @apply rounded;
+    @apply bg-black;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500;
+    @apply bg-gray-800;
+  }
+
+  /* Typography */
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-bold uppercase tracking-wide;
   }
 
   /* Code blocks */
   pre, code {
-    @apply font-mono;
+    @apply font-mono bg-black text-white p-1;
   }
 
-  /* Animations */
-  @keyframes shimmer {
-    0% {
-      background-position: -1000px 0;
-    }
-    100% {
-      background-position: 1000px 0;
-    }
+  /* Links */
+  a {
+    @apply underline underline-offset-2 hover:no-underline;
   }
 
-  .shimmer {
-    animation: shimmer 2s infinite linear;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent
-    );
-    background-size: 1000px 100%;
+  /* Selection */
+  ::selection {
+    @apply bg-black text-white;
   }
 }
 
@@ -76,30 +67,39 @@
   }
 
   .btn {
-    @apply px-4 py-2 font-medium rounded-lg transition-all duration-200;
-    @apply border border-gray-300;
-    @apply hover:bg-gray-100;
-    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
-    @apply focus:ring-gray-900;
+    @apply px-6 py-3 font-bold uppercase tracking-wider transition-all duration-200;
+    @apply border-2 border-black;
+    @apply hover:bg-black hover:text-white;
+    @apply focus:outline-none focus:ring-4 focus:ring-black focus:ring-offset-2;
   }
 
   .btn-primary {
     @apply bg-black text-white;
-    @apply hover:bg-gray-800;
+    @apply hover:bg-white hover:text-black;
     @apply border-black;
   }
 
   .card {
     @apply bg-white;
-    @apply border border-gray-200;
-    @apply rounded-xl p-6;
-    @apply shadow-sm hover:shadow-md transition-shadow;
+    @apply border-2 border-black;
+    @apply p-6;
+    @apply hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all;
   }
 
   .code-block {
-    @apply bg-gray-50;
-    @apply border border-gray-200;
-    @apply rounded-lg p-4 overflow-x-auto;
+    @apply bg-black text-white;
+    @apply border-2 border-black;
+    @apply p-4 overflow-x-auto;
     @apply font-mono text-sm;
   }
+
+  /* Brutalist shadow effect */
+  .brutal-shadow {
+    box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
+  }
+
+  .brutal-shadow-hover:hover {
+    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
+    transform: translate(-2px, -2px);
+  }
 }

docs/index.html

@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <script type="module" crossorigin src="/assets/index-7IMxdwEF.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DUD540yy.css">
+    <script type="module" crossorigin src="/assets/index-C1an4SfQ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DS4gVFFD.css">
   </head>
   <body>
     <div id="root"></div>