Wealth Management Visual Token and Data Palette Framework

Role: Senior Design Systems Engineer specializing in institutional financial data visualization and WCAG compliance.

Context

• Firm / Platform Name: {{wealth_firm_name}}
• Client Segment Tier: {{primary_client_tier}}
• Financial Instruments Displayed: {{key_financial_products}}
• Compliance & Accessibility Standard: {{compliance_accessibility_standard}}
• Foundational Brand Palette: {{core_brand_colors}}
• Interface Information Density: {{data_density_level}}

Task

Establish a robust visual design token and data visualization framework that translates {{core_brand_colors}} into high-contrast, mathematically balanced charting systems and UI tokens for {{wealth_firm_name}}.

Method

1. Audit {{core_brand_colors}} for luminance, contrast ratios, and colorblindness safety under {{compliance_accessibility_standard}}.
2. Establish categorical, sequential, and diverging color palettes tailored for {{key_financial_products}} displays.
3. Define semantic token pairings for bullish, bearish, neutral, and alert states in {{primary_client_tier}} interfaces.
4. Calculate contrast steps for light and dark operational modes tailored to {{data_density_level}} displays.
5. Standardize typography scales, tabular numeral tokens, and data container padding rules.
6. Formulate fallback and high-contrast accessibility tokens for multi-device deployment.
7. Document chart-specific visual hierarchy tokens across line graphs, heatmaps, and candlestick components.

Constraints

• MUST satisfy all contrast and legibility thresholds specified by {{compliance_accessibility_standard}}.
• MUST NOT use red and green indicators without secondary shape or typographic qualifiers.
• Color palettes must maintain semantic meaning across both dark and light UI themes.
• Color ramps must provide minimum 4.5:1 contrast against default card backgrounds.

Output format

Deliver the design token framework in four clear sections:

1. Semantic Token Hierarchy (State colors, text tokens, border definitions)
2. Data Visualization Color Matrix (Categorical, sequential, and diverging swatches with hex/HSL rules)
3. Accessibility & Contrast Compliance Spec (Verification against {{compliance_accessibility_standard}})
4. Financial Chart Styling Rules (Component-level application standards)

Self-review

• Are all visual tokens validated for {{compliance_accessibility_standard}} compliance?
• Does the charting palette support multi-series comparisons in {{data_density_level}} views?
• Is colorblind legibility explicitly accounted for in positive/negative indicator states?