> For the complete documentation index, see [llms.txt](https://synergy-codes.gitbook.io/workflow-builder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://synergy-codes.gitbook.io/workflow-builder/design-system-walkthrough.md). # Design System Walkthrough {% embed url="" %} 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 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 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 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 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 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. ####