Full Stack Developer · July 2024 - August 2024 (8 weeks)
Tonalist Studio
A next-generation color design tool for the modern web
Overview
What Tonalist Studio does.
Tonalist Studio is a web app that combines advanced color science with AI intelligence to help designers and developers build accessible, harmonious, and professional design systems.
- Role
- Full Stack Developer
- Team
- Independent Project
- Duration
- July 2024 - August 2024 (8 weeks)
- Responsive
- Yes
The challenge
Designers often struggle with balancing creativity, accessibility, and systematic design practices. Existing tools lack the ability to combine real-world accessibility compliance with creative color exploration.
Project goals
- Build an intelligent color design platform
- Provide real-time WCAG accessibility testing
- Enable AI-powered palette and theme generation
- Offer live UI previews with interactive components
Process
How Tonalist Studio came together.
Research & Planning
Analyzed existing design tools and accessibility guidelines to define gaps and opportunities.
UI/UX Design
Created wireframes and high-fidelity prototypes using Figma with focus on modern, minimal, and responsive design.
Frontend Development
Developed using Next.js and Tailwind CSS, integrated Shadcn UI for modern components, and added Framer Motion for smooth animations.
AI Integration
Integrated Google Gemini AI for palette suggestions, accessibility analysis, and design recommendations.
Accessibility Features
Implemented WCAG 2.1 compliance checks, color blindness simulations, and exportable accessibility reports.
Key features
- OKLCH Color Picker with precise harmony
- AI-powered palette generation
- Real-time UI component previews
- WCAG 2.1 AA/AAA contrast checker
- Color blindness simulation
- Design system generator
- Multi-format export (HEX, RGB, HSL, OKLCH, CSS)
- Interactive playground with sliders and swatches
- Feedback modal for user suggestions
Impact
- Empowers designers to create accessible and consistent design systems
- Bridges the gap between creativity and usability
- Helps developers quickly test and export color palettes for real-world projects
Lessons learned
- Importance of accessibility-first design
- Optimizing performance in React apps with heavy UI interactions
- Effective integration of AI into real design workflows
Tools & technologies
What it was built with.
- Next.js
- React
- Tailwind CSS
- Shadcn UI
- Framer Motion
- Google Gemini AI
- Culori
More work
Related case studies.
02UI/UX DesignerRecipe platform · 2024
Cook It Yourself (CIY)
A social media-inspired platform to discover and share food recipes
- React
- Next.js
- Express
- Tailwind CSS
04Full Stack DeveloperDocument builder · 2025
BuildErDocs
Drag-and-drop form builder that generates Markdown, PDF, Word, HTML, and JSON documents
- React
- Vite
- TypeScript
- Tailwind CSS