claymorphism

Name: claymorphism
Availability: InStock
Author: Bergside

Standardize claymorphism UI patterns with token-based theming and WCAG 2.2 AA rules.

2.3k|211|Updated Mar 9, 2026

Search Tags:#accessibility #design system #ui components #interaction states #claymorphism #token theming

Ready to run

npx skills add https://github.com/bergside/awesome-design-skills --skill claymorphism-bergside

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claymorphism
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/claymorphism
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill claymorphism-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams consistently design and implement claymorphism-style UI components that stay accessible and cohesive across an application.

Core Features & Use Cases

Visual system foundations: Defines an explicit palette, typography choices, spacing rhythm, and rounded geometry for clay-like, puffy surfaces.
Implementation-ready rules: Provides do/don’t guidance covering tokens, component hierarchy, and consistent interaction states.
Accessibility and quality gates: Enforces WCAG 2.2 AA, keyboard-first behavior, visible focus states, and testable acceptance criteria for review.

Quick Start

Apply the claymorphism skill to your design system and use its tokens and component rules to implement clay-styled buttons, inputs, cards, and their interaction states.

Frequently Asked Questions about claymorphism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is claymorphism in UI design and how does it work?▼

Claymorphism is a UI design style featuring puffy, rounded surfaces with soft shadows to create a clay-like aesthetic. It works by standardizing visual foundations like specific palettes, typography, spacing, and rounded geometry for consistent component styling.

How do I implement accessible claymorphism UI components?▼

Implement accessible claymorphism UI by applying explicit design tokens and following WCAG 2.2 AA keyboard-first rules. The system enforces visible focus states and testable QA acceptance criteria to ensure components remain accessible during interaction-state behavior.

Does claymorphism design support token-based theming for design systems?▼

Yes, claymorphism design supports token-based theming by requiring explicit token usage for visual properties. This enables consistent theming across clay-like interfaces and allows design-to-implementation workflows to maintain cohesive component hierarchy and interaction states.

Can I use claymorphism styling for my existing design system components?▼

Yes, you can apply claymorphism styling to existing design system components like buttons, inputs, and cards. It provides do/don't constraints and implementation-ready rules covering tokens and component hierarchy to ensure consistent interaction states across your application.

What are the limitations of using claymorphism for UI patterns?▼

A limitation of claymorphism is the strict adherence required to WCAG 2.2 AA accessibility standards and explicit token usage to prevent visual inconsistency. You must follow do/don't constraints carefully, as deviating from defined tokens and keyboard-first rules breaks testable QA acceptance criteria.