A light-mode plan card: white surface, whisper border, soft elevation, price lockup on top, feature list below, and a full-width primary CTA. Hover lifts the shadow one step — the default SaaS pricing block for clean light products.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Soft Pricing Tile for light SaaS pricing grids.
1. Card: white #FFFFFF, 1px #CBD5E1, 16px radius, soft shadow 0 8px 24px #0000000F.
2. Top: plan name 14px medium #64748B, price 32px bold #0F172A, period 13px muted.
3. Middle: 4–5 feature rows with 16px check glyphs in #2563EB.
4. Bottom: full-width primary button #1E3A8A / white text, 10px radius.
5. Hover: shadow steps up to 0 16px 40px #0000001A, border slightly darker.
6. Never use dark glass or neon glows on this tile.A light-mode plan card: white surface, whisper border, soft elevation, price lockup on top, feature list below, and a full-width primary CTA. Hover lifts the shadow one step — the default SaaS pricing block for clean light products.
Pro
Pro