domains / families / design / glassmorphism

glassmorphism

combined

Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance. Web and App implementation guide for Glassmorphism. Trigger when user wants a frosted glass effect, blurred backgrounds, transparency, or a sleek MacOS-like feel.

When to use

• Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.

When not to use

• This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
• Ensure appropriate contrast ratios and responsive behaviors are verified separately.

Skill page

Conflict

The two copies overlap on the core visual concept (frosted glass, backdrop blur, translucent panels, subtle light borders) but each contains material steps the other lacks. The bergside copy is a design-system authoring workflow (tokens, accessibility, QA checklist, component states, writing tone) with no implementation code. The sickn33 copy is an implementation guide with concrete CSS, SwiftUI, and Flutter code, platform-specific material APIs, and a requirement for a vibrant background. Crowning one would hide a real alternative: one is a governance/authoring procedure, the other is a build procedure.