Technologies Demos

List of Backlight projects demoing the use of different technologies.

These are incomplete Design Systems to demonstrate how some technologies can be used in Backlight.

Design token in system-ui with examples in styled-components and theme-ui.

featuringPowered by technology React

Components based on Adobe's react-aria, styled with CSS Modules. Design tokens in CSS Custom properties.

featuringPowered by technology React

This starter-kit is a great way to get started with Style Dictionary and have your components consume design tokens. Style Dictionary is a build system that allows you to define design decisions as tokens once, in a way for any platform or language to consume.

featuringPowered by technology Style-DictionaryPowered by technology CSS3

A simple Tech Sample made with Stitches.dev CSS-in-JS runtime and System UI tokens.

featuringPowered by technology stitchesPowered by technology System-UI

Classless Design System in Sass. Design tokens in Sass variables.

featuringPowered by technology CSS3

A simple Tech Sample for building a Design System with SolidJS

featuringPowered by technology solidjs

Visually setup the design tokens of tailwindcss. Export a tailwind.config.js ready for your hot application. Also contains examples in headless-ui components for React and Vue.

featuringPowered by technology CSS3

A Tech Sample starter kit based on Nunjucks for templating components and documentation.

featuringPowered by technology nunjucksPowered by technology sass

A simple Tech Sample made with Open Props, a collection of CSS Custom Properties helping to build your Design tokens.

featuringPowered by technology open-propsPowered by technology css3

A simple starterkit made with Svelte and SCSS tokens.

featuringPowered by technology svelte

Design System based on Vue 3, the Progressive JavaScript Framework. Tokens in CSS Custom properties.

featuringPowered by technology VueJS