Skip to main content
Output: 
{
  "metadata": {
    "figmaFileKey": "PAY123FLOW",
    "figmaFileName": "Payflow - Banking App",
    "analyzedAt": "2025-10-24T14:23:11Z",
    "accessLevel": "standard",
    "analysisModes": ["design_system", "information_architecture", "user_flows"]
  },

  "summary": "Payflow is a mobile banking application with a clean, minimal layout and a structured design system centered on clarity, trust, and accessibility.",

  "designSystem": {
    "overview": "Consistent design language, clear type scale, and strong color contrast. Minor padding inconsistencies on some cards.",

    "colors": {
      "description": "A blue primary palette with teal accents and neutral grays for background. Reds for alerts and success greens for confirmation.",
      "context": {
        "source": "styles_api",
        "tokens": [
          { "name": "primary", "value": "#2563EB", "role": "action" },
          { "name": "accent", "value": "#14B8A6", "role": "positive" },
          { "name": "error", "value": "#DC2626", "role": "error" }
        ],
        "palette": {
          "primary": ["#1E3A8A", "#2563EB", "#3B82F6"],
          "neutral": ["#FFFFFF", "#F9FAFB", "#E5E7EB", "#1F2937"]
        }
      }
    },

    "typography": {
      "description": "Uses Inter and SF Pro fonts. Clear hierarchy with 34px titles, 20px headlines, and 16px body text.",
      "context": {
        "typeScale": [
          { "name": "Title", "fontSize": 34, "weight": 600 },
          { "name": "Body", "fontSize": 16, "weight": 400 }
        ],
        "fontFamilies": [
          { "name": "Inter", "weights": [400, 500, 600] },
          { "name": "SF Pro", "weights": [400, 500, 600] }
        ]
      }
    },

    "spacing": {
      "description": "4px base grid with common gaps of 8, 16, and 24px. Cards use 20px padding.",
      "context": {
        "baseUnit": 4,
        "scale": [4, 8, 16, 24, 32],
        "commonPatterns": { "cardPadding": 20, "screenMargin": 16 }
      }
    },

    "components": {
      "description": "Includes buttons, inputs, and cards with consistent states and variants.",
      "context": {
        "categories": {
          "buttons": [
            {
              "name": "Button/Primary",
              "variants": ["default", "disabled"],
              "usageCount": 52
            }
          ],
          "inputs": [
            {
              "name": "Input/Text",
              "variants": ["default", "focused", "error"],
              "usageCount": 36
            }
          ]
        },
        "totalCount": 28
      }
    },

    "effects": {
      "description": "Subtle shadows for elevation. Rounded corners (8–12px) across components.",
      "context": {
        "shadows": [
          { "name": "card", "blur": 8, "color": "rgba(0,0,0,0.08)" }
        ],
        "borderRadius": { "buttons": 8, "cards": 12 }
      }
    },

    "layout": {
      "description": "Optimized for mobile (375x812). Fixed header, scrollable content, bottom navigation.",
      "context": {
        "dimensions": { "mobile": { "width": 375, "height": 812 } },
        "safeAreas": { "top": 44, "bottom": 34 }
      }
    }
  },

  "informationArchitecture": {
    "description": "Five main sections accessible via a bottom tab bar: Home, Transfers, Budget, Cards, and Profile.",
    "pages": [
      {
        "name": "Main Screens",
        "description": "Core navigation tabs of the app",
        "screens": [
          {
            "name": "Home",
            "description": "Shows account balance, quick actions, and recent transactions.",
            "context": {
              "id": "1:234",
              "dimensions": { "width": 375, "height": 812 },
              "sections": ["Balance Header", "Quick Actions", "Transaction List"]
            }
          },
          {
            "name": "Transfers",
            "description": "Send and request money via contacts.",
            "context": {
              "tabs": ["Send", "Request"],
              "defaultTab": "Send"
            }
          }
        ]
      }
    ],
    "navigation": "Bottom tab navigation with modal bottom sheets for details."
  },

  "userFlows": [
    {
      "name": "Send Money",
      "description": "From Home → Transfers → Contact → Amount → Confirm → Success.",
      "context": {
        "steps": [
          { "screen": "Home", "action": "Tap 'Pay'" },
          { "screen": "Transfers", "action": "Select contact" },
          { "screen": "Confirmation", "action": "Confirm amount" },
          { "screen": "Success", "action": "View confirmation" }
        ],
        "estimatedSteps": 4
      }
    }
  ],

  "notes": [
    "Variables API not available (non-enterprise file).",
    "Minor layout inconsistency detected on Settings screen."
  ]
}