Midnight Navy Fintech Pricing

{"summary": "A frameless, responsive SaaS/fintech pricing page in a deep-navy dark theme with teal accents: a sticky blurred nav, a centered hero with a status pill and a monthly/annual billing toggle, a 3-tier card row where the middle 'Most popular' tier glows and lifts above the others, a 4-up trust/compliance strip, an accordion FAQ, and a multi-column footer with a legal disclaimer block. Copy the look (navy + teal, Sora/Inter, glowing highlighted tier) and the pricing structure (3 tiers, $0 / mid / high, monthly-annual toggle that swaps prices) to recreate this exact feel.", "style": {"description": "Deep midnight-navy fintech dark theme with a single cool teal/mint accent, a soft faint dot/line grid plus radial teal glows in the background, fully rounded controls, and crisp two-weight typography (geometric Sora display + Inter body). High polish, low chroma: almost everything is navy/white/muted-slate, and teal is reserved for the one thing that matters (the highlighted tier, checks, and CTAs).", "prompt": "Build a dark fintech aesthetic on a near-black navy page background (#06152b). Define a navy ramp: navy-950 #06152b, navy-900 #0b1f3a, navy-850 #0f2747, navy-800 #143055, navy-700 #1c3f6b, navy-600 #27507f. Single accent is teal/mint: teal-300 #5eead4, teal-400 #2dd4bf, teal-500 #14b8a6, teal-600 #0d9488. Neutral text colors: 'mist' #eaf1f8 for primary body text, 'slate2' #9fb2c9 for muted/secondary text, pure white #ffffff for headings. Typography: load Google Fonts Sora (weights 400-800) as the display family for headings, prices, logo, and section labels, and Inter (weights 400/450/500/600) as the body/UI sans; enable antialiasing and tracking-tight on big headings. Use a hero headline gradient text effect (linear-gradient 92deg from #ffffff to #cfe6ff to #5eead4, clipped to text). Background texture for the hero/pricing region: a 'grid-bg' built from two radial glows (a large teal radial-gradient ~rgba(45,212,191,.16) at top-center, plus a navy-blue radial at top-right) layered over a faint 46px x 46px line grid using rgba(159,178,201,.05). Use generous rounding: rounded-full for pills/toggles/CTAs, rounded-2xl for cards and panels, rounded-xl for buttons and the disclaimer box. Two signature shadow/border treatments: 'ring-soft' for normal cards (1px slate border at ~16% opacity + a deep soft drop shadow), and 'glow-card' for the highlighted tier (1px teal ring ~35% + layered teal glow shadows so it appears to emit light). Keep borders hairline and low-opacity (white at .06-.09); dividers are 1px white/.07 lines. Overall mood: premium, trustworthy, calm, banking-grade."}, "layout_and_structure": {"description": "A single-column, frameless responsive web page that scrolls vertically: sticky translucent nav, centered hero with billing toggle, a responsive 3-card pricing grid (the key section) that reflows 3->2->1 column with the highlighted tier always emphasized, a 4-up trust strip, an accordion FAQ, and a tall footer. Everything is centered in a max-w-7xl container (FAQ narrows to max-w-3xl) with consistent horizontal padding (px-5 on mobile, sm:px-8).", "prompts": [{"part": "Sticky top nav", "prompt": "A sticky top header (sticky top-0, z-50) with a semi-transparent navy-950/80 background and backdrop-blur-xl, a hairline bottom border (white/.07), and h-16 height. Inside a max-w-7xl row: on the left a logo lockup (a rounded-lg teal gradient square holding a vault icon + the wordmark 'Vaultline' in Sora 700) followed by a horizontal nav of dropdown links (Products, Solutions, Resources, Company, each with a caret) plus a highlighted 'Pricing' link, hidden below lg. On the right: a muted 'Log in' text link and a primary pill button 'Open account' (solid white bg, navy text, rounded-full). Nav links are slate2 and brighten to white on hover."}, {"part": "Hero / headline", "prompt": "A centered hero section over the grid-bg texture with a thin teal top-border accent line. Stack centered: (1) a small rounded-full status pill with a teal animated ping dot and the text 'FDIC-insured up to $3M . SOC 2 Type II' in teal-300 on a faint teal tint; (2) a large two-line Sora 800 headline (~40px mobile, ~58px desktop, leading-[1.05], tracking-tight) reading 'Banking that scales with your business', with the second line using the white->light-blue->teal gradient-text effect; (3) a max-w-xl muted slate2 subhead paragraph about opening an account in minutes, no monthly fees/minimums, real treasury yield; (4) the billing toggle (see components); (5) a small muted 'Compare all plans' down-arrow link. Generous vertical padding (pt-20/24, pb-10)."}, {"part": "Pricing cards (the core section)", "prompt": "The pricing section (id='pricing', scroll-mt-20). Lead with a section eyebrow row: a tiny uppercase teal label 'CHOOSE YOUR PLAN' with wide tracking next to a fading teal hairline that fills the remaining width. Below it a responsive 3-column grid: grid-cols-1 on mobile, md:grid-cols-2, lg:grid-cols-3, items-stretch, gap-5, so the cards reflow 3->2->1. Three equal-height flex-column cards, each rounded-2xl, p-7/8: TIER 1 'Starter' ($0/mo, 'Free forever . no minimums', secondary ghost CTA 'Open account') and TIER 3 'Scale' ($299/mo, 'volume pricing', secondary CTA 'Talk to sales') both use the muted 'ring-soft' style on navy-900/70 with backdrop-blur. The MIDDLE card TIER 2 'Growth' ($49/mo) is the hero tier: it uses the glowing 'glow-card' style on a navy-850->navy-900 gradient, sits z-10, carries a centered '-top-3' floating teal-gradient 'MOST POPULAR' badge, and has a solid teal-gradient primary CTA 'Start free trial'. On medium screens the highlighted card spans 2 cols and orders first; on lg it returns to the center column. Each card structure: an icon chip + tier name (Sora 700), a one-line description, a price block (Sora 800 ~40px number + '/mo' suffix, with a small billing note line below that swaps text with the toggle), the CTA button, a hairline divider, an uppercase 'What's included' / 'Everything in X, plus' label, then a checklist of features. Each feature row is a teal radial 'feat-check' circle (ring-1 teal) holding a small teal check icon next to mist-colored text."}, {"part": "Trust / compliance strip", "prompt": "A full-width bordered, rounded-2xl panel on navy-950/60 that holds a 4-up row (stacks vertically on mobile, becomes a horizontal divided row with vertical separators on sm+). Each cell pairs a teal-300 phosphor icon with a two-line label: 'FDIC insured / Up to $3M via partner banks', 'SOC 2 Type II / Audited security controls', '256-bit AES / Bank-grade encryption', 'PCI DSS L1 / Highest card-data standard'. Bold white title line, muted slate2 sub-line."}, {"part": "FAQ accordion", "prompt": "A narrow (max-w-3xl) centered FAQ section: a Sora 700 heading 'Questions, answered' (~28-34px) with a muted slate2 subhead, then a single rounded-2xl bordered card on navy-900/50 containing native <details>/<summary> accordion rows divided by hairlines. Each summary row is a white 600-weight question with a teal '+' icon that rotates 45deg to an x when open (group-open:rotate-45); the first item is open by default. Answers are muted slate2 body copy. Questions cover the free tier, FDIC coverage mechanics, and switching/canceling plans."}, {"part": "Footer", "prompt": "A footer with a top hairline border on solid navy-950. Top row (stacks on mobile, row on md): a brand column (logo lockup + a short slate2 tagline 'Modern business banking and treasury for companies that move fast.') beside a multi-column link grid (Product / Company / Legal, each a white 600 heading over a slate2 link list, hover to white). Below: a rounded-xl bordered disclaimer box on navy-900/50 with fine-print legal text ('Vaultline is a financial technology company, not a bank...'), then a muted copyright line."}]}, "special_ui_components": [{"component": "Monthly/Annual billing toggle", "description": "A pill switch in the hero that flips all tier prices between monthly and annual, with a 'Save 18%' badge.", "prompt": "A centered row: a 'Monthly' label, a rounded-full toggle switch (h-7 w-[52px], navy-700 track with an inset white/10 ring) holding a teal-gradient circular knob that slides ~24px right on click (transition with cubic-bezier easing), an 'Annual' label, and a small rounded-full teal-tinted 'Save 18%' badge. The active side label is white, the inactive is slate2. Wire it with vanilla JS: on toggle, slide the knob, tint the track, swap the active label color, rewrite every price element from its data-monthly to its data-annual value (e.g. $49->$40, $299->$245), and update each card's billing note prefix between 'Billed monthly .' and 'Billed annually .'."}, {"component": "Highlighted 'Most popular' tier card", "description": "The middle pricing tier rendered as a glowing, elevated, primary-CTA card to anchor the choice.", "prompt": "Render the middle/recommended tier distinctly from its neighbors: navy-850->navy-900 vertical gradient fill, a 'glow-card' shadow (1px teal ring at ~35% plus stacked teal glow shadows so it appears lit), z-10 and slightly larger padding, a floating '-top-3' centered badge ('MOST POPULAR', teal gradient, navy text, uppercase), a teal icon chip instead of a muted one, teal-tinted billing note, a solid teal-gradient primary button ('Start free trial', navy text, teal glow shadow), and brighter teal check rings. On md screens it may span two columns and order first; on lg it returns to the center slot."}, {"component": "Feature checklist rows", "description": "Consistent included-feature lists inside each tier card.", "prompt": "Each feature is a flex row: a small ~18px circle with a teal radial 'feat-check' fill and a 1px teal ring, holding a tiny bold teal check icon, set next to mist-colored 14px text. Group them under an uppercase tracked label ('What's included' for the base tier, 'Everything in X, plus' for higher tiers). On the highlighted tier at md width the list may become a 2-column grid, collapsing back to a single column at lg."}, {"component": "Background grid + glow texture", "description": "The signature ambient backdrop behind the hero and pricing region.", "prompt": "Compose a layered CSS background: a large teal radial glow (~rgba(45,212,191,.16)) at top-center, a navy-blue radial glow at top-right, both over a faint 46px x 46px line grid drawn with rgba(159,178,201,.05) horizontal and vertical lines. Add a thin horizontal teal gradient accent line at the very top edge of the hero. Keep it subtle so text stays high-contrast."}], "special_notes": "This is a FRAMELESS, fully responsive web page (no browser chrome / device frame): a single vertical scroll inside a max-w-7xl centered container (FAQ at max-w-3xl). The pricing grid is the centerpiece and must reflow 3->2->1 column (lg->md->mobile), the nav is sticky + blurred, and the billing toggle must actually rewrite prices via data-monthly/data-annual attributes. Pure HTML + Tailwind (CDN config extends the navy/teal palette and Sora/Inter fonts) + a small vanilla-JS toggle; icons via Iconify Phosphor set. No em-dashes in copy; use the navy+teal palette and reserve teal strictly for emphasis. Built with placeholder fintech-banking brand 'Vaultline' . swap brand, copy, and the 3 tier names/prices to repurpose."}

---
"Midnight Navy Fintech Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/midnight-navy-fintech-pricing-656a6d @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Midnight Navy Fintech Pricing. \"Midnight Navy Fintech Pricing\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/midnight-navy-fintech-pricing-656a6d @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-midnight-navy-fintech-pricing-656a6d",
      "license": "CC0-1.0",
      "attribution": "\"Midnight Navy Fintech Pricing\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/midnight-navy-fintech-pricing-656a6d @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#eaf1f8"
    },
    "foreground": {
      "$type": "color",
      "$value": "#06152b"
    },
    "card": {
      "$type": "color",
      "$value": "#eaf1f8"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#06152b"
    },
    "primary": {
      "$type": "color",
      "$value": "#06152b"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0b1f3a"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#06152b"
    },
    "accent": {
      "$type": "color",
      "$value": "#0b1f3a"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#dce3e9"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5d6775"
    },
    "border": {
      "$type": "color",
      "$value": "#c9cfd5"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#06152b"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Midnight Navy Fintech Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/midnight-navy-fintech-pricing-656a6d @ 6c6090694520. */
:root {
  --background: #eaf1f8;
  --foreground: #06152b;
  --card: #eaf1f8;
  --card-foreground: #06152b;
  --primary: #06152b;
  --primary-foreground: #fafaf9;
  --secondary: #0b1f3a;
  --secondary-foreground: #06152b;
  --accent: #0b1f3a;
  --accent-foreground: #fafaf9;
  --muted: #dce3e9;
  --muted-foreground: #5d6775;
  --border: #c9cfd5;
  --destructive: #dc2626;
  --ring: #06152b;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "Midnight Navy Fintech Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/midnight-navy-fintech-pricing-656a6d @ 6c6090694520. */
/** Tailwind theme extend for Midnight Navy Fintech Pricing (superdesign-midnight-navy-fintech-pricing-656a6d) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#eaf1f8",
        "foreground": "#06152b",
        "card": "#eaf1f8",
        "primary": "#06152b",
        "primary-foreground": "#fafaf9",
        "secondary": "#0b1f3a",
        "accent": "#0b1f3a",
        "muted": "#dce3e9",
        "border": "#c9cfd5",
        "destructive": "#dc2626",
        "ring": "#06152b"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Midnight Navy Fintech Pricing" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/midnight-navy-fintech-pricing-656a6d @ 6c6090694520. */
@layer base {
:root {
  --background: #eaf1f8;
  --foreground: #06152b;
  --card: #eaf1f8;
  --card-foreground: #06152b;
  --primary: #06152b;
  --primary-foreground: #fafaf9;
  --secondary: #0b1f3a;
  --secondary-foreground: #06152b;
  --accent: #0b1f3a;
  --accent-foreground: #fafaf9;
  --muted: #dce3e9;
  --muted-foreground: #5d6775;
  --border: #c9cfd5;
  --destructive: #dc2626;
  --ring: #06152b;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}