Claim Extractor

!--scriptorstartfragment-->

Figma Wireframe Layout for Claim Extractor

Frame Settings

• Frame: Desktop (1440 x 1024)
• Background: #1E1E1E (Dark Theme)

Header Section

• Title: Claim Extractor
  • Font: Inter, Bold, 28px, Color: #FFFFFF
• Subtitle: Upload an email (.eml or .msg) to extract policy & loss details.
  • Font: Inter, Regular, 14px, Color: #A0A0A0

Upload Box

• Rectangle: 400px width, 80px height
• Fill: #2C2C2C, Border Radius: 8px
• Icon: Paperclip (left side)
• Text: Select .eml or .msg file
  • Font: Inter, 16px, Color: #CCCCCC
• Below text: insurance_claim_msg_sample_1.msg (4.5 KB)
  • Font: Inter, 12px, Color: #888888

Button

• Rectangle: 150px width, 40px height
• Fill: #3B82F6, Border Radius: 6px
• Text: Extract Claim
  • Font: Inter, Bold, 16px, Color: #FFFFFF

Extracted Details Section

• Container: Fill #2C2C2C, Border Radius: 8px
• Heading: Extracted Details
  • Font: Inter, Bold, 18px, Color: #FFFFFF
• Two-column layout:
  • Left Column:
    • Policy Number: P0002
    • Loss Date (raw): 2025-05-03
    • Claimant Name: Meena Iyer
  • Right Column:
    • Loss Date (normalized): 03-06-2025
    • Loss Description: Kitchen fire damage.
• Labels: Font: Inter, Regular, 14px, Color: #A0A0A0
• Values: Font: Inter, Medium, 14px, Color: #FFFFFF

Footer

• Text: API: http://localhost:8000
  • Font: Inter, Regular, 12px, Color: #666666

Spacing & Layout

• Vertical spacing: 24px between sections
• Horizontal spacing: 16px between columns
• Use Auto Layout for alignment!--scriptorendfragment-->