Design system examples
Design systems made in Backlight.
These design systems can be duplicated and used as starter kits for creating a brand new design system.
- Based on Lion's accessible components
- Design Tokens in JSON
- 20+ Web Components
- Style inspired by TailwindCSS
- Dark mode out-of-the-box
powered by Lion Lit Web Components
made by @divriots
- Based on Chakra's accessible components
- Design Tokens in System-UI
- 40+ Components
- Stories and documentation sourced from Chakra directly
powered by Chakra UI React emotion System-UI
made by @divriots
- Based on
fast-components
- FAST Design Tokens
- 40+ accessible components
- Adaptive color system
- Dark mode support
powered by FAST Web Components
made by @divriots
- Mobile & Web
- Based on Paper components
- Paper Design Token
- 25+ cross-platform components
- Dark mode support
powered by Paper React-Native
made by @divriots
in progress...
- Based on MUI
- ~50 components in 7 categories
- Tokens-based theming system
- MUI's components documentation embedded
- Dark mode support
powered by MUI
made by @divriots
in progress...
- Based on Shoelace
- Shoelace Design Tokens
- 30+ Web Components
- Documentation sourced directly from Shoelace
powered by Shoelace Lit Web Components
made by @divriots