ardot-style-guide

Build a complete design system by locating and applying design tokens and guidelines for colors, typography, and spacing. This ensures visual consistency across UI components like dashboards and landing pages by generating an authoritative style guide and applying its tokens automatically.

Design tokens are visual design attributes like colors, typography, and spacing stored as variables within a style guide. They work by centralizing these values to ensure consistent UI implementation across dashboards and landing pages, allowing automatic application and updates.

Yes, you can use this design system workflow for dashboards and landing pages. It specifically targets UI design and implementation workflows for these project types, enabling you to generate and apply style guide tokens to ensure visual consistency across Ardot projects.

Yes, you need to validate fonts before building a style guide. Font validation via get_available_fonts is a required prerequisite to ensure token viability, confirming that the typography tokens defined in your style guide are usable and correctly implemented across your UI components.

The best way to apply design tokens to UI components is to generate an authoritative style guide first, then apply the resulting tokens automatically to your UI. This involves fetching editor state and guidelines to ensure the tokens satisfy all prerequisites before applying them to dashboards and landing pages.

Your style guide discovery may not return valid design tokens if prerequisites like fetch_editor_state with schema enabled or fetch_guidelines are not met. Additionally, failing to validate fonts via get_available_fonts can prevent token viability, causing the discovery process to fail or return incomplete results.