# 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. #### --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://synergy-codes.gitbook.io/workflow-builder/design-system-walkthrough.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.