Skills

Glassmorphism

Frosted glass effect with translucent layers, subtle blur, and luminous borders for...

Install

npx skills add bergside/awesome-design-skills --skill glassmorphism -g -a claude-code -y
Category
Engineering
Updated
4mo ago
License
MIT
Context cost
Lightabout 898 tokens
Runs scripts
No, instructions only

What it does

Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.

<!-- 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=100, 200, 300, 400, 500, 600, 700, 800, 900

  • 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

  • bento cards

Accessibility

WCAG 2.2 AA, keyboard-first interactions, visible focus states

Writing Tone

concise, confident, helpful, clear, friendly, professional

Rules: Do

  • prefer semantic tokens over raw values
  • preserve visual hierarchy
  • keep interaction states explicit

Rules: Don't

  • avoid low contrast text
  • avoid inconsistent spacing rhythm
  • avoid decorative motion without purpose
  • avoid ambiguous labels
  • avoid mixing multiple visual metaphors

Expected Behavior

  • Follow the foundations first, then component consistency.
  • When uncertain, prioritize accessibility and clarity over novelty.
  • Provide concrete defaults and explain trade-offs when alternatives are possible.
  • Keep guidance opinionated, concise, and implementation-focused.
Read the whole SKILL.md on GitHub

More in Engineering