Sandvik design system
Built with web components.
Foundations
Color & type
Neutral ramp · N-1 → N-9
ExpressiveAa Sandvik
Headline 4Engineering ahead
Body introA larger lead paragraph for clarity.
Body regularThe default reading size for UI text.
CaptionThe smallest supporting text.
Spacing, radius, motion and control-height tokens live in
src/tokens/tokens.css (spacing and radius are still provisional). Logo
ships as <sds-logo> from the
brand portal.
Get started
Install and use
Import a component's registration module and use its tag. That's the whole setup.
1. Install the package
npm install @sandvik/design-system
2. Register the elements you need
import '@sandvik/design-system/components/button/sds-button.js';
import '@sandvik/design-system/components/toggle/sds-toggle.js';
3. Use them as ordinary HTML
<sds-button>Get started</sds-button>
<sds-toggle checked>Notifications</sds-toggle>