Qingshan Lake Glass Dashboard

# Qingshan Lake Glass Dashboard## UsageUse this DESIGN.md as a reusable design brief for an AI coding agent. Apply it when building a new page, restyling an existing interface, or keeping multiple screens visually consistent.## Design IntentYou are implementing an interface using the **Qingshan Lake Glass Dashboard** design language. 取意于临安青山湖的湖面、雾带、浮萍、水杉与远山层次，转译为原创的原生感玻璃 dashboard；面向 dashboard、settings、menu bar、floating panel 等桌面 UI，强调清透信息层级、稳定筛选与状态可读性。Treat information architecture, scan paths, and component grouping as the main design material.## Aliases- 青山湖玻璃后台- 青山湖风格- lake glass dashboard## Category- 布局与信息组织## Target Platforms- 移动端- PC 端## Summary取意于临安青山湖的湖面、雾带、浮萍、水杉与远山层次，转译为原创的原生感玻璃 dashboard；面向 dashboard、settings、menu bar、floating panel 等桌面 UI，强调清透信息层级、稳定筛选与状态可读性。## Visual DNA- 青山湖雾白玻璃- 湖水青主操作- 浮萍绿生机点缀- 水杉绿成功态- 云带灰蓝- 连续圆角## Best Use Cases- AI 控制台- 桌面 dashboard- settings 面板- menu bar 工具- floating panel## Avoid When需要旅游海报式大背景、赛博霓虹、高饱和通用蓝青、纯黑科技风、重边框/硬阴影、嵌套卡片 chrome 或大面积金色主题的页面。## Anatomy以暖雾白和云带灰蓝做低噪声 canvas，使用轻量半透明 material、连续圆角、环境色投影和必要的低对比同色分隔组织稳定导航、悬浮筛选、指标、表格与状态条；禁止用闭合白边或整圈内高光模拟玻璃厚度；湖水青是唯一主操作色，水杉绿用于成功与进度，浮萍绿只作 5% 以内的自然活性点缀，晨光金仅用于极小状态高光。## Color SystemUse a Seed → Map → Semantic → Alias token architecture. Components must consume named tokens instead of hard-coded colors.### Reference Palette- **mist-white** `#f2f7f2`- **cloud-belt** `#b8ccdb`- **blue-mist** `#8aadd1`- **lake-mist** `#85c7ba`- **owlet-accent** `#3da39e`- **lake-teal** `#2e948a`- **duckweed-green** `#52ad1a`- **reed-teal** `#56aa9b`- **cypress-fresh** `#74b88b`- **lake-blue** `#42667a`- **deep-lake-ink** `#0f2b36`- **dawn-gold** `#d6a352`- **clay-terracotta** `#d07054`### Seed Tokens- **colorBgBase** `#f4f6f1` - 暖雾白应用基础背景.- **colorBgContainer** `#fbfcfa` - 原生感玻璃面板与容器.- **colorFillSecondary** `#e8eeea` - 雾化次级填充与弱状态.- **colorPrimary** `#3c8f88` - 湖水青主操作与 Codex 强调.- **colorTextBase** `#183b40` - 青山墨色正文、图标与高对比轮廓.### Primary Scale- **primary-1** `#edf7f5`- **primary-2** `#dcefeb`- **primary-3** `#c5e3dd`- **primary-4** `#a4d2ca`- **primary-5** `#76b9b0`- **primary-6** `#3c8f88`- **primary-7** `#317d77`- **primary-8** `#286b66`- **primary-9** `#205954`- **primary-10** `#184743`### Neutral Scale- **neutral-1** `#ffffff`- **neutral-2** `#fbfcfa`- **neutral-3** `#f4f6f1`- **neutral-4** `#e8eeea`- **neutral-5** `#d4dfdc`- **neutral-6** `#b6c6c4`- **neutral-7** `#8da4a3`- **neutral-8** `#607d80`- **neutral-9** `#395c62`- **neutral-10** `#183b40`### Semantic Tokens- **colorSuccess** `#4f8751` - 水杉绿：成功、在线、已完成.- **colorSuccessBg** `#e9f2e6` - 成功状态浅背景.- **colorWarning** `#9c782d` - 克制晨光金：警告、待确认、需关注.- **colorWarningBg** `#f6efdf` - 警告状态浅背景.- **colorError** `#a95b4b` - 雨后陶土：错误、危险、阻断.- **colorErrorBg** `#f8eae6` - 错误状态浅背景.- **colorInfo** `#4d7180` - 青山灰蓝：信息、链接、进行中.- **colorInfoBg** `#e9f0f2` - 信息状态浅背景.### Alias Tokens- **colorBgLayout** `#f4f6f1` - 暖雾白应用画布.- **colorBgElevated** `#fbfcfa` - 浮层、菜单与高可读区域.- **colorBgSpotlight** `#183b40` - Tooltip 与强提示.- **colorBorder** `#d4dfdc` - 柔和控件与容器边框.- **colorBorderSecondary** `#e3eae6` - 轻分隔线.- **colorText** `#183b40` - 一级文本.- **colorTextSecondary** `#4d676b` - 二级文本.- **colorTextTertiary** `#738b8b` - 辅助说明.- **colorTextDisabled** `#9cadac` - 禁用文本.- **colorPrimaryHover** `#317d77` - 主操作 Hover.- **colorPrimaryActive** `#286b66` - 主操作 Active.- **colorPrimaryBorder** `#a4d2ca` - 主色边框.- **colorPrimaryBg** `#edf7f5` - 主色浅背景.- **colorAccentNatural** `#6d9c52` - 低饱和浮萍绿：自然纹理、轻量高光与低优先级活跃态.- **colorAccentNaturalBg** `#eaf2e4` - 浮萍绿低对比背景；原始 #52AD1A 只用于极小细节.- **colorLink** `#4d7180` - 链接与可跳转文本.- **colorFocus** `#76b9b0` - 键盘焦点环.- **colorMask** `#183b40` - Modal 遮罩基础色.Color rules:- Use the palette as design tokens, not random decorative swatches.- Keep primary text and primary actions at accessible contrast.- Use primary-1 through primary-10 for interaction states instead of inventing new brand colors.- Use semantic tokens consistently for success, warning, error, and info; pair color with iconography or text.- Map component styles to Alias Tokens so theme changes do not require component-level color edits.## Typography- Use a modern system sans-serif stack by default; only introduce a custom font when the brand direction requires it.- Headings should be confident but not ornamental; body text must remain readable across mobile and desktop.- Keep labels short, high-contrast, and aligned to the component structure.## Layout And Spacing- Use compact but breathable spacing: 8px base unit, 12-16px card padding, 20-24px section gaps.- Desktop layouts should favor stable sidebars, tables, cards, and control strips over decorative hero sections.- Mobile layouts should collapse into one column with filters and controls above results.- Recommended radius: 6-12px radius by default; increase only for expressive or highly tactile components.- Elevation and shadow: Use environment-tinted outer shadows and backdrop blur for elevation. Avoid closed white perimeter borders and full inset highlights that make glass look plastic; add a low-contrast same-color edge only when adjacent layers cannot separate. Contrast must come from text and component state, not blur alone.## Component Rules- Components should reinforce the primary information structure rather than introduce a separate decorative style.- Primary actions must be visually obvious and reachable; secondary actions should be quieter but still discoverable.- Cards need a clear title, supporting text or metric, state, and one obvious next action when action is expected.- Forms and filters should use familiar controls, stable dimensions, clear labels, and visible focus states.- Empty, loading, error, and success states must use the same visual language, not generic placeholders.## Interaction And Motion- Use subtle 120-220ms transitions for hover, focus, open, close, and selection states.- Motion should clarify state changes rather than decorate the page.- Respect reduced-motion preferences.## Implementation Recipe1. Start with the real user workflow and page structure; do not make a generic landing page unless explicitly requested.2. Establish layout zones first: navigation, content, controls, feedback, and primary action.3. Apply the color tokens to semantic roles: canvas, surface, text, border, accent, danger, and success.4. Build reusable components that express this style: buttons, cards, inputs, tabs, filters, modals, empty states, and status badges.5. Verify mobile and desktop breakpoints before adding decorative polish.6. Check that the final screen still communicates 青山湖雾白玻璃, 湖水青主操作, 浮萍绿生机点缀 without relying on a single color or effect.## Quality Checklist- The screen is immediately recognizable as **Qingshan Lake Glass Dashboard**, not a generic Tailwind layout.- The design uses surface, spacing, typography, and component shape together; it does not rely only on colors.- Primary actions and navigation are clear on both mobile and desktop.- Text is readable, controls are stable, and content does not overlap or shift unexpectedly.- Empty, loading, hover, focus, selected, disabled, success, and error states are styled in the same language.- The implementation avoids the known failure mode: 需要旅游海报式大背景、赛博霓虹、高饱和通用蓝青、纯黑科技风、重边框/硬阴影、嵌套卡片 chrome 或大面积金色主题的页面。## Anti-Patterns- Do not paste this palette onto an unrelated layout and call it finished.- Do not overuse decorative effects where the user needs to read, compare, or act quickly.- Do not mix this style with unrelated visual languages unless the product explicitly requires a hybrid.- Do not hide important state behind low contrast, blur, tiny text, or animation.## Keywords- qingshan lake- 青山湖- landscape glass- glass dashboard- lake teal- duckweed green- reed teal- mist white- floating filters- desktop ui## Agent Prompt SnippetImplement the UI in the **Qingshan Lake Glass Dashboard** design language. Prioritize 青山湖雾白玻璃, 湖水青主操作, 浮萍绿生机点缀. Use the color roles, typography guidance, spacing rules, component rules, and anti-patterns from this DESIGN.md as hard constraints. The result should feel purpose-built for AI 控制台, 桌面 dashboard, settings 面板, while avoiding: 需要旅游海报式大背景、赛博霓虹、高饱和通用蓝青、纯黑科技风、重边框/硬阴影、嵌套卡片 chrome 或大面积金色主题的页面。