Obsidian Pricing Grid
A premium dark-themed pricing section with volcanic obsidian aesthetics for fintech applications.
Features
- Obsidian palette — Deep blacks (#0a0a0a, #111) with gold (#d4af37) and amber accents
- Geometric facets — Triangular repeating line patterns as background texture
- Gold featured tier — Radial glow, gold top border, scaled card with enhanced shadows
- 3-tier layout — Foundation, Obsidian, and Sovereign with feature checklists
- Compliance badges — SOC 2, PCI DSS, AES-256, GDPR trust indicators
- Typography — Playfair Display for headings, DM Sans for body
- Dark/light modes — Full support with appropriate contrast ratios
Dependencies
@/components/vue-ui/card — Pricing card composition@/components/vue-ui/button — CTA buttons@/components/vue-ui/badge — Labels and trust badges@/components/vue-ui/separator — Visual dividerslucide-vue-next — Check, X, Gem, Crown, Shield, Zap, ArrowRight icons
Customization
- Tiers: Edit the
tiers array to change pricing and features
- Gold accent: Replace #d4af37 with your preferred accent color
- Featured tier: Move
featured: true to highlight a different plan
- Compliance: Update
complianceBadges array with your certifications
