Our Design System
Foundations
Our system starts with some core visual elements: Type, Color, and Icons. We also prescribe common practices for aspects of the system.
Components
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.
Layout Tools
Layouts allow for positioning content in various formats and locations without needing to change the content.
Interactions
A guided list of common interactive experiences that the system supports to answer key presentational JS needs.
Coming soon...
Helpers
Helpers that are designed to give the system the flexibility it requires for developers to use at scale.
Developer Guides
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.
Contributing
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.
How It Works
SCSS System
The language-agnostic style system that allows us to service any app code choice.
Rails Components
Our default approach, custom Rails View Components to serve our system to the app.
Vanilla Javascript
Clean, minimal JavaScript to ensure the necessary interactions and accessibility features.
React Components
Versions of our components for when heavy state and interaction management is needed.