This is a Technology Sample you can rely on to build your own Design System, based on Open Props.
Disclaimer: Technology Samples aren't comprehensive Design Systems but showcases a given technology so you free to build you own solution upon it.
This tech sample uses Open Props to implement its components. Open Props is a comprehensive collection of CSS Custom Properties (also known as CSS variables), allowing you to access a set of pre-defined variables ready to be used, as well as redefining them for your own needs. You can also use them as a foundation for an advanced theming solution like Tailwindcss.
The components in this Tech Sample use Scss for their internal styles, relying on CSS Custom Properties for Tokens access.
The Tokens are split in different components, following the Open Props structure:
colors: colors and variantsgradients: collection of pre-defined gradientsshadows: inset and shadowsaspect-ratios: collection of different ratios for yourbox-ed elementssizes: differents sizes in relative units
Documentation pages are using the @divriots/dockit-core documentation framework to preview the different tokens. See the doc-layout component.
- Open Props
- @argyleink: Creator of Open Props
- Coding Design System - Open Props - Part.1: Live Coding session showing the implementation of this Starter Kit