Sistema de Auditoria de Design Forense

{ "colors": { "primary": ["#0070f3", "rgb(37, 99, 235)", "hsl(217, 91%, 60%)"], "secondary": ["#6d28d9", "#4f46e5"], "accent": ["#f59e0b", "#10b981"], "neutral": ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#6b7280", "#374151", "#1f2937", "#111827", "#000000"], "semantic": { "success": ["#16a34a", "#22c55e"], "warning": ["#f59e0b", "#fbbf24"], "error": ["#dc2626", "#ef4444"], "info": ["#3b82f6", "#0ea5e9"] }, "cssVariables": { "--color-primary": "#0070f3", "--color-primary-hover": "#005bb5", "--color-bg": "#ffffff", "--color-text": "#111827", "--color-border": "#e5e7eb", "--color-muted": "#6b7280", "--color-success": "#16a34a", "--color-warning": "#f59e0b", "--color-error": "#dc2626", "--color-info": "#3b82f6" }, "inconsistencies": [ "Border colors: #e5e7eb, #d1d5db, #e2e8f0 used interchangeably", "Primary blue: #0070f3 vs rgb(37, 99, 235) vs hsl(217, 91%, 60%) - all similar but not identical", "Dark mode uses #1a1a1a for background, but #111827 also appears in dark contexts" ] }, "typography": { "families": [ "Inter (Google Fonts)", "Roboto Mono (Google Fonts)", "system-ui, -apple-system, sans-serif", "ui-monospace, SFMono-Regular, Menlo, monospace" ], "scale": [ "12px", "14px", "16px", "18px", "20px", "24px", "30px", "32px", "36px", "48px", "64px" ], "weights": { "Inter": [400, 500, 600, 700, 800], "Roboto Mono": [400, 500, 700] }, "lineHeights": { "12px": "16px", "14px": "20px", "16px": "24px", "18px": "28px", "20px": "28px", "24px": "32px", "30px": "36px", "32px": "40px", "36px": "44px", "48px": "56px", "64px": "72px" }, "letterSpacing": ["-0.02em", "-0.01em", "0", "0.01em", "0.05em"], "styles": [ { "name": "heading-1", "font": "Inter", "size": "48px", "weight": 700, "lineHeight": "56px", "letterSpacing": "-0.02em" }, { "name": "heading-2", "font": "Inter", "size": "36px", "weight": 700, "lineHeight": "44px", "letterSpacing": "-0.01em" }, { "name": "heading-3", "font": "Inter", "size": "30px", "weight": 600, "lineHeight": "36px", "letterSpacing": "0" }, { "name": "heading-4", "font": "Inter", "size": "24px", "weight": 600, "lineHeight": "32px", "letterSpacing": "0" }, { "name": "body-large", "font": "Inter", "size": "18px", "weight": 400, "lineHeight": "28px", "letterSpacing": "0" }, { "name": "body", "font": "Inter", "size": "16px", "weight": 400, "lineHeight": "24px", "letterSpacing": "0" }, { "name": "body-small", "font": "Inter", "size": "14px", "weight": 400, "lineHeight": "20px", "letterSpacing": "0" }, { "name": "caption", "font": "Inter", "size": "12px", "weight": 400, "lineHeight": "16px", "letterSpacing": "0.01em" }, { "name": "code", "font": "Roboto Mono", "size": "14px", "weight": 400, "lineHeight": "20px", "letterSpacing": "0" } ], "responsive": { "mobile": { "heading-1": "32px", "heading-2": "24px", "heading-3": "20px", "body": "16px" }, "desktop": { "heading-1": "48px", "heading-2": "36px", "heading-3": "30px", "body": "16px" } } }, "spacing": { "scale": ["0", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "64px", "80px", "96px", "128px"], "containers": { "max-width": "1280px", "content-width": "768px", "sidebar-width": "280px", "header-height": "64px", "footer-height": "auto" }, "grid": { "columns": 12, "gutter": "24px", "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" } }, "zIndex": { "0": "default", "10": "sticky header", "20": "dropdown", "30": "modal backdrop", "40": "modal", "50": "tooltip", "100": "toast notification" }, "borderRadius": ["0", "4px", "6px", "8px", "12px", "16px", "9999px"] }, "components": [ { "name": "Button", "path": "src/components/ui/Button.tsx", "props": { "variant": "primary | secondary | outline | ghost | danger", "size": "sm | md | lg", "disabled": "boolean", "loading": "boolean", "icon": "ReactNode", "onClick": "() => void" }, "variants": [ { "size": "sm", "padding": "8px 12px", "fontSize": "14px" }, { "size": "md", "padding": "12px 16px", "fontSize": "16px" }, { "size": "lg", "padding": "16px 24px", "fontSize": "18px" } ], "dependencies": ["Icon"], "usageCount": 120 }, { "name": "Input", "path": "src/components/ui/Input.tsx", "props": { "label": "string", "placeholder": "string", "type": "text | email | password | number", "error": "string", "disabled": "boolean", "required": "boolean" }, "variants": [ { "size": "sm", "height": "32px", "fontSize": "14px" }, { "size": "md", "height": "40px", "fontSize": "16px" }, { "size": "lg", "height": "48px", "fontSize": "18px" } ], "dependencies": [], "usageCount": 85 }, { "name": "Card", "path": "src/components/ui/Card.tsx", "props": { "title": "string", "description": "string", "footer": "ReactNode", "padding": "sm | md | lg", "shadow": "boolean" }, "variants": [ { "padding": "sm", "value": "16px" }, { "padding": "md", "value": "24px" }, { "padding": "lg", "value": "32px" } ], "dependencies": [], "usageCount": 60 }, { "name": "Modal", "path": "src/components/ui/Modal.tsx", "props": { "open": "boolean", "onClose": "() => void", "title": "string", "children": "ReactNode", "size": "sm | md | lg" }, "variants": [ { "size": "sm", "width": "400px" }, { "size": "md", "width": "600px" }, { "size": "lg", "width": "800px" } ], "dependencies": ["Button", "Icon"], "usageCount": 25 }, { "name": "Dropdown", "path": "src/components/ui/Dropdown.tsx", "props": { "trigger": "ReactNode", "items": "Array<{label: string, value: string}>", "onSelect": "(value: string) => void" }, "variants": [], "dependencies": ["Icon"], "usageCount": 40 }, { "name": "Tooltip", "path": "src/components/ui/Tooltip.tsx", "props": { "content": "string", "position": "top | bottom | left | right", "children": "ReactNode" }, "variants": [], "dependencies": [], "usageCount": 15 } ], "motion": { "durations": ["150ms", "200ms", "300ms", "500ms"], "easings": ["ease", "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 }", "duration": "300ms" }, { "name": "slide-up", "keyframes": "from { transform: translateY(10px) } to { transform: translateY(0) }", "duration": "300ms" }, { "name": "scale-in", "keyframes": "from { transform: scale(0.95) } to { transform: scale(1) }", "duration": "200ms" } ], "transitions": { "hover": "background-color 150ms ease, color 150ms ease, border-color 150ms ease", "focus": "box-shadow 200ms ease", "active": "transform 100ms ease" }, "pageTransitions": "fade-in 300ms ease", "scrollAnimations": "none (no Framer Motion or GSAP found)" }, "icons": { "system": "Lucide React", "sizes": ["16px", "20px", "24px", "32px"], "count": 45 }, "inconsistencies": [ { "type": "duplicate-values", "description": "#1a1a1a used 47 times as a color value but not defined as a CSS variable", "severity": "high" }, { "type": "conflicting-patterns", "description": "Some buttons use padding-based sizing, others use fixed height (e.g., 40px) - inconsistent across components", "severity": "medium" }, { "type": "missing-states", "description": "Several components lack disabled styles (e.g., Dropdown, Tooltip) and focus-visible states", "severity": "high" }, { "type": "accessibility-gaps", "description": "Color contrast for text on primary button (#ffffff on #0070f3) is 4.5:1, but secondary button (#ffffff on #6d28d9) is 3.9:1 - fails AA for normal text", "severity": "high" }, { "type": "duplicate-values", "description": "Border radius values: 8px and 6px used interchangeably for cards and inputs", "severity": "low" }, { "type": "conflicting-patterns", "description": "Some components use CSS variables for colors, others use hardcoded hex values - inconsistent theming", "severity": "medium" } ] }