Design System

auro-skeleton HTML custom element

The complete accordion solution for React.

`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a

Extend either the `Iconset` or `IconsetSVG` exports of this package to supply your application with a custom icon set to power the use of `<sp-icon>` elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as `<sp-ico

Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:

Design System Tailwind CSS preset for MetaMask projects

Design system react ui components

Shared mixins, tools, etc. that support developing Spectrum Web Components.

React USWDS 3 component library

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

Icons from the Equinor Design System

Decathlon Design System - Vitamin icons library

Responsive, theme-based style props for Vanilla Extract

A collection of design elements in code for the IBM Design Language

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma

auro-loader HTML custom element

`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different s

Uniform design system components

Helios Design Tokens

Core package of the commercetools design system.

Sass helper for importing files only once. Used in the Carbon Design System

A collection of utilities shared across the other packages.

Decathlon Design System - Vitamin global CSS styles library

Legacy React components for Designsystemet

ReactiveControllers for powering common UI patterns

Helios Design System Components

Pictograms for digital and software products using the Carbon Design System

An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte

Design tokens of the Plasma Design System

A collection of React hooks used across some of the UI-Kit components.

Salesforce Lightning Design System for React

Containers relating to the :focus-visible polyfill hook in the Garden Design System

Various utilities for token types

The React implementation of the Equinor Design System

A MUI theme provider for Astro UXDS space design system.

Web component implementation of a Spectrum design CloseButton

Web component implementation of a Spectrum design ClearButton

The Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop ServiceTitan products. It contains tools for designers & developers, patterns, reusable components, guidelines, and more

Parser/validator for the Design Tokens Community Group (DTCG) standard.

Web components for the Carbon Design System

CLI for managing design tokens using the Design Tokens Community Group (DTCG) standard and generating code for any platform via plugins.

Design tokens for the Equinor Design System

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

This package contains design tokens for the [Cloudscape Design System](https://cloudscape.design/).

An inline spacing component renders its children horizontally with a consistent spacing between them.

A temporary package to house app and brand icon tiles. This package is a stop gap until these use cases are properly incorporated into the design system.

The design system is a library of CSS components with TypeScript React wrappers.

The Text component implements the typography elements such as headings, paragraphs, etc.

An `<sp-action-button>` represents an action a user can take.