Guides / Adapt a template / Bank and fintech
How to adapt an animated website template for a bank or fintech app
To adapt an animated website template for a bank or fintech app, start from Norvel Glass Card That Flips and Sends a Payment, Hearthline Live Mortgage Calculator, Tandem Shared Budget With a Live Split Slider or the closest fit, keep the calculator or card hero, hide heavy full-screen effects on pages that show rates or fees, add required disclosures in the footer, and apply the bank and fintech style pack below. Check the compliance notes for your state before you publish.
The 3 templates that fit banks, fintech startups and payment companies best
Every pick has a live demo. Open it, scroll it on your phone, then edit it in Create or fetch its prompt.
Pick 1 · Pro
Norvel Glass Card That Flips and Sends a Payment
A flipping card and a payment landing in the hero explain a banking product in a few seconds.
Pick 2 · Pro
Hearthline Live Mortgage Calculator
A working calculator in the hero is the strongest proof for a lender, and it is light on motion.
Pick 3 · Pro
Tandem Shared Budget With a Live Split Slider
Drag-and-see money splitting suits a budgeting or shared-accounts product.
What to change for a bank or fintech app
Keep
- The calculator or card hero
- Feature cards with one number each
- The rates or fees table
- The FAQ
Hide
- Heavy full-screen effects on pages that show rates or fees
- Playful mascots on a lending page
Add
- Required disclosures in the footer
- A security page
- A help center link
- A clear fee schedule
Copy angles
- Say what it costs, plainly, near the top.
- Use one concrete scenario, such as splitting rent between two roommates in Austin.
- Describe protections in words a customer would use, not product codes.
Trust elements
- Accurate FDIC language that names the actual bank partner, only if it applies
- NMLS ID for mortgage lenders
- Licenses and state registrations
- A real support phone number
Compliance notes to check
- Only show FDIC or Equal Housing Lender marks if they apply to you, and use them as the agency requires.
- Rates, APR and fee examples need the required disclosures. Check with a compliance professional.
- Do not promise approval or guaranteed returns.
General guidance only, not legal advice. Rules differ by state and change over time, so confirm the details with a licensed attorney or compliance professional before you publish.
Copy-ready adaptation prompt
Paste it into Claude, Cursor or Lovable. It is written for Norvel Glass Card That Flips and Sends a Payment and works for the other two picks if you change the name and slug. The example client is Brightleaf Credit Union, a member-owned credit union in Madison, Wisconsin.
1. Fetch the template with the MCP
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comUse the animatedwebs MCP. Call get_template_prompt for "norvel-bank", then build it as a Next.js site and adapt it with the prompt below.Setup for every client is on the MCP page. Pro templates use a Prompt Pack credit or come with Pro.
2. Adapt it
Adapt the AnimatedWebs template "Norvel Glass Card That Flips and Sends a Payment" (slug: norvel-bank) into a website for a bank or fintech app.
Example client: Brightleaf Credit Union, a member-owned credit union in Madison, Wisconsin. Replace it with my real business details, which I will give you.
Keep:
- The calculator or card hero
- Feature cards with one number each
- The rates or fees table
- The FAQ
Hide:
- Heavy full-screen effects on pages that show rates or fees
- Playful mascots on a lending page
Add:
- Required disclosures in the footer
- A security page
- A help center link
- A clear fee schedule
Copy angles:
- Say what it costs, plainly, near the top.
- Use one concrete scenario, such as splitting rent between two roommates in Austin.
- Describe protections in words a customer would use, not product codes.
Trust elements to include only if I can supply them:
- Accurate FDIC language that names the actual bank partner, only if it applies
- NMLS ID for mortgage lenders
- Licenses and state registrations
- A real support phone number
Style: use the CSS variables and fonts from the Bank and fintech style pack. Motion intensity: Low. Money pages need calm. Animate the hero object only, and keep forms, rates and disclosures completely still.
Rules:
- Keep the template's motion, and respect prefers-reduced-motion.
- Make it mobile first and keep the main action visible on a phone.
- Never invent testimonials, statistics, licenses or credentials. Use clearly marked TODO placeholders instead.
- Add the legal pages and notices this business type usually needs, and flag anything I should confirm with a licensed professional.Bank and fintech style pack
Trustworthy, clean and cool-toned. Download the pack as CSS variables, a Tailwind v4 theme, design tokens or a DESIGN.md snippet.
Palette
Cobalt
#2457d6
Accent
Pale Cobalt
#e3e9f5
Surface
Bone White
#f5f7fb
Background
Deep Cobalt
#0e1a33
Text
Type pairing (Google Fonts)
- Display DM SansSpecimen ↗
- Body DM SansSpecimen ↗
Motion intensity: Low
Money pages need calm. Animate the hero object only, and keep forms, rates and disclosures completely still.
The CSS export includes the Google Fonts import and motion variables.
# Bank and fintech style pack, Style Reference > Trustworthy, clean and cool-toned **Theme:** light · **Template:** Bank and fintech style pack (https://animatedwebs.com/guides/adapt/bank-and-fintech) ## Tokens, Colors | Name | Value | Token | Role | |------|-------|-------|------| | Cobalt | `#2457d6` | `--color-accent` | Primary actions, links and highlights: the signature colour, used sparingly | | Pale Cobalt | `#e3e9f5` | `--color-secondary` | Raised surfaces, cards and secondary accents | | Bone White | `#f5f7fb` | `--color-canvas` | Page canvas and section backgrounds: the dominant surface everything floats on | | Deep Cobalt | `#0e1a33` | `--color-ink` | Headlines and body copy: the primary typographic colour | ## Typography - **Display:** DM Sans, DM Sans 700 - **Body:** DM Sans, DM Sans 400 ## Motion - Intensity: Low. Reveal on load, no scroll scrubbing, no parallax. - Money pages need calm. Animate the hero object only, and keep forms, rates and disclosures completely still. - Respect prefers-reduced-motion: show final states. ## Rules ### Do - Keep Cobalt (`#2457d6`) for primary actions, links and highlights only - Let the hero motion carry the page; type and buttons sit on a scrim above it - Respect prefers-reduced-motion: no pinning or scrubbing, show final states ### Don't - Don't fill large sections with the accent colour; it is a signal, not a surface - Don't add typefaces beyond DM Sans + DM Sans
Questions
Which template is best for a bank or fintech app?+
Start with the first of the three picks on this page, then compare the other two. Each has a live demo you can scroll, and all three can be edited in Create.
What should a bank or fintech app site keep, hide and add?+
Keep the calculator or card hero and feature cards with one number each. Hide heavy full-screen effects on pages that show rates or fees. Add required disclosures in the footer and a security page.
Does this page give legal advice?+
No. The compliance notes are general reminders of topics to check. Laws differ by state, so confirm the details with a licensed attorney or compliance professional before you publish.
How do I use the style pack?+
Copy or download the CSS variables, the Tailwind theme or the DESIGN.md snippet, and give it to your AI builder with the adaptation prompt so the colors, fonts and motion stay consistent.