{
  "theme_archetype": "Archetype 4: Swiss & High-Contrast (Light Theme)",
  "design_philosophy": {
    "core_principles": [
      "Clarity over complexity: Non-technical SME owners need absolute certainty when spending ad money.",
      "Swiss Grid Discipline: Use strong structural grids and 1px borders to organize dense data.",
      "High Contrast: 95% of UI is monochrome (Stark White & Deep Tinted Grey) to let metrics and content pop.",
      "Trust & Authority: Avoid playful SaaS blobs; use stark, architectural design to project competence."
    ],
    "mood": "Authoritative, modern, clean, trustworthy."
  },
  "colors": {
    "background": {
      "page": "#FFFFFF",
      "surface": "#F7F7F8",
      "surface_elevated": "#FFFFFF"
    },
    "text": {
      "primary": "#0A0B0E",
      "secondary": "#5C6068",
      "muted": "#8A8F98",
      "inverse": "#FFFFFF"
    },
    "brand": {
      "primary": "#002FA7",
      "primary_hover": "#002480",
      "secondary": "#FF3B30",
      "accent": "#FFD600"
    },
    "borders": {
      "default": "#E5E7EB",
      "strong": "#0A0B0E"
    },
    "status": {
      "success": "#008A27",
      "warning": "#FFD600",
      "error": "#FF3B30",
      "info": "#002FA7"
    }
  },
  "typography": {
    "fonts": {
      "headings": "Cabinet Grotesk, sans-serif",
      "body": "Satoshi, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "scale": {
      "h1": "text-5xl md:text-6xl tracking-tighter leading-none font-black",
      "h2": "text-3xl md:text-4xl tracking-tight leading-tight font-bold",
      "h3": "text-xl md:text-2xl tracking-tight leading-snug font-bold",
      "h4": "text-lg font-bold tracking-tight",
      "body": "text-base leading-relaxed text-secondary",
      "body_small": "text-sm leading-normal text-muted",
      "overline": "text-xs font-bold uppercase tracking-[0.2em] text-primary"
    }
  },
  "layout_spacing": {
    "generous_spacing": "Use p-8, p-12, py-24 for marketing sections. Ensure content breathes.",
    "container_paddings": "Containers with borders must use p-6 or p-8 internally.",
    "grid_modes": {
      "marketing_bento": "grid-cols-1 md:grid-cols-12 gap-8. Mix col-span-8 and col-span-4 to create tension.",
      "dashboard_control_room": "grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6. Every pixel utilized, no jagged bottoms. h-full on children."
    }
  },
  "surface_strategies": {
    "cards": "Grid Borders: border-collapse style. 1px solid border (#E5E7EB), flat background, no soft shadows. Sharp and technical.",
    "headers": "Solid background with a 1px hard bottom border. Avoid glassmorphism to keep it structural.",
    "inputs": "Flat backgrounds (#F7F7F8) with 1px dark border on focus (#0A0B0E)."
  },
  "components": {
    "buttons": {
      "primary": "bg-[#002FA7] text-white hover:bg-[#002480] rounded-none px-6 py-3 font-bold transition-colors",
      "secondary": "bg-transparent border border-[#0A0B0E] text-[#0A0B0E] hover:bg-[#0A0B0E] hover:text-white rounded-none px-6 py-3 font-bold transition-colors"
    },
    "forms": "Use Shadcn Form, Input, Select. Customize by removing rounded corners (rounded-none) and using sharp 1px borders.",
    "tables": "Use Shadcn Table. Zebra striping or subtle border-b on rows. Ensure high contrast for data points.",
    "dialogs": "Use Shadcn Dialog. Sharp edges, dim backdrop (bg-black/60).",
    "icons": "Use @phosphor-icons/react (Duotone weight for marketing, Regular/Bold for dashboard)."
  },
  "motion_interactions": {
    "hover": "Hover state must explicitly define text color. Buttons slide color or lift slightly (-translate-y-1).",
    "focus": "focus:ring-2 focus:ring-[#002FA7] focus:outline-none.",
    "page_transitions": "Subtle fade and slide up (using framer-motion)."
  },
  "image_urls": {
    "hero_sme_owners": {
      "url": "https://static.prod-images.emergentagent.com/jobs/b3cc52de-7feb-4a6d-97c5-16df0dec833e/images/53de8738a3af0900d0d08656c7c5397e552690736f90a83dd7ba073893d6420d.png",
      "category": "marketing_hero",
      "description": "High-quality portrait of diverse small business owners in a bright modern studio."
    },
    "icon_megaphone_target": {
      "url": "https://static.prod-images.emergentagent.com/jobs/b3cc52de-7feb-4a6d-97c5-16df0dec833e/images/fdac6aacf13d9bad25a73a1c56329761c16841cf56df8cde735ad5dfcdedc8f8.png",
      "category": "feature_icon",
      "description": "Premium 3D megaphone/target icon in white and Klein Blue."
    },
    "niche_hairdresser": {
      "url": "https://images.unsplash.com/photo-1522123436910-416191f97bfe?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1Nzd8MHwxfHNlYXJjaHwxfHxtZWNoYW5pYyUyMGhhaXJkcmVzc2VyJTIwcmVzdGF1cmFudCUyMHNtYWxsJTIwYnVzaW5lc3N8ZW58MHx8fHwxNzc3OTg1NDM1fDA&ixlib=rb-4.1.0&q=85",
      "category": "niche_grid",
      "description": "Hairdresser/barber shop SME owner."
    },
    "niche_restaurant": {
      "url": "https://images.unsplash.com/photo-1753351052617-62818ffc9173?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1Nzd8MHwxfHNlYXJjaHwyfHxtZWNoYW5pYyUyMGhhaXJkcmVzc2VyJTIwcmVzdGF1cmFudCUyMHNtYWxsJTIwYnVzaW5lc3N8ZW58MHx8fHwxNzc3OTg1NDM1fDA&ixlib=rb-4.1.0&q=85",
      "category": "niche_grid",
      "description": "Restaurant cafe owners standing together proudly."
    },
    "niche_cafe": {
      "url": "https://images.unsplash.com/photo-1753351052363-53ce102830eb?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1Nzd8MHwxfHNlYXJjaHw0fHxtZWNoYW5pYyUyMGhhaXJkcmVzc2VyJTIwcmVzdGF1cmFudCUyMHNtYWxsJTIwYnVzaW5lc3N8ZW58MHx8fHwxNzc3OTg1NDM1fDA&ixlib=rb-4.1.0&q=85",
      "category": "niche_grid",
      "description": "Woman standing in her coffee shop."
    }
  },
  "instructions_to_main_agent": [
    "Use pure HTML + Tailwind for the marketing landing page structure to allow aggressive asymmetry and bento grids.",
    "For the dashboard and authenticated flows, utilize Shadcn components heavily customized (rounded-none, strict 1px borders) to maintain the Swiss Brutalist authoritative aesthetic.",
    "Ensure all interactive elements have 'data-testid' attributes (e.g., data-testid='login-submit-btn').",
    "Install required dependencies: yarn add @phosphor-icons/react framer-motion",
    "Adhere strictly to the APCA contrast requirements. The primary blue (#002FA7) provides excellent contrast against white.",
    "Avoid generic border radii. The platform must feel like an enterprise-grade control panel, not a generic consumer app. Set radius to 0 (rounded-none) globally where possible, or max 2px.",
    "Use the provided image URLs exclusively for the visual content. No placeholders allowed."
  ]
}