remotesupport/app/design_guidelines.json

{
    "identity": {
      "persona": "E1",
      "tone": "Cyber-Professional",
      "archetype": "Jewel & Luxury (Deep Obsidian) + Electric & Neon (Accents)",
      "mission": "Build a high-trust, tech-forward MSP & SaaS landing page that feels like a command center."
    },
    "typography": {
      "headings": {
        "font_family": "Syne, sans-serif",
        "weights": ["700", "800"],
        "usage": "Use for all H1-H3. Tight tracking (-0.02em). Uppercase for labels."
      },
      "body": {
        "font_family": "Manrope, sans-serif",
        "weights": ["400", "500"],
        "usage": "Use for paragraphs, UI text, and buttons. Relaxed leading."
      },
      "installation": "Import from Google Fonts: https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Syne:wght@700;800&display=swap"
    },
    "colors": {
      "palette": {
        "background": "#050505",
        "surface": "#0A0A0A",
        "surface_highlight": "#121212",
        "primary": "#00F0FF",
        "primary_dim": "rgba(0, 240, 255, 0.1)",
        "secondary": "#7000FF",
        "text_main": "#FFFFFF",
        "text_muted": "#94A3B8",
        "border": "#1E293B",
        "border_hover": "#334155"
      },
      "gradients": {
        "hero_glow": "radial-gradient(circle at center, rgba(0, 240, 255, 0.15) 0%, rgba(5, 5, 5, 0) 70%)",
        "card_hover": "linear-gradient(45deg, rgba(0, 240, 255, 0.1), rgba(112, 0, 255, 0.1))"
      }
    },
    "layout": {
      "grid_system": "Bento Grid (Mode A: Tetris)",
      "spacing": {
        "section_padding": "py-24 md:py-32",
        "container_padding": "px-6 md:px-12",
        "element_gap": "gap-8"
      },
      "container_width": "max-w-7xl mx-auto"
    },
    "components": {
      "buttons": {
        "primary": "bg-primary text-black font-bold hover:shadow-[0_0_20px_rgba(0,240,255,0.5)] transition-all duration-300 rounded-none skew-x-[-10deg]",
        "secondary": "border border-white/20 text-white hover:bg-white/10 transition-all duration-300 rounded-none skew-x-[-10deg]"
      },
      "cards": {
        "style": "bg-surface border border-white/5 hover:border-primary/50 transition-colors duration-300",
        "hover_effect": "Add a subtle glow or lift on hover. Use 'group' to animate inner elements."
      },
      "hero": {
        "style": "Full screen height (min-h-screen). Background image with heavy overlay. Text centered or split. Use 'Trace Beam' effect for the main CTA."
      }
    },
    "visual_enhancers": {
      "textures": "Add a subtle noise overlay (opacity 0.03) to the entire body to kill the digital flatness.",
      "borders": "Use 1px borders with very low opacity (white/10) for structure.",
      "shadows": "Use colored shadows (shadow-cyan-500/20) for primary actions."
    },
    "media": {
      "image_urls": {
        "hero_bg": "https://images.pexels.com/photos/17489157/pexels-photo-17489157.jpeg",
        "service_security": "https://images.unsplash.com/photo-1696013910376-c56f76dd8178?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjAzMjV8MHwxfHNlYXJjaHwxfHxjeWJlcnNlY3VyaXR5JTIwZGlnaXRhbCUyMHNoaWVsZCUyMGxvY2slMjBjb25jZXB0fGVufDB8fHx8MTc3MDE4MzQ1Mnww&ixlib=rb-4.1.0&q=85",
        "service_cloud": "https://images.unsplash.com/photo-1744868562210-fffb7fa882d9?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjAzNTl8MHwxfHNlYXJjaHwxfHxjbG91ZCUyMGNvbXB1dGluZyUyMG5ldHdvcmslMjBjb25uZWN0aW9ufGVufDB8fHx8MTc3MDE4MzQ1N3ww&ixlib=rb-4.1.0&q=85",
        "testimonial_1": "https://images.unsplash.com/photo-1689600944138-da3b150d9cb8?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NzZ8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBidXNpbmVzcyUyMHBvcnRyYWl0JTIwaGVhZHNob3R8ZW58MHx8fHwxNzcwMDc5NDA0fDA&ixlib=rb-4.1.0&q=85",
        "testimonial_2": "https://images.unsplash.com/photo-1576558656222-ba66febe3dec?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NzZ8MHwxfHNlYXJjaHwyfHxwcm9mZXNzaW9uYWwlMjBidXNpbmVzcyUyMHBvcnRyYWl0JTIwaGVhZHNob3R8ZW58MHx8fHwxNzcwMDc5NDA0fDA&ixlib=rb-4.1.0&q=85",
        "partner_logo_1": "https://images.unsplash.com/photo-1662057168154-89300791ad6e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzF8MHwxfHNlYXJjaHwxfHx0ZWNoJTIwY29tcGFueSUyMGxvZ28lMjB2ZWN0b3IlMjB3aGl0ZXxlbnwwfHx8fDE3NzAxODM0NjJ8MA&ixlib=rb-4.1.0&q=85",
        "partner_logo_2": "https://images.unsplash.com/photo-1662027044921-6febc57a0c53?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzF8MHwxfHNlYXJjaHwyfHx0ZWNoJTIwY29tcGFueSUyMGxvZ28lMjB2ZWN0b3IlMjB3aGl0ZXxlbnwwfHx8fDE3NzAxODM0NjJ8MA&ixlib=rb-4.1.0&q=85"
      }
    },
    "motion": {
      "library": "framer-motion",
      "guidelines": "Use 'staggerChildren' for lists. Hero text should slide up with a slight blur reveal. Buttons should have a 'magnetic' feel if possible, or at least a solid scale/color shift."
    },
    "accessibility": {
      "contrast": "Ensure all text on dark backgrounds is at least WCAG AA compliant. Use lighter greys (text-gray-300) instead of dark greys.",
      "focus_states": "Visible focus rings in Primary Cyan color."
    },
    "instructions_to_main_agent": [
      "1. Install 'lucide-react' and 'framer-motion' immediately.",
      "2. Create a 'Layout' component that wraps the page and handles the dark mode background and noise texture.",
      "3. Build the Hero section first. It must be impressive. Use the 'Trace Beam' concept for the CTA.",
      "4. For the Services section, use a Bento Grid. Do not just stack cards.",
      "5. Use the provided image URLs. Do not use placeholders.",
      "6. Ensure the 'Contact' form uses Shadcn components but styled to match the dark theme (no white backgrounds).",
      "7. Add 'data-testid' to all interactive elements."
    ],
    "UNIVERSAL_GUIDELINES_FOR_MAIN_AGENT": [
      "Dark colors look good when used independently without gradients. DO NOT use dark colors as gradients",
      "Don't make generic centered layouts, simplistic gradients, and uniform styling.",
      "Create depth through layered design elements with z-index hierarchy",
      "Use glass-morphism effects with backdrop filters (12-24px blur)",
      "You MUST NOT apply universal transition. Eg: transition: all. This results in breaking transforms. Always add transitions for specific interactive elements like button, input excluding transforms",
      "You MUST NOT center align the app container, ie do not add .App { text-align: center; } in the css file. This disrupts the human natural reading flow of text",
      "Always use modern button styles like pill-shaped, or sharp button with interaction animations & color relevant to the app style",
      "NEVER: use AI assistant Emoji characters like 🤖🧠💭💡🔮🎯📚🎭🎬🎪🎉🎊🎁🎀🎂🍰🎈🎨🎰💰💵💳🏦💎🪙💸🤑📊📈📉💹🔢🏆🥇 etc for icons.",
      "Every interaction needs micro-animations - hover states, transitions, parallax effects, and entrance animations. Static = dead.",
      "Use 2-3x more spacing than feels comfortable. Cramped designs look cheap.",
      "Subtle grain textures, noise overlays, custom cursors, selection states, and loading animations: separates good from extraordinary.",
      "Main agent relies on these image URLs. Missing categories (especially sponsor logos) = main agent will use placeholder text which is FORBIDDEN",
      "Prioritize using pre-existing components from src/components/ui when applicable",
      "Create new components that match the style and conventions of existing components when needed",
      "Examine existing components to understand the project's component patterns before creating new ones",
      "Components MUST use named exports (export const ComponentName = ...)",
      "Pages MUST use default exports (export default function PageName() {...})",
      "Use 'sonner' for toasts. Sonner component are located in /app/src/components/ui/sonner.tsx"
    ]
  }