Glassmorphism Frost

# Glassmorphism Frost

## Philosophy

Glassmorphism Frost turns interface chrome into layered frozen panes: translucent planes, cool spectral rims, and luminous depth cues that feel carved from winter air rather than solid material. It is not soft candy glass; it is crisp, quiet, and slightly atmospheric, balancing translucency with precise information legibility.

### Values

- Layer information through translucent depth instead of opaque containment
- Use cool light, blur, and edge highlights to suggest frozen materiality
- Preserve precision and readability inside decorative surfaces
- Make interaction feel weightless but controlled, like sliding over polished ice

### Anti-Values

- Milky blur without hierarchy
- Warm playful gradients that undermine the frost mood
- Heavy borders or skeuomorphic bevels
- Overcrowding panes until transparency loses meaning

### Visual Character

- semi-transparent panels with 18-32px backdrop blur and milky white-to-ice-blue tinting
- 1px luminous top-left edge highlights paired with darker bottom-right inner shading to simulate chilled depth
- floating aurora gradient orbs behind content that glow through glass surfaces
- capsule badges, segmented tabs, and controls embedded inside inset glass rails rather than flat bars
- large rounded corners with layered shadow stacks that make cards appear suspended above a frosted field

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#A7D8FF` |
| secondary | `#D7E8FF` |
| accent | `#7AF0FF` |
| background | `#0A1020` |
| surface | `rgba(215,232,255,0.14)` |
| text | `#F5FBFF` |
| muted | `#A9B8D1` |
| border | `rgba(255,255,255,0.26)` |
| error | `#FF7A94` |
| success | `#7DFFBE` |
| warning | `#FFD36E` |
| info | `#7FDBFF` |

### Typography

- **Heading Font**: Sora
- **Body Font**: Manrope
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.5
- **Letter Spacing**: -0.02em headings / 0em body
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px"]

### Radii

- **None**: 0px
- **Sm**: 12px
- **Md**: 20px
- **Lg**: 28px
- **Full**: 999px

### Shadows

- **Sm**: 0 10px 30px rgba(1,10,30,0.22)
- **Md**: 0 20px 60px rgba(1,10,30,0.34)
- **Lg**: 0 32px 90px rgba(1,10,30,0.46)

### Surfaces

- **Treatment**: glass
- **Card Style**: floating translucent panes with inner frost highlights and soft ambient separation
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: hairline luminous borders that catch light rather than define structure heavily

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: [1280,1024,768,480]
- **Column Progression**: 12 → 8 → 4 → 1

## Rules

### Composition

Compose the screen as stacked atmospheric layers: background glow field, suspended navigation rail, hero glass slab, then clustered utility panes. Major regions should feel like separate sheets of ice floating at different z-depths instead of a single flat page.

### Hierarchy

Hierarchy comes from opacity, blur density, and glow intensity before color. Primary actions use brighter spectral fill, secondary actions sit inside nearly clear panes, and metadata is tucked into dimmer frosted subpanels.

### Density

Moderate density with generous breathing room inside each pane. Complex data is allowed, but every dense area must be wrapped in a calmer translucent container so information feels suspended rather than cramped.

### Signature Patterns

- every major panel uses layered pseudo-elements: a luminous 1px highlight rim and a soft inner shadow wash to create frozen depth
- section groups are held inside glass rails or shells with inset padding, making controls appear nested inside a translucent track
- background composition uses oversized blurred gradient orbs that remain visible through surfaces
- interactive chips, tabs, badges, and toggles all use capsule geometry with translucent fill and subtle backdrop blur
- table rows and accordion items brighten with a cool white-blue sheen on hover instead of using flat solid hover colors

## Layout

### Grid

Desktop uses a 12-column fluid grid with a wide central content slab and two supporting pane columns; tablet collapses to 8 columns with navigation and utility panes wrapping beneath the hero; phone becomes a single translucent stack with full-width actions and horizontally scrollable dense data blocks.

### Breakpoints

1280+: hero + side panes in 12 columns; 1024px: content spans 8 columns with sidebar modules paired; 768px: header actions stack and content panes become vertical; 480px: one-column flow, full-width controls, modal inset reduced, table scroll container enabled.

### Whitespace

Use large outer margins and 24-32px internal pane padding so blur has room to breathe. Space between panes should feel like cold air gaps, not generic gutters.

## Guidance

### Do

- Layer clear text blocks on the most opaque interior surfaces for readability
- Use cool spectral glows sparingly to signal focus, status, and action priority
- Round controls and micro-components into capsules to reinforce suspended softness
- Let background light sources remain partially visible through panels

### Don't

- Do not combine frost glass with hard black strokes or industrial framing
- Do not fill every container with the same opacity; depth must vary
- Do not use muddy gray blur without edge highlights
- Do not compress controls so tightly that the floating atmosphere disappears