Design Systems 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 byPowered by technology LionPowered by technology LitPowered by technology Web Components
made byMade by owner photo @divriots

  • Based on Chakra's accessible components
  • Design Tokens in System-UI
  • 40+ Components
  • Stories and documentation sourced from Chakra directly

powered byPowered by technology Chakra UIPowered by technology ReactPowered by technology emotionPowered by technology System-UI
made byMade by owner photo @divriots

  • Based on fast-components
  • FAST Design Tokens
  • 40+ accessible components
  • Adaptive color system
  • Dark mode support

powered byPowered by technology FASTPowered by technology Web Components
made byMade by owner photo @divriots

  • Mobile & Web
  • Based on Paper components
  • Paper Design Token
  • 25+ cross-platform components
  • Dark mode support

powered byPowered by technology PaperPowered by technology React-Native
made byMade by owner photo @divriots
in progress...

  • Based on MUI
  • ~50 components in 7 categories
  • Tokens-based theming system
  • MUI's components documentation embedded
  • Dark mode support

powered byPowered by technology MUI
made byMade by owner photo @divriots
in progress...

  • Based on Shoelace
  • Shoelace Design Tokens
  • 30+ Web Components
  • Documentation sourced directly from Shoelace

powered byPowered by technology ShoelacePowered by technology LitPowered by technology Web Components
made byMade by owner photo @divriots