Design System
Canopy Design System
A complete reference of every token, pattern, and component extracted directly from finray.framer.website.
Foundation
Color Palette
All color tokens extracted from Canopy. Primary palette is deep forest green with lime and sky blue accents on neutral surfaces.
Brand Greens — Primary
Primary 900
#0a3d2a
Headings, buttons, brand
Primary 800
#1a2722
Deep dark bg
Primary 700
#2d3934
Dark surfaces
Primary 600
#414d48
Body text, nav links
Primary 400
#6b756f
Secondary text
Primary 300
#838b88
Placeholder, muted
Accents
Accent Lime
#d0fa93
Highlight, CTA, decorative
Accent Green
#139d49
Success, CTA
Accent Sky
#59d0ff
Highlight, accent
Sky Light
#d4f2fd
Accent bg, decorative
Gold Tint
rgba(177,151,107,0.1)
Warm decorative tint
Error Red
#ff2244
Error, destructive
Surfaces & Neutrals
White
#ffffff
Primary surface, cards
Surface 1
#f8f9fa
Alternating sections, footer bg
Surface 2
#f4f5f4
Inputs, hover states
Border Light
#e5e7e6
Dividers, light borders
Border
#cccfce
Input borders
Foundation
Typography
Canopy uses Satoshi exclusively — a geometric sans-serif with confident weight contrast and tight tracking on display sizes.
Font Family
Satoshi Primary typeface — all weights, all sizes
Satoshi Primary typeface — all weights, all sizes
font-family: 'Satoshi', 'Satoshi Placeholder', sans-serif;
Type Scale
Canopy
Financial Growth
Smarter Decisions
AI-Powered Analytics
Leverage AI for smarter financial decisions.
Track, budget, and reach your financial goals.
Manage your finances with real-time insights and personalized investment strategies built for modern users.
Secondary description text used in cards and feature lists.
Section Label · Navigation · Tags
Font Weights
Regular
400 — Body copy, captions, UI labelsMedium
500 — Nav links, body text, descriptionsBold
700 — Headings, buttons, strong emphasis
Foundation
Spacing System
Spacing values extracted from gaps, paddings and margins used across the site. Steps scale from micro UI to section-level layout.
--space-1
4px
Micro gap
--space-2
6px
Tag/badge internal gap
--space-3
8px
Icon & text gap
--space-4
10px
Small gap
--space-5
16px
Card inner gap, list items
--space-6
24px
Card padding, grid gap
--space-7
30px
Component gap
--space-8
32px
Section inner padding
--space-9
40px
Content block spacing
--space-10
52px
Large gap, feature spacing
--space-11
64px
Large section gap
--space-12
80px
Section bottom padding
--space-13
120px
Standard section padding-y
Foundation
Border Radius
Canopy favors soft, rounded corners throughout — from small interactive elements up to pill-shaped buttons and perfect circles.
XS — 8px--radius-xs
Small elements, tags
Small elements, tags
SM — 12px--radius-sm
Icons, inputs
Icons, inputs
MD — 16px--radius-md
Cards, containers
Cards, containers
LG — 20px--radius-lg
Large cards, nav
Large cards, nav
XL — 30px--radius-xl
Hero sections
Hero sections
Pill — 47px--radius-pill
All buttons
All buttons
Round — 100px--radius-round
Badges, labels
Badges, labels
Circle — 50%--radius-circle
Avatars, icons, orbs
Avatars, icons, orbs
Foundation
Shadows
Shadow tokens use the brand's dark green as the shadow color, keeping the depth feeling on-brand rather than neutral grey.
Shadow SM
rgba(10,61,42,0.10)
0px 6px 32px 0px
0px 6px 32px 0px
Cards, hover lift
Shadow MD
rgba(10,61,42,0.08)
0px 8px 48px 0px
0px 8px 48px 0px
Modals, dropdowns
Shadow LG
Layered 3-stop
natural depth
natural depth
Floating elements
Outline Inset
1px solid inset
black border
black border
Focus, selected states
Warm Glow
Amber inset glow
decorative element
decorative element
Foundation
Motion & Transitions
Hover each card to see the transition in action. Canopy uses ease curves consistently — spring for interactive feedback, slow for reveals.
Fast
all 0.15s ease
Hover states, color changes, opacity
Base
all 0.25s ease
Cards lift, nav transitions, standard UI
Slow
all 0.4s ease
Section reveals, page-level changes
Spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Bouncy interactive feel for buttons, modals
Interaction Patterns
Button hovertranslateY(-1px) + shadow increase — 0.25s ease
Card hovertranslateY(-4px) + shadow-sm — 0.25s ease
Link hovercolor shift to primary-900 — 0.15s ease
Input focusborder-color primary-900 + 3px green glow ring
Page scrollFramer scroll-triggered opacity + translateY fade-in
Nav scrollBackground blur / shadow on scroll-down (Framer native)
Foundation
Scroll Interactions
Every animation extracted from the live site's React fiber. One easing curve, three entrance patterns, stagger system, nav scroll behavior, and sticky panels.
Site-wide easing curve
cubic-bezier(0.5, 1, 0.89, 1) · 0.7s
Easingcubic-bezier(0.5, 1, 0.89, 1) — used on every animation
Duration0.7s — consistent across all scroll animations
TriggerwhileInView / once — fires on enter, never on scroll-up
Fade Upopacity: 0→1 · translateY: 40px→0 — headings, text, cards
Fade Scaleopacity: 0→1 · scale: 0.5→1 — orbs, decorative shapes
Fade Slide Xopacity: 0→1 · translateX: ±40px→0 — side panels, images
Stagger0.1s per sibling · 0.2s for hero elements · max 0.5s
Nav on scrollboxShadow: none → 0px 8px 30px rgba(0,0,0,0.12)
Sticky panelsposition: sticky · top: 100px — feature section content
Fade Up — y: 40px → 0
Fade
Up
0sUp
Fade
Up
0.1sUp
Fade
Up
0.2sUp
Fade
Up
0.3sUp
Fade
Up
0.4sUp
Fade Scale — scale: 0.5 → 1
Orb
0.3sOrb
0.4sOrb
0.5sFade Slide X — x: ±40px → 0
← Left
x: -40→0
from leftx: -40→0
Right →
x: 40→0
from rightx: 40→0
Stagger — Section cards (0.1s step)
0.0s
Tag
0.1s
Heading
0.2s
Card 1
0.3s
Card 2
0.4s
Card 3
0.5s
Card 4
Nav scroll behavior
Foundation
Layout & Grid
Canopy is built on a wide canvas (1728px max-width) with a ~1280px content container. Sections alternate between white and #f8f9fa backgrounds.
Container Widths
Canvas max1728px — full bleed background colors
Content max~1280px — centered inner content
Section padding-y120px top + bottom (standard), 232px top (hero)
Section alternation#ffffff → #f8f9fa → #ffffff → #f8f9fa
Footer padding120px top, 40px bottom
Grid Examples
2 Column
1/2
2/2
3 Column
1/3
2/3
3/3
4 Column
1/4
2/4
3/4
4/4
Asymmetric 60/40
Content 3fr
Visual 2fr
Components
Buttons
All buttons use border-radius: 47px (pill). Font size 18px bold. Transition 0.25s ease with a 1px hover lift.
Variants
Sizes
Specs
Border radius47px (pill)
Font size18px (standard) / 12px (compact nav)
Font weight700
Padding (standard)14px 28px
Padding (large)20px 36px
Padding (arrow)10px 10px 10px 32px
HovertranslateY(-1px) + 0.25s ease
Primary bg#0a3d2a → #2d3934 (hover)
Primary text#ffffff
Components
Badges & Tags
Used for section labels, status indicators, and feature callouts. Always border-radius: 100px. Font 12px, 700, uppercase.
● Success
● Feature
● Info
● Neutral
● Error
AI-Powered
New
Section Label
Beta
Border radius100px
Font size12px
Font weight700
Text transformuppercase / title case
Padding4–6px 12–16px
Letter spacing1–1.5px (uppercase labels)
Components
Cards
Three card styles: default white with border, feature card on surface bg, and stat card on dark green background.
Feature Cards
Automated Expense Tracking
Get real-time reports and alerts to manage your finances effortlessly.
Secure Payments
Encrypted payments ensure safety and protect your sensitive financial data.
AI-Powered Insights
Personalized investment strategies driven by real-time AI analysis.
Default Cards (with border)
Smart Budgeting
AI-driven budgeting that adapts to your spending patterns and financial goals.
Portfolio Tracking
Monitor all your investments in one place with live market data and analytics.
Stat / Dark Cards
98%
Customer satisfaction
↑ +4.2% this quarter
$2.4B
Assets managed
↑ Growing 12% MoM
150K+
Active users
↑ New record this month
Default card radius16px (--radius-md)
Feature card radius20px (--radius-lg)
Default card bg#ffffff + 1px border #e5e7e6
Feature card bg#f8f9fa
Dark card bg#0a3d2a
Card padding28–32px
HovertranslateY(-4px) + shadow-sm — 0.25s ease
Components
Form Inputs
Clean, minimal inputs with consistent padding and a green focus ring that matches the brand.
We'll never share your email.
This field is required.
Looks good!
Border radius12px (--radius-sm)
Border1.5px solid #cccfce (default)
Focus border1.5px solid #0a3d2a + 3px rgba(10,61,42,0.08) ring
Error border1.5px solid #ff2244
Success border1.5px solid #139d49
Padding12px 16px
Font size16px / 500
Placeholder#838b88
Components
Hero Section
Light background with centered layout. Decorative lime orbs at top. Large H1, subtitle, dual CTA buttons.
AI-Powered Analytics
Achieve Financial
Success with AI
Leverage AI for smarter financial decisions with real-time insights and personalized investment strategies.
H1 size76px / 700 / -2.375px tracking
Subtitle24px / 500 / #414d48
Padding top232px
Padding bottom136px
AlignmentCenter — text, buttons, badge
Decorative orbs#d0fa93 and #d4f2fd circles — blurred, positioned absolutely
Components
Steps / Process
4-column step grid used for onboarding flows. Numbered indicators in dark green with lime text.
1
Create Your Account
Sign up in seconds with just your email and a password to get started.
2
Connect Your Accounts
Link your bank, credit card, and investment accounts securely.
3
Set Your Goals
Define savings targets and let AI create your personalized plan.
4
Track & Grow
Monitor progress in real-time and get smart nudges to stay on track.
Components
Pricing Cards
3-column grid. Featured plan uses dark green background. Checkmarks in accent green / lime.
Pro
$29
per month
- AI-powered insights
- Unlimited accounts
- Real-time alerts
- Investment tracking
Enterprise
$99
per month
- Everything in Pro
- Team collaboration
- API access
- Priority support
Components
Testimonials
White card with border-shadow on surface background. 5-star rating, quote in italic, author row at bottom.
★★★★★
"Canopy completely changed how I manage money. The AI suggestions are genuinely useful and the interface feels effortless."
★★★★★
"The budget tracking is incredibly smart. It learned my spending habits within a week and started giving me real advice."
★★★★★
"Best fintech app I've used. The dashboard is clean, fast, and the insights help me actually hit my savings goals."
Component
Page Sections
Full page-level section patterns — 10 layouts covering every section type used across the site. Each has a live preview and spec breakdown.
01
Hero
Dark bg (#0a3d2a), 120px padding, badge + H1 + subtitle + dual CTAs + graphic
02
Logo Bar
White bg, 40px padding, centered label + scrolling logo row
03
Features Grid
Surface bg (#f8f9fa), 3-col card grid, icon boxes + heading + body copy
04
Feature Detail
White bg, sticky left text, scrolling right content, position: sticky top: 100px
05
Steps
Surface bg, 4-col numbered steps, numbered badges + feature icon boxes
06
Stats Bar
Dark bg (#0a3d2a), 4 stat columns, large number + label layout
07
Pricing
White bg, 3 cards, featured center card with dark bg + lime accent, feature list
08
Testimonials
Surface bg, 3-col quote cards, avatar + name + role + star rating
09
CTA
Dark bg, centered layout, large heading + dual CTA buttons
10
Footer
Dark bg, 2fr 1fr 1fr 1fr grid, logo col + 3 link cols + bottom bar
Graphics
Graphic Library
Feature graphic compositions, floating UI cards, decorative background elements, and the icon box system. All built in pure CSS/SVG for use as inspiration and reference.
Feature Compositions
4 Hero Graphics
Hero Float, Dashboard Collage, Phone + Cards, Split Feature. Each uses a photo placeholder + floating UI card overlays + geometric bg elements.
Floating UI Cards
6 Card Types
Stat, Chart (bar), Progress, Notification, AI Feature, Trend (line). White surface, border, box-shadow, real data styling.
Decorative Elements
9 Shapes
Lime Orb, Sky Orb, Dark Orb, Gradient Orb, Grid Pattern, Dot Pattern, Diamond Shape, Blob Shape, Mesh Gradient.
Icon Boxes
3 sizes × 4 colors × 3 shapes
SM 36px / MD 48px / LG 64px. Lime, Sky, Green, Surface. Square, Circle, Squircle variants.
Tokens
CSS Variables
Copy-paste ready token definitions. Drop these into your :root to start building with the Canopy system.
/* === CANOPY DESIGN TOKENS === */
:root {
/* Colors - Brand */
--color-primary-900: #0a3d2a;
--color-primary-800: #1a2722;
--color-primary-700: #2d3934;
--color-primary-600: #414d48;
--color-primary-400: #6b756f;
--color-primary-300: #838b88;
/* Colors - Accents */
--color-accent-lime: #d0fa93;
--color-accent-green: #139d49;
--color-accent-sky: #59d0ff;
--color-accent-sky-light: #d4f2fd;
--color-error: #ff2244;
/* Colors - Surface */
--color-white: #ffffff;
--color-surface-1: #f8f9fa;
--color-surface-2: #f4f5f4;
--color-border-light: #e5e7e6;
--color-border: #cccfce;
/* Typography */
--font-family: 'Satoshi', 'Satoshi Placeholder', sans-serif;
--font-size-xs: 12px;
--font-size-sm: 16px;
--font-size-md: 18px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-size-2xl: 32px;
--font-size-3xl: 40px;
--font-size-4xl: 52px;
--font-size-5xl: 76px;
/* Spacing */
--space-1: 4px; --space-2: 6px; --space-3: 8px;
--space-4: 10px; --space-5: 16px; --space-6: 24px;
--space-7: 30px; --space-8: 32px; --space-9: 40px;
--space-10: 52px; --space-11: 64px; --space-12: 80px;
--space-13: 120px;
/* Border Radius */
--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 30px;
--radius-pill: 47px;
--radius-round: 100px;
--radius-circle: 50%;
/* Shadows */
--shadow-sm: rgba(10,61,42,0.10) 0px 6px 32px 0px;
--shadow-md: rgba(10,61,42,0.08) 0px 8px 48px 0px;
--shadow-lg: rgba(0,0,0,0.17) 0px 0.6px 1.57px -1.5px,
rgba(0,0,0,0.14) 0px 2.29px 5.95px -3px,
rgba(0,0,0,0.02) 0px 10px 26px -4.5px;
/* Transitions */
--transition-fast: all 0.15s ease;
--transition-base: all 0.25s ease;
--transition-slow: all 0.4s ease;
--transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}