Component Library

Page Sections

All page-level layout patterns. Use these as the structural building blocks for any marketing page built on the Canopy system.

Hero Logo Bar Features Grid Feature Detail Steps Stats Pricing Testimonials CTA Footer
Section — Herobg: #0a3d2a · padding: 232px top, 136px bottom
AI-Powered Finance

Manage Your
Money Smarter
with AI

Leverage AI for smarter financial decisions with real-time insights and personalized investment strategies tailored to you.

Get Started Free → Request Demo
Total Earning
$240,000.80
↑ +12.4% this month
Performance
Background#0a3d2a · decorative orbs: lime (top right) + sky (bottom left)
Padding~100px top, 80px bottom (condensed preview — full: 232px top, 136px bottom)
Grid3fr 2fr — text left, visual right
H164–76px / 700 / -2.375px tracking / #fff · keyword highlight: #d0fa93
Desc20px / 500 / rgba(255,255,255,0.55) / max-width 480px
CTA buttonsLime primary + ghost-light secondary · gap: 14px
Section taglime text + rgba(208,250,147,0.1) bg · 100px radius · uppercase 11px
Float cardswhite, border-radius 14px, shadow 0 8px 32px rgba(0,0,0,0.15) · absolute positioned
Section — Logo Barbg: #ffffff · padding: 40px · no top spacing
Trusted by fast-growing companies
Stripe
Linear
Notion
Vercel
Figma
Slack
Background#ffffff · thin border-top and border-bottom: 1px solid #e5e7e6
Label13px / 700 / uppercase / letter-spacing 1.5px / #838b88 / centered
Logo pillsbg #f8f9fa, border 1px #e5e7e6, radius 12px, padding 12px 24px
Logo name15px / 700 / #414d48
Row gap48px · centered · flex-wrap
Section — Features Gridbg: #ffffff · padding: 120px · 3-column
Core Features

Everything you need to
grow your wealth

Smart financial tools that adapt to your goals and give you the clarity to make better decisions every day.

AI-Powered Insights

Get personalized recommendations based on your spending patterns and financial goals updated in real time.

Automated Budgeting

Set it and forget it. Canopy automatically categorizes and tracks every transaction against your budget limits.

Smart Investments

Diversify your portfolio with AI-guided investment recommendations tailored to your risk profile.

Expense Tracking

Connect all your accounts and see where every dollar goes with beautiful, clear visualizations.

Goal Setting

Define your financial goals and watch your progress with milestone tracking and smart reminders.

Bank-Grade Security

256-bit encryption, biometric authentication, and real-time fraud detection keep your data safe.

Background#ffffff
Header alignmentcentered · max-width 640px · margin bottom 60px
Grid3 equal columns · gap 24px
Card bg#f8f9fa · radius 20px · padding 32px
Card hover--shadow-sm + translateY(-4px) · 0.25s ease
Icon box52×52px · radius 14px · lime bg rgba(208,250,147,0.25) · icon 26px
Title20px / 700 / -0.3px tracking / #0a3d2a
Desc16px / 500 / #6b756f / 1.6 line-height
Section — Feature Detailbg: #f8f9fa · sticky left panel · right scrolls
How It Works

A smarter way to track every transaction

Automated expense tracking that learns your habits and helps you stay on budget without the manual work.

Auto-categorization
Every transaction is automatically tagged with the right category in real time.
Custom rules
Set your own rules for how spending is categorized and reported.
Smart sync
Connects to 10,000+ banks and updates every transaction in under a second.
Monthly Spending
This month
$3,240
↓ -8% vs last
Avg daily
$108
↑ +3% vs last
Top Categories
Housing38%
Food24%
Transport18%
Background#f8f9fa
Grid1fr 1fr · gap 80px · align-items: start
Left panelposition: sticky · top: 100px — stays visible while right side scrolls
Heading44px / 700 / -2px tracking
Feature itemswhite cards, 16px radius, 1px border #e5e7e6, padding 20px, gap 16px
Visual cardswhite, 20px radius, 1px border, padding 28px · stacked with gap 20px
Section — How It Works / Stepsbg: #ffffff · 4-column · connecting line
Simple Process

Up and running
in 4 steps

01

Create Account

Sign up in under 60 seconds. No credit card required. Just your email and a password.

02

Connect Your Bank

Securely link your accounts with 256-bit encryption. We support 10,000+ institutions.

03

Set Your Goals

Define what you're saving for and let AI create a personalised plan to get there.

04

Track & Grow

Watch your wealth grow with daily insights, alerts, and smart recommendations.

Background#ffffff
Grid4 equal columns · gap 24px
Connecting line::before pseudo — absolute, top 30px, left/right 10%, height 1px, border-bottom dashed #e5e7e6
Step number (default)44×44px · bg #0a3d2a · text #fff · radius 10px
Step number (active)44×44px · bg #d0fa93 · text #0a3d2a · radius 10px
Card bg#f8f9fa · radius 20px · padding 32px 24px · centered text
Section — Stats Barbg: #0a3d2a · 4-column · no padding-y needed
Canopy by the numbers
2M+
Active users worldwide
$48B
Assets tracked to date
99.9%
Platform uptime
4.9★
Average app store rating
Background#0a3d2a
Stat number52px / 700 / -2px tracking / #fff · accent part: #d0fa93
Stat description14px / rgba(255,255,255,0.4)
Dividerborder-right: 1px solid rgba(255,255,255,0.08) · last child none
Label above12px / 700 / uppercase / rgba(255,255,255,0.3) / centered / mb 48px
Section — Pricingbg: #f8f9fa · 3-column · center card featured
Pricing

Simple, transparent
pricing

Start free and upgrade when you're ready. No hidden fees, no surprises.

Starter
$0
Forever free
  • Up to 3 accounts
  • Basic expense tracking
  • Monthly reports
  • Email support
Get started free
Most Popular
Pro
$29
per month, billed annually
  • Unlimited accounts
  • AI-powered insights
  • Investment tracking
  • Priority support
  • Custom categories
Start free trial
Enterprise
$99
per month, billed annually
  • Everything in Pro
  • Team collaboration
  • API access
  • Dedicated manager
  • Custom integrations
Contact sales
Background#f8f9fa
Grid3 equal columns · gap 20px · max-width 1100px centered
Default cardbg #fff · border 1px #e5e7e6 · radius 20px · padding 36px 32px
Featured cardbg #0a3d2a · border-color #0a3d2a · same radius and padding
Featured badgergba(208,250,147,0.15) bg · lime text · 100px radius · uppercase 10px
Price48px / 700 / -2px tracking · sup: 24px
Feature itemscheckmark via ::before · 20×20px circle · green on default · lime on featured
CTA buttonGhost on default · Lime on featured · full width · pill shape
Section — Testimonialsbg: #ffffff · 3-column · shadow-lg cards
Customer Stories

Loved by people who
take money seriously

★★★★★

"Canopy completely changed how I manage money. The AI suggestions are genuinely useful and the interface feels effortless."

Sarah Johnson
Freelance Designer
★★★★★

"I've tried every budgeting app out there. Canopy is the first one I've actually stuck with for more than a month. The insights are incredible."

Marcus Chen
Software Engineer
★★★★★

"The investment tracking and portfolio insights helped me hit my savings goal 6 months ahead of schedule. Worth every penny."

Aisha Patel
Marketing Director
Background#ffffff
Grid3 equal columns · gap 24px
Cardbg #fff · border 1px #e5e7e6 · radius 20px · padding 32px · --shadow-lg
Starscolor #d0fa93 · font-size 16px · gap 3px · mb 16px
Quote17px / 500 / #414d48 / 1.65 line-height · mb 24px
Author sectionborder-top 1px #e5e7e6 · pt 20px · avatar 44×44px circle gradient
Section — CTAbg: #0a3d2a · centered · orb decorations
Get Started Today

Ready to take control
of your finances?

Join over 2 million people who trust Canopy to manage, grow, and protect their wealth every day.

Start for free → Book a demo

No credit card required · Free plan available · Cancel anytime

Background#0a3d2a · orbs: lime top-left + sky bottom-right
Contentcentered · max-width 700px · position relative z-index 1
Heading52px / 700 / -2px tracking / #fff · emphasis: #d0fa93
Desc18px / rgba(255,255,255,0.5)
ButtonsLime primary + surface secondary · centered · gap 14px
Note below13px / rgba(255,255,255,0.3) · mt 20px