Light / Material / Soft UI
True Neumorphism
One soft grey surface, shaped by light and shadow. Raised cards, inset details and tactile controls with readable contrast.
THE DESIGN LANGUAGE
One surface. Light and shadow.
Nunito’s rounded letterforms sit on a single soft-grey canvas. Paired shadows create raised and inset surfaces, while dark copy and indigo actions preserve a useful hierarchy.
Extend the system
Keep the light source consistent and reuse the surface colour. Use raised recipes for grouping and inset recipes for recessed details, with visible control boundaries and focus rings.
The source includes design-language.md with typography, rhythm, surfaces, ornament and extension rules.
Four editable patterns
- Hero
- Features
- Call to action
- Pricing
Page-level adoption
The runnable example owns its document layout, tokens and fonts. Its identity stays independent of this catalogue. Combining two complete kits on one page requires deliberate scoping and revalidation.
Bring it into your project.
Download the source and copy the complete folder to src/design-kits/true-neumorphism/. Create a route that imports the included example:
---
import Demo from '../../design-kits/true-neumorphism/examples/Demo.astro';
---
<Demo />For whole-site adoption or an existing project, follow the included README and installation guide before replacing tokens or layout imports.