Feature Graphic Compositions
Four reusable composition patterns. Each combines a central visual (photo area), floating UI cards, and a background treatment. These are the building blocks for hero and feature section graphics.
Hero Float
Diamond geometric bg + centered photo + chart card (top right) + stat card (bottom left). Classic fintech hero layout.
Dashboard Collage
Grid pattern bg + photo (top right) + AI card (center float) + chart card (bottom left) + stat card (bottom right).
Phone + Cards
Centered phone mockup with app UI inside. Floating stat and notification cards orbit the device. Soft orb glows as bg.
Smart
Budgeting
Budgeting
Get Started →
Portfolio
$94,200
↑ +8.4% this month
Savings goal
72% complete
Split Feature
Two-column: text content left, visual right. Floating data cards anchor the graphic. Great for feature detail sections.
Photo placeholdergradient block using brand greens — swap with real photo in production
Card shadowrgba(0,0,0,0.10) 0px 8px 32px — slightly stronger than --shadow-sm
Card positionabsolute, offset from photo edges — top/right or bottom/left
Card overlapcards bleed slightly over photo edge — ~20–40px
Background patterndiamond shape, grid lines, or orb glows — never all three at once
Card countmax 2–3 floating cards per composition — keep it readable
Floating UI Cards
Individual card components used inside feature graphics. Each is standalone and reusable. Combine them in compositions above.
Stat Card
Total Earning
$240,000
↑ +12.4% vs last month
Chart Card
Performance
Weekly
Monthly
Progress Card
Total deposit
$240.80K
+2.6% ▾ Less than last week
Notification Card
Goal Reached!
Savings target hit — $5,000
AI Feature Card
AI-powered analytics
AI-Powered Budgeting for Smarter Financial Spending.
Trend Card
Growth
+18.2%Decorative Elements
Background treatments, orbs, patterns, and geometric shapes. Layer these behind content and feature graphics to add depth.
Lime Orb
Hero bg, feature section top/bottom corners
Sky Orb
Secondary accent, decorative highlights
Dark Orb
On white sections for subtle depth
Gradient Orb
Lime-to-sky blend — hero sections
Grid Pattern
Lime tint on white — feature section bg fill
Dot Pattern
Dark green dots on white or surface-1
Diamond Shape
Rotated square behind hero photo
Blob Shape
Organic soft shape — sky tint accents
Mesh Gradient
Multicolor radial — behind UI mockups
Orb opacity0.04–0.12 on white bg · up to 0.15 on dark bg
Orb blurfilter: blur(40–80px) — always blurred, never sharp
Orb size200–600px — large, off-canvas, mostly clipped
Grid line colorrgba(208,250,147,0.15) on white · rgba(255,255,255,0.05) on dark
Grid line sizebackground-size: 28–40px
Diamond rotationrotate(45deg), border-radius 20–32px
Max elements per section2 orbs or 1 pattern — never stack multiple types
Icon Boxes
The icon container system used inside feature cards and UI widgets. Three sizes, four color variants.
Sizes
SM 36px
MD 48px
LG 64px
Color Variants
Lime
Sky
Green
Surface
Shape Variants
Square
Circle
Squircle
SM (36px)border-radius: 8px · icon size: 18px · used inside small cards
MD (48px)border-radius: 12px · icon size: 24px · standard feature cards
LG (64px)border-radius: 16px · icon size: 30px · hero feature highlights
Lime bgrgba(208,250,147,0.25) · icon stroke: #0a3d2a
Sky bgrgba(89,208,255,0.15) · icon stroke: #0a6e8a
Green bgrgba(19,157,73,0.12) · icon stroke: #139d49
Surface bg#f8f9fa + border 1px #e5e7e6 · icon stroke: #414d48