Technology demos
Here is a list of Backlight projects that demo the use of different technologies.
These are incomplete design systems with the goal of demonstrating how certain technologies can be used in Backlight.
Design Tokens in System-UI with examples in styled-components and theme-ui.
featuring'/%3e%3cellipse rx='11' ry='4.2' transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e)
React
React
Component-based on Adobe's react-aria, styled with CSS Modules. Design Tokens in CSS custom properties.
featuring React
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.
featuring
Style-Dictionary
CSS3
Style-Dictionary CSS3
A simple tech sample made with Stitches.dev CSS-in-JS runtime and System-UI tokens.
featuring
stitches
System-UI
stitches System-UI
Classless design system in Sass. Design Tokens in Sass variables.
featuring CSS3
CSS3
A simple tech sample for building a design system with SolidJS
featuring
solidjs
solidjs
Visually set up 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.
featuring CSS3
CSS3
A tech sample starter kit based on Nunjucks for templating components and documentation.
featuring
nunjucks sass
nunjucks sass
A simple tech sample made with Open Props, a collection of CSS custom properties helping to build your Design Tokens.
featuring
open-props css3
open-props css3
A simple starter kit made with Svelte and SCSS tokens.
featuring
svelte
svelte
Design system based on Vue 3, the Progressive JavaScript Framework. Tokens in CSS custom properties.
featuring
VueJS
VueJS