Design System

Design System gives you complete control over the visual branding and behavior of widgets built in Widget Studio. Instead of manually styling each widget you create, Design System lets you establish brand-consistent colors, typography, and generation rules once—then automatically apply them across all your widgets. This ensures every widget you build feels native to your product, maintains visual consistency, and follows your preferred interaction patterns without requiring repetitive configuration or design work.

​

Key Features

Design System includes two powerful components that work together:

​

Key Features

Design System includes two powerful components that work together:

​

Design System: Visual Branding

​

What You Can Customize

​

How It Works

Once published, your design system becomes available as a selection option when building new widgets in Widget Studio.

​

Applying Design System to Widgets

When you create a new widget in Widget Studio, you can select which design system to apply. The widget editor automatically uses your selected design system’s colors and typography, so widgets match your brand from the moment they’re generated. You can:

• Apply one design system across all widgets for consistency
• Create multiple design systems for different customer tenants
• Switch between design systems to see how widgets look with different branding

​

Widget Guidelines: Generation Rules

​

What Widget Guidelines Control

Widget Guidelines define the rules and patterns that guide widget generation. Think of them as instructions for the AI about how your widgets should behave and what they should include. Guidelines can cover:

• Data visualization approaches (charts, tables, cards)
• Progressive disclosure patterns
• User interaction flows
• Content structure and organization
• Accessibility requirements
• Specific component preferences

​

Why Widget Guidelines Matter

Without guidelines, every widget generation starts from scratch. The AI might visualize data differently each time, use inconsistent interaction patterns, or structure content in ways that don’t match your product’s conventions. With Widget Guidelines, you define your preferences once—like “always use progressive visualization for complex data” or “prioritize accessibility in all interactions”—and every widget respects those rules automatically.

​

How Widget Guidelines Work

Widget Guidelines function as system prompts that guide the AI agent responsible for widget generation. When you generate a new widget, the AI automatically follows your established guidelines to ensure consistency.

​

Creating Widget Guidelines

​

Applying Widget Guidelines

Like Design Systems, Widget Guidelines are selected when building widgets in Widget Studio. You can:

• Apply one set of guidelines across all widgets
• Create different guidelines for different customer segments
• Combine different design systems with different widget guidelines as needed

​

Design System + Widget Guidelines: Better Together

While each component works independently, they’re most powerful when used together:

• Design System ensures visual consistency (colors, fonts, appearance)
• Widget Guidelines ensure behavioral consistency (structure, interactions, patterns)

Together, they let you define once and apply everywhere—saving time while ensuring every widget feels like a natural part of your product.

​

Use Cases

​

Getting Started

​

Prerequisites

​

Next Steps

Ready to create your first design system? Check out the Widget Studio documentation to learn how to build widgets that use your design system.