design_guidelines.json

{
  "identity": {
    "name": "White Sky Admin",
    "persona": "E1: The Anti-AI Designer",
    "vibe": "Atmospheric Clarity. Professional, airy, structured, and data-rich.",
    "theme_mode": "light"
  },
  "typography": {
    "fonts": {
      "heading": "Manrope",
      "body": "IBM Plex Sans",
      "mono": "JetBrains Mono"
    },
    "usage": {
      "h1": "text-4xl font-bold tracking-tight text-slate-900 font-heading",
      "h2": "text-2xl font-semibold tracking-tight text-slate-800 font-heading",
      "h3": "text-xl font-medium text-slate-800 font-heading",
      "body": "text-base text-slate-600 font-body leading-relaxed",
      "caption": "text-sm text-slate-500 font-body",
      "label": "text-xs font-bold uppercase tracking-wider text-slate-400 font-mono"
    },
    "installation": "Import fonts via Google Fonts in index.css: @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Manrope:wght@400;600;700;800&family=JetBrains+Mono:wght@400&display=swap');"
  },
  "colors": {
    "palette": {
      "primary": {
        "base": "sky-500",
        "hover": "sky-600",
        "foreground": "white"
      },
      "secondary": {
        "base": "slate-100",
        "hover": "slate-200",
        "foreground": "slate-900"
      },
      "accent": {
        "base": "amber-500",
        "foreground": "white"
      },
      "background": {
        "main": "white",
        "subtle": "slate-50/50"
      },
      "border": "slate-200"
    },
    "semantic": {
      "success": "emerald-500",
      "warning": "amber-500",
      "error": "rose-500",
      "info": "sky-500"
    },
    "rules": [
      "NO GRADIENTS for backgrounds. Use solid colors or subtle noise textures.",
      "Use 'slate' scale for neutrals, never pure gray.",
      "Primary color (Sky Blue) is for ACTIONS only.",
      "Accent color (Amber) is for ALERTS/HIGHLIGHTS only."
    ]
  },
  "layout": {
    "grid_system": {
      "dashboard": "grid grid-cols-1 md:grid-cols-4 gap-6 p-8",
      "marketing": "grid grid-cols-1 md:grid-cols-12 gap-8 p-12"
    },
    "spacing": {
      "container_padding": "p-8 md:p-12",
      "section_gap": "gap-8",
      "item_gap": "gap-4"
    },
    "strategies": [
      "The 'Control Room' Grid: Dense, data-heavy, minimal gaps (gap-4).",
      "Sidebar Navigation: Fixed left, w-64, glassmorphism effect.",
      "Card Layout: 'Grid Borders' style - flat white cards with 1px slate-200 borders."
    ]
  },
  "components": {
    "buttons": {
      "style": "h-10 px-6 rounded-md font-medium transition-all active:scale-95",
      "primary": "bg-sky-500 text-white hover:bg-sky-600 shadow-sm hover:shadow-md",
      "secondary": "bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 hover:border-slate-300",
      "ghost": "hover:bg-slate-100 text-slate-600"
    },
    "cards": {
      "style": "bg-white border border-slate-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
    },
    "inputs": {
      "style": "h-10 rounded-md border-slate-200 bg-white focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 transition-all"
    },
    "charts": {
      "library": "recharts",
      "style": "Clean lines, minimal grid lines. Use palette colors. Tooltips must be styled with Shadcn Card."
    },
    "tables": {
      "style": "w-full text-sm text-left. Header: bg-slate-50 text-slate-500 font-medium. Row: border-b border-slate-100 hover:bg-slate-50/50 transition-colors."
    }
  },
  "visual_enhancers": {
    "glassmorphism": "backdrop-blur-md bg-white/80 border-b border-white/20",
    "shadows": "shadow-[0_2px_8px_rgba(15,23,42,0.04)]",
    "borders": "border border-slate-200",
    "radius": "rounded-lg"
  },
  "assets": {
    "images": {
      "login_hero": "https://images.unsplash.com/photo-1758691737158-18ffa31c0a46?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2Mzl8MHwxfHNlYXJjaHwxfHxkaXZlcnNlJTIwcHJvZmVzc2lvbmFsJTIwYnVzaW5lc3MlMjB0ZWFtJTIwbWVldGluZ3xlbnwwfHx8fDE3NjY1MDQ0MzR8MA&ixlib=rb-4.1.0&q=85",
      "team_meeting": "https://images.unsplash.com/photo-1758691736975-9f7f643d178e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2Mzl8MHwxfHNlYXJjaHwyfHxkaXZlcnNlJTIwcHJvZmVzc2lvbmFsJTIwYnVzaW5lc3MlMjB0ZWFtJTIwbWVldGluZ3xlbnwwfHx8fDE3NjY1MDQ0MzR8MA&ixlib=rb-4.1.0&q=85",
      "logo_placeholder": "https://images.pexels.com/photos/15863044/pexels-photo-15863044.jpeg"
    },
    "icons": "lucide-react"
  },
  "instructions_to_main_agent": [
    "IMPLEMENTATION: Use 'Manrope' for all headings and 'IBM Plex Sans' for body text.",
    "THEME: Force LIGHT MODE. Do not implement dark mode toggles unless requested.",
    "LAYOUT: Use the 'Control Room' grid for the dashboard. Dense, information-rich.",
    "COMPONENTS: Customize Shadcn components to match the 'White Sky' aesthetic (Airy, Blue, Clean).",
    "CHARTS: Use Recharts. Style them to be minimal. No heavy grid lines.",
    "TESTING: Add data-testid to all interactive elements."
  ],
  "universal_guidelines": [
    "Avoid 'AI Slop' - no generic gradients, no centered text blocks.",
    "Use 2-3x more padding than standard.",
    "Micro-interactions on everything (hover, focus, active).",
    "Use 'sonner' for toasts."
  ]
}