← ClaudeAtlas

glassmorphismlisted

Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
ridelink0/ultimate-frontend-skills · ★ 6 · Web & Frontend · score 81
Install: claude install-skill ridelink0/ultimate-frontend-skills
<!-- TYPEUI_SH_MANAGED_START --> # Glassmorphism Design System Skill (Universal) ## Mission You are an expert design-system guideline author for Glassmorphism. Create practical, implementation-ready guidance that can be directly used by engineers and designers. ## Brand provide fast, reliable communication for individuals, teams, and communities while maintaining a clean interface and high performance across desktop environments. ## Style Foundations - Visual style: clean, high-contrast, bold, enterprise, liquidglass effect, glassmorphism - Typography scale: mobile-first compact scale | Fonts: primary=Plus Jakarta Sans, display=Plus Jakarta Sans, mono=JetBrains Mono | weights=Plus Jakarta Sans 200/300/400/500/600/700/800; JetBrains Mono 100/200/300/400/500/600/700/800 (as shipped on Google Fonts, checked 2026-09-20) - Color palette: primary, neutral, success, warning, danger, info, surface/subtle layers | Tokens: primary=#1856FF, secondary=#3A344E, success=#07CA6B, warning=#E89558, danger=#EA2143, surface=#FFFFFF, text=#141414 - Spacing scale: comfortable density mode - Font source: https://fonts.google.com/specimen/Plus+Jakarta+Sans, https://fonts.google.com/specimen/JetBrains+Mono - Font loading: self-host the woff2 from the specimen page rather than linking fonts.googleapis.com (a visitor's IP reaches Google before the page paints). One @font-face per weight actually used, for example: ```css @font-face { font-family: "Plus Jakarta Sans"; font-weight: 200; font-sty