Paletta
From color idea to production-ready system. AI-powered palette generation, shade scales, accessibility validation, and dev-ready export in one tool.
ABOUT
Paletta is a color system tool built for designers and frontend engineers who need to move from inspiration to production without losing anything in the handoff. It handles palette generation, full shade scales, WCAG validation, vision simulation, and Tailwind CSS export. The Figma plugin brings it directly into the design workflow.
Why I built This
Every color workflow I've been part of had the same break point. You pick a palette, then spend hours building shade scales manually, checking contrast ratios in a separate tool, formatting tokens for engineers, and repeating the whole thing when something changes. Tools like Coolors solve the inspiration problem. They don't solve the shipping problem.
I wanted one tool where a designer could go from idea to a production-ready color system without switching between five different utilities. No manual translation layer between design and engineering.
Paletta is also something else. It's proof that a designer can own the full loop, from identifying the problem to shipping the product. Not just handing off a Figma file and hoping the implementation holds.
Market analysis
I studied the competitive landscape before writing a line of code. Four main players, each strong in a different dimension, but every one of them stops short of production-ready output.
Coolors has 8 million users and a 10-year head start on community. Competing on that dimension would be a losing play. Adobe Color locks you into Creative Cloud. Huemint is AI-first but light on exports. Realtime Colors shows live previews but has no WCAG validation or shade scale generation.
The gap was clear. Nobody owned the professional designer-to-frontend pipeline. The segment that needs palettes that ship, not palettes that look good on a mood board. That's where Paletta sits.
Business Model
Free tier with real limits: 3 saves, 5 colors, 3 AI prompts per day, watermarked exports. Pro at $5 per month or $45 per year. Every gate leads with the benefit, not the restriction.
The unit economics are tight by design. Claude Haiku powers the AI features at roughly $0.003 per day per free user and $0.02 per day per Pro user. That's $4.40 margin per Pro subscriber per month on serverless infrastructure. Target is 200 Pro subscribers, around $1K MRR at close to 97% margin.
The conversion path: discovery through Google or Product Hunt, web app trial, Figma plugin adoption, Pro upgrade. Each step increases switching cost and purchase intent.
Design System
Paletta runs on a 3-layer CSS architecture. CSS variables in globals.css as the single source of truth. Tailwind config maps those variables to utility classes. shadcn components consume the Tailwind classes to render the UI. Change one variable, everything updates. No hardcoded hex values anywhere in the codebase.
Token spec covers radii at five levels: 24px for bento containers, 16px for cards, 12px for pills, 8px for buttons, 6px for badges. Inner radius follows a formula: R_inner equals R_outer minus padding. Icon sizes run at 20, 16, and 14px. Base spacing unit is 12px. The same tokens sync to a Figma file so design and code stay in the same language throughout.
Team of agents
I built a system of 8 specialized AI agents that function as a virtual product team. Each has a defined jurisdiction, a set of rules, and a relationship to the others.
Writing UI components activates the Design System agent for token compliance and the Frontend Expert for architecture review. Writing user-facing copy activates the Brand and UX agent. Every feature gets scored on impact, effort, and strategic fit before it enters the build queue. Every code change runs through a 10-point compliance checklist.
The 8 agents: Design System for token compliance, QA Specialist for regression and accessibility, Product Strategy for prioritization, Documentation for roadmap and build logs, Frontend Expert for architecture, Backend Infrastructure for Supabase and Stripe, Brand and UX for copy and voice, Micro-interactions for motion patterns.
This isn't AI as autocomplete. It's AI as organizational infrastructure. A solo builder operating with the decision-making structure of a small product team.
the problem
Color systems look simple from the outside. In practice they involve generating perceptually balanced shade scales, validating contrast ratios across every combination, simulating how the palette reads under different color vision deficiencies, and exporting tokens in formats engineers can actually use. Most teams solve this by stitching together three or four separate tools and a lot of manual work in between.
The handoff kept breaking. Especially at scale. Especially when something changed upstream and every downstream step had to be redone.
How I built it
Stack: React, Vite, TypeScript, Tailwind, Zustand on the frontend. Supabase for auth and database, Stripe for payments, Vercel for deployment, Claude Haiku powering the AI features.
I'm a designer with 15 years of experience, not a traditional engineer. AI closed that gap. I used Claude for architecture decisions and strategy, and Claude Code to write and ship production-grade code. I designed the system, defined the architecture, and treated AI as my engineering partner throughout. The Figma plugin was built the same way.
This is what the design engineer role actually looks like in practice. Not a designer who learned to code, and not an engineer who does some UI work. A person who can hold the product vision and ship it end to end, using the best tools available to get there.
WHAT SHIPPED
Paletta is live at usepaletta.io with a free tier and Pro plan at $5 per month or $45 per year. Stripe payments are active, PostHog analytics are running, and the Figma plugin is submitted and in review.
Early distribution is running through Reddit, Twitter/X, and a build log series on dev.to. Video content is showing strong retention. Product Hunt launch is queued for after the Figma plugin clears review and LLC formation completes.
The product is fully built and functional. Pre-launch in terms of the public push, but not in terms of what exists.
