skills/stitch-design/examples/DESIGN.md

# The "Solace" Design System This is a comprehensive design language for a mindfulness and wellness application. ## 🎨 Color Palette - Primary: Deep Ocean Blue (#1a365d) - for critical navigation and CTAs. - Secondary: Calm Slate (#718096) - for subtexts and secondary buttons. - Background: Soft Mist (#f7fafc) - for main page content. - Accent: Serene Emerald (#38a169) - for positive feedback and completion states. ## 🔡 Typography - Heading: Montserrat, Bold - for titles and hero section headlines. - Body: Inter, Regular - for descriptions and general content. - Size: 16px as base, 48px for H1. ## 📐 Components - Buttons: Rounded (12px), subtle hover shadow (4px blur). - Cards: Minimal border (1px, #e2e8f0), soft shadow (8px elevation). - Navigation: Clean, top-aligned, centered menu items.

💡 Tip: When calling generate_screen_from_text, include the tokens above to ensure the new screen matches this design system.