Signet Design System
All-In-One Design System for Angular, React and VueJS
Signet is the design system that guides the style, design, typography, color, usability, and accessibility of our products. Signet provides UI Kits and components that makes our applications simpler, pleasant and consistent.
Patterns Layout
Use components as building blocks to create new digital products - usage, visual accessibility guidelines, and code included.
Start BuildingDesign Tokens
A Style Dictionary, a single place to create and edit your styles. With a single command, you can make them available for all.
Explore Design TokensUX Principles
Use components as building blocks to create new digital products - usage, visual accessibility guidelines, and code included.
Learn the EssentialCross Platform Components
Learn about every updated components to viewports from the core team.
Recently updated components:
See DemoDESIGN
React
Vue
Angular
Write CSS Styles withDesign Tokens
What is a Design Token?
A design token is a variable-name-spacing used to represent actual values such as color hexadecimal values. For example, color #fff can be represented as epi-white
How it works
Centralised design tokens make visual updates to your products happen nearly automatically.
Designer updates the central design token repository on Figma
CI/CD generates an updated NPM package.
Product teams update pull update, recompile, and release!
Zero frontend developer effort!
