Context
The problem
Creative direction is easy to describe but difficult to translate into a coherent set of color tokens that works in production.
Product
What was built
Color Genius AI combines model-generated intent with deterministic color checks, interactive controls, and code exports for practical design workflows.
Decisions
Engineering choices
- Separated AI providers behind a strategy interface so product behavior is not tied to one model vendor.
- Used OKLCH controls and color-harmony validation to keep generated output adjustable and predictable.
- Made contrast checks and export formats part of the core workflow rather than optional utilities.
Architecture
System shape
- Next.js App Router and React Server Components
- Provider-based AI generation with Google Gemini or OpenAI
- Supabase authentication, PostgreSQL persistence, and row-level security
- Typed color conversion and code-generation utilities
Constraints
What shaped the work
- Model output needs deterministic guardrails before it can become a usable design token.
- Color adjustments must remain perceptually natural across light and dark interfaces.
- Generated palettes need to move cleanly into existing CSS and Tailwind workflows.
Outcome
Result
An open-source product that connects AI exploration with accessible color checks and export-ready implementation details.