demo2

app/lib/design-tokens.ts

@@ -0,0 +1,67 @@
+/**
+ * Design Tokens
+ * Centralized design system constants for consistent UI/UX
+ */
+
+export const designTokens = {
+  // Breakpoints (in pixels)
+  breakpoints: {
+    xs: 320,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+    '3xl': 1920,
+  },
+
+  // Sidebar dimensions
+  sidebar: {
+    collapsed: 64,
+    expanded: 256,
+    mobile: 320,
+  },
+
+  // Z-index scale
+  zIndex: {
+    base: 0,
+    dropdown: 10,
+    sticky: 20,
+    overlay: 40,      // Overlay below sidebar
+    sidebar: 50,      // Sidebar above overlay
+    header: 60,       // Header above sidebar
+    modal: 70,        // Modal above everything
+    toast: 80,        // Toast at the top
+  },
+
+  // Animation durations (in milliseconds)
+  animation: {
+    fast: 150,
+    normal: 300,
+    slow: 500,
+  },
+
+  // Spacing scale (in pixels)
+  spacing: {
+    mobile: 16,
+    tablet: 24,
+    desktop: 32,
+    wide: 40,
+  },
+
+  // Touch target minimum size
+  touchTarget: {
+    min: 44,
+  },
+
+  // Container max widths
+  container: {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+  },
+} as const;
+
+export type DesignTokens = typeof designTokens;