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
Pro
$29 / mo
For growing teams that need more.
- Unlimited projects
- 50 GB storage
- Priority support
- Advanced analytics
- Custom integrations
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-mdfor visual emphasis. - Feature lists use the Icon component (
shield-check) colored with--color-text-success. - Cards stretch to equal height via
align-items: stretchon the grid andflex-direction: columnwithmargin-block-start: autoon the CTA. - All color and spacing values reference semantic or core tokens. Shadow uses the docs-layer
--docs-shadow-mdvariable.