Iridescent Butterfly UI System Board

{
  "type": "UI/UX Design System Demonstration Project",
  "theme": "Dark mode, nature-inspired, luminous iridescent aesthetics",
  "language": "Chinese",
  "canvas": {
    "aspect_ratio": "Square poster",
    "background": "Deep midnight blue to black, with a subtle halo",
    "style": "A high-end, futuristic display project featuring a slim neon blue panel outline, glossy highlights, soft halo, and high contrast."
  },
  "header": {
    "title": "Nature-inspired UI{argument name=\"system title\" default=\"Butterfly Rainbow\"} UI/UX Design System",
    "description": "{argument name=\"chinese description\" default=\"Drawing inspiration from butterfly wings, the design incorporates the iridescent sheen of structural colors and deep blue to create a light, dynamic, and vibrant digital experience.\"}",
    "hero_image": "A highly detailed, luminous butterfly wing, displaying electric blue, violet, and iridescent cyan, occupies half of the upper right corner. Visible vein structures, translucent edges, and sparkling particles are visible, with a second, blurred wing behind it."
  },
  "layout": {
    "sections": [
      {
        "title": "1. Design Inspiration",
        "position": "Top left corner, below the title",
        "count": 4,
        "labels": [
          "Macro of iridescent butterfly wings",
          "Close-up of the blue-purple wing texture",
          "Light refracting prism halo",
          "Butterfly wing cell pattern"
        ]
      },
      {
        "title": "2. Keywords",
        "position": "Top right corner, below the main image",
        "count": 5,
        "labels": [
          "iris",
          "Agile",
          "Light",
          "Profound",
          "nature"
        ],
        "icon_style": "Minimalist glowing line icons inside rounded dark cards"
      },
      {
        "title": "3. Color System",
        "position": "center left",
        "subsections": [
          {
            "title": "main color",
            "count": 3,
            "labels": [
              "Morpho Blue #1E5BFF",
              "Rainbow Purple #7A5CFF",
              "Skylight #00E6FF"
            ]
          },
          {
            "title": "Neutral color",
            "count": 3,
            "labels": [
              "Midnight Black #060F19",
              "Soft Navy Blue #141A2E",
              "Pearl White #F3F6FC"
            ]
          },
          {
            "title": "Emphasis on color and gradient",
            "count": 2,
            "labels": [
              "Rainbow gloss",
              "Butterfly Light"
            ]
          }
        ],
        "visual": "Circular color swatches and gradient spheres, with Chinese labels below."
      },
      {
        "title": "4. Layout",
        "position": "center right",
        "count": 1,
        "labels": [
          "Aa Poppins Light / Regular / Medium / SemiBold"
        ],
        "visual": "Large white Aa on a dark card"
      },
      {
        "title": "5. Application icon",
        "position": "Left and Middle",
        "count": 1,
        "text": "{argument name=\"app name\" default=\"Winglet\"} Light. Agile. Elegant.",
        "visual": "The glowing butterfly app icon next to the app name"
      },
      {
        "title": "6. UI Components",
        "position": "center",
        "subsections": [
          {
            "title": "Button",
            "count": 3,
            "labels": [
              "Main button",
              "Secondary buttons",
              "glass texture"
            ]
          },
          {
            "title": "icon",
            "count": 2,
            "labels": [
              "Heart-shaped collection",
              "Illuminated ring"
            ]
          },
          {
            "title": "switch",
            "count": 1,
            "labels": [
              "switch"
            ]
          }
        ],
        "visual": "Rounded blue buttons, neon icon buttons, and backlit switches on the dark panel"
      },
      {
        "title": "Other elements",
        "position": "Right Center",
        "count": 4,
        "labels": [
          "search box",
          "Tag New",
          "Progress bar (72%)",
          "Blue Morpho card"
        ],
        "visual": "Small, practical UI components in compact horizontal cards"
      },
      {
        "title": "7. Mobile UI",
        "position": "Bottom left",
        "count": 3,
        "labels": [
          "Search page",
          "Today's page with a large butterfly illustration",
          "Audio playback page with waveform graph"
        ],
        "visual": "Three rounded-corner smartphone prototypes with a dark interface and a blue-purple butterfly visual effect."
      },
      {
        "title": "8. Website Design Preview",
        "position": "Bottom right",
        "count": 1,
        "labels": [
          "Life of Light"
        ],
        "visual": "Desktop landing page mockup, including a butterfly main image, top navigation, bright blue call-to-action button, and Chinese text."
      },
      {
        "title": "9. Visual Background",
        "position": "Bottom full width",
        "count": 4,
        "labels": [
          "Flowing ribbon background 1",
          "Swirl Rainbow",
          "Flowing ribbon background 2",
          "Radiant Crystal Burst"
        ],
        "visual": "Four rectangular background samples in purple, blue, and cyan."
      }
    ],
    "footer": {
      "count": 1,
      "text": "Designed with nature in mind, born for experience.",
      "center_icon": "Small butterfly icon"
    }
  },
  "art_direction": {
    "materials": "Glass mimicry, neon edge lighting, smooth gradients, subtle reflections",
    "colors": "Electric blue, indigo, violet, cyan, white",
    "composition": "The clean grid layout includes nine numbered content sections, ample white space, slender rounded borders, and a dominant butterfly image.",
    "render_quality": "Highly refined, clearly laid out, a premium Behance-style design system project."
  }
}