Our Design System
Our system starts with some core visual elements: Type, Color, and Icons. We also prescribe common practices for aspects of the system.Explore Foundations
Components are the backbone of our design system. In order to be most usable, our components are written in both Rails and React form.
Code examples, property options, and best practices can all be discovered here. Links to Figma design documentation can also be found in this section.
Layouts allow for positioning content in various formats and locations without needing to change the content.Browse Layout Tools
A guided list of common interactive experiences that the system supports to answer key presentational JS needs.
Helpers that are designed to give the system the flexibility it requires for developers to use at scale.Browse Helpers
Get up and running
Getting started with Sage is meant to be easy and approachable. Check out these practical developer guides to understand how to get up and running with the Sage Design System quickly.Readme
We encourage any member of the Kajabi team to feel empowered to participate. Understanding and contributing to the system are the keys to the system's longevity.Guidelines
How It Works
The language-agnostic style system that allows us to service any app code choice.View Sassdocs site
Our default approach, custom Rails View Components to serve our system to the app.
Versions of our components for when heavy state and interaction management is needed.Storybook