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