Atmospheric Glass Design System

The system uses an ethereal, high-fidelity glass aesthetic. The background carries the visual energy through deep blue, purple, and pink gradients, while interface layers behave like crystalline panes that sit above the canvas.

The intended emotional tone is serene, modern, and slightly futuristic. Transparency, blur, soft borders, and subtle shadows create a sense of physical depth without making the UI heavy.

• Prefer translucency over opaque fills.

• Let the background provide color; keep interface surfaces mostly monochrome.

• Preserve strong contrast for readability on top of shifting gradients.

• Use spacing generously so each panel feels like a floating object.

• Create depth through blur, edge highlights, and soft diffuse shadows instead of dark stacking.

### Core palette

| Token | Value | Role |

|---|---|---|

| background | #0b1326 | Base dark atmospheric canvas |

| surface | #0b1326 | Primary dark surface reference |

| surface-container | #171f33 | Main contained panel background |

| surface-container-high | #222a3d | Elevated panel layer |

| surface-container-highest | #2d3449 | Highest static dark surface |

| primary | #ffffff | Main foreground and high-contrast action color |

| on-primary | #2f3131 | Text on white controls |

| secondary | #adc9eb | Cool accent for secondary emphasis |

| on-surface | #dae2fd | Primary text on dark glass |

| on-surface-variant | #c4c7c8 | Secondary labels and metadata |

| outline | #8e9192 | Edge and border guidance |

| outline-variant | #444748 | Lower emphasis dividers |

| error | #ffb4ab | Error state |

| background gradient reference | #1E3A8A, #7E22CE, #DB2777 | Hero/background atmospheric blend |

### Color usage

UI surfaces should rarely be fully opaque. Standard glass layers use white with low alpha, such as rgba(255, 255, 255, 0.1), while elevated layers can move to rgba(255, 255, 255, 0.2).

Text should remain bright and clean, usually white or high-tint silver. Semantic accents can be used for weather conditions, but they should stay translucent enough to preserve the glass effect.

The Tailwind configuration mirrors the core primitives from the design definition: colors, typography, border radius, and spacing. Component tokens live in the design token JSON, which makes the system portable to token pipelines and design tools.

### Source alignment

| Source file | Contribution |

|---|---|

| README-2.md | High-level product and file overview |

| DESIGN.md | Canonical design language, token frontmatter, and usage guidance |

| tailwind.config-4.js | Utility-framework implementation of colors, type, radius, and spacing |

| design_tokens-3.json | Interoperable token definitions including component-level tokens |

This system is best suited for premium dashboards, weather interfaces, and data-rich surfaces where a calm emotional tone matters as much as clarity. It works especially well when the background is expressive but the foreground must remain disciplined, readable, and elegant.

When extending the system, preserve the core relationship between vibrant background energy and restrained translucent foreground surfaces. That contrast is the defining behavior of Atmospheric Glass.