Skip to main content
Signet Design System

Signet Design System

Get started

Patterns Layout

Use components as building blocks to create new digital products - usage, visual accessibility guidelines, and code included.

Start Building

Design 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 Tokens

UX Principles

Use components as building blocks to create new digital products - usage, visual accessibility guidelines, and code included.

Learn the Essential
Signet Works with Angular React and Vue

Signet Works with Angular, React, Vue and other web component frameworks.

Cross Platform Components

Learn about every updated components to viewports from the core team.

MenuPopoverModalsSwitchCheckboxDrawerChipDate Picker
Menu Item 1Menu Item 2Menu Item 3Menu Item 4
<SignetMenu text="Menu" hide-indicator="true">
  <SignetMenuItem>Menu Item 1</SignetMenuItem>
  <SignetMenuItem>Menu Item 2</SignetMenuItem>
  <SignetMenuItem>Menu Item 3</SignetMenuItem>
  <SignetMenuItem>Menu Item 4</SignetMenuItem>
</SignetMenu>

<template>
  <signet-menu text="Menu" hide-indicator="true">
    <signet-menu-item>Menu Item 1</signet-menu-item>
    <signet-menu-item>Menu Item 2</signet-menu-item>
    <signet-menu-item>Menu Item 3</signet-menu-item>
    <signet-menu-item>Menu Item 4</signet-menu-item>
  </signet-menu>
</template>

<signet-menu text="Menu" hide-indicator="true">
  <signet-menu-item>Menu Item 1</signet-menu-item>
  <signet-menu-item>Menu Item 2</signet-menu-item>
  <signet-menu-item>Menu Item 3</signet-menu-item>
  <signet-menu-item>Menu Item 4</signet-menu-item>
</signet-menu>
View Documentation
Design Tokens

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!

Design System