Component Patterns
Stat cards, badges, and interactive states showing different step combinations from the palette system.
Stat Card Styles
Subtle Tint Background
bg=step 2, border=step 5, text=step 11, icon=step 9
Total Authorizations
1,247+12%
Approval Rate
78.3%+5.2%
Pending Review
89-3%
Denial Rate
14.2%-2.1%
P2P Scheduled
23+8%
Verifications
456+15%
Active Appeals
34+4
Avg Turnaround
2.4d-0.3d
Accent Strip
White card + gradient accent top bar (steps 8 → 10)
Total Authorizations
1,247
+12% from last month
Approval Rate
78.3%
+5.2% from last month
Pending Review
89
-3% from last month
Denial Rate
14.2%
-2.1% from last month
P2P Scheduled
23
+8% from last month
Verifications
456
+15% from last month
Active Appeals
34
+4 from last month
Avg Turnaround
2.4d
-0.3d from last month
Deep Gradient Fill
Steps 7 → 10 background, white text
Total Authorizations
1,247
+12% from last month
Approval Rate
78.3%
+5.2% from last month
Pending Review
89
-3% from last month
Denial Rate
14.2%
-2.1% from last month
P2P Scheduled
23
+8% from last month
Verifications
456
+15% from last month
Active Appeals
34
+4 from last month
Avg Turnaround
2.4d
-0.3d from last month
Side Accent + Wash
Left border step 9, wash bg step 1, icon step 8
Total Authorizations
1,247
Approval Rate
78.3%
Pending Review
89
Denial Rate
14.2%
P2P Scheduled
23
Verifications
456
Active Appeals
34
Avg Turnaround
2.4d
Badge & Pill Variants
Subtle (steps 2 + 11)
In ProgressApprovedPendingDeniedP2P ScheduledVerifiedUnder AppealClosed
Outlined (border step 6, text step 11)
In ProgressApprovedPendingDeniedP2P ScheduledVerifiedUnder AppealClosed
Solid (step 9, white text)
In ProgressApprovedPendingDeniedP2P ScheduledVerifiedUnder AppealClosed
Dot Indicator (bg step 2, dot step 9)
In ProgressApprovedPendingDeniedP2P ScheduledVerifiedUnder AppealClosed
Interactive States
Component fills for rest (3), hover (4), and active (5) states across color families.
blue
Rest (step 3)
Hover (step 4)
Active (step 5)
green
Rest (step 3)
Hover (step 4)
Active (step 5)
violet
Rest (step 3)
Hover (step 4)
Active (step 5)
amber
Rest (step 3)
Hover (step 4)
Active (step 5)