Pricing / Bold
Build promptA plan for your next chapter.
Confident pricing that makes the decision feel simple, with a cobalt highlight.
ILLUSTRATIVE DESIGN STUDY UI DATABASE / BOLD
This preview shows a visual direction. AI results vary with your tool, model, and project context.
Make it your own.
Swap in your brand, content, and colors.
Tell your AI about your framework and existing UI.
Review the result and refine the details.
The words behind the designBuild prompt
USE WITHAny coding assistant
Build an accessible SaaS pricing section in React and CSS for a fictional creative tool called studio. Use a pale lavender background (#e8e7f1), ivory cards, black typography, and a vivid cobalt (#4946df) featured plan. Use the headline “Make room for your best work.” with a small uppercase PRICING eyebrow. Show two clearly differentiated plans: Starter at $0, with 3 projects and basic exports; Studio at $12/month, with unlimited projects and advanced exports. These prices are illustrative. Put a “For the everyday creative” badge on Studio. Use a prominent price, a concise description, a real unordered feature list with check icons, and equally sized action buttons. Do not preselect paid options or hide costs. Add an accessible Monthly/Yearly segmented control using real buttons and aria-pressed. Yearly pricing is $120 billed annually, displayed as $10/month alongside the explicit yearly total. Switching the control updates both the displayed price and billing explanation. Free remains $0. Action buttons should open an in-page plan summary, not simulate a completed payment. Include keyboard navigation, visible focus, and clear selected states. Below the plans, include collapsible answers about cancellation, annual billing, and plan changes using native details/summary. On mobile stack the cards without clipping. Respect reduced-motion preferences.
Copy. Paste. Make it yours.