Learns Design System and Playground

Welcome! This is your home for everything design at CTD Learns. Built with MUI, styled to our brand. Developers, ship from one source of truth. Designers, the playground (coming soon) generates components and wireframes. Take a look around.

Color tokens

Type sizes

Components

Patterns

Start here

Token Library

Search every token in the system. Click any token to jump to its docs.

Open library

Buttons

See how component pages work, with a live interactive preview and full specs.

See an example

Workflow Editor

Our most complete pattern. End-to-end docs from interactive preview to React Flow code.

Explore the pattern

Foundations

Tokens

The full glossary of design tokens.

Colors

Brand, semantic, and surface palettes.

Typography

Type scale and heading styles.

Spacing

Spacing scale, radii, shadows, and breakpoints.

Components

Buttons

Contained, outlined, and text variants.

Cards

Feature, list, content, and dashboard variants.

Inputs

Text fields, selects, switches, and form controls.

Menus

Context menus, tooltips, and overlays.

Navigation

Sidebar, topbar, and breadcrumbs.

Feedback

Status badges, empty states, modals, and accordions.

Data Display

Tables and DataGrid styling.

Patterns

Form Editor

Build custom forms with field types and live preview.

Workflow Editor

Visual canvas for building automated workflows.

Email Editor

Compose and preview email templates.

Calendar

Three calendar variants for different contexts.

Guidelines

Do's & Don'ts

Common mistakes and how to avoid them.

Found a bug or have an idea?

Send feedback, request a feature, or report a bug. Your input shapes what comes next.