Features
    Docs
    Pricing
    Mastery

    Articles to learn all about design systems.

    Sessions

    Videos and tutorial series with design system experts.

    Blog

    Latest posts and updates from our team.

    Log in
      • Welcome
      • Getting started
      • Concepts
        • Folders
      • Online Studio
        • Source Code Management
        • User's Preferences
      • CLI
      • VSCode Extension
      • Collaboration
        • Invite
        • Share
        • Comments
      • Design Tokens
        • Icon prefixUsing Style-Dictionary & Figma
        • Icon prefixUsing Figma Tokens Plugin
        • Icon prefixUsing Specify
        • Icon prefixUsing CSS Custom properties
        • Icon prefixUsing System-UI
      • Stories
      • Testing
      • Documentation site
        • Export static site
      • Using the DS in your app
        • Standard procedure
        • Icon prefixCreate React App (CRA)
        • Icon prefixNuxt 3
        • Icon prefixNext.js 11 and earlier
        • Icon prefixNext.js 12 and later
        • Icon prefix11ty (with Nunjucks)
      • Design System Examples
      • Technologies Demos
      • Technologies
        • Icon prefixJavaScript
        • Icon prefixTypeScript
        • Icon prefixJSX
        • Icon prefixComponent Story Format
        • Icon prefixCustom Elements Manifest
        • Icon prefixReact
        • Icon prefixPreact
        • Icon prefixVue 3
        • Icon prefixSvelte
        • Icon prefixStencil
        • Icon prefixRiot
        • Icon prefixµce
        • Icon prefixPrism
        • Icon prefixAssemblyScript
        • Icon prefixWebAssembly Text Format
        • Icon prefixCSS
        • Icon prefixSass
        • Icon prefixLess
        • Icon prefixmarkdown
        • Icon prefixmdjs
        • Icon prefixMD Vue
        • Icon prefixMDX
        • Icon prefixMDsveX
        • Icon prefixNunjucks
        • Icon prefixpug
        • Icon prefixVS Code Custom Data Format
        • Icon prefixStyle Dictionary
      • Supported config files
        • package.json
        • studio.config.json
        • tsconfig.json
        • tailwind.config.js
        • eslint
        • prettier
        • stories.preview
        • custom-elements-manifest.config.mjs
        • sd.config.{json,js}
      • FAQ

      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.

      Starter hero image

      • 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
      Starter hero image

      • 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
      Starter hero image

      • 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
      Starter hero image

      • 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...
      Starter hero image

      • 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...
      Starter hero image

      • 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
      11ty (with Nunjucks)
      Technologies Demos