{ "theme": "Calm & Organic (Archetype 1: Trust, Growth, Calm)", "typography": { "heading_font": "EB Garamond", "body_font": "Figtree", "hierarchy": { "h1": "text-4xl sm:text-5xl lg:text-6xl tracking-tight font-medium", "h2": "text-2xl sm:text-3xl lg:text-4xl tracking-tight font-medium", "h3": "text-xl sm:text-2xl tracking-tight font-medium", "h4": "text-lg sm:text-xl tracking-tight", "body": "text-base leading-relaxed", "small_label": "text-sm uppercase tracking-[0.2em] font-semibold" }, "notes": "Use 'EB Garamond' for elegant, sophisticated headings that evoke long-term memory and human connection. Use 'Figtree' for clean, readable chat and UI text. NEVER use 'Inter' for headings." }, "colors": { "light_mode": { "--background": "42 33% 96%", "--foreground": "146 6% 18%", "--card": "40 33% 98%", "--card-foreground": "146 6% 18%", "--popover": "40 33% 98%", "--popover-foreground": "146 6% 18%", "--primary": "14 65% 57%", "--primary-foreground": "0 0% 100%", "--secondary": "106 13% 51%", "--secondary-foreground": "0 0% 100%", "--muted": "40 21% 91%", "--muted-foreground": "146 3% 46%", "--accent": "40 21% 91%", "--accent-foreground": "146 6% 18%", "--destructive": "0 84% 60%", "--destructive-foreground": "0 0% 100%", "--border": "36 21% 89%", "--input": "36 21% 89%", "--ring": "14 65% 57%", "--radius": "0.75rem" }, "dark_mode": { "--background": "150 4% 9%", "--foreground": "42 33% 96%", "--card": "150 4% 11%", "--card-foreground": "42 33% 96%", "--popover": "150 4% 11%", "--popover-foreground": "42 33% 96%", "--primary": "106 13% 67%", "--primary-foreground": "150 4% 9%", "--secondary": "14 65% 57%", "--secondary-foreground": "0 0% 100%", "--muted": "150 4% 14%", "--muted-foreground": "146 3% 62%", "--accent": "150 4% 14%", "--accent-foreground": "42 33% 96%", "--destructive": "0 62% 30%", "--destructive-foreground": "0 0% 100%", "--border": "150 4% 17%", "--input": "150 4% 17%", "--ring": "106 13% 67%" }, "notes": "Light mode: Warm sand background with dark olive text, terracotta primary, sage secondary. Dark mode: Deep forest base with soft sand text and pale sage primary. Never use pure black or generic 'SaaS blue'. Do NOT use #1B93A4 or #7351B7." }, "visual_enhancers": { "surfaces": { "sticky_headers": "Glassmorphism: backdrop-blur-xl bg-background/70 with 1px delicate inner border (border-border). NEVER fully transparent.", "dashboard_cards": "Clay & Crisp: Flat background, 1px subtle border, no heavy drop shadow by default.", "chat_bubbles": "Soft rounded blocks. Avoid 'iOS tails'. Distinct subtle background colors for companion vs user." }, "spacing": "Generous. Use p-6, p-8, p-12. Containers with borders MUST have internal padding. For chat, use generous spacing between messages to create a calm reading experience.", "radius": "Subtle roundness, max 12px (rounded-xl) to 16px (rounded-2xl) to feel friendly but structured." }, "layouts": { "dashboard": "MODE B (High Density Grid): grid-cols-1 md:grid-cols-3 lg:grid-cols-4 with gap-6. Clear data/status visualization for multiple companions.", "chat_interface": "Clean conversation column (max-w-3xl) centered. Sticky input bar with obvious send affordance and multi-line growth. Distinct visual treatment for user vs companion.", "memory_panel": "Dense grid/list for reviewing, editing, deleting long-term memories. Clear transparency and control over what the AI remembers." }, "components_instructions": { "forms_and_inputs": "Use Shadcn 'Input', 'Select', 'Form', 'Checkbox'. NEVER use native or ." }, "motion": { "general": "Minimalist. Use micro-interactions for feedback. Avoid 'transition: all'. Use explicit 'transition-transform 0.2s ease, opacity 0.2s ease'.", "hover_states": "ALWAYS explicitly set text color on hover. Focus states must have higher contrast.", "chat": "Staggered entrance animations for chat messages to feel organic." }, "accessibility": { "contrast": "Ensure text meets APCA standards. Normal text min 4.5:1. Never rely on inheritance for hover states.", "data_testid": "CRITICAL: All interactive and key informational elements MUST include a 'data-testid' attribute (kebab-case, role-based).", "focus": "Ensure focus rings are visible (focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none)." }, "media": { "icons": "lucide-react (already installed). Keep icons soft and consistent.", "images": [ { "category": "Avatar - Friendly Male", "url": "https://images.pexels.com/photos/38670596/pexels-photo-38670596.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", "description": "Warm, approachable man in beige sweater. Use for sample companion." }, { "category": "Avatar - Friendly Female", "url": "https://images.pexels.com/photos/8727581/pexels-photo-8727581.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", "description": "Gentle, smiling senior woman. Use for therapeutic-adjacent companion persona." }, { "category": "Background - Calm Abstract", "url": "https://images.pexels.com/photos/7135004/pexels-photo-7135004.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", "description": "Soft, colorful abstract gradient for subtle auth page backgrounds or companion banners." } ] }, "UNIVERSAL_GUIDELINES_FOR_MAIN_AGENT": [ "Prioritize using pre-existing components from src/components/ui.", "Create depth through layered design elements, NOT basic gradients.", "NEVER center-align the main App container (.App { text-align: center; } is banned). Left-align content for natural reading flow.", "NEVER use placeholder URLs (via.placeholder.com). Use the provided real image URLs.", "Use 2-3x more spacing than feels comfortable. Cramped designs look cheap.", "Do not use generic AI emojis (🤖🧠💡) for icons. Use lucide-react.", "Apply explicitly defined transitions. NEVER use 'transition: all'.", "Ensure 'data-testid' is on all buttons, links, inputs, and major state elements.", "Use 'sonner' (src/components/ui/sonner.tsx) for all toasts." ] }