Forensisches Design-System-Audit-Prompt

{ "colors": { "primary": ["#0070f3", "rgb(37, 99, 235)", "var(--primary)"], "secondary": ["#6b7280", "rgb(107, 114, 128)", "var(--secondary)"], "accent": ["#f59e0b", "rgb(245, 158, 11)", "var(--accent)"], "neutral": ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#4b5563", "#1f2937", "#111827", "#000000"], "semantic": { "success": ["#10b981", "rgb(16, 185, 129)"], "warning": ["#f59e0b", "rgb(245, 158, 11)"], "error": ["#ef4444", "rgb(239, 68, 68)"], "info": ["#3b82f6", "rgb(59, 130, 246)"] }, "inconsistencies": [ "Multiple grays for borders: #e5e7eb, #d1d5db, #9ca3af used interchangeably", "Opacity variations: rgba(0,0,0,0.5), rgba(0,0,0,0.75) for overlays", "Dark mode mappings: some components use .dark class, others use data-theme='dark'" ], "cssVariables": { "--primary": "#0070f3", "--primary-foreground": "#ffffff", "--secondary": "#6b7280", "--secondary-foreground": "#ffffff", "--accent": "#f59e0b", "--accent-foreground": "#111827", "--background": "#ffffff", "--foreground": "#111827", "--muted": "#f3f4f6", "--muted-foreground": "#6b7280", "--border": "#e5e7eb", "--input": "#d1d5db", "--ring": "#0070f3", "--radius": "0.5rem" } }, "typography": { "families": [ "Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif" ], "scale": [ "12px", "14px", "16px", "18px", "20px", "24px", "30px", "36px", "48px", "0.75rem", "0.875rem", "1rem", "1.125rem", "1.25rem", "1.5rem", "1.875rem", "2.25rem", "3rem", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-3xl", "text-4xl", "text-5xl" ], "weights": [400, 500, 600, 700, 800], "lineHeights": ["1.2", "1.4", "1.5", "1.6", "1.75"], "letterSpacing": ["-0.025em", "-0.01em", "0", "0.025em", "0.05em"], "styles": [ { "name": "heading-large", "font": "Inter", "size": "36px", "weight": 700, "lineHeight": "1.2" }, { "name": "heading-medium", "font": "Inter", "size": "24px", "weight": 600, "lineHeight": "1.3" }, { "name": "heading-small", "font": "Inter", "size": "18px", "weight": 600, "lineHeight": "1.4" }, { "name": "body", "font": "Inter", "size": "16px", "weight": 400, "lineHeight": "1.5" }, { "name": "body-small", "font": "Inter", "size": "14px", "weight": 400, "lineHeight": "1.5" }, { "name": "caption", "font": "Inter", "size": "12px", "weight": 400, "lineHeight": "1.4" } ], "responsive": [ "text-4xl on mobile, text-5xl on desktop", "text-lg on mobile, text-xl on desktop", "text-sm on mobile, text-base on desktop" ] }, "spacing": { "scale": ["0", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "64px", "96px"], "containers": ["max-w-7xl", "max-w-6xl", "max-w-5xl", "max-w-4xl", "max-w-3xl", "max-w-2xl", "max-w-xl", "max-w-lg", "max-w-md", "max-w-sm"], "breakpoints": ["sm: 640px", "md: 768px", "lg: 1024px", "xl: 1280px", "2xl: 1536px"], "grid": { "columns": 12, "gutter": "24px", "gap": ["gap-2", "gap-4", "gap-6", "gap-8"] }, "zIndex": [ { "value": 0, "purpose": "default" }, { "value": 10, "purpose": "sticky header" }, { "value": 20, "purpose": "dropdown" }, { "value": 30, "purpose": "modal backdrop" }, { "value": 40, "purpose": "modal content" }, { "value": 50, "purpose": "tooltip" } ], "borderRadius": ["0", "0.25rem", "0.375rem", "0.5rem", "0.75rem", "1rem", "9999px"] }, "components": [ { "name": "Button", "path": "components/ui/button.tsx", "props": { "variant": ["default", "secondary", "outline", "ghost", "destructive", "link"], "size": ["default", "sm", "lg", "icon"], "asChild": "boolean" }, "variants": [ { "size": "default", "height": "40px", "padding": "0 16px" }, { "size": "sm", "height": "32px", "padding": "0 12px" }, { "size": "lg", "height": "48px", "padding": "0 24px" }, { "size": "icon", "height": "40px", "width": "40px" } ], "dependencies": ["Slot", "cva"], "usageCount": 120 }, { "name": "Card", "path": "components/ui/card.tsx", "props": { "title": "string", "description": "string", "footer": "ReactNode" }, "variants": ["default", "outline", "elevated"], "dependencies": ["Button"], "usageCount": 45 }, { "name": "Input", "path": "components/ui/input.tsx", "props": { "type": "string", "placeholder": "string", "disabled": "boolean", "error": "boolean" }, "variants": ["default", "error", "disabled"], "dependencies": [], "usageCount": 80 }, { "name": "Modal", "path": "components/ui/modal.tsx", "props": { "open": "boolean", "onClose": "() => void", "title": "string", "children": "ReactNode" }, "variants": ["default", "fullscreen"], "dependencies": ["Button", "Icon"], "usageCount": 15 }, { "name": "Dropdown", "path": "components/ui/dropdown.tsx", "props": { "items": "Array<{label: string, value: string}>", "onSelect": "(value: string) => void" }, "variants": ["default", "checkbox"], "dependencies": ["Icon"], "usageCount": 30 } ], "motion": { "durations": ["150ms", "200ms", "300ms", "500ms", "700ms"], "easings": ["ease-in", "ease-out", "ease-in-out", "cubic-bezier(0.4, 0, 0.2, 1)"], "animations": [ { "name": "fade-in", "keyframes": "from { opacity: 0 } to { opacity: 1 }" }, { "name": "slide-up", "keyframes": "from { transform: translateY(10px) } to { transform: translateY(0) }" }, { "name": "scale-in", "keyframes": "from { transform: scale(0.95) } to { transform: scale(1) }" } ], "hoverTransitions": ["transition-colors", "transition-opacity", "transition-transform", "transition-shadow"], "pageTransitions": ["fade", "slide"], "scrollAnimations": ["framer-motion", "gsap"] }, "icons": { "system": "lucide-react", "sizes": ["16px", "20px", "24px", "32px"], "count": 25 }, "inconsistencies": [ { "type": "duplicate-value", "description": "#1a1a1a used 47 times but not defined as a variable", "severity": "high" }, { "type": "conflicting-pattern", "description": "Some buttons use padding-based sizing, others use fixed height", "severity": "medium" }, { "type": "missing-state", "description": "Several components lack hover/focus/disabled states", "severity": "high" }, { "type": "accessibility", "description": "Missing focus rings on interactive elements", "severity": "high" }, { "type": "accessibility", "description": "Insufficient color contrast for text on secondary background", "severity": "medium" }, { "type": "duplicate-value", "description": "Border radius values repeated across components instead of using --radius variable", "severity": "low" } ] }