Meridian Analytics Pricing
A sophisticated pricing section designed for analytics and data platforms, featuring a warm copper-on-dark aesthetic that breaks from typical cool-toned SaaS pricing pages.
Features
- Warm dark palette — Deep charcoal-black (#0c0a09) with copper/amber (#c4803d, #e8b068) accents for a premium, luxurious feel
- Art-deco texture — Diagonal repeating line pattern and SVG grain add tactile depth
- Editorial typography — Fraunces serif for prices and headlines, Outfit geometric sans for body text (Google Fonts, graceful fallbacks)
- Three pricing tiers — Starter, Professional (highlighted), and Enterprise with detailed feature lists
- Highlighted card — Copper gradient border, inner radial glow, 'Most Popular' badge, and amber checkmarks
- Staggered reveal — Each element fades in sequentially with a blur-to-sharp transition
- Trust strip — Encryption, SOC 2, GDPR, and uptime badges below the cards
- Responsive — Stacks to single column on mobile, 3-column grid on desktop
Dependencies
@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button@remixicon/react — RiCheckLine, RiArrowRightUpLine, RiSparkling2Line- Google Fonts — Fraunces (variable serif), Outfit (geometric sans)
Customization
- Accent color: Replace all
#c4803d / #e8b068 / #d4a45c values with your brand color
- Tiers: Edit the
tiers array to change names, prices, features, and CTAs
- Background: Swap
#0c0a09 for any near-black tone; warm tints (brown, amber) preserve the aesthetic
