CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

claymorphism

Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.

71

Quality

89%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Claymorphism Design Spec

3 Core Elements

  1. Large Radius — Generous border-radius (20–50px) for a puffy, inflated look
  2. Dual Inner Shadows — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface
  3. Offset Outer Shadow — Directional box-shadow offset (not centered) to ground the element

CSS Tokens

Reference: references/tokens.css

@import 'references/tokens.css';

.clay-card {
  background: var(--clay-bg-card);
  border-radius: var(--clay-radius-lg);
  box-shadow: var(--clay-shadow);
  color: var(--clay-text);
}

Component Examples

Card

.clay-card {
  background: var(--clay-bg-card);
  border-radius: var(--clay-radius-lg);
  box-shadow: var(--clay-shadow);
  padding: 1.5rem;
  color: var(--clay-text);
}

Button

.clay-btn {
  background: var(--clay-bg-button);
  border: none;
  border-radius: var(--clay-radius-pill);
  box-shadow: var(--clay-shadow);
  padding: 0.75rem 1.5rem;
  color: var(--clay-text);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.clay-btn:hover {
  box-shadow: var(--clay-shadow-elevated);
}
.clay-btn:active {
  box-shadow: var(--clay-shadow-pressed);
}

Input

.clay-input {
  background: var(--clay-bg);
  border: none;
  border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow-pressed);
  padding: 0.75rem 1rem;
  color: var(--clay-text);
}
.clay-input:focus {
  outline: 2px solid var(--clay-accent);
  outline-offset: 2px;
}

Toggle

.clay-toggle {
  width: 56px;
  height: 30px;
  background: var(--clay-bg-card);
  border-radius: var(--clay-radius-pill);
  box-shadow: var(--clay-shadow-pressed);
}
.clay-toggle-knob {
  width: 24px;
  height: 24px;
  background: var(--clay-bg);
  border-radius: 50%;
  box-shadow: var(--clay-shadow);
  transition: transform 0.2s;
}

Dark Mode Notes

  • Dark mode reduces inner highlight intensity (rgba(255,255,255,0.05) vs 0.6) to avoid glowing artifacts
  • Outer shadow opacity increases to maintain depth on dark backgrounds
  • Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
  • All dark tokens are defined in [data-theme="dark"] in tokens.css

Accessibility Notes

  • Ensure contrast ratio ≥ 4.5:1 for text — clay backgrounds are muted, verify against --clay-text
  • Provide visible :focus outlines since clay shadows alone don't indicate focus
  • Use prefers-contrast: more to flatten shadows and increase text contrast
@media (prefers-contrast: more) {
  .clay-card {
    box-shadow: 0 0 0 2px var(--clay-text);
  }
}
Repository

fengshao1227/ccg-workflow

Path

templates/skills/domains/frontend-design/claymorphism/SKILL.md

Revision

51b1e00

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill