{
  "project_name": "5to sueño",
  "app_type": "hybrid_fullstack",
  "theme_and_archetype": {
    "theme": "dark",
    "archetype": "Archetype 4 (Swiss & High-Contrast) + High Energy Accents",
    "vibe": "Cyber-luxury meets editorial minimalism. Deep matte blacks, neon energy signals, extreme structural clarity. Zero purple/violet AI slop."
  },
  "color_palette": {
    "background": {
      "default": "#050505",
      "surface": "#111111",
      "surface_elevated": "#1A1A1A"
    },
    "border": {
      "default": "#222222",
      "focus": "#00E599"
    },
    "text": {
      "primary": "#FFFFFF",
      "secondary": "#A1A1AA",
      "muted": "#52525B",
      "inverse": "#000000"
    },
    "brand_and_accents": {
      "primary": "#00E599",
      "secondary": "#007AFF",
      "accent_coral": "#FF4D4D"
    },
    "semantic": {
      "success": "#00E599",
      "warning": "#FFB800",
      "error": "#FF4D4D",
      "info": "#007AFF"
    }
  },
  "typography": {
    "font_families": {
      "heading": "Clash Display, sans-serif",
      "body": "Manrope, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "hierarchy_rules": {
      "h1": "text-5xl sm:text-6xl tracking-tighter font-semibold leading-none",
      "h2": "text-3xl sm:text-4xl tracking-tight font-semibold leading-tight",
      "h3": "text-2xl tracking-tight font-medium",
      "body": "text-base leading-relaxed text-[#A1A1AA]",
      "overline_labels": "text-xs tracking-[0.2em] uppercase font-mono text-[#00E599]"
    }
  },
  "layout_and_spacing": {
    "marketing_page": {
      "spacing": "Generous: p-8, py-24, py-32. Use wide gap-12 to gap-16.",
      "hero_structure": "Asymmetric layout (Mode A). Large display text spanning 8 columns on the left, high-energy 3D visual or glowing abstract geometric asset on the right. Avoid centered text blocks.",
      "services_grid": "Bento Grid pattern. 1-8-12 columns. Mix square, tall, and wide cards. Use negative space.",
      "alignment": "Strictly left-aligned text for readability, using the Swiss Grid style."
    },
    "saas_portals": {
      "spacing": "Dense: p-4, p-6, gap-4, gap-6 for high information density.",
      "navigation": "Collapsible left sidebar (Dark surface #111111, subtle right border #222222) + top utility bar (Breadcrumbs, User Profile, Search).",
      "kanban_board": "Horizontal scrollable flex container for lanes. Vertical flex for cards inside lanes. Zero margin collapse.",
      "client_pipeline": "Horizontal stepped progress bar (Pipeline visualizer) occupying top of dashboard, combined with a direct PM chat widget."
    }
  },
  "component_patterns": {
    "surfaces": {
      "marketing_cards": "Flat background (#111111), 1px solid border (#222222). On hover, border transitions to #00E599 with subtle drop-shadow-[0_0_15px_rgba(0,229,153,0.15)].",
      "saas_cards": "Minimalist. No heavy shadows. Background #111111, border #222222, radius 8px (rounded-lg).",
      "sticky_headers": "Crystal Glassmorphism: bg-black/60, backdrop-blur-xl, border-b border-white/10."
    },
    "buttons": {
      "primary": "bg-[#00E599] text-black font-semibold hover:bg-[#00C483] transition-colors rounded-none or rounded-sm",
      "secondary": "bg-transparent border border-[#333333] text-white hover:border-[#00E599] hover:text-[#00E599] transition-colors",
      "disruptive_cta": "Massive oversized button with a glowing 'Tracing Beam' border effect using Framer Motion."
    },
    "inputs_and_forms": {
      "style": "bg-[#0A0A0B] border border-[#222222] text-white focus:border-[#00E599] focus:ring-1 focus:ring-[#00E599] rounded-md transition-all"
    },
    "kanban_cards": {
      "style": "bg-[#161618] border border-[#27272A] rounded-md p-3 hover:border-[#52525B] cursor-grab active:cursor-grabbing. Includes priority dot (Coral/Blue) and assignee avatar."
    },
    "chat_interface": {
      "layout": "Two-pane view. Left pane: Channels/DMs list. Right pane: Conversation history and input.",
      "bubbles": "Client/PM messages: bg-[#1A1A1A] border border-[#333]. Own messages: bg-[#007AFF]/20 border border-[#007AFF]/50 text-white."
    }
  },
  "motion_guidelines": {
    "marketing": "Smooth momentum scrolling (Lenis). Staggered fade-up entrances for text. Subtle floating animation for 3D hero assets.",
    "saas": "Instant snappy interactions. Use layout animations (Framer Motion) for Kanban drag-and-drop to avoid jarring snaps. Micro-interactions on buttons (scale 0.98 on tap)."
  },
  "media": {
    "hero_background": {
      "url": "https://static.prod-images.emergentagent.com/jobs/14dd1992-09b1-49de-a802-9219402d0834/images/7aa69a5e807262342b15ab724d89f87dd52c93a7b55b9ffb8d399c5b3853eb53.png",
      "description": "Abstract 3D composition with glowing neon green geometric shapes over deep charcoal. Use as right-side visual in the hero or layered background with max opacity 40%."
    },
    "portfolio_mockups": [
      {
        "url": "https://static.prod-images.emergentagent.com/jobs/14dd1992-09b1-49de-a802-9219402d0834/images/78209989a7ca6e4ab6f23a68a63010959c0cad76d13df5ecd8e260cbf8c20c22.png",
        "description": "Sleek dark mode dashboard mockup with coral accents. Use in 'Services' or 'Portfolio' section."
      },
      {
        "url": "https://static.prod-images.emergentagent.com/jobs/14dd1992-09b1-49de-a802-9219402d0834/images/fcf5041ec937bcd777a53e04358af2cdb9cb940a04f4c56b8687a4132fe179e3.png",
        "description": "Mobile app interface on floating device with electric blue accents. Use in 'Services' for App Development."
      }
    ],
    "team_and_culture": [
      {
        "url": "https://images.unsplash.com/photo-1573164574511-73c773193279?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjA3MDR8MHwxfHNlYXJjaHw0fHxwcm9mZXNzaW9uYWwlMjBkaXZlcnNlJTIwdGVhbSUyMHdvcmtpbmd8ZW58MHx8fHwxNzc5OTc5NzMzfDA&ixlib=rb-4.1.0&q=85",
        "description": "Diverse team collaborating. Use in 'About Us' section with grayscale/dark overlay filter (mix-blend-luminosity) to match the dark theme."
      },
      {
        "url": "https://images.pexels.com/photos/36389508/pexels-photo-36389508.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        "description": "Modern dark tech office with neon lights. Use for 'Contact' page background or internal agency vibe shot."
      }
    ]
  },
  "testing_and_accessibility": {
    "data_testids": "MANDATORY: ALL interactive elements (buttons, inputs, links, kanban cards, chat bubbles, tab triggers) MUST include a kebab-case `data-testid` attribute (e.g., `data-testid=\"hero-cta-button\"`, `data-testid=\"kanban-card-123\"`).",
    "contrast": "Ensure pure white text (#FFFFFF) over #111111 surfaces. Form inputs must have distinct focus rings."
  },
  "instructions_to_main_agent": [
    "You are building a hybrid platform: A stunning Marketing Site for '5to sueño' AND a highly functional 3-layer SaaS portal.",
    "Do not use TypeScript (.tsx), stick to plain JavaScript (.js) for React/Next components based on environment rules.",
    "Strictly follow the color hex codes provided. Do NOT default to Shadcn's standard slate/blue. Map the Tailwind configuration directly to the variables above (e.g., bg-background mapped to #050505).",
    "Use Lucide-React or Phosphor Icons (if installed).",
    "Build the Kanban board with pure React state or a lightweight DND library, ensuring cards use the exact dark-mode styling provided.",
    "For the portals (CMS, Project Management, Client Area), wrap the layout in a persistent Sidebar + Topbar structure.",
    "Always use the provided media URLs. Never use placehold.it or dummyimage.com."
  ]
}