{ "theme": "Light", "archetype": "4 (Swiss & High-Contrast - Custom Mitsubishi Motors Corporate)", "global_rules": { "emotion": "Professional, authoritative, precise, automotive.", "alignment": "Optical alignment over geometric. Left-align dense data and paragraphs. Keep visual rhythm consistent.", "accessibility": "Always ensure WCAG AA contrast. Use high contrast for text. Focus states must have higher contrast than default state." }, "typography": { "font_families": { "headings": "Outfit, sans-serif", "body": "IBM Plex Sans, sans-serif", "mono": "JetBrains Mono, monospace" }, "scale": { "h1": "text-3xl sm:text-4xl font-bold tracking-tight", "h2": "text-2xl sm:text-3xl font-bold tracking-tight", "h3": "text-xl sm:text-2xl font-semibold tracking-tight", "h4": "text-lg sm:text-xl font-semibold tracking-tight", "body": "text-sm sm:text-base leading-relaxed", "small": "text-xs sm:text-sm tracking-wide text-zinc-500", "overline": "text-xs font-bold uppercase tracking-[0.2em] text-zinc-500" }, "rules": [ "Do NOT use Inter for headings.", "Headlines > 32px MUST use tracking-tight or tracking-tighter.", "Overlines MUST be uppercase + tiny + wide spacing.", "Use tabular-nums for financial and KPI data." ] }, "colors": { "primary": { "DEFAULT": "#E60012", "hover": "#CC0010", "foreground": "#FFFFFF" }, "background": { "DEFAULT": "#F8F9FA", "card": "#FFFFFF", "sidebar": "#FFFFFF", "header": "#FFFFFF" }, "text": { "primary": "#1A1A1A", "secondary": "#52525B", "muted": "#71717A" }, "border": { "DEFAULT": "#E4E4E7", "focus": "#E60012", "light": "#F4F4F5" }, "status": { "success": "#16A34A", "warning": "#EAB308", "error": "#DC2626", "info": "#2563EB" }, "rules": [ "Never use pure black or pure gray; use zinc or slate scales.", "Limit the use of Mitsubishi Red to CTAs, progress bars, active navigation, and key alerts.", "Ensure text has min 4.5:1 contrast." ] }, "spacing_and_layout": { "grid": { "dashboard": "grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6", "sidebar_width": "w-64" }, "padding": { "container": "p-4 md:p-8", "card": "p-4 md:p-6" }, "rules": [ "Use 'Control Room Grid' mode: Every pixel utilized, h-full on children.", "Cards must have standard 1px border-zinc-200.", "Containers with borders must have internal padding (p-4 or p-6) to prevent text collision." ] }, "components": { "cards": { "style": "bg-white border border-zinc-200 rounded-lg shadow-sm hover:shadow-md transition-shadow", "kpi_highlight": "border-t-4 border-t-[#E60012]" }, "buttons": { "primary": "bg-[#E60012] text-white hover:bg-[#CC0010] rounded-md px-4 py-2 font-semibold transition-colors", "secondary": "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 rounded-md px-4 py-2 font-medium border border-zinc-200 transition-colors", "outline": "border border-zinc-300 text-zinc-700 hover:bg-zinc-50 rounded-md px-4 py-2 font-medium transition-colors" }, "sidebar": { "container": "bg-white border-r border-zinc-200 flex flex-col h-full", "item": "flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-r-full mr-4 transition-colors text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50", "item_active": "flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-r-full mr-4 bg-red-50 text-[#E60012] border-l-4 border-l-[#E60012]" }, "header": { "style": "bg-white/95 backdrop-blur-sm border-b border-zinc-200 sticky top-0 z-40 px-8 py-4 flex items-center justify-between" }, "charts": { "library": "recharts", "rules": "Use accessible colors. Red can represent shortfalls or key brand metrics, use neutral grays/blacks for secondary data lines." }, "forms": { "input": "border border-zinc-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#E60012]/20 focus:border-[#E60012]", "upload_zone": "border-2 border-dashed border-zinc-300 rounded-lg p-8 flex flex-col items-center justify-center text-center hover:bg-zinc-50 hover:border-[#E60012] transition-colors cursor-pointer" } }, "icons_and_assets": { "icon_library": "lucide-react", "image_urls": { "logo": { "url": "https://images.unsplash.com/photo-1725997490445-167abd95a26d?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODF8MHwxfHNlYXJjaHwxfHxtaXRzdWJpc2hpJTIwbW90b3JzJTIwbG9nbyUyMHdoaXRlJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3ODEyMzA0MjR8MA&ixlib=rb-4.1.0&q=85", "description": "Mitsubishi silver car/logo background", "placement": "Can be used for Auth screen background or generic banner" }, "avatar_1": { "url": "https://images.pexels.com/photos/20157010/pexels-photo-20157010.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", "description": "Professional male avatar", "placement": "Top Service Advisor List" }, "avatar_2": { "url": "https://images.pexels.com/photos/6146051/pexels-photo-6146051.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", "description": "Professional male avatar 2", "placement": "Top Service Advisor List" } } }, "testing_attributes": { "rules": [ "All interactive elements MUST include data-testid.", "Use kebab-case, role-based naming (e.g., data-testid='sidebar-nav-harian-bengkel').", "Include data-testid on KPI cards, chart containers, and table rows." ] }, "instructions_to_main_agent": [ "Install required fonts: Outfit and IBM Plex Sans from Google Fonts.", "Set up Tailwind config with the specified colors (primary: #E60012).", "Implement the Layout with a persistent left Sidebar and a top Header.", "Create 9 Dashboard views as specified in the problem statement.", "Use Recharts for all graphs (7 days trend, month-to-date, revenue breakdown).", "Implement multi-role login UI (Admin, SA, Manager) with dummy JWT flow.", "Add 'Reset Data' button and 'Upload Data' drag-and-drop zone using the defined form styles.", "Build the Morning Meeting dashboard to emphasize yesterday's summary and today's targets.", "Create Target Bulanan Settings view to manage KPI goals.", "Make sure all components are .js (React) and use Shadcn UI customized to the Mitsubishi corporate theme.", "Ensure 'data-testid' is present on all key elements for testing." ] }