Use this prompt:
Redesign only the "Search Matches" section inside the right sidebar. Do not modify any other part of the UI.
The rest of the application already follows a clean white enterprise design with a blue primary theme. The redesigned section should blend seamlessly with the existing interface.
Requirements
Keep the overall layout and functionality unchanged.
Only redesign the section that displays Exact Matches and Related Word Matches.
Use a modern enterprise design inspired by Microsoft Fluent UI, Atlassian, Azure Portal, or Notion.
Maintain the existing white background and minimal aesthetic.
Search Matches Container
White background
1px light gray border (#E5E7EB)
12px border radius
16–20px padding
Clean spacing between elements
Header
Display:
Search Matches — 2
Use bold typography with dark text (#111827).
Below the title, show two compact legends:
🔵 Exact Matches (1) using Blue (#2563EB)
🟢 Related Word Matches (1) using Green (#16A34A)
Use small colored dots or rounded indicators instead of large colored backgrounds.
Match Cards
Each match should be displayed as an individual white card.
Card style:
White background
Thin gray border (#E5E7EB)
10px border radius
Very subtle shadow (optional)
4px colored left border
Exact Match:
Left border: Blue (#2563EB)
Related Word Match:
Left border: Green (#16A34A)
Badges
Use subtle pills instead of bright colored blocks.
Exact Match badge:
Background: #EFF6FF
Text: #2563EB
Related Word Match badge:
Background: #F0FDF4
Text: #15803D
Page badge:
Small rounded pill
Light background
Same accent color as the card
Typography
Matched word:
18–20px
Semibold
#111827
Match count:
Small
Top-right
Blue for Exact
Green for Related
Important
Do not use orange, yellow, or teal backgrounds.
Do not redesign the rest of the sidebar.
Keep the design lightweight, premium, and consistent with the existing blue-themed application.
The final result should look like it belongs in a banking or enterprise document management system.
