Soft Neumorphic Dual Theme Board
Use this skill to build or restyle UI in a soft-neumorphic style that supports both light and dark themes. Preserve the tactile material logic across themes: same-tone surfaces, large radii, raised cards and buttons, inset fields, and restrained accent usage.
Workflow
- Read
references/usage.mdfirst. - Load only the files needed for the task:
references/SoftNeumorphicDualThemeBoard.tokens.jsonfor semantic tokens and light/dark valuesreferences/SoftNeumorphicDualThemeBoard.cssfor CSS variables and component semanticsreferences/tailwind.preset.cjswhen the host project uses Tailwindreferences/preview.htmlwhen you need the complete system board
- Decide whether the task needs:
- token mapping only
- component restyling
- a full preview board or design-system page
- Keep both themes aligned through tokens rather than duplicating component logic.
- Verify that depth, input treatment, and button behavior feel coherent in both themes.
Non-Negotiables
- Keep surfaces close in tone to the page background.
- Create hierarchy through soft shadows, inset surfaces, spacing, and radii rather than harsh borders.
- Use large radii consistently.
- Keep buttons raised by default and fields inset by default.
- Use accent color selectively for active, primary, or highlighted states.
- Do not mix this style with glassmorphism, flat border-heavy cards, or hard industrial panels.
Component Rules
Foundations
- Use base, raised, inset, and pressed surfaces as a unified system.
- Treat light and dark as the same design language with different tokens.
Controls
- Buttons, inputs, selection controls, and sliders must all feel tactile and physically related.
- Focus and error should be clear without breaking the soft-neumorphic material.
Navigation
- Tabs, breadcrumbs, pagination, and steppers should remain compact and quiet.
- Active state should rely on accent and surface behavior rather than heavy outlines.
Data Display
- Cards, list items, badges, and compact table surfaces should remain readable and soft in both themes.
Feedback
- Modal, toast, progress, alert, skeleton, and empty states must keep the same shadow and radius logic as the rest of the system.
Deliverables
- When asked for a theme or kit, provide both light and dark support unless the user explicitly asks for only one theme.
- When asked for a page, keep the underlying dual-theme token architecture.
- Prefer shareable preview pages that work without a build step when practical.


