Modal: Dev-tool pricing with live resource-cost table, three plan cards, and serverless cost-comparison charts
A near-black dev-tool pricing page anchored by a split hero: an oversized headline "Pricing as magical as our product" (with "magical" in neon green) on the left, and on the right a live "Resource costs" rate table with a Per hour / Per second pill toggle listing per-second GPU/CPU/memory prices. The signature treatment is the neon-green-on-black palette punctuated by marker-style text highlights (pink "startups", green "academics", blue "committed spend") and a pair of red-vs-green area charts comparing traditional cloud vs Modal serverless spend. Three green-gradient plan cards (Starter $0, Team $250, Enterprise Custom) feed into a long green-check / red-X feature-comparison matrix.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/modal-dev-tool-pricing-with-live-resource-cost-table-three-plan-cards-and-serverless-cost-comparison-charts.
Palette
Fonts
Page types
UX patterns
UI elements
Context
More from Modal
- Gallery / Showcase — Built with Modal filterable example carousel
- Comparison — Compare features matrix across three plans
- Feature — Credit grants trio on mint panel with marker highlights
- Testimonial / Social Proof — Customer case-study bento grid
- Footer — Dark footer with brand, social, and link columns
- FAQ — Frequently asked questions accordion
- Feature — Global GPU infrastructure with glowing globe + accordion
- Hero — Green-accent hero with announcement banner and dual CTA
- Feature — Mint inverted panel: workloads + inference grid
- Modal dev-tools landing with green-on-black hero, mint feature panel, and bento customer case-study grid
- Logo Marquee — Modal — Logo Marquee
- Feature — Production cloud 2x2 terminal/chart cards