Glassmorphism Dashboard

---
name: Glassmorphism Dashboard
colors:
  background: '#0a0a1a'
  surface: 'rgba(255,255,255,0.05)'
  surface-elevated: 'rgba(255,255,255,0.10)'
  primary: '#6366f1'
  on-primary: '#ffffff'
  text-primary: '#f0f0ff'
  text-secondary: '#a0a0c0'
  border: 'rgba(255,255,255,0.12)'
typography:
  heading:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: '700'
  body:
    fontFamily: Inter
    fontSize: 15px
    lineHeight: '1.6'
rounded:
  DEFAULT: 16px
  card: 20px
spacing:
  base: 8px
---

## Overview

Layered transparency with blurred backgrounds. Panels float above
a deep indigo base, creating depth through `backdrop-blur` and
semi-transparent borders. Ideal for dashboards, widget grids, and
overlay-heavy layouts.

## Colors

- Background: deep midnight indigo (#0a0a1a)
- Surfaces: translucent white at 5% and 10% opacity over blur
- Primary: vibrant indigo-violet (#6366f1)
- Text: near-white (#f0f0ff) primary, muted lavender (#a0a0c0) secondary
- Borders: 12% white with `backdrop-blur-xl` for the frosted effect

## Typography

Inter for everything — headings at 700 weight, body at 400 with
generous 1.6 line-height for readability on translucent surfaces.

## Components

- Cards: 20px rounded, backdrop-blur-xl, subtle border glow on hover
- Buttons: solid primary fill, 16px rounded, scale-down press
- KPI Stat: large tabular numbers with muted label above
- Glass Panel: base surface with optional elevation boost