{
  "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"
      ]
    }
  ]
}