um the buttons dont have background colors or borders like the ref image, fix, ensure correct, audit yourself, also ensure contrast and borders and backgrounds are visible like in "Conservative Case
Month 1 Licenses Sold20
Ongoing Monthly Licenses25
Monthly Software Revenue$60,000
HW Units Deployed (25%)5
Monthly Hardware Revenue$2,100
Total Monthly Revenue
$62,100
Annual Run Rate
$745,200" you cant see the borders or backgroundd for "Total Monthly Revenue
$62,100
Annual Run Rate
$745,200" also, the lighter blue as show here "Sustainability outcome:Faster revenue realization" doesnt contrast well with the dark background, and neither $28,200" for "Total Monthly Operating Expense" Also green such as in "Operating surplus achieved" is not a color, and the panels on the Investment Participation & Capital Utilization page specifically "have terrible background colors, and arent consistent text color, ensure 100% consistency, make sure there is good contrast, use variants of colors already in the document, and ensure where there are tables the rows are banded
Now I have full context. I need to fix multiple issues:
Let me add proper component classes and fix all the issues:
Now fix the revenue-projections.tsx to have proper visible cards and borders:
Now fix operating-expenses.tsx - remove text-teal, fix contrast on $28,200, and ensure proper banding:
Now fix investment-tiers.tsx - make panels consistent with solid backgrounds and borders:
Now fix the commercial-pricing.tsx table rows for proper banding:
Now fix education-pricing.tsx for proper row styling:
Now fix market-adoption.tsx scenario cards:
I've completed a comprehensive design system audit and fix. Key changes:
.iop-card, .iop-card-dark, .iop-metric-card, .iop-panel-dark, .iop-panel-accent for consistent panel styling, plus .iop-table-row--even/odd for proper banding, and .iop-status-positive/success/accent for semantic status colors.bg-secondary, bg-accent/15, bg-highlight/15) with proper borders.text-accent to text-primary-foreground for high contrast on dark background; replaced text-teal with .iop-status-positive (amber) for proper semantic status color; fixed table row banding from /30 to solid backgrounds..iop-panel-dark or .iop-panel-accent classes with solid backgrounds (oklch(0.16...)), visible borders, and consistent text colors (text-primary-foreground instead of /80 or /55 variants).bg-card / bg-secondary instead of transparent /30 variants for clear visibility.I cannot create an actual .fig file directly — Figma uses a proprietary binary format that can only be created within the Figma application. However, I can create one of these alternatives that would help you build the Figma design system:
You can send messages while the preview loads