UI Standards & Components
Consistency is key to the Trezoriq user experience. We use a set of canonical UI components and a strict color palette to ensure all 300+ tools feel like part of the same engine.
Pillar Color Language
Each vertical in Trezoriq has a dedicated color identity to help users mentally categorize their financial data.
Grow
Wealth
Taxes
Govt
Manage
Neutral
Loans
Debt
Protect
Risk
NRI
Cross-Border
Real Estate
Property
Math
Utility
Canonical Components
InputPanel
Handles all user input. It automatically renders sliders for ranges and numeric inputs for precise values.
<InputPanel
title="Investment Period"
value={years}
onChange={setYears}
min={1}
max={30}
unit="Years"
/>
ResultSection
Displays the output of the math engine. It includes **ValueCards** for primary metrics and integrated charts for visual analysis.
Framer Motion
All UI transitions use Framer Motion for micro-animations. Prefer `AnimatePresence` for layout shifts and standard `y: 0, opacity: 1` entry for cards.