Frontend & UI
design-skills · Neumorphism
Soft extruded surfaces in stone gray with Space Mono type.
What it is
A guideline skill for neumorphic UI: inner and outer shadows on a monochromatic stone #E7E5E4 surface, a teal #006666 accent, Space Mono for display and body, compact density spacing.
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.
Why it matters for design
- Monochromatic surfaces mean depth comes from shadow rather than from color contrast.
- Compact density spacing suits control-heavy panels such as dashboards and settings screens.
- Rules forbid mixing visual metaphors, so soft extrusion stays the only depth language.
What it covers
- Style foundations
- Accessibility
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
How to install
design-skills · Neumorphism
-
Clone the repo.
git clone https://github.com/bergside/awesome-design-skills -
Point Codex at the skill file.
skills/neumorphism/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Have Codex set surface and shadow tokens before styling any individual control.
-
Ask for visible focus states, since soft shadows alone fail keyboard users.
-
Require semantic HTML before ARIA, as this skill specifies.
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.