design_guidelines.json

{
  "project_name": "ŞEFTALİ - B2B Dairy Distribution",
  "design_philosophy": {
    "core_identity": "Operational Zen",
    "vibe": "The Performance Pro meets Organic Warmth. A tool that feels like a well-oiled machine but smells like fresh peaches.",
    "principles": [
      "Delivery is Truth: The UI must prioritize verified data (invoices) over theoretical data (orders).",
      "Density with Breath: High information density for power users, but with generous padding inside containers to prevent visual fatigue.",
      "Dark Mode First: Designed for low-light environments (trucks, back offices).",
      "Peach Accents: Use the brand color strictly for primary actions and active states. Never for backgrounds."
    ]
  },
  "typography": {
    "font_family": {
      "headings": "Manrope, sans-serif",
      "body": "Inter, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "import_instructions": "Add @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;700;800&display=swap'); to index.css",
    "usage_rules": {
      "headings": "Use Manrope for all h1-h4. Tracking-tight (-0.02em). Font-weight 700 or 800.",
      "body": "Use Inter for all paragraphs and data tables. Tracking-normal.",
      "numbers": "Use tabular-nums class for all financial and stock data to ensure alignment."
    }
  },
  "colors": {
    "palette": {
      "primary": {
        "name": "Peach Fuzz",
        "hex": "#FF7F50",
        "tailwind": "bg-orange-500",
        "usage": "Primary buttons, active tabs, progress bars."
      },
      "background": {
        "name": "Obsidian Tint",
        "hex": "#0f1115",
        "tailwind": "bg-slate-950",
        "usage": "Global background."
      },
      "surface": {
        "name": "Gunmetal",
        "hex": "#161920",
        "tailwind": "bg-slate-900",
        "usage": "Cards, sidebars, modals."
      },
      "success": {
        "name": "Sage",
        "hex": "#4ADE80",
        "tailwind": "text-green-400",
        "usage": "Stock OK, Order Delivered."
      },
      "warning": {
        "name": "Amber",
        "hex": "#FBBF24",
        "tailwind": "text-amber-400",
        "usage": "Low Stock, SKT Risk."
      },
      "danger": {
        "name": "Burnt",
        "hex": "#EF4444",
        "tailwind": "text-red-500",
        "usage": "Out of Stock, Critical Error."
      }
    },
    "theme_config": {
      "mode": "dark",
      "css_variables": {
        "--background": "222 47% 11%",
        "--foreground": "210 40% 98%",
        "--card": "222 47% 11%",
        "--card-foreground": "210 40% 98%",
        "--popover": "222 47% 11%",
        "--popover-foreground": "210 40% 98%",
        "--primary": "16 100% 66%",
        "--primary-foreground": "222 47% 11%",
        "--secondary": "217 33% 17%",
        "--secondary-foreground": "210 40% 98%",
        "--muted": "217 33% 17%",
        "--muted-foreground": "215 20% 65%",
        "--accent": "217 33% 17%",
        "--accent-foreground": "210 40% 98%",
        "--destructive": "0 63% 31%",
        "--destructive-foreground": "210 40% 98%",
        "--border": "217 33% 17%",
        "--input": "217 33% 17%",
        "--ring": "16 100% 66%"
      }
    }
  },
  "layout": {
    "grid_system": {
      "dashboard": "Bento Grid (Mode B). Grid-cols-1 md:grid-cols-3 lg:grid-cols-4. Gap-4.",
      "detail_view": "Sidebar-Content layout. Left sidebar (w-64) for navigation/filters, Right content (flex-1) for data."
    },
    "spacing": {
      "container_padding": "p-4 md:p-6 lg:p-8",
      "element_gap": "gap-4",
      "section_gap": "gap-8"
    },
    "containers": {
      "card_style": "Rounded-xl border border-white/5 bg-card/50 backdrop-blur-sm (if on top of something) or solid bg-card.",
      "glass_header": "bg-background/80 backdrop-blur-md border-b border-white/5 sticky top-0 z-50"
    }
  },
  "components": {
    "buttons": {
      "primary": "bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_0_15px_rgba(255,127,80,0.3)] transition-all duration-300 rounded-lg font-bold tracking-wide",
      "secondary": "bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-lg font-medium",
      "ghost": "hover:bg-accent hover:text-accent-foreground rounded-lg"
    },
    "inputs": {
      "style": "bg-secondary/50 border-transparent focus:border-primary focus:ring-1 focus:ring-primary rounded-lg h-10 transition-all"
    },
    "tables": {
      "style": "w-full caption-bottom text-sm",
      "header": "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
      "row": "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
    },
    "status_badges": {
      "style": "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
      "variants": {
        "success": "border-transparent bg-green-500/15 text-green-500 hover:bg-green-500/25",
        "warning": "border-transparent bg-amber-500/15 text-amber-500 hover:bg-amber-500/25",
        "error": "border-transparent bg-red-500/15 text-red-500 hover:bg-red-500/25",
        "neutral": "border-transparent bg-slate-500/15 text-slate-400 hover:bg-slate-500/25"
      }
    }
  },
  "visual_enhancers": {
    "gradients": "Use subtle radial gradients in the background to highlight active areas. Example: 'bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-orange-900/20 via-background to-background'",
    "borders": "1px solid border-white/10. Avoid thick borders.",
    "shadows": "None for cards in dark mode. Use 'shadow-lg' only for floating elements (dropdowns, modals)."
  },
  "motion": {
    "transitions": "transition-all duration-200 ease-in-out",
    "hover_effects": "Slight lift (-translate-y-0.5) for interactive cards.",
    "loading": "Use skeleton loaders (animate-pulse) matching the layout structure, not spinners."
  },
  "accessibility": {
    "contrast": "Ensure text is #EDEDED (gray-100) or #E2E8F0 (gray-200) on dark backgrounds. Avoid dark gray text.",
    "focus_states": "Visible ring-2 ring-primary ring-offset-2 ring-offset-background.",
    "aria": "All interactive elements must have aria-labels if no text is present."
  },
  "icons": {
    "library": "lucide-react",
    "style": "Stroke width 1.5px or 2px. Size 16px (sm) to 24px (lg).",
    "color": "Text-muted-foreground by default, text-primary on active."
  },
  "charts": {
    "library": "recharts",
    "palette": ["#FF7F50", "#4ADE80", "#FBBF24", "#60A5FA", "#A78BFA"],
    "style": "Minimalist. Remove grid lines if possible. Use tooltips for details."
  },
  "universal_guidelines": [
    "Do not use gradients for text.",
    "Do not center align the app container.",
    "Use 'sonner' for toasts.",
    "All interactive elements MUST include data-testid attribute.",
    "Use named exports for components, default exports for pages.",
    "Microcopy must be in Turkish."
  ],
  "instructions_to_main_agent": "1. Update index.css with the provided CSS variables for the Peach Dark Theme. 2. Install 'Manrope' font. 3. Create a 'Layout' component that enforces the sidebar/content structure. 4. Build the 'Order Draft' view using the Bento Grid principles."
}