Hook konten

Action: view_file({"path":"/app/design_guidelines.json"}) Observation: [Showing lines 1-129 of 129 total] /app/design_guidelines.json: 1|{ 2| "project_name": "KacangKu Business Management Dashboard", 3| "theme": "Light", 4| "emotional_tone": "Warm, earthy, grounded, professional, high-efficiency", 5| "typography": { 6| "fonts": { 7| "heading": "Manrope", 8| "body": "IBM Plex Sans" 9| }, 10| "hierarchy": { 11| "h1": "text-3xl sm:text-4xl font-extrabold tracking-tight text-stone-900", 12| "h2": "text-2xl sm:text-3xl font-bold tracking-tight text-stone-800", 13| "h3": "text-xl sm:text-2xl font-semibold text-stone-800", 14| "h4": "text-lg sm:text-xl font-medium text-stone-800", 15| "body": "text-sm sm:text-base text-stone-600 leading-relaxed", 16| "small_label": "text-xs font-semibold uppercase tracking-[0.2em] text-stone-500" 17| }, 18| "rules": [ 19| "Never use Inter for headings.", 20| "Apply tight letter spacing (tracking-tight) to all headings above 32px.", 21| "Use uppercase with wide tracking for overlines and small labels.", 22| "Prioritize legibility for high-volume data entry." 23| ] 24| }, 25| "colors": { 26| "palette": { 27| "background": "#FAFAF9", 28| "surface": "#FFFFFF", 29| "primary": "#9A3412", 30| "primary_hover": "#7C2D12", 31| "success_cash": "#4D7C0F", 32| "warning_piutang": "#D97706", 33| "text_primary": "#1C1917", 34| "text_secondary": "#57534E", 35| "border": "#E7E5E4", 36| "sidebar_bg": "#F5F5F4", 37| "sidebar_active": "#E7E5E4" 38| }, 39| "rules": [ 40| "Do not use default generic blue. The primary color is a warm peanut/terracotta (#9A3412).", 41| "Cash transactions must use the success_cash color (Sage Green).", 42| "Receivables (Piutang) must use the warning_piutang color (Ochre/Amber) to alert pending payments.", 43| "Ensure all text meets APCA/WCAG contrast ratios.", 44| "Never use pure black or pure white without purpose; use tinted greys (Stone scale in Tailwind)." 45| ] 46| }, 47| "layouts": { 48| "style": "High Density Dashboard", 49| "sidebar": "Fixed left sidebar with navigation links. Earthy light gray background (bg-stone-100).", 50| "main_content": "Responsive grid layout. Left-aligned content, high use of white space within widgets.", 51| "grid_strategy": { 52| "base": "grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6", 53| "summary_cards": "col-span-1", 54| "main_charts_tables": "col-span-1 md:col-span-2 lg:col-span-3" 55| }, 56| "spacing": "Generous internal padding for containers (p-6 or p-8) but tight grid gaps (gap-4 or gap-6) for density." 57| }, 58| "surfaces_and_components": { 59| "cards": "Flat solid white (bg-white), max 8px border-radius (rounded-lg). 1px subtle border (border-stone-200), NO default shadow. Add shadow-sm and border-stone-300 on hover for interactive cards.", 60| "buttons": "Pill-shaped or rounded-md. Primary buttons use the terracotta color (bg-[#9A3412] hover:bg-[#7C2D12] text-white).", 61| "forms": "High efficiency required for 100 entries/day. Use Shadcn Input, Select, Checkbox. Left-aligned labels. Support clear keyboard navigation.", 62| "tables": "Dense rows for quick scanning. Clear status badges for 'Cash' vs 'Piutang'. Highlight outstanding balances.", 63| "badges": "Rounded-full px-2.5 py-0.5 text-xs font-semibold. Cash: bg-lime-100 text-lime-800. Piutang: bg-amber-100 text-amber-800.", 64| "rules": [ 65| "Use Shadcn components but strip overly 'Vercel' looks by applying our Stone/Orange palette.", 66| "No complete transparent backgrounds for overlays, headers, or dropdowns. Always use solid or heavy blur.", 67| "Do not overuse shadows; rely on 1px borders for structural hierarchy." 68| ] 69| }, 70| "motion": { 71| "hover_states": "Buttons and links must explicitly shift background and text color.", 72| "transitions": "transition-colors duration-200 ease-in-out, transition-transform duration-200 ease-in-out.", 73| "rules": [ 74| "Do not use 'transition: all'. Apply to specific properties.", 75| "Subtle '-translate-y-1' on dashboard cards when hovered." 76| ] 77| }, 78| "icons": { 79| "library": "lucide-react", 80| "style": "Crisp, line-art, matching the text_secondary color unless active/highlighted." 81| }, 82| "media": { 83| "image_urls": { 84| "auth_banner_or_empty_state": { 85| "url": "https://images.unsplash.com/photo-1575399872095-9363bf262e64?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2OTF8MHwxfHNlYXJjaHwyfHxwZWFudXRzJTIwcmF3fGVufDB8fHx8MTc4Njg0NTA2MXww&ixlib=rb-4.1.0&q=85", 86| "description": "Bunch of brown peanuts on a rustic wooden table. Use this as a subtle background banner for the dashboard header or login/welcome screen if needed." 87| } 88| }, 89| "rules": [ 90| "Keep imagery minimal. This is a functional data-entry tool.", 91| "If using the peanut image, ensure an overlay (e.g., bg-stone-900/40) is applied so text remains readable." 92| ] 93| }, 94| "accessibility_and_testing": { 95| "testing": "All interactive and key informational elements MUST include a 'data-testid' attribute (e.g., data-testid='submit-purchase-btn', data-testid='outlet-row-1').", 96| "contrast": "Ensure text contrast on buttons and badges. Focus states must have a highly visible ring (focus-visible:ring-2 focus-visible:ring-[#9A3412])." 97| }, 98| "features_to_implement": { 99| "dashboard": "Overview metrics (Total Pembelian, Total Penjualan, Total Piutang, Kas Hari Ini).", 100| "pembelian": "Form to record peanut purchases (Tanggal, Supplier, Qty, Harga). Table of history.", 101| "penjualan": "High-volume form for daily sales to outlets. Must select Outlet, enter Qty/Price, and select Cash or Piutang.", 102| "outlet_management": "CRUD for 700 outlets. Track outstanding 'Piutang' per outlet.", 103| "piutang_tracking": "List of outstanding debts per outlet. Form to record installment payments (cicilan).", 104| "laporan": "Date filters (Daily, Weekly, Monthly), summaries, and export capabilities (CSV/PDF simulation/print)." 105| }, 106| "instructions_to_main_agent": [ 107| "Prioritize building the Dashboard, Pembelian, Penjualan, and Piutang views using React Router.", 108| "Use Shadcn UI for structured components (Tables, Dialogs, Selects, Forms, Calendars for date selection).", 109| "Implement Sonner for toast notifications on successful data entry.", 110| "Mock data heavily to simulate 700 outlets and daily transactions to make the UI look alive.", 111| "Build a custom 'Installment Payment' dialog for the Piutang section.", 112| "Apply the earth-tone palette strictly (Stone neutral base + Terracotta primary + Sage/Amber status).", 113| "For 'Laporan' (Reports), implement a simple table with a 'Print' button (window.print()) as MVP functionality.", 114| "Ensure the layout is highly optimized for fast data entry (100 outlets/day). Minimize clicks in the Penjualan form." 115| ], 116| "UNIVERSAL_GUIDELINES_FOR_MAIN_AGENT": [ 117| "You tend to converge toward generic outputs. Avoid this by strictly following the typography and earth-tone palette provided.", 118| "DO NOT use dark colors as gradients.", 119| "Create depth through layered design elements with z-index hierarchy and subtle borders.", 120| "You MUST NOT apply universal transition. Eg: `transition: all`.", 121| "You MUST NOT center align the app container. Do not add `.App { text-align: center; }`.", 122| "Always use modern button styles (rounded-md) with interaction animations.", 123| "NEVER use AI assistant Emoji characters like 🤖🧠💭💡🔮🎯 etc for icons. Use lucide-react.", 124| "Every interaction needs micro-animations - hover states, and transitions.", 125| "Use generous spacing inside cards, but keep dashboard grids dense.", 126| "Prioritize using pre-existing components from src/components/ui when applicable.", 127| "Use sonner for toasts, located in /app/src/components/ui/sonner.tsx." 128| ] 129|} [End of file]