Docs Update

.storybook/01-Introduction.mdx

@@ -8,53 +8,55 @@ import { Meta, Source } from '@storybook/blocks';
 */}
 
 <div align="center">
-  <h1>🍍 Pine UI</h1>
-  <p><strong>A modern React component library built with design tokens at its core</strong></p>
+  <h1>🍍 Pine Design System</h1>
+  <p><strong>A comprehensive design system with token-driven theming and accessible React components</strong></p>
 
   <p>
-    <a href="https://www.npmjs.com/package/pine-ui-kit"><img src="https://img.shields.io/npm/v/pine-ui-kit?style=flat-square" alt="npm version" /></a>
-    <a href="https://www.npmjs.com/package/pine-ui-kit"><img src="https://img.shields.io/npm/dm/pine-ui-kit?style=flat-square" alt="npm downloads" /></a>
-    <a href="https://github.com/3o14/pine-ui-kit/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/pine-ui-kit?style=flat-square" alt="license" /></a>
+    <a href="https://www.npmjs.com/package/pine-design-system"><img src="https://img.shields.io/npm/v/pine-design-system?style=flat-square" alt="npm version" /></a>
+    <a href="https://www.npmjs.com/package/pine-design-system"><img src="https://img.shields.io/npm/dm/pine-design-system?style=flat-square" alt="npm downloads" /></a>
+    <a href="https://github.com/3o14/pine-design-system/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/pine-design-system?style=flat-square" alt="license" /></a>
   </p>
 
   <p>
-    Pine UI is a <strong>token-driven component library</strong> for React applications.<br />
-    Built with TypeScript, accessibility, and developer experience in mind.
+    Pine Design System is a <strong>complete design system</strong> for React applications.<br />
+    Built with design tokens, TypeScript, accessibility, and exceptional developer experience in mind.
   </p>
 </div>
 
 ---
 
 ## Features
 
-- **Token-First Design** — Consistent theming through design tokens
-- **Light & Dark Mode** — Built-in theme variants out of the box
+- **Three Unique Design Variants** — Switch between basic, game, and crayon designs instantly
+- **Token-Driven Architecture** — Consistent theming through semantic design tokens
+- **Light & Dark Themes** — Built-in theme support for all design variants
 - **Tree-Shakeable** — Import only what you need
-- **TypeScript Native** — First-class TypeScript support
-- **Zero-Runtime CSS** — Powered by Vanilla Extract
+- **TypeScript Native** — First-class TypeScript support with full type safety
+- **Zero-Runtime CSS** — Powered by Vanilla Extract for optimal performance
+- **Accessible by Default** — Built on top of Base UI for WCAG compliance
 
 ## Quick Start
 
-Install Pine UI using your preferred package manager:
+Install Pine Design System using your preferred package manager:
 
 <Source
-  code={`npm install pine-ui-kit
+  code={`npm install pine-design-system
 # or
-pnpm add pine-ui-kit
+pnpm add pine-design-system
 # or
-yarn add pine-ui-kit`}
+yarn add pine-design-system`}
   language="bash"
 />
 
-Import components and start building:
+Wrap your app with `ThemeProvider` and start building:
 
 <Source
-  code={`import { Button, Badge, TextField, Switch } from "pine-ui-kit";
-import "pine-ui-kit/style.css";
+  code={`import { ThemeProvider, Button, Badge, TextField, Switch } from "pine-design-system";
+import "pine-design-system/style.css";
 
 function App() {
   return (
-    <div>
+    <ThemeProvider design="basic" defaultTheme="light">
       <Button intent="primary" size="md">
         Get Started
       </Button>
@@ -67,15 +69,81 @@ function App() {
         placeholder="you@example.com"
         variant="outline"
       />
-    </div>
+    </ThemeProvider>
+  );
+}`}
+  language="tsx"
+/>
+
+## Design System
+
+Pine Design System comes with **three distinct design variants** that can be switched seamlessly with a single prop change:
+
+### 🎯 Basic Design
+
+A clean, modern design perfect for professional applications. Features smooth animations, subtle shadows, and a refined aesthetic.
+
+<Source
+  code={`<ThemeProvider design="basic">
+  <YourApp />
+</ThemeProvider>`}
+  language="tsx"
+/>
+
+### 🎮 Game Design
+
+Pixel-art inspired design for gamified experiences. Features retro aesthetics, bold borders, and playful interactions that bring a nostalgic gaming feel to your interface.
+
+<Source
+  code={`<ThemeProvider design="game">
+  <YourApp />
+</ThemeProvider>`}
+  language="tsx"
+/>
+
+### 🖍️ Crayon Design
+
+Soft, warm, and friendly design with hand-drawn aesthetics. Features rounded corners, gentle shadows, and a cozy feel perfect for creative or educational applications.
+
+<Source
+  code={`<ThemeProvider design="crayon">
+  <YourApp />
+</ThemeProvider>`}
+  language="tsx"
+/>
+
+**All design variants support both light and dark themes:**
+
+<Source
+  code={`<ThemeProvider design="game" defaultTheme="dark">
+  <YourApp />
+</ThemeProvider>`}
+  language="tsx"
+/>
+
+Change the design dynamically at runtime:
+
+<Source
+  code={`function App() {
+  const [design, setDesign] = useState<"basic" | "game" | "crayon">("basic");
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  return (
+    <ThemeProvider design={design} onDesignChange={setDesign} theme={theme} onThemeChange={setTheme}>
+      <button onClick={() => setDesign("game")}>Switch to Game Design</button>
+      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+        Toggle Theme
+      </button>
+      <YourApp />
+    </ThemeProvider>
   );
 }`}
   language="tsx"
 />
 
 ## Documentation
 
-**Visit our [Storybook documentation](https://3o14.github.io/pine-ui-kit/) for:**
+**Visit our [Storybook documentation](https://3o14.github.io/pine-design-system/) for:**
 
 - **Getting Started Guide** — Installation and usage
 - **Component API** — Props, variants, and examples
@@ -85,8 +153,8 @@ function App() {
 To run Storybook locally:
 
 <Source
-  code={`git clone https://github.com/3o14/pine-ui-kit.git
-cd pine-ui-kit
+  code={`git clone https://github.com/3o14/pine-design-system.git
+cd pine-design-system
 pnpm install
 pnpm run storybook`}
   language="bash"
@@ -160,9 +228,9 @@ This project is licensed under the [MIT License](LICENSE) — feel free to use i
 
 <div align="center">
   <p>
-    <a href="https://3o14.github.io/pine-ui-kit/">Documentation</a> •
-    <a href="https://github.com/3o14/pine-ui-kit">GitHub</a> •
-    <a href="https://www.npmjs.com/package/pine-ui-kit">npm</a>
+    <a href="https://3o14.github.io/pine-design-system/">Documentation</a> •
+    <a href="https://github.com/3o14/pine-design-system">GitHub</a> •
+    <a href="https://www.npmjs.com/package/pine-design-system">npm</a>
   </p>
 </div>