Live demo — an original page built in the Material style. Open in new tab
Material
A tactile, layered interface system where elevated surfaces, purposeful motion, and clear hierarchy make every action feel physical and obvious.
Install via CLI
$ npx staqd add materialInside this skill
Material is an interface system built on the idea that digital surfaces should behave like thin sheets of a real material: they cast shadows, stack in layers, and respond to touch. The result is an experience that feels tactile, predictable, and warm without being loud. Reach for Material when you want a polished, cross-platform app feel where hierarchy and feedback matter more than visual flash.
Design principles
- Surfaces are physical. Each panel is a sheet with a real elevation, and shadows communicate which layer the user is on.
- Motion has meaning. Transitions explain where things come from and where they go, never decorating for its own sake.
- One bold accent drives action. #2962FF marks the primary path and #00BFA5 supports secondary success states.
- Hierarchy through type roles. A fixed set of text styles keeps every screen consistent and legible.
- Generous touch targets. Everything tappable is comfortable for a thumb.
- Consistency over novelty. The same component behaves the same way everywhere in the product.
Material is a Pro skill
Unlock the full Material spec — design tokens, component coverage, motion, and accessibility — plus the entire library of design skills and Pro prompts.
- Every design skill, growing weekly
- Full Pro prompt library + unlimited MCP
- Commercial-use rights on output
Use it with these prompts
App home screen
FreeBuild a mobile app home screen in the Material style: #F2F4F8 background, white #FFFFFF cards with soft elevation shadows, a #2962FF floating action button, and a top app bar with clear hierarchy.
Settings list
ProData form
ProMore aesthetic skills
Neumorphism
aestheticA soft, extruded interface where elements appear to push out of or press into a single continuous surface using paired light and dark shadows.
Artistic
aestheticAn expressive, hand-made design system blending organic blobs, playful illustration, and unconventional layouts into interfaces that feel like a living sketchbook.
Perspective
aestheticA spatial design system that uses angled planes, layered depth, and foreshortening to give flat screens a dynamic, three-dimensional sense of direction.