Ice Blue Frosted Glass Data Dashboard

What It Solves

Data dashboard pages often drift between design intent and implementation: flat backgrounds, default-UI cards, arbitrary chart choices, centered metric cards, map hover states that recolor regions, and mobile grids that collapse into crowded columns. @user_133d6951/dashboard-design provides a unified spec for ice-blue frosted glass dashboards, suitable for visualization reports, data long-form pages, and operational cockpit interfaces.

How The Spec Works

The skill turns the visual style into executable rules:
- Background and atmosphere: layered radial gradients with background-attachment: fixed, plus slowly animated light orbs to create depth without distracting motion.
- Material system: cards use saturate(180%) blur(20px), semi-transparent white borders, rounded corners, and soft shadows instead of opaque solid panels.
- Chart selection: time-series metrics favor line charts; proportions favor donuts; many categories favor tables or horizontal bars; regional data uses ECharts maps with select disabled.
- Layout and responsiveness: content is constrained to max-width: 1280px, two-column grids collapse to single columns, and chart containers prefer aspect-ratio plus min-height.
- Interaction patterns: time pickers, view switchers, and object selectors use frosted panels, clear selected states, search, and whitelist filtering.

Where It Applies

This is best for B-end or product dashboards built with Chart.js 4.x, ECharts 5.x, and pure CSS Grid/Flex in a self-contained HTML page. For marketing landing pages, 3D data walls, or designs that require radar charts, word clouds, or high-contrast solid cards, the spec should be applied selectively, keeping the chart selection, grid checks, and interaction rules as the core.