Pricing & plans

7 min · Pattern

Pricing pages combine tier grids, billing toggles, comparison tables, and FAQ accordions. Once UI ships a pricing task bundle and gold example with highlighted middle tiers.

What this pattern covers

A production pricing page usually has four sections:

Hero with eyebrow, headline, and value prop
Three-tier grid with a highlighted "most popular" plan
Monthly / yearly toggle via SegmentedControl
Feature comparison table and FAQ accordion at the bottom

Gold reference: packages/core/ai/examples/pricing.tsx and task bundle packages/core/ai/tasks/pricing.json. For production fidelity, also read matching Pro blocks from examples/blocks/manifest.json (Header2, Footer2 patterns).

Page structure

Stack sections in a Column with gap="104" — the pricing task bundle's recommended section rhythm:

<Column as="main" fillWidth horizontal="center" gap="104" paddingBottom="104">
  {/* Hero with ambient background */}
  {/* Tier grid + billing toggle */}
  {/* Comparison table on neutral band */}
  {/* Bottom CTA panel */}
</Column>

Keep section gaps at 104 between major blocks. Do not cram tiers, table, and FAQ into one surface panel.

Tier grid

Use a three-column Grid that collapses to one column on mobile:

<Grid columns="3" gap="24" s={{ columns: 1 }}>
  {/* tier panels */}
</Grid>

Each tier is a Column surface panel, not a Card:

<Column
  fill
  background="surface"
  border="neutral-alpha-weak"
  radius="l"
  padding="32"
  overflow="hidden"
>
  <Column fill gap="24">
    <Heading as="h3" variant="heading-strong-m">Starter</Heading>
    <Text variant="body-default-s" onBackground="neutral-weak">
      For solo builders shipping their first product.
    </Text>
    {/* price row */}
    {/* feature list with Icon checkmarks */}
    <Button fillWidth variant="secondary" arrowIcon>Start with Starter</Button>
  </Column>
</Column>

Use Column with background="surface" and border — not Card.interactive. Pricing tiers are informational panels, not clickable cards.

Highlighted middle tier

The recommended plan gets brand border and a glow Background gradient:

<Column
  fill
  background="surface"
  border="brand-alpha-medium"
  radius="l"
  padding="32"
  overflow="hidden"
>
  <Background
    position="absolute"
    top="0"
    left="0"
    fill
    pointerEvents="none"
    gradient={{
      display: true,
      colorStart: "brand-alpha-medium",
      colorEnd: "static-transparent",
      x: 50, y: 0, width: 200, height: 60, opacity: 50,
    }}
  />
  <Column zIndex={1} fill gap="24">
    <Row fillWidth horizontal="between" vertical="center">
      <Heading as="h3" variant="heading-strong-m">Pro</Heading>
      <Tag variant="brand" size="s" label="Most popular" />
    </Row>
    <Button fillWidth arrowIcon>Start free trial</Button>
  </Column>
</Column>

7 min · Pattern

Pricing pages combine tier grids, billing toggles, comparison tables, and FAQ accordions. Once UI ships a pricing task bundle and gold example with highlighted middle tiers.

What this pattern covers

A production pricing page usually has four sections:

Hero with eyebrow, headline, and value prop
Three-tier grid with a highlighted "most popular" plan
Monthly / yearly toggle via SegmentedControl
Feature comparison table and FAQ accordion at the bottom

Page structure

Stack sections in a Column with gap="104" — the pricing task bundle's recommended section rhythm:

<Column as="main" fillWidth horizontal="center" gap="104" paddingBottom="104">
  {/* Hero with ambient background */}
  {/* Tier grid + billing toggle */}
  {/* Comparison table on neutral band */}
  {/* Bottom CTA panel */}
</Column>

Keep section gaps at 104 between major blocks. Do not cram tiers, table, and FAQ into one surface panel.

Tier grid

Use a three-column Grid that collapses to one column on mobile:

<Grid columns="3" gap="24" s={{ columns: 1 }}>
  {/* tier panels */}
</Grid>

Each tier is a Column surface panel, not a Card:

<Column
  fill
  background="surface"
  border="neutral-alpha-weak"
  radius="l"
  padding="32"
  overflow="hidden"
>
  <Column fill gap="24">
    <Heading as="h3" variant="heading-strong-m">Starter</Heading>
    <Text variant="body-default-s" onBackground="neutral-weak">
      For solo builders shipping their first product.
    </Text>
    {/* price row */}
    {/* feature list with Icon checkmarks */}
    <Button fillWidth variant="secondary" arrowIcon>Start with Starter</Button>
  </Column>
</Column>

Use Column with background="surface" and border — not Card.interactive. Pricing tiers are informational panels, not clickable cards.

Highlighted middle tier

The recommended plan gets brand border and a glow Background gradient:

<Column
  fill
  background="surface"
  border="brand-alpha-medium"
  radius="l"
  padding="32"
  overflow="hidden"
>
  <Background
    position="absolute"
    top="0"
    left="0"
    fill
    pointerEvents="none"
    gradient={{
      display: true,
      colorStart: "brand-alpha-medium",
      colorEnd: "static-transparent",
      x: 50, y: 0, width: 200, height: 60, opacity: 50,
    }}
  />
  <Column zIndex={1} fill gap="24">
    <Row fillWidth horizontal="between" vertical="center">
      <Heading as="h3" variant="heading-strong-m">Pro</Heading>
      <Tag variant="brand" size="s" label="Most popular" />
    </Row>
    <Button fillWidth arrowIcon>Start free trial</Button>
  </Column>
</Column>

<Row fillWidth horizontal="between" vertical="end" gap="24" s={{ direction: "column", horizontal: "start" }}>
  <Heading as="h2" variant="display-strong-xs">Three plans, one decision</Heading>
  <SegmentedControl
    selected={billing}
    onToggle={(value) => setBilling(value)}
    buttons={[
      { value: "monthly", label: "Monthly" },
      { value: "yearly", label: "Yearly −20%" },
    ]}
  />
</Row>

<Column flex={1} gap="12">
  <Row gap="12" vertical="center">
    <Icon name="checkbox" size="xs" onBackground="brand-medium" />
    <Text variant="body-default-s">Unlimited projects</Text>
  </Row>
</Column>

<Column fillWidth horizontal="center" background="neutral-alpha-weak" paddingY="80" paddingX="24">
  <Column fillWidth maxWidth="l" gap="40">
    <Heading as="h2" variant="display-strong-xs">Every feature, side by side</Heading>
    <Table
      fillWidth
      data={{
        headers: [
          { content: "Feature", key: "feature" },
          { content: "Starter", key: "starter" },
          { content: "Pro", key: "pro" },
        ],
        rows: [
          ["Projects", "3", "Unlimited"],
          ["API access", "—", "✓"],
        ],
      }}
    />
  </Column>
</Column>

✅ Once UI way	❌ Common mistake
Column surface panels for tiers	Card with onClick on entire tier
`Grid columns="3"` + `s={{ columns: 1 }}`	Flexbox with manual media queries
SegmentedControl for billing toggle	Two separate buttons with custom active state
Table for feature matrix	Nested div grids pretending to be a table
`gap="104"` between major sections	Everything in one padded container
Tag on highlighted tier	Inline styled "Popular" span

What this pattern covers

Page structure

Tier grid

Highlighted middle tier

What this pattern covers

Page structure

Tier grid

Highlighted middle tier

Billing toggle

Feature list per tier

Comparison table

FAQ accordion

Agent checklist

Write this / not this

Check yourself

Pricing & plans

What this pattern covers

Page structure

Tier grid

Highlighted middle tier

What this pattern covers

Page structure

Tier grid

Highlighted middle tier

Billing toggle

Feature list per tier

Comparison table

FAQ accordion

Agent checklist

Write this / not this

Check yourself

Related