Design systems, code-side
    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
      • Online Studio
        • Git Integration
        • User's Preferences
      • CLI
      • Previews
      • 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
      • Tests
      • Documentation
        • Export static site
      • Using the design system 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)
      • Visual review
      • How tos
        • Icon prefixImport modules
      • 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}
      • Technology demos
      • Design system examples
      • FAQ

      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.

      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
      Technology demos
      FAQ