Butterfly Iridescent UI Design System

{"type":"UI/UX design system showcase board","theme":"dark mode, nature-inspired, luminous iridescent aesthetic","language":"Chinese","canvas":{"aspect_ratio":"square poster"," background":"deep midnight navy to black with subtle glow","style":"premium futuristic presentation board with thin neon-blue panel outlines, glossy highlights, soft bloom, and high contrast"},"header":{"title":"Natural Inspiration UI\n{argument name=\"system title\" default=\"Butterfly Iridescent\"}\nUI/UX Design System","description":"{argument name=\"chinese description\" default=\" Drawing inspiration from butterfly wings, the iridescent sheen of structural colors and deep blue are integrated into interface design to create a lightweight, dynamic, and vibrant digital experience. \"}","hero_image":"an oversized, ultra-detailed glowing butterfly wing in electric blue, violet, and iridescent cyan filling the upper-right half, with visible vein structure, translucent edges, spark-like particles, and a second blurred wing behind it"},"layout":{"sections":[{"title":"1. Design Inspiration","position":"Upper Left Below Header","count":4,"labels":["Iridescent butterfly wing macro","blue-purple wing texture close-up","light refraction prism flare","butterfly wing cell pattern"]},{"title":"2. Keywords","position":"upper right below hero","count ":5,"labels":["Iridescent","Lively","Lightness","Depth","Natural"],"icon_style":"Simple glowing line icons inside rounded dark cards"},{"title":"3. Color System","position":"Mid left","Subsections":[{"title":" Main Colors","count":3,"labels":["Big Butterfly Blue #1E5BFF","Iridescent Purple #7A5CFF","Sky Light #00E6FF"]},{"title":"Neutral Colors","count":3,"labels":["Midnight Black #060F19","Soft Navy Blue #141A2E","Pearl White #F3F6FC"]},{"title":"Accent Colors and Gradients",","" count":2,"labels":["Rainbow Glow","Butterfly Radiance"]}],"visual":"circular color swatches and gradient spheres with Chinese labels beneath"},{"title":"4. Typesetting","position":"mid right","count":1," labels":["Aa Poppins Light / Regular / Medium / SemiBold"],"visual":"large white Aa on dark card"},{"title":"5. Apply Icons","position":"Left center","count":1,"text":"{argument name=\"app." name\" default=\"Winglet\"} Lightweight. Lively and dynamic. Elegant. ","visual":"glowing butterfly app icon beside app name"},{"title":"6. UI Components","position":"center","subsections":[{"title":"Button","count":3,"labels":["Main Button","Secondary Button","Glass Texture"]},{" title":"Icon","count":2,"labels":["Heart Collection","Luminous Ring"]},{"title":"Switch","count":1,"labels":["Switch"]}],"visual":"Rounded blue buttons, neon icon buttons, and a glowing toggle on a dark panel"} ,{"title":"Other Elements","position":"Right Center","count":4,"labels":["Search Box","Tag New","Progress Bar (72%)","Card Blue Morpho"],"visual":"small utility UI widgets in a compact horizontal card"},{" title":"7. Mobile UI","position":"lower left","count":3,"labels":["Search page","Today's page with large butterfly illustration","Audio playback page with waveform chart"],"visual":"three smartphone mockups with rounded corners, dark interface, blue-violet butterfly visuals"},{"title":"8. Web Design Preview","position":"lower right","count":1,"labels":["Life of Light"],"visual":"desktop landing page mockup with butterfly hero image, top navigation, bright blue call-to-action button, and Chinese body text"},{"title":"9. Visual Background","position":"bottom full width","count":4,"labels":["flowing light ribbon background 1"," swirling iridescent vortex","flowing light ribbon background 2","radiant crystalline burst"],"visual":"four elongated rectangular background samples in purple, blue, and cyan"}]," footer":{"count":1,"text":"Design inspired by nature, born for experience." ,"center_icon":"small butterfly icon"}},"art_direction":{"materials":"glassmorphism, neon edge lighting, smooth gradients, subtle reflections","colors":"electric blue, indigo, violet, cyan, white","composition":"clean grid with 9 numbered content sections, generous spacing, thin rounded borders, and a dominant butterfly hero image","render_quality":"highly polished, crisp typography, premium Behance-style design system board"}}