{ "identity": { "persona": "E1", "role": "Creative Designer", "principles": [ "Fusion over Imitation", "Emotion First", "Content is King", "Zoom In", "Negative Space", "Contrast" ] }, "typography": { "headings": { "font_family": "Outfit, sans-serif", "weights": ["400", "600", "800"], "usage": "Use for all H1-H6 headings. Tight tracking for large sizes." }, "body": { "font_family": "Inter, sans-serif", "weights": ["300", "400", "500"], "usage": "Use for paragraphs, inputs, and UI text." }, "mono": { "font_family": "JetBrains Mono, monospace", "usage": "Use for code snippets, technical specs, or decorative labels." } }, "colors": { "palette": { "light": { "background": "#ffffff", "foreground": "#09090b", "card": "#ffffff", "card_foreground": "#09090b", "popover": "#ffffff", "popover_foreground": "#09090b", "primary": "#18181b", "primary_foreground": "#fafafa", "secondary": "#f4f4f5", "secondary_foreground": "#18181b", "muted": "#f4f4f5", "muted_foreground": "#71717a", "accent": "#f4f4f5", "accent_foreground": "#18181b", "destructive": "#ef4444", "destructive_foreground": "#fafafa", "border": "#e4e4e7", "input": "#e4e4e7", "ring": "#18181b" }, "dark": { "background": "#0a0a0a", "foreground": "#fafafa", "card": "#0a0a0a", "card_foreground": "#fafafa", "popover": "#0a0a0a", "popover_foreground": "#fafafa", "primary": "#fafafa", "primary_foreground": "#18181b", "secondary": "#27272a", "secondary_foreground": "#fafafa", "muted": "#27272a", "muted_foreground": "#a1a1aa", "accent": "#27272a", "accent_foreground": "#fafafa", "destructive": "#7f1d1d", "destructive_foreground": "#fafafa", "border": "#27272a", "input": "#27272a", "ring": "#d4d4d8" } }, "brand_accent": { "name": "Electric Blue", "hex": "#2563eb", "usage": "Use sparingly for active states, primary CTAs in dark mode, or decorative glows." } }, "visual_enhancers": { "surface_strategies": [ { "name": "Glassmorphism", "usage": "Sticky Headers, Floating Navs, Toasts", "classes": "bg-background/70 backdrop-blur-xl border-b border-border/40" }, { "name": "Tracing Beam", "usage": "Feature Cards, Hero Sections", "description": "Subtle glowing borders or moving gradients on hover." }, { "name": "Grid Borders", "usage": "Data-heavy sections, Footer", "classes": "border-r border-b border-border/40" } ], "shadows": { "card": "shadow-[0_2px_8px_rgba(0,0,0,0.08)]", "hover": "shadow-[0_8px_30px_rgba(0,0,0,0.12)]", "glow": "drop-shadow-[0_0_15px_rgba(37,99,235,0.5)]" }, "radius": { "default": "rounded-lg", "buttons": "rounded-full", "cards": "rounded-xl" } }, "layout_strategies": { "home_page": { "type": "Bento Grid", "grid_cols": "grid-cols-1 md:grid-cols-12", "gap": "gap-4 md:gap-8", "hero_span": "col-span-full md:col-span-8 row-span-2", "feature_span": "col-span-full md:col-span-4 row-span-1" }, "product_catalog": { "type": "Sidebar Filter + Grid", "sidebar_width": "w-64", "grid_cols": "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" }, "spacing": { "section_padding": "py-16 md:py-24", "container_padding": "px-4 md:px-8" } }, "components": { "buttons": { "primary": "bg-primary text-primary-foreground hover:opacity-90 h-10 px-6 rounded-full transition-transform hover:scale-105 active:scale-95", "secondary": "bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-6 rounded-full", "outline": "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-6 rounded-full" }, "cards": { "product": "group relative overflow-hidden rounded-xl border border-border/50 bg-card hover:border-primary/50 transition-colors", "service": "rounded-xl border border-border bg-card p-6 hover:shadow-lg transition-all" }, "inputs": { "default": "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" } }, "image_urls": { "products": [ { "url": "https://images.unsplash.com/photo-1759588071908-fc10a79714fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODB8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBsYXB0b3AlMjBzbGVlayUyMGRlc2lnbiUyMHdoaXRlJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3NjgwNzYzMjN8MA&ixlib=rb-4.1.0&q=85", "description": "Smartphone resting on laptop - Ecosystem vibe", "category": "hero" }, { "url": "https://images.unsplash.com/photo-1759588071782-b2091e07d737?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODB8MHwxfHNlYXJjaHwzfHxtb2Rlcm4lMjBsYXB0b3AlMjBzbGVlayUyMGRlc2lnbiUyMHdoaXRlJTIwYmFja2dyb3VuZHxlbnwwfHx8fDE3NjgwNzYzMjN8MA&ixlib=rb-4.1.0&q=85", "description": "White smartphone on black laptop - High contrast", "category": "product_detail" }, { "url": "https://images.unsplash.com/photo-1761645337339-9bf0697f3b0c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzV8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBzbWFydHBob25lJTIwcHJvZHVjdCUyMHNob3R8ZW58MHx8fHwxNzY4MDc2MzI2fDA&ixlib=rb-4.1.0&q=85", "description": "Clean smartphone product shot", "category": "catalog_item" }, { "url": "https://images.unsplash.com/photo-1726900303607-2422a57bbbbf?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2NzV8MHwxfHNlYXJjaHwzfHxtb2Rlcm4lMjBzbWFydHBob25lJTIwcHJvZHVjdCUyMHNob3R8ZW58MHx8fHwxNzY4MDc2MzI2fDA&ixlib=rb-4.1.0&q=85", "description": "Black iPhone on wood - Premium feel", "category": "catalog_item" } ], "services": [ { "url": "https://images.unsplash.com/photo-1676630444903-163fe485c5d1?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDF8MHwxfHNlYXJjaHwxfHxlbGVjdHJvbmljcyUyMHJlcGFpciUyMHRlY2huaWNpYW4lMjB3b3JraW5nfGVufDB8fHx8MTc2ODA3NjMyNXww&ixlib=rb-4.1.0&q=85", "description": "Technician working on circuit board", "category": "service_hero" }, { "url": "https://images.unsplash.com/photo-1753964724380-2c5ae02512a8?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDF8MHwxfHNlYXJjaHw0fHxlbGVjdHJvbmljcyUyMHJlcGFpciUyMHRlY2huaWNpYW4lMjB3b3JraW5nfGVufDB8fHx8MTc2ODA3NjMyNXww&ixlib=rb-4.1.0&q=85", "description": "Server repair - High tech service", "category": "service_detail" } ] }, "motion": { "library": "framer-motion", "animations": { "fade_in": { "initial": { "opacity": 0, "y": 20 }, "animate": { "opacity": 1, "y": 0 }, "transition": { "duration": 0.5 } }, "stagger_container": { "hidden": { "opacity": 0 }, "show": { "opacity": 1, "transition": { "staggerChildren": 0.1 } } }, "hover_lift": { "whileHover": { "y": -5 }, "transition": { "type": "spring", "stiffness": 300 } } } }, "accessibility": { "rules": [ "Ensure 4.5:1 contrast ratio for normal text.", "Use semantic HTML (header, main, footer, article, section).", "All images must have alt text.", "Interactive elements must have focus states.", "Respect prefers-reduced-motion." ] }, "instructions_to_main_agent": [ "Use 'lucide-react' for all icons.", "Implement a Theme Toggle in the Navbar.", "Use 'sonner' for toast notifications.", "Ensure the 'Product Catalog' supports filtering by category and price.", "The 'Services' page should have a booking form (use Shadcn Dialog or a dedicated page).", "Use the provided image URLs for specific sections.", "Do not use 'Inter' for headings; import 'Outfit' from Google Fonts.", "Add 'data-testid' to all interactive elements." ], "universal_guidelines": [ "Avoid generic centered layouts.", "Create depth through layered design elements.", "Use glass-morphism effects with backdrop filters.", "Do not apply universal transitions (transition: all).", "Do not center align the app container.", "Every interaction needs micro-animations.", "Use 2-3x more spacing than feels comfortable." ] }