Frontend & UI
design-skills · Claymorphism
Puffy rounded 3D shapes, Poppins headlines, blue on white.
What it is
A guideline skill for claymorphic UI: soft, rounded, puffy shapes that mimic malleable clay. Poppins display, Montserrat body, a blue #3B82F6 accent and deep blue text on white.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Why it matters for design
- Puffy rounded forms give buttons an obvious pressable affordance without extra labels.
- Deep blue text #1C398E on white holds contrast while the palette stays playful.
- Rules forbid mixing metaphors, so clay depth never combines with glass or flat.
What it covers
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
How to install
design-skills · Claymorphism
-
Clone the repo.
git clone https://github.com/bergside/awesome-design-skills -
Point Codex at the skill file.
skills/claymorphism/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Ask Codex for radius and shadow tokens first, since they define the clay look.
-
Pair Poppins display with Montserrat body as specified, not two similar sans faces.
-
Check that focus-visible and disabled states survive the soft shape treatment.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.