Lit 3 · Web components
Sandvik design system
Framework-agnostic web components, built on the real Sandvik brand. Themed with design tokens, accessible by default — use them in any framework.
Foundations
Built on the published Sandvik styles
Color and typography come straight from the Sandvik UI design library in Figma.
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). The full
library — including the logo as <sds-logo> — comes from the
Sandvik 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-common/design-system
2. Register the elements you need
import '@sandvik-common/design-system/components/button/sds-button.js';
import '@sandvik-common/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>