Landing and pricing

Compose product pages with feature sections, metrics, comparisons, pricing and calls to action.

Component guides

A full-width visual band with shaped edges, background imagery and theme-aware surfaces.

Introduce a section and arrange its content beside a clear heading at larger breakpoints.

Present one capability with a recognizable icon, short explanation and an optional next step.

Arrange related metrics in a responsive surface with a clear reading order.

A compact value with a label, explanation and optional semantic icon.

Pair a code block with its visible result and the context needed to understand both.

Compare approaches in responsive columns, each with its own heading, summary and feature list.

One self-contained option in a comparison, with independent emphasis and freely composed details.

A list item with a compact icon, designed for clear and consistent comparison details.

Close a section with a clear next step, an optional secondary route and concise supporting context.

A responsive plan comparison with a section heading, configurable columns and independent plan surfaces.

A complete plan card with a price, billing period, feature list and navigation action.

A compact list item for included capabilities, limits and plan-specific details.