Hero image for the Simba Design System stater kit

Introducing SIMBA - a Lion Design System

SIMBA is a Design System starter-kit for Backlight, based on Lion. As Building a Design System from scratch is a really hard and tedious task, Simba is the next step on our journey to build starter-kits for every possible technology.

Animation about the introduction of Simba Starter-kit

SIMBA features:

♻️ Open source

🤘 Based on Lion's accessible components

🔥 Design Tokens in JSON

🧩 20+ Web Components

📚 Interactive documentation

🌑  Dark mode out-of-the-box

🎨 Figma library

Design Tokens

The starter kit is built around four main tokens: Color, Radius, Typography, Spacing

Screenshot of the design tokens from Simba in the Backlight interface

Components

SIMBA comes with 20+ components to get started: dialog, buttons , checkbox, switch, everything to cover the basics and more.

Screenshot of some components from Simba in the Backlight interface

Documentation

Written in MDJS, the interactive documentation with built-in navigation is available next to the code to ensure a shallow learning curve as well as an easy onboarding for anyone joining the project. The documentation includes interactive playgrounds.

Screenshot of the documentation from Simba in the Backlight interface

FIGMA integration

SIMBA Figma library is available next to the code to ensure perfect Developers-Designers alignment.

Screenshot of the Figma integration in Simba in the Backlight interface

▶️ Explore SIMBA now on Backlight.dev

👩‍💻 Source code available on Backlight and GitHub

📦 npm package to try SIMBA unchanged.

Further reading

Check all other Backlight’s starter kits.