Glassmorphism design skill for AI agents

Overview

Glassmorphism is a modern, translucent design system skill file that instructs AI coding assistants to generate interfaces with the frosted-glass aesthetic — semi-transparent surfaces, backdrop blur, subtle borders, and layered depth. Built for communication platforms and high-performance applications, this skill produces UIs where panels and cards feel like panes of frosted glass floating over rich backgrounds, creating a sense of depth and spatial hierarchy that flat design cannot achieve.

This skill is ideal for messaging apps, collaboration platforms, real-time dashboards, social products, and any interface where layered information benefits from visual depth cues. The glassmorphism effect guides the eye through content layers while keeping the interface feeling light and contemporary.

Design Tokens

Color Palette

Glassmorphism pairs a vivid electric blue primary with a muted plum secondary, supported by a semantic palette tuned for communication interfaces:

The electric blue primary (#1856FF) cuts through translucent layers with certainty, making interactive elements unmistakable even on blurred backgrounds. The muted plum secondary (#3A344E) provides depth in navigation rails and sidebar backgrounds without competing with the glass effect.

The Glass Effect

The signature visual treatment defines how surfaces behave throughout the system:

• Backdrop blur — glass surfaces use backdrop-filter: blur() with defined intensity levels (light: 8–12px, medium: 16–20px, heavy: 24–32px) depending on the layer's role and content density
• Semi-transparent fills — surfaces use rgba white or colored fills at 60–80% opacity, letting underlying content bleed through with a frosted quality
• Subtle borders — 1px borders with low-opacity white (rgba(255,255,255,0.18)) create the edge-light effect that makes glass panels feel three-dimensional
• Layered depth — multiple translucent surfaces stack at defined z-levels, with each layer having a progressively stronger blur to maintain readability on top layers
• Background dependency — the glass effect requires a visually rich background (gradient, image, or colored surface) beneath the translucent panels. The skill file provides fallback guidance for contexts where the background is plain

The skill file provides concrete CSS values for each glass intensity level so AI-generated output produces consistent, production-ready frosted surfaces rather than improvised transparency.

Typography

Glassmorphism uses Plus Jakarta Sans as both the primary and display font — a geometric sans-serif with a modern, friendly character:

• Primary and display font: Plus Jakarta Sans — its clean geometry, generous x-height, and rounded terminals make it exceptionally readable against frosted translucent backgrounds where text clarity is paramount. The font's modern warmth complements the contemporary glass aesthetic
• Monospace font: JetBrains Mono — used for code blocks, message timestamps, technical content, and status identifiers

The typography uses a mobile-first compact scale — sizes are calibrated for the smaller viewports of mobile messaging interfaces first, then expand for tablet and desktop contexts. This is critical for communication products where conversations, notifications, and real-time content must remain readable on phone screens.

Spacing

Glassmorphism uses a comfortable density mode that balances the layered visual complexity of the glass effect with content readability:

• Glass panels need enough internal padding that text doesn't crowd the translucent edges where readability drops
• Stacked translucent layers need sufficient separation so their blurred boundaries don't merge into visual noise
• Communication-specific components (message bubbles, thread lists, notification cards) maintain comfortable touch targets and scan-friendly vertical rhythm
• The system prevents glass surfaces from becoming so densely packed that the translucency loses its effect

Component Coverage

Glassmorphism includes guidance for over 40 component families plus communication-specific additions, each adapted for the translucent surface treatment:

• Inputs and forms — buttons with glass-aware hover states, text inputs with translucent backgrounds, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — glass-surface cards, tables, data lists, data grids, charts, stats/metrics, badges, avatars with online-status rings
• Navigation — breadcrumbs, pagination, steppers, frosted sidebars, translucent top bars, tabs, command palette
• Overlays and feedback — glass modals, frosted drawers/sheets, tooltips, popovers, alerts, toasts, notification center, progress indicators, skeletons
• Page-level patterns — search with glass overlay results, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks
• Communication additions — bento cards for dashboard layouts and feature showcases

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with explicit guidance on how the glass effect modifies each state. Hover states on translucent surfaces use opacity shifts rather than background color swaps. Focus states use prominent borders or outlines that remain visible against blurred backgrounds. The skill file prohibits mixing glassmorphism with competing visual metaphors (neobrutalism, flat material design) to maintain coherence.

Accessibility

Glassmorphism enforces WCAG 2.2 AA compliance as a baseline, with specific attention to the unique accessibility challenges of translucent surfaces:

• Text contrast on glass — semi-transparent backgrounds create variable contrast depending on what's underneath. The skill file mandates minimum opacity thresholds and fallback solid backgrounds when content beneath the glass would cause text to fail contrast ratios
• Keyboard-first interactions with visible focus states — focus indicators use solid borders or rings (not translucent ones) so they remain clearly visible against any background
• No decorative motion without purpose — glass surface transitions and parallax-like depth effects must respect prefers-reduced-motion
• Semantic HTML and proper ARIA throughout
• Readable at every layer — text on the topmost glass surface must be legible regardless of what's visible through lower layers. The skill file specifies blur intensity minimums that guarantee readable backgrounds

Glassmorphism is one of the most accessibility-risky visual styles because contrast depends on the background content. The skill file provides concrete safeguards: minimum blur values, minimum surface opacity, fallback opaque modes for reduced-transparency preferences, and test criteria for verifying contrast in worst-case background scenarios. When the frosted-glass aesthetic conflicts with readability, the skill file always prioritizes legibility.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull glassmorphism

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build messaging interfaces, notification panels, or dashboard layouts, and the output will follow the Glassmorphism system's translucent surfaces, backdrop blur rules, and layered depth model.

Claude (Anthropic)

Use Glassmorphism directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce frosted-glass interfaces with proper backdrop filters, opacity values, and accessibility safeguards

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and glass effect rules as prompt context

Design Philosophy

Glassmorphism is built on the idea that depth and transparency create more intuitive spatial relationships than flat design alone. The skill file follows three principles:

1. Glass is structural, not decorative — every translucent surface communicates a layer relationship. Frosted panels sit above content, modals float above panels, tooltips float above everything. The glass effect is a spatial hierarchy tool, not a visual trick
2. Clarity through blur — the backdrop blur doesn't just look good, it solves a readability problem. By softening the background behind a translucent surface, the glass effect focuses attention on the content in front while preserving spatial context
3. Accessibility is the foundation — the frosted-glass look only works if users can read text, identify interactive elements, and navigate with a keyboard. Every glass intensity level, opacity value, and blur radius in the system has been chosen to maintain WCAG AA compliance