@offlinemediainc/offline-ui 0.1.4 → 0.2.1

package/dist/design-system.json

@@ -0,0 +1,1488 @@
+{
+  "$schema": "https://offlinemediainc.github.io/offline-ui/design-system.schema.json",
+  "meta": {
+    "name": "@offlinemediainc/offline-ui",
+    "version": "0.2.1",
+    "generatedAt": "2026-01-22T13:58:24.489Z",
+    "description": "Offline Media Design System - LLM-friendly design decisions and patterns"
+  },
+  "quickReference": {
+    "colors": {
+      "primary": "#191919 (gray-900) - buttons, text, UI elements",
+      "accent": "#de8e0f (yellow-400) - ACCENT ONLY, never buttons",
+      "link": "#004fff (blue-400) - clickable text only",
+      "success": "#099250 (chart-3) - positive feedback",
+      "error": "#d31a0c (chart-5) - errors, destructive"
+    },
+    "fonts": {
+      "display": "Cabinet Grotesk - hero headlines only",
+      "body": "Satoshi - everything else",
+      "mono": "DM Mono - stats and numbers"
+    },
+    "shadows": {
+      "card": "shadow-card - default for containers",
+      "floating": "shadow-tag - floating badges",
+      "modal": "shadow-elevated - dialogs, popovers"
+    },
+    "components": {
+      "formModal": "Dialog",
+      "destructiveConfirm": "AlertDialog",
+      "sidePanel": "Sheet side=right",
+      "listItem": "Item",
+      "toast": "toast.success / toast.error"
+    }
+  },
+  "semantics": {
+    "colors": {
+      "brand": {
+        "primary": "yellow-400",
+        "interactive": "blue-400"
+      },
+      "text": {
+        "primary": "gray-900",
+        "secondary": "gray-600",
+        "muted": "gray-500",
+        "onDark": "white",
+        "link": "blue-400",
+        "positive": "semantic-success500",
+        "negative": "red-400"
+      },
+      "surface": {
+        "default": "white",
+        "muted": "gray-50",
+        "elevated": "white + shadow-elevated"
+      },
+      "border": {
+        "default": "gray-200",
+        "strong": "gray-300",
+        "interactive": "yellow-400",
+        "focus": "gray-900"
+      },
+      "feedback": {
+        "positive": "chart-3",
+        "negative": "chart-5",
+        "warning": "yellow-400",
+        "neutral": "chart-4"
+      }
+    },
+    "colorHexValues": {
+      "yellow-25": "#fff2d8",
+      "yellow-50": "#ffe9bd",
+      "yellow-100": "#ffd386",
+      "yellow-200": "#ffbd54",
+      "yellow-300": "#f0a52c",
+      "yellow-400": "#de8e0f",
+      "yellow-500": "#c57900",
+      "yellow-600": "#a76700",
+      "yellow-700": "#835100",
+      "yellow-800": "#5c3900",
+      "yellow-900": "#331f00",
+      "blue-25": "#d8e7ff",
+      "blue-50": "#bed6ff",
+      "blue-100": "#85afff",
+      "blue-200": "#508bff",
+      "blue-300": "#236aff",
+      "blue-400": "#004fff",
+      "blue-500": "#0046e0",
+      "blue-600": "#003bbb",
+      "blue-700": "#002e91",
+      "blue-800": "#001f63",
+      "blue-900": "#001033",
+      "gray-25": "#f2f2f2",
+      "gray-50": "#ececec",
+      "gray-100": "#dfdfdf",
+      "gray-200": "#c6c6c6",
+      "gray-300": "#aeaeae",
+      "gray-400": "#959595",
+      "gray-500": "#7c7c7c",
+      "gray-600": "#636363",
+      "gray-700": "#4a4a4a",
+      "gray-800": "#323232",
+      "gray-900": "#191919",
+      "red-400": "#d31a0c",
+      "semantic-success500": "#099250",
+      "chart-1": "#de8e0f",
+      "chart-2": "#004fff",
+      "chart-3": "#099250",
+      "chart-4": "#636363",
+      "chart-5": "#d31a0c",
+      "chart-6": "#a76700",
+      "chart-7": "#003bbb",
+      "chart-8": "#959595"
+    },
+    "typography": {
+      "pageTitle": "display-small",
+      "sectionHeading": "headline-medium",
+      "cardTitle": "headline-small",
+      "statValueLarge": "display-medium",
+      "statValueSmall": "display-small",
+      "statLabel": "body-small",
+      "bodyDefault": "body-medium",
+      "bodySecondary": "body-small",
+      "formLabel": "label-medium",
+      "formHelper": "body-small text-muted",
+      "formError": "body-small text-negative",
+      "buttonText": "label-medium",
+      "navItem": "body-medium",
+      "badgeText": "label-small",
+      "tableHeader": "label-medium",
+      "tableCell": "body-medium",
+      "timestamp": "body-small text-muted",
+      "emptyStateTitle": "headline-small",
+      "emptyStateDescription": "body-medium text-muted",
+      "dialogTitle": "headline-medium",
+      "dialogDescription": "body-medium text-muted",
+      "sidebarLabel": "nav-label",
+      "sidebarItem": "body-medium",
+      "breadcrumbItem": "body-small",
+      "breadcrumbCurrent": "body-small text-muted"
+    },
+    "fontFamilies": {
+      "display": "var(--font-cabinet-grotesk), var(--font-satoshi), sans-serif",
+      "body": "var(--font-satoshi), sans-serif",
+      "mono": "var(--font-dm-mono), 'DM Mono', monospace"
+    },
+    "typographyScale": {
+      "display-large": {
+        "size": "36px",
+        "lineHeight": "100%",
+        "weight": 800,
+        "font": "Cabinet Grotesk"
+      },
+      "display-medium": {
+        "size": "32px",
+        "lineHeight": "100%",
+        "weight": 800,
+        "font": "Cabinet Grotesk"
+      },
+      "display-small": {
+        "size": "29px",
+        "lineHeight": "100%",
+        "weight": 800,
+        "font": "Cabinet Grotesk"
+      },
+      "headline-large": {
+        "size": "26px",
+        "lineHeight": "32px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "headline-medium": {
+        "size": "23px",
+        "lineHeight": "28px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "headline-small": {
+        "size": "20px",
+        "lineHeight": "24px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "title-large": {
+        "size": "18px",
+        "lineHeight": "22px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "title-medium": {
+        "size": "16px",
+        "lineHeight": "20px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "title-small": {
+        "size": "14px",
+        "lineHeight": "18px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "body-large": {
+        "size": "16px",
+        "lineHeight": "24px",
+        "weight": 500,
+        "font": "Satoshi"
+      },
+      "body-medium": {
+        "size": "14px",
+        "lineHeight": "20px",
+        "weight": 500,
+        "font": "Satoshi"
+      },
+      "body-small": {
+        "size": "12px",
+        "lineHeight": "16px",
+        "weight": 500,
+        "font": "Satoshi"
+      },
+      "body-x-small": {
+        "size": "10px",
+        "lineHeight": "14px",
+        "weight": 500,
+        "font": "Satoshi"
+      },
+      "label-large": {
+        "size": "14px",
+        "lineHeight": "18px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "label-medium": {
+        "size": "12px",
+        "lineHeight": "16px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "label-small": {
+        "size": "10px",
+        "lineHeight": "14px",
+        "weight": 700,
+        "font": "Satoshi"
+      },
+      "stat-mono": {
+        "weight": 500,
+        "letterSpacing": "0.04em",
+        "font": "DM Mono"
+      }
+    }
+  },
+  "components": {
+    "decisions": {
+      "lists": {
+        "clickableRow": "Item",
+        "dataTable": "Table",
+        "cardGrid": "Card in grid",
+        "simpleList": "ul with body-medium",
+        "descriptionList": "dl with label-medium dt and body-medium dd"
+      },
+      "feedback": {
+        "actionSuccess": "toast.success",
+        "actionError": "toast.error",
+        "inlineWarning": "Alert variant=warning",
+        "inlineError": "Alert variant=destructive",
+        "fieldError": "body-small text-negative below input",
+        "inlineInfo": "Alert variant=default"
+      },
+      "modals": {
+        "formEntry": "Dialog",
+        "confirmDestructive": "AlertDialog",
+        "sidePanel": "Sheet side=right",
+        "mobileNav": "Sheet side=left",
+        "mobileActions": "Sheet side=bottom h-auto max-h-[80vh]",
+        "preview": "Dialog or Sheet"
+      },
+      "navigation": {
+        "primaryNav": "Sidebar",
+        "pageTabs": "Tabs",
+        "breadcrumbs": "Breadcrumb",
+        "sectionHeader": "Breadcrumb + headline",
+        "dropdownNav": "DropdownMenu"
+      },
+      "selection": {
+        "singleFromFew": "radio group",
+        "singleFromMany": "Select",
+        "multiple": "Checkbox group",
+        "toggle": "single Checkbox",
+        "segmented": "Tabs variant=pill"
+      },
+      "data": {
+        "status": "Badge",
+        "progress": "Progress",
+        "avatar": "Avatar",
+        "chart": "Chart (recharts)",
+        "skeleton": "Skeleton"
+      },
+      "forms": {
+        "textInput": "Input",
+        "textArea": "Textarea",
+        "typedInput": "Input type=email|password|number",
+        "otpInput": "InputOTP",
+        "label": "Label htmlFor={id}",
+        "checkbox": "Checkbox + Label"
+      },
+      "layout": {
+        "card": "Card",
+        "accordion": "Accordion",
+        "collapsible": "Collapsible",
+        "separator": "Separator",
+        "tooltip": "Tooltip"
+      }
+    },
+    "registry": {
+      "Card": {
+        "name": "Card",
+        "status": "approved",
+        "description": "Container for grouped content with optional header/footer",
+        "imports": [
+          "Card",
+          "CardHeader",
+          "CardTitle",
+          "CardDescription",
+          "CardContent",
+          "CardFooter"
+        ],
+        "composition": [
+          "CardHeader",
+          "CardTitle",
+          "CardDescription",
+          "CardContent",
+          "CardFooter"
+        ]
+      },
+      "Item": {
+        "name": "Item",
+        "status": "approved",
+        "description": "Flexible list item with media, content, and actions slots",
+        "imports": [
+          "Item",
+          "ItemMedia",
+          "ItemContent",
+          "ItemTitle",
+          "ItemDescription",
+          "ItemActions"
+        ],
+        "variants": {
+          "variant": [
+            "default",
+            "outline",
+            "muted"
+          ]
+        },
+        "composition": [
+          "ItemMedia",
+          "ItemContent",
+          "ItemTitle",
+          "ItemDescription",
+          "ItemActions"
+        ]
+      },
+      "Separator": {
+        "name": "Separator",
+        "status": "approved",
+        "description": "Visual divider between sections",
+        "imports": [
+          "Separator"
+        ]
+      },
+      "Sidebar": {
+        "name": "Sidebar",
+        "status": "approved",
+        "description": "Primary navigation sidebar with collapsible state",
+        "imports": [
+          "Sidebar",
+          "SidebarContent",
+          "SidebarGroup",
+          "SidebarGroupLabel",
+          "SidebarGroupContent",
+          "SidebarMenu",
+          "SidebarMenuItem",
+          "SidebarMenuButton",
+          "SidebarMenuButtonLink",
+          "SidebarHeader",
+          "SidebarFooter",
+          "SidebarTrigger",
+          "SidebarProvider"
+        ],
+        "composition": [
+          "SidebarHeader",
+          "SidebarContent",
+          "SidebarGroup",
+          "SidebarFooter"
+        ]
+      },
+      "OfflineSidebar": {
+        "name": "OfflineSidebar",
+        "status": "approved",
+        "description": "Pre-configured sidebar with Offline branding (requires Next.js)",
+        "imports": [
+          "OfflineSidebar",
+          "OfflineSidebarNav",
+          "OfflineSidebarFooter"
+        ]
+      },
+      "Breadcrumb": {
+        "name": "Breadcrumb",
+        "status": "approved",
+        "description": "Location breadcrumb trail",
+        "imports": [
+          "Breadcrumb",
+          "BreadcrumbList",
+          "BreadcrumbItem",
+          "BreadcrumbLink",
+          "BreadcrumbPage",
+          "BreadcrumbSeparator"
+        ],
+        "composition": [
+          "BreadcrumbList",
+          "BreadcrumbItem",
+          "BreadcrumbLink",
+          "BreadcrumbPage"
+        ]
+      },
+      "Tabs": {
+        "name": "Tabs",
+        "status": "approved",
+        "description": "Tab navigation for switching views",
+        "imports": [
+          "Tabs",
+          "TabsList",
+          "TabsTrigger",
+          "TabsContent"
+        ],
+        "variants": {
+          "style": [
+            "default (pill)",
+            "line (underline)"
+          ]
+        },
+        "composition": [
+          "TabsList",
+          "TabsTrigger",
+          "TabsContent"
+        ]
+      },
+      "DropdownMenu": {
+        "name": "DropdownMenu",
+        "status": "approved",
+        "description": "Dropdown menu for actions",
+        "imports": [
+          "DropdownMenu",
+          "DropdownMenuTrigger",
+          "DropdownMenuContent",
+          "DropdownMenuItem",
+          "DropdownMenuSeparator",
+          "DropdownMenuLabel"
+        ],
+        "composition": [
+          "DropdownMenuTrigger",
+          "DropdownMenuContent",
+          "DropdownMenuItem"
+        ]
+      },
+      "Button": {
+        "name": "Button",
+        "status": "approved",
+        "description": "Primary action trigger. Black (default) is primary color per brand",
+        "imports": [
+          "Button",
+          "buttonVariants"
+        ],
+        "variants": {
+          "variant": [
+            "default",
+            "secondary",
+            "outline",
+            "ghost",
+            "destructive",
+            "link"
+          ],
+          "size": [
+            "default",
+            "sm",
+            "lg",
+            "icon"
+          ]
+        }
+      },
+      "Badge": {
+        "name": "Badge",
+        "status": "approved",
+        "description": "Status indicators, tags, labels",
+        "imports": [
+          "Badge",
+          "badgeVariants"
+        ],
+        "variants": {
+          "variant": [
+            "default",
+            "secondary",
+            "destructive",
+            "success",
+            "warning",
+            "outline"
+          ]
+        }
+      },
+      "Input": {
+        "name": "Input",
+        "status": "approved",
+        "description": "Single-line text input",
+        "imports": [
+          "Input"
+        ]
+      },
+      "Label": {
+        "name": "Label",
+        "status": "approved",
+        "description": "Form field label - always use with htmlFor",
+        "imports": [
+          "Label"
+        ]
+      },
+      "Checkbox": {
+        "name": "Checkbox",
+        "status": "approved",
+        "description": "Checkbox for boolean/multi-select",
+        "imports": [
+          "Checkbox"
+        ]
+      },
+      "InputOTP": {
+        "name": "InputOTP",
+        "status": "approved",
+        "description": "OTP/verification code input",
+        "imports": [
+          "InputOTP",
+          "InputOTPGroup",
+          "InputOTPSlot",
+          "InputOTPSeparator"
+        ],
+        "composition": [
+          "InputOTPGroup",
+          "InputOTPSlot"
+        ]
+      },
+      "Progress": {
+        "name": "Progress",
+        "status": "approved",
+        "description": "Progress bar indicator",
+        "imports": [
+          "Progress"
+        ]
+      },
+      "Dialog": {
+        "name": "Dialog",
+        "status": "approved",
+        "description": "Modal for forms and content. User can dismiss freely",
+        "imports": [
+          "Dialog",
+          "DialogTrigger",
+          "DialogContent",
+          "DialogHeader",
+          "DialogFooter",
+          "DialogTitle",
+          "DialogDescription",
+          "DialogClose"
+        ],
+        "composition": [
+          "DialogTrigger",
+          "DialogContent",
+          "DialogHeader",
+          "DialogFooter"
+        ]
+      },
+      "AlertDialog": {
+        "name": "AlertDialog",
+        "status": "approved",
+        "description": "Interruption requiring decision. Cannot dismiss by clicking outside",
+        "imports": [
+          "AlertDialog",
+          "AlertDialogTrigger",
+          "AlertDialogContent",
+          "AlertDialogHeader",
+          "AlertDialogFooter",
+          "AlertDialogTitle",
+          "AlertDialogDescription",
+          "AlertDialogAction",
+          "AlertDialogCancel"
+        ],
+        "composition": [
+          "AlertDialogTrigger",
+          "AlertDialogContent",
+          "AlertDialogAction",
+          "AlertDialogCancel"
+        ]
+      },
+      "Sheet": {
+        "name": "Sheet",
+        "status": "approved",
+        "description": "Slide-in panel for secondary content",
+        "imports": [
+          "Sheet",
+          "SheetTrigger",
+          "SheetContent",
+          "SheetHeader",
+          "SheetFooter",
+          "SheetTitle",
+          "SheetDescription",
+          "SheetClose"
+        ],
+        "variants": {
+          "side": [
+            "right",
+            "left",
+            "top",
+            "bottom"
+          ]
+        },
+        "composition": [
+          "SheetTrigger",
+          "SheetContent",
+          "SheetHeader",
+          "SheetFooter"
+        ]
+      },
+      "Tooltip": {
+        "name": "Tooltip",
+        "status": "approved",
+        "description": "Hover/focus information overlay",
+        "imports": [
+          "Tooltip",
+          "TooltipTrigger",
+          "TooltipContent",
+          "TooltipProvider"
+        ],
+        "composition": [
+          "TooltipTrigger",
+          "TooltipContent"
+        ]
+      },
+      "Avatar": {
+        "name": "Avatar",
+        "status": "approved",
+        "description": "User/entity avatar with fallback",
+        "imports": [
+          "Avatar",
+          "AvatarImage",
+          "AvatarFallback"
+        ],
+        "composition": [
+          "AvatarImage",
+          "AvatarFallback"
+        ],
+        "sizes": [
+          "default",
+          "sm",
+          "lg"
+        ]
+      },
+      "Skeleton": {
+        "name": "Skeleton",
+        "status": "approved",
+        "description": "Loading placeholder matching content shape",
+        "imports": [
+          "Skeleton"
+        ]
+      },
+      "Chart": {
+        "name": "Chart",
+        "status": "approved",
+        "description": "Data visualization wrapper for Recharts",
+        "imports": [
+          "ChartContainer",
+          "ChartTooltip",
+          "ChartTooltipContent",
+          "ChartLegend",
+          "ChartLegendContent"
+        ]
+      },
+      "Accordion": {
+        "name": "Accordion",
+        "status": "approved",
+        "description": "Expandable content sections",
+        "imports": [
+          "Accordion",
+          "AccordionItem",
+          "AccordionTrigger",
+          "AccordionContent"
+        ],
+        "composition": [
+          "AccordionItem",
+          "AccordionTrigger",
+          "AccordionContent"
+        ]
+      },
+      "Collapsible": {
+        "name": "Collapsible",
+        "status": "approved",
+        "description": "Single collapsible section",
+        "imports": [
+          "Collapsible",
+          "CollapsibleTrigger",
+          "CollapsibleContent"
+        ],
+        "composition": [
+          "CollapsibleTrigger",
+          "CollapsibleContent"
+        ]
+      },
+      "Alert": {
+        "name": "Alert",
+        "status": "draft",
+        "description": "Banner for inline messages - info, warning, error, success",
+        "imports": [
+          "Alert",
+          "AlertTitle",
+          "AlertDescription",
+          "alertVariants"
+        ],
+        "variants": {
+          "variant": [
+            "default",
+            "destructive",
+            "warning",
+            "success"
+          ]
+        },
+        "composition": [
+          "AlertTitle",
+          "AlertDescription"
+        ]
+      },
+      "Select": {
+        "name": "Select",
+        "status": "draft",
+        "description": "Dropdown select - still being refined",
+        "imports": [
+          "Select",
+          "SelectTrigger",
+          "SelectContent",
+          "SelectItem",
+          "SelectValue",
+          "SelectGroup",
+          "SelectLabel"
+        ]
+      },
+      "Sonner": {
+        "name": "Sonner",
+        "status": "draft",
+        "description": "Toast notifications - integration in progress",
+        "imports": [
+          "Toaster",
+          "toast"
+        ]
+      },
+      "Table": {
+        "name": "Table",
+        "status": "draft",
+        "description": "Data table - needs more patterns",
+        "imports": [
+          "Table",
+          "TableHeader",
+          "TableBody",
+          "TableFooter",
+          "TableHead",
+          "TableRow",
+          "TableCell",
+          "TableCaption"
+        ]
+      },
+      "Textarea": {
+        "name": "Textarea",
+        "status": "draft",
+        "description": "Multi-line text input - under review",
+        "imports": [
+          "Textarea"
+        ]
+      }
+    },
+    "approved": [
+      "Card",
+      "Item",
+      "Separator",
+      "Sidebar",
+      "OfflineSidebar",
+      "Breadcrumb",
+      "Tabs",
+      "DropdownMenu",
+      "Button",
+      "Badge",
+      "Input",
+      "Label",
+      "Checkbox",
+      "InputOTP",
+      "Progress",
+      "Dialog",
+      "AlertDialog",
+      "Sheet",
+      "Tooltip",
+      "Avatar",
+      "Skeleton",
+      "Chart",
+      "Accordion",
+      "Collapsible"
+    ],
+    "draft": [
+      "Alert",
+      "Select",
+      "Sonner",
+      "Table",
+      "Textarea"
+    ]
+  },
+  "patterns": {
+    "layout": {
+      "page": {
+        "maxWidth": "max-w-4xl",
+        "maxWidthWide": "max-w-6xl",
+        "padding": "px-4 py-6",
+        "sectionGap": "space-y-8",
+        "wrapper": "mx-auto px-4 py-6"
+      },
+      "cards": {
+        "padding": "p-6",
+        "paddingCompact": "p-4",
+        "gap": "gap-4",
+        "grid2col": "grid grid-cols-1 md:grid-cols-2 gap-4",
+        "grid3col": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
+        "grid4col": "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
+        "stack": "flex flex-col gap-4"
+      },
+      "forms": {
+        "fieldGap": "space-y-4",
+        "labelGap": "mb-2",
+        "helperGap": "mt-1",
+        "buttonGap": "gap-2",
+        "sectionGap": "space-y-6",
+        "container": "space-y-4",
+        "actions": "flex justify-end gap-2 pt-4",
+        "fieldFull": "w-full",
+        "fieldPair": "grid grid-cols-2 gap-4"
+      },
+      "inline": {
+        "iconText": "inline-flex items-center gap-2",
+        "badges": "flex flex-wrap gap-2",
+        "buttons": "flex items-center gap-2",
+        "tags": "flex flex-wrap gap-1"
+      },
+      "header": {
+        "pageHeader": "flex items-center justify-between mb-6",
+        "sectionHeader": "flex items-center justify-between mb-4",
+        "cardHeader": "flex items-center justify-between"
+      },
+      "sidebar": {
+        "width": "w-64",
+        "widthCollapsed": "w-16",
+        "contentWithSidebar": "ml-64",
+        "contentMobile": "ml-0"
+      },
+      "responsive": {
+        "hideMobile": "hidden md:block",
+        "showMobile": "md:hidden",
+        "stackToRow": "flex flex-col md:flex-row",
+        "fullToAuto": "w-full md:w-auto"
+      }
+    },
+    "states": {
+      "loading": {
+        "page": "Skeleton matching page structure",
+        "card": "Skeleton matching card structure",
+        "button": {
+          "icon": "Loader2",
+          "text": "Loading...",
+          "classes": "disabled opacity-50",
+          "iconClasses": "animate-spin mr-2 h-4 w-4"
+        },
+        "inline": {
+          "icon": "Loader2",
+          "classes": "animate-spin h-4 w-4"
+        },
+        "tableRow": "Skeleton h-12 w-full",
+        "listItem": "Skeleton h-16 w-full",
+        "avatar": "Skeleton h-10 w-10 rounded-full"
+      },
+      "empty": {
+        "structure": "flex flex-col items-center justify-center py-12 text-center",
+        "icon": {
+          "classes": "h-12 w-12 text-muted-foreground mb-4",
+          "note": "Use relevant lucide icon for context"
+        },
+        "title": {
+          "classes": "headline-small mb-2"
+        },
+        "description": {
+          "classes": "body-medium text-muted-foreground max-w-sm mx-auto mb-4"
+        },
+        "action": {
+          "variant": "outline",
+          "note": "Optional - only if user can take action to fill empty state"
+        }
+      },
+      "error": {
+        "page": {
+          "component": "Alert",
+          "variant": "destructive",
+          "includeRetry": true,
+          "classes": "max-w-lg mx-auto my-8"
+        },
+        "inline": {
+          "classes": "body-small text-destructive"
+        },
+        "field": {
+          "inputClasses": "border-destructive focus:ring-destructive",
+          "messageClasses": "body-small text-destructive mt-1"
+        },
+        "banner": {
+          "component": "Alert",
+          "variant": "destructive",
+          "classes": "mb-4"
+        }
+      },
+      "disabled": {
+        "opacity": "opacity-50",
+        "cursor": "cursor-not-allowed",
+        "interaction": "pointer-events-none",
+        "combined": "opacity-50 cursor-not-allowed pointer-events-none"
+      },
+      "success": {
+        "toast": {
+          "method": "toast.success",
+          "duration": 3000
+        },
+        "inline": {
+          "classes": "body-small text-[var(--semantic-success500)]"
+        },
+        "banner": {
+          "component": "Alert",
+          "variant": "default",
+          "icon": "CheckCircle",
+          "classes": "border-[var(--semantic-success500)] bg-green-50"
+        }
+      },
+      "warning": {
+        "banner": {
+          "component": "Alert",
+          "variant": "warning",
+          "icon": "AlertTriangle"
+        },
+        "inline": {
+          "classes": "body-small text-[var(--colors-yellow-600)]"
+        }
+      }
+    },
+    "interactions": {
+      "clickableCard": {
+        "default": "shadow-card transition-shadow duration-200",
+        "hover": "hover:shadow-elevated",
+        "cursor": "cursor-pointer",
+        "combined": "shadow-card hover:shadow-elevated cursor-pointer transition-shadow duration-200",
+        "withBorder": "border border-gray-200 hover:border-gray-300 cursor-pointer transition-colors"
+      },
+      "link": {
+        "default": "text-[var(--colors-blue-400)] underline-offset-4",
+        "hover": "hover:underline",
+        "combined": "text-[var(--colors-blue-400)] underline-offset-4 hover:underline",
+        "nav": "text-[var(--colors-blue-400)] hover:underline underline-offset-4"
+      },
+      "iconButton": {
+        "default": "p-2 rounded-md transition-colors",
+        "hover": "hover:bg-muted",
+        "combined": "p-2 rounded-md hover:bg-muted transition-colors",
+        "destructive": "p-2 rounded-md hover:bg-destructive/10 hover:text-destructive transition-colors"
+      },
+      "tableRow": {
+        "default": "transition-colors",
+        "hover": "hover:bg-muted/50",
+        "combined": "hover:bg-muted/50 transition-colors",
+        "clickable": "hover:bg-muted/50 cursor-pointer transition-colors"
+      },
+      "listItem": {
+        "default": "transition-colors",
+        "hover": "hover:bg-muted/50",
+        "active": "bg-muted",
+        "combined": "hover:bg-muted/50 cursor-pointer transition-colors"
+      },
+      "button": {
+        "focus": "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "active": "active:scale-[0.98]",
+        "transition": "transition-colors"
+      },
+      "input": {
+        "default": "border border-gray-200 transition-colors",
+        "hover": "hover:border-gray-300",
+        "focus": "focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10",
+        "error": "border-destructive focus:border-destructive focus:ring-destructive/10",
+        "combined": "border border-gray-200 hover:border-gray-300 focus:border-gray-900 focus:ring-2 focus:ring-gray-900/10 transition-colors"
+      },
+      "menuItem": {
+        "default": "transition-colors rounded-sm",
+        "hover": "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        "combined": "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground rounded-sm transition-colors"
+      },
+      "sidebarItem": {
+        "default": "transition-colors rounded-md",
+        "hover": "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        "active": "bg-sidebar-accent text-sidebar-accent-foreground",
+        "combined": "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md transition-colors"
+      },
+      "transitions": {
+        "fast": "transition-colors duration-150",
+        "medium": "transition-all duration-200",
+        "slow": "transition-all duration-300",
+        "ease": {
+          "default": "ease-in-out",
+          "in": "ease-in",
+          "out": "ease-out",
+          "bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+        }
+      }
+    },
+    "charts": {
+      "colorPriority": [
+        "chart-1",
+        "chart-3",
+        "chart-5",
+        "chart-4",
+        "chart-6",
+        "chart-8"
+      ],
+      "ratingDistribution": {
+        "1": "chart-5",
+        "2": "chart-5",
+        "3": "chart-4",
+        "4": "chart-1",
+        "5": "chart-3"
+      },
+      "positiveMetrics": [
+        "chart-1",
+        "chart-3",
+        "chart-6"
+      ],
+      "negativeMetrics": [
+        "chart-5",
+        "chart-4",
+        "chart-8"
+      ],
+      "comparisonPairs": {
+        "current": "chart-1",
+        "previous": "chart-4"
+      },
+      "axisStyle": {
+        "tickLine": false,
+        "axisLine": false,
+        "tick": {
+          "fill": "hsl(var(--muted-foreground))",
+          "fontSize": 12
+        },
+        "tickMargin": 8
+      },
+      "yAxisStyle": {
+        "tickLine": false,
+        "axisLine": false,
+        "tick": {
+          "fill": "hsl(var(--muted-foreground))",
+          "fontSize": 12
+        },
+        "width": 40
+      },
+      "xAxisStyle": {
+        "tickLine": false,
+        "axisLine": false,
+        "tick": {
+          "fill": "hsl(var(--muted-foreground))",
+          "fontSize": 12
+        },
+        "height": 40
+      },
+      "barRadius": [
+        4,
+        4,
+        0,
+        0
+      ],
+      "gridStyle": {
+        "stroke": "hsl(var(--border))",
+        "strokeDasharray": "3 3"
+      },
+      "tooltipStyle": {
+        "contentStyle": {
+          "backgroundColor": "hsl(var(--popover))",
+          "border": "1px solid hsl(var(--border))",
+          "borderRadius": "6px",
+          "boxShadow": "var(--card-shadow)"
+        },
+        "labelStyle": {
+          "fontWeight": 600,
+          "marginBottom": 4
+        }
+      },
+      "legendStyle": {
+        "iconType": "circle",
+        "iconSize": 8,
+        "wrapperStyle": {
+          "paddingTop": 16
+        }
+      },
+      "containerSizing": {
+        "small": {
+          "height": 100
+        },
+        "medium": {
+          "height": 200
+        },
+        "large": {
+          "height": 300
+        },
+        "full": {
+          "height": 400
+        }
+      },
+      "margins": {
+        "none": {
+          "top": 0,
+          "right": 0,
+          "bottom": 0,
+          "left": 0
+        },
+        "withAxis": {
+          "top": 10,
+          "right": 10,
+          "bottom": 30,
+          "left": 40
+        },
+        "withLegend": {
+          "top": 10,
+          "right": 10,
+          "bottom": 50,
+          "left": 40
+        }
+      },
+      "semanticSeries": {
+        "revenue": {
+          "color": "chart-1",
+          "label": "Revenue"
+        },
+        "growth": {
+          "color": "chart-3",
+          "label": "Growth"
+        },
+        "decline": {
+          "color": "chart-5",
+          "label": "Decline"
+        },
+        "baseline": {
+          "color": "chart-4",
+          "label": "Baseline"
+        },
+        "target": {
+          "color": "chart-2",
+          "label": "Target"
+        }
+      }
+    },
+    "modals": {
+      "sizes": {
+        "small": "max-w-sm",
+        "default": "max-w-lg",
+        "large": "max-w-2xl",
+        "xl": "max-w-3xl",
+        "full": "max-w-4xl"
+      },
+      "headerWithIcon": {
+        "iconContainer": "size-12 rounded-full flex items-center justify-center mb-4",
+        "iconPositive": "bg-yellow-100 text-yellow-600",
+        "iconInfo": "bg-blue-100 text-blue-600",
+        "iconDestructive": "bg-red-100 text-red-600",
+        "iconSuccess": "bg-green-100 text-green-600",
+        "iconSize": "h-6 w-6"
+      },
+      "footer": {
+        "alignment": "flex justify-end gap-2",
+        "cancelFirst": true,
+        "destructive": {
+          "cancelVariant": "outline",
+          "actionVariant": "destructive"
+        },
+        "standard": {
+          "cancelVariant": "outline",
+          "actionVariant": "default"
+        }
+      },
+      "mobile": {
+        "dialogHeight": "max-h-[90vh] overflow-y-auto",
+        "bottomSheetHeight": "h-auto max-h-[80vh]",
+        "fullScreen": "fixed inset-0 max-w-none rounded-none"
+      },
+      "sheet": {
+        "right": {
+          "side": "right",
+          "width": "w-[400px] sm:max-w-[540px]"
+        },
+        "left": {
+          "side": "left",
+          "width": "w-[300px] sm:max-w-[400px]"
+        },
+        "bottom": {
+          "side": "bottom",
+          "height": "h-auto max-h-[80vh]",
+          "rounded": "rounded-t-xl"
+        }
+      },
+      "alertDialog": {
+        "headerRule": "Title and description text only",
+        "buttonOrder": [
+          "AlertDialogCancel",
+          "AlertDialogAction"
+        ],
+        "destructiveAction": {
+          "variant": "destructive",
+          "text": "Delete"
+        },
+        "messaging": {
+          "title": "Action verb + object (e.g., 'Delete this item?')",
+          "description": "Consequence explanation (e.g., 'This action cannot be undone.')"
+        }
+      },
+      "contentPatterns": {
+        "form": {
+          "spacing": "space-y-4",
+          "footerSpacing": "pt-4"
+        },
+        "confirmation": {
+          "textAlign": "text-center",
+          "spacing": "space-y-2"
+        },
+        "detail": {
+          "maxHeight": "max-h-[70vh]",
+          "overflow": "overflow-y-auto"
+        }
+      },
+      "animation": {
+        "dialog": "duration-200",
+        "sheet": "duration-300",
+        "overlay": "duration-200"
+      }
+    }
+  },
+  "mappings": {
+    "icons": {
+      "actions": {
+        "edit": "Pencil",
+        "delete": "Trash2",
+        "add": "Plus",
+        "create": "Plus",
+        "close": "X",
+        "cancel": "X",
+        "menu": "MoreVertical",
+        "menuHorizontal": "MoreHorizontal",
+        "settings": "Settings",
+        "copy": "Copy",
+        "duplicate": "Copy",
+        "download": "Download",
+        "upload": "Upload",
+        "refresh": "RefreshCw",
+        "save": "Save",
+        "send": "Send",
+        "search": "Search",
+        "filter": "Filter",
+        "sort": "ArrowUpDown",
+        "archive": "Archive",
+        "restore": "ArchiveRestore",
+        "undo": "Undo2",
+        "redo": "Redo2",
+        "print": "Printer",
+        "export": "FileDown",
+        "import": "FileUp"
+      },
+      "navigation": {
+        "back": "ArrowLeft",
+        "forward": "ArrowRight",
+        "up": "ArrowUp",
+        "down": "ArrowDown",
+        "external": "ExternalLink",
+        "expand": "ChevronDown",
+        "collapse": "ChevronUp",
+        "chevronLeft": "ChevronLeft",
+        "chevronRight": "ChevronRight",
+        "home": "Home",
+        "menu": "Menu",
+        "sidebar": "PanelLeft",
+        "grid": "LayoutGrid",
+        "list": "List"
+      },
+      "status": {
+        "success": "CheckCircle",
+        "check": "Check",
+        "warning": "AlertTriangle",
+        "error": "AlertCircle",
+        "info": "Info",
+        "loading": "Loader2",
+        "pending": "Clock",
+        "scheduled": "CalendarClock",
+        "draft": "FileEdit",
+        "active": "CircleDot",
+        "inactive": "Circle",
+        "verified": "BadgeCheck",
+        "locked": "Lock",
+        "unlocked": "Unlock",
+        "visible": "Eye",
+        "hidden": "EyeOff"
+      },
+      "domain": {
+        "calendar": "Calendar",
+        "date": "Calendar",
+        "time": "Clock",
+        "location": "MapPin",
+        "address": "MapPin",
+        "team": "Users",
+        "user": "User",
+        "profile": "UserCircle",
+        "email": "Mail",
+        "phone": "Phone",
+        "money": "DollarSign",
+        "payment": "CreditCard",
+        "invoice": "Receipt",
+        "rating": "Star",
+        "favorite": "Heart",
+        "bookmark": "Bookmark",
+        "share": "Share2",
+        "link": "Link",
+        "attachment": "Paperclip",
+        "image": "Image",
+        "file": "File",
+        "folder": "Folder",
+        "document": "FileText",
+        "chart": "BarChart3",
+        "analytics": "TrendingUp",
+        "dashboard": "LayoutDashboard",
+        "notification": "Bell",
+        "message": "MessageSquare",
+        "comment": "MessageCircle",
+        "tag": "Tag",
+        "category": "Folder",
+        "partner": "Building2",
+        "company": "Building",
+        "store": "Store",
+        "product": "Package",
+        "inventory": "Boxes",
+        "order": "ShoppingCart",
+        "offer": "Ticket",
+        "event": "CalendarDays",
+        "campaign": "Megaphone"
+      },
+      "form": {
+        "required": "Asterisk",
+        "optional": "Circle",
+        "help": "HelpCircle",
+        "clear": "XCircle",
+        "show": "Eye",
+        "hide": "EyeOff",
+        "increment": "Plus",
+        "decrement": "Minus"
+      },
+      "emptyStates": {
+        "noData": "Inbox",
+        "noResults": "SearchX",
+        "noItems": "PackageOpen",
+        "noContent": "FileX",
+        "noAccess": "ShieldX",
+        "error": "AlertOctagon",
+        "maintenance": "Wrench",
+        "construction": "Construction"
+      }
+    },
+    "badges": {
+      "status": {
+        "active": "success",
+        "live": "success",
+        "complete": "success",
+        "completed": "success",
+        "approved": "success",
+        "verified": "success",
+        "published": "success",
+        "online": "success",
+        "pending": "warning",
+        "pendingReview": "warning",
+        "inReview": "warning",
+        "processing": "warning",
+        "scheduled": "warning",
+        "draft": "secondary",
+        "inProgress": "secondary",
+        "paused": "secondary",
+        "inactive": "secondary",
+        "offline": "secondary",
+        "error": "destructive",
+        "failed": "destructive",
+        "cancelled": "destructive",
+        "rejected": "destructive",
+        "expired": "destructive",
+        "overdue": "destructive",
+        "archived": "outline",
+        "closed": "outline",
+        "ended": "outline",
+        "past": "outline"
+      },
+      "tags": "outline",
+      "premium": {
+        "className": "badge-premium",
+        "note": "Use badge-premium CSS class, not Badge component variant"
+      },
+      "floating": {
+        "additionalClass": "shadow-tag",
+        "note": "Add shadow-tag class to Badge for floating effect"
+      }
+    },
+    "statusLabels": {
+      "active": "Active",
+      "live": "Live",
+      "complete": "Complete",
+      "completed": "Completed",
+      "approved": "Approved",
+      "verified": "Verified",
+      "published": "Published",
+      "online": "Online",
+      "pending": "Pending",
+      "pendingReview": "Pending Review",
+      "inReview": "In Review",
+      "processing": "Processing",
+      "scheduled": "Scheduled",
+      "draft": "Draft",
+      "inProgress": "In Progress",
+      "paused": "Paused",
+      "inactive": "Inactive",
+      "offline": "Offline",
+      "error": "Error",
+      "failed": "Failed",
+      "cancelled": "Cancelled",
+      "rejected": "Rejected",
+      "expired": "Expired",
+      "overdue": "Overdue",
+      "archived": "Archived",
+      "closed": "Closed",
+      "ended": "Ended",
+      "past": "Past"
+    }
+  },
+  "rules": {
+    "critical": [
+      "NEVER use yellow (#de8e0f) for buttons - yellow is accent only",
+      "Blue (#004fff) is ONLY for clickable text links",
+      "AlertDialog headers: title + description only, NO icons or decoration",
+      "Icon-only buttons MUST have aria-label",
+      "Inputs MUST be paired with Label using htmlFor"
+    ],
+    "guidelines": [
+      "Use CSS variables instead of hardcoded hex values",
+      "Match shadow level to element importance: card < tag < elevated",
+      "Use Cabinet Grotesk (display-*) sparingly for hero headlines",
+      "Use stat-mono for numerical data and statistics",
+      "Add max-h-[90vh] overflow-y-auto to Dialog for mobile"
+    ],
+    "antiPatterns": [
+      {
+        "bad": "Yellow buttons",
+        "fix": "Use Button variant='default' (black)"
+      },
+      {
+        "bad": "Home icon in breadcrumb",
+        "fix": "Use 'Home' text instead"
+      },
+      {
+        "bad": "Decorated AlertDialog headers",
+        "fix": "Title + description only"
+      },
+      {
+        "bad": "Missing input labels",
+        "fix": "Always pair Input with Label htmlFor"
+      },
+      {
+        "bad": "Hardcoded colors",
+        "fix": "Use CSS variables or semantic classes"
+      },
+      {
+        "bad": "Overusing premium styling",
+        "fix": "Reserve for actual premium content"
+      }
+    ]
+  }
+}