Context Ui Design

---
name: context-ui-design
description: |
  UI theme system, design tokens, Material-UI patterns, and accessibility standards.
  Handles theme customization, component styling, design system patterns, and accessibility features.
  Use when working with UI components, theme customization, design system patterns, or accessibility features,
  or when user mentions Material-UI, MUI components, theme tokens, dark mode, component styling,
  design system, accessibility, layout issues, styling problems, or ARIA patterns.
tags: [ui, design, frontend, accessibility]
---

# UI Design

Navigate UI theme system, design tokens, Material-UI patterns, and accessibility.

## Overview

Design system and UI consistency for fintech application.

## Theme System

- `frontend/src/theme/createPrimeRadiantTheme.ts` - Theme factory
- `frontend/src/theme/primeRadiantTokens.ts` - Design tokens

## UI Components

- `frontend/src/ui/primeRadiant/` - Prime Radiant UI components
- Material-UI customizations

## Component Patterns

- Search for `Modal`, `Dialog`, `Button`, `Card` in `frontend/src/components/`
- Form patterns
- Layout patterns

## Accessibility

- ARIA patterns
- Keyboard navigation
- Screen reader support

## Responsive Design

- Breakpoints
- Mobile-first patterns

## Documentation

- **Internal**: `docs/design/UI_SYSTEM.md` (create if needed)
- **Internal**: `docs/design/ACCESSIBILITY.md` (create if needed)

## Related Areas

- See `context-analytics` for analytics UI
- See `context-portfolio` for portfolio UI
- See `context-brokerage` for brokerage UI