Pricing

Three-tier pricing comparison with side-by-side cards, feature lists, and CTA buttons.

Preview

Starter

$9 / mo

For individuals getting started.

  • 5 projects
  • 1 GB storage
  • Email support
  • Basic analytics

Business

$79 / mo

For organizations at scale.

  • Unlimited projects
  • 500 GB storage
  • Dedicated support
  • Advanced analytics
  • SSO & audit logs
  • SLA guarantee

Scope

  • Organism-level example composing Badge, Button, Icon, and Label components in a pricing comparison layout.
  • Three-column grid (repeat(3, 1fr)) collapses to single-column below --breakpoint-200 (760px).
  • Pro tier uses --color-border-brand, --color-fill-brand, and --docs-shadow-md for visual emphasis.
  • Feature lists use the Icon component (shield-check) colored with --color-text-success.
  • Cards stretch to equal height via align-items: stretch on the grid and flex-direction: column with margin-block-start: auto on the CTA.
  • All color and spacing values reference semantic or core tokens. Shadow uses the docs-layer --docs-shadow-md variable.