Visual Typography and Badge Components

Not everything on a page is data. Some content is structural — headings that organize a page, labels that explain sections, callout blocks that highlight important information, status badges that communicate state at a glance. This presentational layer matters as much as the data layer for making a page usable.

Typography and badge components bring this visual vocabulary into the builder as first-class components.

Typography Components

Headings: H1 through H4, configurable with text content, size, weight, and color. Place section headings above groups of components to create clear page structure. The heading is a component — it can be conditionally visible, reordered with drag and drop, and targeted by conditional logic.

Labels and captions: Smaller text elements for annotating content — "Last updated," "Required fields marked with *," section descriptions. Labels support the same styling options as headings at smaller scales.

Callout blocks: Bordered, lightly colored blocks for highlighting important information — warnings, tips, notices, deadlines. Pre-styled in standard alert colors (info, warning, success, error), or customized with your own colors.

Dividers: Visual separators between page sections, in several weight and style options.

Badge Components

Badges communicate categorical status or classification at a glance. A badge is a small, colored, pill-shaped label. Badge components in the builder are standalone visual elements — not tied to a field value, but configured with a fixed label and color.

Use badge components for:

• Section status indicators ("Beta," "New," "Required")
• Category labels that don't come from data
• Visual cues alongside list items
• Status representations in custom page layouts

Color System Integration

Typography and badge components integrate with the workspace's design system. When you configure a color, you choose from the workspace's defined palette — the same colors used in buttons, field options, and status badges throughout the application. This keeps the visual language consistent even when adding purely decorative elements.

Data-Driven Badges

For badges that should reflect actual data values, the field badge component reads a status or select field and renders the appropriate badge automatically. Static badge components are for cases where the badge is always present, not conditional on data.

Together, the two cover the full range of badge use cases in application pages.