The Design System section helps teams create structured, reusable page layouts using predefined templates and patterns. Templates provide the high-level structure of a page. Patterns are modular building blocks that can be used within templates to organize content consistently.

Templates

Templates are composed of multiple patterns and serve as the foundation for common page types.

Viewing Templates

  1. Navigate to Design System > Templates.
  2. Browse the available templates visually. Each entry shows a thumbnail preview and a label (e.g. “Article Page”).

Creating a Template

  1. Click Create New Template.
  2. Enter a name and optional description.
  3. Click Add Block to insert patterns into the template.
Tip: Use templates to define repeatable formats for things like article pages, campaign layouts, or product updates.

Example: Article Page Template

This template is designed for editorial or long-form content, and includes a hero, a text block, and an image component.

Adding a Pattern to a Template

  1. While editing a template, click Add Block.
  2. Choose one or more patterns from the modal.
  3. Click Add Block to insert them into the template layout.

Pattern Selection Guidelines

Each template includes a Pattern Selection Guidelines section. These instructions help guide the AI when choosing which layout patterns to use and how to arrange them. You should:
  • Specify which patterns are required or optional
  • Indicate how often a pattern should be used (e.g. once per page)
  • Note where a pattern should appear (e.g. start or end of page)
  • Mention any patterns that should be avoided
These guidelines ensure your content follows design system rules, even when generated dynamically.

Patterns

Patterns are modular content blocks that can be combined to build out templates (also called “components” by some Content Management Systems.

Viewing Patterns

  1. Navigate to Design System > Patterns.
  2. Browse available patterns.

Coming Soon: How to Add Patterns