Building with Sage

Foundations

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

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.

Browse Layout Tools

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.

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

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.

Guidelines

SCSS System

The language-agnostic style system that allows us to service any app code choice.

View Sassdocs site

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.

Storybook