LIGHTCORE PRISM: A Futuristic Light-Mode UI Design System

A UI design system demonstration project in light mode, with a visual theme of "Optical Science and Light Refraction". The overall aesthetic features a clean white background, light mode, a futuristic and premium feel, accented with iridescent, soft orange, yellow, cyan, purple, and pink colors. Header: Title: LIGHTCORE PRISM Subtitle: UI Design System - Light Mode Tags: Futuristic, Premium, Focused Hero Graphic: A 3D transparent glass ring refracting iridescent light. The layout includes the following sections: Colors: Display 5 rounded square blocks of solid colors, labeled: White #FFFFFF, Snow #FAFAFC, Slate #F2F4F8, Border #E6E8EF, Black #0A0A0C. Prism Gradient: Show 1 long horizontal gradient bar with 5 hexadecimal color codes placed below it. Typography: Showcase a large 'Aa' display, listing 4 font weights (Light, Regular, Medium, Semibold) and the full alphabet and numerals. Icons: Arrange 12 minimalist line-style icons in a 2x6 grid. Buttons: Present a total of 8 buttons across four categories: Primary, Secondary, Text, and Icon, showing both normal and disabled states for each. The primary button has an iridescent border and the text "Get Started". Navigation: Display two variants: Desktop and Mobile. The desktop navigation includes a Logo, 4 text links, Search, Login, and a button. The mobile navigation includes a Logo, Search, and a hamburger menu. Components: Showcase 6 components, including: Card: A "Photon Engine" card with an abstract iridescent graphic and a button. Input Fields: A labeled search bar and an email input field. Progress Bar: A 68% iridescent progress bar. Tabs: Overview, Analytics, Settings three tabs. Toggles: 2 toggle switches (On/Off states). Data Visualization: 1 donut chart with 3 legend items, and 1 7-day line chart. Web Page: A desktop browser model, containing the hero headline "Build the Future with Light and Color", 2 buttons, a flowing 3D iridescent wave graphic, and 5 partner logos at the bottom. Mobile App: A smartphone model, displaying a $24,880 balance, a line chart, 4 quick action icons, a recent activity list with 3 items, and a bottom navigation bar with 4 icons.

浅色模式 UI 设计系统演示项目，视觉主题为“光学科学与光折射”。整体美学为干净的白色背景，浅色模式，未来感，高级感，特色在于虹彩、柔和橙色、黄色、青色、紫色、粉色点缀。 头部区域： 标题：LIGHTCORE PRISM 副标题：UI 设计系统 - 浅色模式 标签：未来感，高级感，专注 主视觉图形：折射虹彩光线的 3D 透明玻璃环 布局包含以下部分： 色彩： 展示5个圆角方形的纯色色块，标签分别为：白色 #FFFFFF、雪色 #FAFAFC、板岩色 #F2F4F8、边框色 #E6E8EF、黑色 #0A0A0C。 棱镜渐变： 展示1条长的水平渐变条，并在下方附上5个十六进制颜色代码。 排版： 展示大号 'Aa' 字体，列出4种字重（Light, Regular, Medium, Semibold）以及完整的字母表和数字。 图标： 以 2x6 网格排列12个极简线条风格的图标。 按钮： 总计展示8个按钮，分为主要、次要、文本、图标四个类别，每个类别展示正常和禁用两种状态。主要按钮具有虹彩边框，按钮文本为“开始使用”。 导航： 展示桌面端和移动端两种变体。桌面端导航包含 Logo、4个文本链接、搜索、登录和一个按钮。移动端导航包含 Logo、搜索和汉堡菜单。 组件： 展示6个组件，包括： 卡片：带有抽象虹彩图形和按钮的 "Photon Engine" 卡片。 输入框：带标签的搜索栏和电子邮件输入框。 进度条：一个 68% 的虹彩进度条。 标签页：概览、分析、设置三个标签。 开关：2个开关（开/关状态）。 数据可视化：1个带3个图例项的环形图，和1个7天折线图。 网页： 一个桌面浏览器模型，包含主标题“用光与色彩构建未来”、2个按钮、流动的3D虹彩波浪图形以及底部的5个合作伙伴Logo。 移动应用： 一个智能手机模型，显示24,880美元的余额、一个折线图、4个快速操作图标、一个包含3个项目的近期活动列表以及带有4个图标的底部导航栏。