Glassmorphism

# Glassmorphism (Frosted glass UI)

You are building a frontend UI. Apply the **Glassmorphism** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

Translucent frosted surfaces float above a vivid backdrop: background blur, a thin bright edge highlight, soft shadows and large radii create a sense of depth. Its beauty comes from looking through, so the backdrop itself is part of the design.

## Design tokens

### Colors

- `background` `#1B1033` — page background
- `surface` `rgba(255, 255, 255, 0.14)` — cards, panels and raised surfaces
- `text` `#FFFFFF` — primary text
- `muted` `rgba(255, 255, 255, 0.72)` — secondary text, captions, placeholders
- `accent` `#C4B5FD` — primary actions, links, key highlights
- `on-accent` `#1B1033` — text and icons placed on the accent color
- `border` `rgba(255, 255, 255, 0.35)` — dividers, outlines, input borders
- `highlight` `#5EEAD4` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Plus Jakarta Sans` (Google Fonts, weights 600 / 700) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- Body text: `Plus Jakarta Sans` (Google Fonts, weights 400 / 500) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- Type scale (px): 12 · 14 · 16 · 18 · 24 · 36 · 56

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 12 · 16 · 24 · 32 · 48 · 64
- Corner radius (sm / md / lg): 12 / 20 / 28 px
- Border: 1px solid
- Shadows (sm / md / lg): `0 4px 16px rgba(15, 5, 40, 0.18)` / `0 8px 32px rgba(15, 5, 40, 0.28)` / `0 24px 64px rgba(15, 5, 40, 0.35)`

### Motion

- Durations (fast / base): 160ms / 320ms
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`

### Signature effects

- `--glass-blur`: `blur(20px) saturate(160%)`
- `--glass-edge`: `inset 0 1px 0 rgba(255, 255, 255, 0.45)`
- `--backdrop`: `radial-gradient(circle at 15% 20%, #FF6B9A 0, transparent 45%), radial-gradient(circle at 85% 25%, #6E56CF 0, transparent 50%), radial-gradient(circle at 50% 95%, #2DD4BF 0, transparent 50%), #1B1033`

## Do

- Design a colorful gradient backdrop first, then place glass panels on top of it.
- Give glass surfaces an rgba(255,255,255,0.1–0.2) background plus backdrop-filter: blur(16–24px).
- Add a 1px translucent white border and a top inner highlight to every glass panel.
- Use large 12–28px radii and soft dark shadows.
- Provide opaque fallbacks for environments without blur support or with reduced transparency preferences.

## Don't

- Do not use glass on flat or white backgrounds.
- Do not nest glass panels deeply or turn the entire page into glass.
- Do not put thin weights or small low-contrast text on glass.
- Do not use it for reading-heavy data tables.

## Components

- **Buttons**: Primary: solid light-violet pill or large-radius rectangle with dark text. Secondary: glass (translucent white, blur, 1px bright edge). Lift slightly and brighten on hover.
- **Cards**: Glass panels: rgba(255,255,255,0.14) background, 20px backdrop blur, 1px translucent white border, top inner highlight, large radius and a soft shadow.
- **Forms**: Inputs are a lighter layer of glass with a 12px radius and 72% white placeholders. On focus the border turns light violet with a soft glow.
- **Navigation**: A floating glass bar inset from the page edges, pill-shaped; the current item is marked with a brighter glass pill.
- **Layout**: A few large glass panels floating over a full-screen gradient, with enough space between layers for the backdrop to show. Never cover the whole page in glass.
- **Imagery & icons**: Abstract gradients, soft 3D shapes or blurred light blobs as backdrops; outline or semi-transparent filled icons.

## Accessibility

- Text contrast on glass changes with the backdrop; it must reach 4.5:1 even over the brightest backdrop area.
- Respect prefers-reduced-transparency by offering opaque surfaces to users who ask for less transparency.
- Provide a more opaque fallback background for browsers without backdrop-filter support.

_Generated by Style Museum._