Glassmorphismv1.0.0glassmorphism

Glassmorphism Product Layers

Generate layered translucent UI with frosted surfaces, luminous gradients, and disciplined readability.

View shared fundamentals Explore tokens

creative toolspremium dashboardsmusic or media appsportfolio productsconsumer settings and control centers

Tone

premium, calm, luminous

Density

light to medium; too much density breaks the frosted layering effect

Mood

ambient, modern, floating

Source Type

expressive modern product style

Base Skill Metadata

The YAML record is the source of truth for capability, maturity, and generator guardrails.

Maturity

Stable

Coverage score

84/100

Validation status

Ready for export

Preview coverage

Preview resolved

Supported product types

premium dashboardmedia control centerconsumer settings appportfolio product

Compatibility tags

premium-uibrand-ledmotion-friendlyhero-heavylayered-surfaces

Anti-patterns to avoid

Do not sacrifice readability for translucency or blur density.

Do not use glass layers for dense enterprise tables that require hard separation.

Do not stack multiple glowing accents without a clear primary focus plane.

Validation report

0 errors1 warnings

Warning: border on background contrast is 2.48:1, below the required 3:1.

Sample prompts

Media control center

Create a premium media control center with frosted panels, luminous depth, clear contrast boundaries, and disciplined controls that stay readable over atmospheric backgrounds.

Consumer preferences hub

Design a polished settings and preferences hub for a consumer app using translucent layering, restrained gradients, and compact but legible form patterns.

Visual Identity

blurred translucent panels with gentle shadow and specular highlights

controlled contrast using opaque text layers over translucent surfaces

Frosted translucent surfacesSubtle border highlight on glass edgesLayer depth created by overlap, blur, and shadowStrict text readability discipline

Typography

Manrope, SF Pro Display, Inter

40-56px semibold with spacious tracking and short phrasing

12px14px16px18px20px

Layout & Rhythm

Immersive full-viewport background with one or more anchored glass layers

Compose with stacked translucent planes and distinct foreground modules.

48px64px80px96px

Tokens

Core design variables from YAML

Compact snapshot of the YAML base. Open only the panels you need when checking exact values or generation rules.

Palette essentials

Only the colors that define the system at a glance.

Primary

rgba(255,255,255,0.78)

Secondary

rgba(227,240,255,0.56)

Accent

#7DD3FC

Background

#09111F

Token snapshot

Key values that most affect the builder output.

Spacing density

airy with generous outer breathing room

Grouping

Compose with stacked translucent planes and distinct foreground modules.

Radius family

soft and flowing

Typography

Manrope, SF Pro Display, Inter

Layout signature

Structure choices that define this system, not the shared fundamentals.

Page shell

Immersive full-viewport background with one or more anchored glass layers

Page width strategy

Wide container with generous margins; do not let glass panels touch screen edges on desktop

Header pattern

Floating top bar or anchored side rail with translucent surface

Token details

Structured details from YAML, collapsed by default.

Where It Fits

Best product contexts and intentional misfits for this design language.

Recommended

creative toolspremium dashboardsmusic or media appsportfolio productsconsumer settings and control centers

Avoid for

extreme data densitylow-powered embedded devicescompliance-first industrial software

UX patterns

High-signal layout and flow guidance.

CTA hierarchy

One luminous CTA, one secondary glass action, tertiary text or icon actions.

Form structure

Short sections with explicit labels and helper text; avoid giant floating forms.

Table detail strategy

Pair summary table with slide-over detail pane.

Adaptation boundaries

What can flex, and what must stay coherent.

Adaptable traits

Background gradient paletteBlur strength by device capabilityGlow accents for branded moments

Do not sacrifice readability for blur.

Do not stack too many translucent surfaces on top of each other.

Do not use glassmorphism for every dense data widget.

Do not rely on glow as the only focus indicator.

Component Coverage

Compact inventory of explicit components, with details on demand.

Explicit components

High confidence

Coverage gaps

Missing from declared expectations: Glass Cards, Forms, Navigation Bars, Empty States.

Generation Guardrails

Essential guidance for the skill generator, grouped by decision type.

Purpose

Create premium, futuristic interfaces that remain readable and usable under real product constraints.

AI role

You are a product UI designer building layered translucent surfaces without compromising accessibility.

Anti-drift highlights

Every text block meets contrast targets

Primary CTA remains visually singular

Glass panels use at least two opacity tiers

Packaging model

Non stai modificando la base skill, stai derivando una custom skill

La base skill resta il riferimento YAML del catalogo. Il builder sotto serve a produrre un pacchetto custom con metadati propri, override validati e archive esportabile.

Base skill

Record YAML sorgente, usato come sistema di riferimento immutabile.

Name: Glassmorphism Product Layers

Slug: glassmorphism-product-layers

Maturity: Stable

Coverage score: 84/100

Role: definisce token, layout, interaction rules e anti-drift checklist della base.

Custom skill

Pacchetto derivato che puoi rinominare, validare, importare/esportare e scaricare.

Input: delta JSON sopra la base skill.

Output: payload riutilizzabile oppure archive completo con `README.md`, `SKILL.md` e `openai.yaml`.

Guardrail: validazioni su campi obbligatori, slug, hex colors e contrast checks.

Custom Skill Builder

Three editing modes, one controlled derivation model

The base skill remains immutable. This builder lets you edit only the declared scope, persist named drafts, compare revisions, clone an existing custom skill, and export a packaged custom skill with its own metadata.

Base skill to custom skill

Builder mode and editable scope

The available form surface changes with the selected mode, but the data contract does not: `shared_fundamentals` stay locked, while `skill_metadata` and `design_system` remain the editable scope.

Base

glassmorphism

Sections touched

0 / 4

Overrides

Mode switcher

skill_metadatavisual_identityidentity_traitscolorsspacingradiusshadowstypographywidths_breakpointshierarchytypography_rolesinteractionlayoutcomponentsux_patterns

Scope contract

Editable

skill_metadatadesign_system.visual_identitydesign_system.identity_traitsdesign_system.tokensdesign_system.hierarchydesign_system.typography_rolesdesign_system.interactiondesign_system.layoutdesign_system.componentsdesign_system.ux_patternsdesign_system.constraintsdesign_system.skill_generation

Locked

shared_fundamentals

Quick navigation

Jump across the builder without losing the current revision context.

Base skill

Glassmorphism Product Layers

Source YAML from the catalog. It is never edited here.

Custom skill

Glassmorphism Product Layers

Derived package with its own metadata, revision history, and semantic diff.

Validation summary

4 blocking errors

Export blocked

colors

primary must use #RRGGBB format.

colors

secondary must use #RRGGBB format.

colors

surface must use #RRGGBB format.

colors

border must use #RRGGBB format.

Draft persistence and revisions

Save the current state, reopen a previous draft, compare revisions, or clone an existing custom skill as a new starting point.

No saved drafts for this base skill yet. Save the current state to create a reusable revision history.

Skill identity

Base skill vs custom skill

Name the derived package, define its slug, and set the packaging metadata that will travel with the exported custom skill.

0 override

Base skill

Glassmorphism Product Layers

glassmorphism-product-layers

Generate layered translucent UI with frosted surfaces, luminous gradients, and disciplined readability.

Custom package

Glassmorphism Product Layers

glassmorphism-product-layers

This becomes the identity of the exported custom package and its semantic metadata file.

Custom skill name

Custom skill slug

Suggested: glassmorphism-product-layers

Custom skill description

Recommended product areas

Avoid for

Palette

Palette and surfaces

Edit the core palette in all modes, then unlock extended token control in advanced and expert modes.

0 override

Primary

rgba(255,255,255,0.78)

Secondary

rgba(227,240,255,0.56)

Accent

#7DD3FC

Background

#09111F

Surface

rgba(255,255,255,0.14)

Primary

Primary actions, critical buttons, and highest-priority attention points.

rgba(255,255,255,0.78)

Secondary

Secondary surfaces, quieter containers, and support blocks.

rgba(227,240,255,0.56)

Accent

Highlights, badges, and small signals that energize the system.

#7DD3FC

Background

Overall canvas and dominant page mass.

#09111F

Surface

Cards, dialogs, and panels that need to separate from the background.

rgba(255,255,255,0.14)

Success

Warning

Danger

Border

Text primary

Text secondary

Text muted

Text inverse

Neutral scale

Typography

Typography and tone

Use curated font directions in every mode, then unlock scale, weights, and semantic type roles in advanced and expert mode.

0 override

Tone of voice

Font preview: The quick brown fox jumps over the lazy dog.

Type scale

Font weights

Line heights

Typography roles

Layout

Layout and rhythm

Basic mode edits the main shell and density. Advanced and expert modes unlock richer spacing, radius, layout, and hierarchy controls.

0 override

Control radius

Flow design goal

L’utente sceglie una base YAML, modifica i campi del design system dalla UI, e genera una skill che eredita i fundamentals condivisi e applica gli override utente sulla base selezionata.

Page shell

Spacing tokens

Section gap values, one per line.

Card gaps

Widths

Breakpoints

Page width and navigation rules

Advanced system controls

These sections map to the richer customization plan: visual identity, interaction rules, UX patterns, and component-level rules.

Visual identity

Identity traits

Interaction rules

UX patterns

Components rules

{
  "buttons": {
    "explicit": true,
    "source_basis": "Glass CTA and toolbar interactions",
    "confidence": "high",
    "rules": {
      "variants": [
        "accent-glass",
        "transparent-glass",
        "outline-light",
        "icon"
      ],
      "shape": "pill or 14px rounded rectangles",
      "usage": "Keep one glowing primary action; secondary actions remain low-chroma."
    }
  },
  "inputs": {
    "explicit": true,
    "source_basis": "Premium control centers",
    "confidence": "high",
    "rules": {
      "style": "Translucent field with inner shadow, visible label, and high-contrast input text",
      "validation": "Error tint overlays must still preserve legibility"
    }
  },
  "selects": {
    "explicit": true,
    "source_basis": "Filter bars and floating forms",
    "confidence": "medium",
    "rules": {
      "trigger": "Glass trigger with icon or chevron; selected state slightly brighter",
      "menu": "Opaque enough to maintain readable options"
    }
  },
  "dropdowns": {
    "explicit": true,
    "source_basis": "Contextual glass menus",
    "confidence": "medium",
    "rules": {
      "surface": "Blurred but more opaque than the parent panel"
    }
  },
  "cards": {
    "explicit": true,
    "source_basis": "Primary system surface",
    "confidence": "high",
    "rules": {
      "surface": "Backdrop blur, translucent fill, subtle border highlight, soft shadow",
      "content": "Often needs an inner wrapper for long-form text or dense stats"
    }
  },
  "tables": {
    "explicit": true,
    "source_basis": "Moderate-density analytical panels",
    "confidence": "medium",
    "rules": {
      "style": "Prefer list-table hybrids or split rows; full dense tables are a weaker fit"
    }
  },
  "modals": {
    "explicit": true,
    "source_basis": "Floating overlays",
    "confidence": "high",
    "rules": {
      "surface": "Central glass dialog with slightly more opacity than background panels"
    }
  },
  "dialogs": {
    "explicit": true,
    "source_basis": "Premium confirmation and edit flows",
    "confidence": "high",
    "rules": {
      "behavior": "Background blur plus soft scrim; keep dialog readable without visual soup"
    }
  },
  "sidebars": {
    "explicit": true,
    "source_basis": "Tool and media UIs",
    "confidence": "medium",
    "rules": {
      "structure": "Translucent rail with grouped icon/text sections"
    }
  },
  "tabs": {
    "explicit": true,
    "source_basis": "Segmented control patterns",
    "confidence": "high",
    "rules": {
      "style": "Glass pills or soft translucent underlines"
    }
  },
  "badges": {
    "explicit": true,
    "source_basis": "Status chips",
    "confidence": "high",
    "rules": {
      "style": "Semi-transparent pills with bright text and small border highlight"
    }
  },
  "alerts": {
    "explicit": true,
    "source_basis": "Floating messaging",
    "confidence": "high",
    "rules": {
      "structure": "Opaque inner content inside outer glass shell for readability"
    }
  },
  "empty_states": {
    "explicit": true,
    "source_basis": "Sparse premium product zones",
    "confidence": "high",
    "rules": {
      "composition": "Illustration or abstract orb, concise copy, one focused CTA"
    }
  },
  "charts_containers": {
    "explicit": true,
    "source_basis": "Premium analytics",
    "confidence": "medium",
    "rules": {
      "shell": "Glass card with careful contrast overlays behind axes and legends"
    }
  },
  "page_headers": {
    "explicit": true,
    "source_basis": "Hero chrome",
    "confidence": "high",
    "rules": {
      "composition": "Floating title block, short context, and action cluster"
    }
  },
  "filters": {
    "explicit": true,
    "source_basis": "Toolbar overlays",
    "confidence": "medium",
    "rules": {
      "placement": "Inside one anchored glass toolbar"
    }
  },
  "form_layouts": {
    "explicit": true,
    "source_basis": "Premium setting flows",
    "confidence": "high",
    "rules": {
      "structure": "Keep forms short, sectional, and visually grounded with inner wrappers"
    }
  }
}

Review

Final review

Review the semantic summary, export metadata, and raw override payload before generating the packaged skill.

0 override

Base reference

glassmorphism

Version 1.0.0

Change state

No changes yet

Piano dei campi che la UI puo esporre all’utente per personalizzare il design system prima della generazione della skill.

Semantic diff

No semantic changes yet. The draft still matches the base skill.

custom_skill_metadata

{
  "format_version": "design-skills.custom-skill.v1",
  "custom_skill_id": "glassmorphism-product-layers",
  "base_skill_slug": "glassmorphism",
  "base_skill_name": "Glassmorphism Product Layers",
  "base_skill_version": "1.0.0",
  "builder_mode": "advanced",
  "semantic_diff": [
    "No semantic changes yet. The draft still matches the base skill."
  ],
  "editable_scope": [
    "skill_metadata",
    "design_system.visual_identity",
    "design_system.identity_traits",
    "design_system.tokens",
    "design_system.hierarchy",
    "design_system.typography_roles",
    "design_system.interaction",
    "design_system.layout",
    "design_system.components",
    "design_system.ux_patterns",
    "design_system.constraints",
    "design_system.skill_generation"
  ],
  "locked_scope": [
    "shared_fundamentals"
  ],
  "generated_at": "2026-07-27T18:37:55.170Z"
}

You can still package the base skill with explicit custom metadata and no extra override delta.

user_override_payload

{}

Live preview

The same visual grammar as the detail-page demo, but updated with the current customization values.

Font

Manrope

Density

airy with generous outer breathing room

Continue browsing

Other design system bases

Back to gallery

Brutalism

Brutalism Interface System

Generate bold UI with hard outlines, confrontational hierarchy, and memorable task-oriented composition.

Material Design

Material Design Adaptive

Generate product UI with tokenized surfaces, adaptive elevation, measured motion, and practical, accessible hierarchy.

Minimal

Minimal Clarity System

Generate refined, restrained product UI with strong whitespace, quiet hierarchy, and disciplined component reuse.

Glassmorphism Product Layers

Core design variables from YAML

Color systemSemantic states, text colors, border token, neutral scale.

Spacing, radius and sizingDensity rules, spacing steps, radii and content widths.

Typography and depthScale, weights, line heights and shadow tokens.

ButtonshighGlass CTA and toolbar interactions

InputshighPremium control centers

SelectsmediumFilter bars and floating forms

DropdownsmediumContextual glass menus

CardshighPrimary system surface

TablesmediumModerate-density analytical panels

ModalshighFloating overlays

DialogshighPremium confirmation and edit flows

SidebarsmediumTool and media UIs

TabshighSegmented control patterns

BadgeshighStatus chips

AlertshighFloating messaging

Empty StateshighSparse premium product zones

Charts ContainersmediumPremium analytics

Page HeadershighHero chrome

FiltersmediumToolbar overlays

Form LayoutshighPremium setting flows

Core principles4 rules that set visual and UX direction.

Required coveragePage patterns and expected component families.

Anti-drift checklistThe checks worth running before generation is considered done.

Operating instructionsExecution notes for the generator, stripped of prompt boilerplate.

Non stai modificando la base skill, stai derivando una custom skill

Three editing modes, one controlled derivation model

Other design system bases

Brutalism Interface System

Material Design Adaptive

Minimal Clarity System