| { |
| "canvas_settings": { |
| "aspect_ratio": "1:1", |
| "ambient_lighting": "soft cool daylight UI lighting with pale blue-white background glow and subtle card shadows", |
| "image_style": "clean modern fintech mobile app UI, rounded white cards, soft drop shadows, sans-serif typography, flat vector icons" |
| }, |
| "layers": [ |
| { |
| "description": "Full-screen mobile app background with a very pale blue-to-white gradient, slightly brighter at the top and lower edges, smooth glassy fintech aesthetic with no visible texture beyond soft gradient shading.", |
| "coordinates": "cx: 0.500, cy: 0.500, w: 1.000, h: 1.000", |
| "hierarchy_and_relation": "Z-index 0 background layer; all cards, text, icons, and navigation elements sit above it with soft shadows separating them from the pale surface.", |
| "color_specs": [ |
| "#F3F8FF", |
| "#EAF3FF", |
| "#FFFFFF" |
| ] |
| }, |
| { |
| "description": "Top status bar with dark time text '9:41' at the upper left, and compact black cellular signal bars, Wi-Fi arcs, and a rounded battery outline with dark fill at the upper right. The time and the right-side icon cluster sit on the same horizontal status-bar row, aligned near the top edge with wide empty space between them.", |
| "coordinates": "cx: 0.500, cy: 0.030, w: 0.850, h: 0.035", |
| "hierarchy_and_relation": "Sits above the background and above the app header, visually aligned to the top safe area without overlapping the balance card.", |
| "color_specs": [ |
| "#111827", |
| "#000000", |
| "#FFFFFF", |
| "#D1D5DB" |
| ] |
| }, |
| { |
| "description": "Header area with bold dark greeting text 'Good morning, Alex' near the upper left, smaller muted subtitle 'Here's your financial overview' directly underneath, and a circular white notification button on the upper right containing a thin outlined bell icon with a small blue unread dot. The greeting and subtitle form a left-aligned two-line stack, while the notification button is horizontally aligned with the greeting block and separated to the far right.", |
| "coordinates": "cx: 0.500, cy: 0.095, w: 0.850, h: 0.075", |
| "hierarchy_and_relation": "Placed below the status bar and above the balance card; the notification button floats on the same horizontal band and casts a faint shadow over the background.", |
| "color_specs": [ |
| "#111827", |
| "#6B7280", |
| "#FFFFFF", |
| "#2F80ED", |
| "#E5E7EB" |
| ] |
| }, |
| { |
| "description": "Large rounded balance card with deep blue gradient fill, subtle curved wave decoration in the lower right, and a white outlined eye icon button near the top right. Left side contains small label 'Total Balance', oversized white balance amount '$8,450.75', and smaller white currency label 'USD'. Right lower area contains a white rounded square icon tile with a blue wallet/card symbol. The label, amount, and currency label are stacked in a left-aligned column inside the card, while the eye button aligns near the card's top-right corner and the wallet icon tile anchors the lower-right area.", |
| "coordinates": "cx: 0.500, cy: 0.250, w: 0.850, h: 0.225", |
| "hierarchy_and_relation": "Main hero card sits above the background and below the header; its shadow and saturated blue fill make it the dominant visual block, with the wallet icon tile layered on top of the card gradient.", |
| "color_specs": [ |
| "#0F62FE", |
| "#1B4FD8", |
| "#FFFFFF", |
| "#EAF2FF", |
| "#1E5BDB" |
| ] |
| }, |
| { |
| "description": "White rounded recent transactions panel with title 'Recent Transactions' at the top left and blue link 'View all' at the top right. First transaction row shows a green circular food icon with a white shopping bag outline, merchant name 'Whole Foods Market', date line 'May 20, 2024', right-aligned negative amount '-$85.42', and category 'Groceries'. Second row shows a blue circular ride icon with a white car outline, merchant name 'Uber Ride', date line 'May 20, 2024', right-aligned negative amount '-$18.75', and category 'Transport'. Third row shows a purple circular salary icon with a white wallet outline, merchant name 'Salary Deposit', date line 'May 19, 2024', right-aligned positive amount '+$2,500.00', and category 'Income'. Thin light gray dividers separate rows. The panel title and link share the top header row, and each transaction row uses a consistent left-to-right layout of icon, two-line merchant/date text block, and right-aligned amount/category stack.", |
| "coordinates": "cx: 0.500, cy: 0.520, w: 0.850, h: 0.285", |
| "hierarchy_and_relation": "Panel sits below the balance card with a soft shadow; each icon, text block, amount, and category is contained within the white card, with dividers layered behind the row content.", |
| "color_specs": [ |
| "#FFFFFF", |
| "#111827", |
| "#6B7280", |
| "#2F80ED", |
| "#22C55E", |
| "#8B5CF6", |
| "#E5E7EB" |
| ] |
| }, |
| { |
| "description": "White rounded quick-actions panel with heading 'Quick Actions' at the top left. Three evenly spaced action columns appear below: left column has a blue circular icon with a white paper-plane/send symbol and label 'Send' with sublabel 'Transfer money'; middle column has a green circular icon with a white payment-card symbol and label 'Pay' with sublabel 'Pay bills & more'; right column has a purple circular icon with a white plus symbol and label 'Top Up' with sublabel 'Add funds'. The heading sits above a single row of three equal action columns, each column stacking its circular icon above the bold label and smaller sublabel, all centered within its column.", |
| "coordinates": "cx: 0.500, cy: 0.765, w: 0.850, h: 0.170", |
| "hierarchy_and_relation": "Positioned below the transactions panel and above the bottom navigation; the three action groups are children of the white rounded card and are separated by spacing rather than visible dividers.", |
| "color_specs": [ |
| "#FFFFFF", |
| "#111827", |
| "#6B7280", |
| "#2F80ED", |
| "#22C55E", |
| "#8B5CF6", |
| "#F3F4F6" |
| ] |
| }, |
| { |
| "description": "Bottom navigation bar as a wide white rounded rectangle with four evenly spaced tabs. Left tab is active with a blue home icon and blue label 'Home'. Second tab has a gray vertical card/statement icon and label 'Cards'. Third tab has a gray pie-chart icon and label 'Insights'. Fourth tab has a gray person outline icon and label 'Profile'. The four tabs form a single evenly spaced horizontal row, with each icon centered above its label and all labels aligned along the same baseline.", |
| "coordinates": "cx: 0.500, cy: 0.915, w: 0.850, h: 0.095", |
| "hierarchy_and_relation": "Topmost persistent navigation layer sits above the background and below no other content; it overlaps the lower margin with a soft shadow and keeps all tab labels aligned along the same baseline.", |
| "color_specs": [ |
| "#FFFFFF", |
| "#2F80ED", |
| "#6B7280", |
| "#E5E7EB", |
| "#111827" |
| ] |
| } |
| ] |
| } |
|
|
