# Design System Walkthrough

{% embed url="https://youtu.be/q2IiQh2uDEA" %}
8 min video Design System Walkthrough
{% endembed %}



### Summary

The Workflow Builder design system employs Atomic Design methodology for scalable and consistent component organization. It features comprehensive tokenization for easy theme customization, variant-rich components for flexibility, and responsive design for adaptability. The system offers both vertical and horizontal layout options, customizable node properties, and a mix of pre-built and custom nodes. This approach ensures a flexible, efficient, and user-friendly workflow creation experience.

### Atomic Design Methodology&#x20;

The Workflow Builder design system is meticulously crafted following the Atomic Design methodology, ensuring scalability, consistency, and efficiency1. This approach organizes components into:

* Atoms: Basic building blocks (buttons, inputs, icons)
* Molecules: Simple groups of UI elements
* Organisms: Complex UI components
* Templates: Page-level layouts
* Pages: Specific instances with real content

### Comprehensive Tokenization&#x20;

The design system employs a robust tokenization strategy for colors, typography, spacing, and shadows1. This allows for easy switching between light and dark modes and seamless theme customization.

### Variant-Rich Components&#x20;

Each component comes with multiple variants for different states, sizes, and styles1. For example, buttons are available in:

* Five different sizes
* Multiple variants (text-only, icon and text, etc.)
* Various states (default, hover, active, disabled)

### Responsive Design&#x20;

The design system is built with responsiveness in mind, featuring fluid typography and flexible layouts that adapt to various viewport dimensions.

### Layout Options

Workflow Builder supports both vertical and horizontal layout options for nodes, allowing users to create workflows that best suit their visual preferences.

### Customizable Node

Properties Each node template can be extensively customized with dynamic properties, enabling developers to create highly specific workflow components.

### Pre-built and Custom Nodes&#x20;

The system offers a range of pre-defined nodes while also allowing for the creation of custom nodes, providing a balance between quick implementation and unique functionality.

####
