🎨 Sigil

Curious to learn more about design systems, including what they are and how they work? Check out Backlight's What is a Design System?

What’s Included

Sigil provides:

• Design tokens for color, spacing, typography, and other visual primitives.
• Prebuilt components like buttons, inputs, and dialogs, designed with accessibility and responsiveness in mind.
• Theming support to customize appearance while maintaining consistency.
• Developer-first ergonomics to be fast, composable, and type-safe.

Core Goals

• CSS and framework agnosticism: Sigil is built on Panda CSS, a CSS-in-JS engine that compiles to static, atomic CSS. This makes it easy to decouple styling from specific frontend frameworks, enabling adoption across diverse environments.
• Customizable by anyone: Even outside the Omni ecosystem, teams can extend or override the Sigil theme to suit their brand or product needs. Panda CSS makes theme extension intuitive and scalable.
• Modern design system best practices: Sigil is built to serve as a foundation for scalable design and development collaboration, following accessibility standards and flexible architecture principles.