Internal - IBM

Wireframe implementation highlighting the breadcrumb design and error handling for required fields of an IBM Internal project.

Design Approach: Task-First
Primary Actions: Answer required questions and save and continue to next section or navigate to compensation module entirely.
Secondary Actions: Navigate back to full list of previous claims.

Typography:
Arial, Arial Bold

Colors:
Background Card - Light Gray - #EEEDED (238:237:237)
Card Stack - White - #FFFFFF (255:255:255)
Primary Button Accent - Green - #4CAF50 (76:175:80)
Secondary Button Accent - Blue - #2096F3 (32:150:243)
Link Text - Light Blue - #1F88E5 - (31:136:229)
Help Card Fill - Light Blue - #E2F2FD - (226:242:253)
Help Card Text - Dark Blue - #104D92 - (16:77:146)
Required Text - Red - #D84316 - (216:67:22)
Required Card Fill - Light Red - #FBE9E7 - (251:233:231)
Required Card Text - Dark Red - #9C1F20 - (156:31:32)

Grid:
1312 x 600 px

Elements:
Header Template; Navigation Template; Primary Button; Secondary Button; Card Overlay (Help); User Feedback Template - Checkbox; Required Overlay; Text Link