File size: 7,107 Bytes
18c1466 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | {
"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"
]
}
]
}
|