Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Expert UI design skill for Stitch MCP: enhances prompts, generates high-fidelity screens, and maintains design system consistency.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
examples/DESIGN.md
1---2# The "Solace" Design System3This is a comprehensive design language for a mindfulness and wellness application.45## ๐จ Color Palette6- **Primary**: Deep Ocean Blue (#1a365d) - for critical navigation and CTAs.7- **Secondary**: Calm Slate (#718096) - for subtexts and secondary buttons.8- **Background**: Soft Mist (#f7fafc) - for main page content.9- **Accent**: Serene Emerald (#38a169) - for positive feedback and completion states.1011## ๐ก Typography12- **Heading**: Montserrat, Bold - for titles and hero section headlines.13- **Body**: Inter, Regular - for descriptions and general content.14- **Size**: 16px as base, 48px for H1.1516## ๐ Components17- **Buttons**: Rounded (12px), subtle hover shadow (4px blur).18- **Cards**: Minimal border (1px, #e2e8f0), soft shadow (8px elevation).19- **Navigation**: Clean, top-aligned, centered menu items.2021---22๐ก **Tip**: When calling `generate_screen_from_text`, include the tokens above to ensure the new screen matches this design system.23