Skip to content

Paletta

A laptop on a violet backdrop beside a monstera leaf, showing Paletta's generated palette as full-height colour columns with contrast ratios.

Color systems built for production. A live SaaS product I designed, built, and shipped as a solo founder.

Role
Designer and Builder
Timeline
2026
Status
Live: www.usepaletta.io
Built with
  • React 19
  • TypeScript
  • Vite
  • Tailwind
  • shadcn/ui
  • Zustand
  • Supabase
  • Stripe
  • Vercel
  • chroma-js
  • Vike
  • Claude API

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

I kept hitting the same break point. Pick a palette, then spend hours building shade scales by hand, checking contrast in a separate tool, formatting tokens for engineers, and redoing all of it when one color changed. Tools like Coolors solve inspiration. They do not solve shipping.

I wanted one place to go from a single color to a production-ready system, with no manual translation layer between design and engineering. So I built it.

Paletta is also proof of something I care about: a designer can own the full loop, from spotting the problem to shipping the product, not just handing off a Figma file and hoping the build holds.

Diagram of the old workflow as a chain: a palette app, then WebAIM for contrast, then hand-written Tailwind, then repeat the whole thing whenever a colour changes.

Positioning matrix plotting consumer against professional and inspiration against production. Adobe Color, Coolors, Huemint and Realtime Colors sit lower, with Paletta alone in the production-ready professional quadrant.

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.

The Vercel deployments dashboard listing successive production builds of Paletta, each ready and tied to a commit on main.

Market analysis

I studied the landscape before writing a line of code. Coolors owns inspiration with 8 million users and a ten-year community lead, so competing there is 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.

Nobody owned the professional designer-to-frontend pipeline, the segment that needs palettes that ship, not palettes that look good on a mood board. The stakes also went up. Specify, a funded design-tokens platform, shut down. The EU’s European Accessibility Act is now in force, which turns accessible color from a nice-to-have into a legal requirement for anyone selling into Europe. That is exactly where Paletta sits.

The Pro upgrade modal over the app, listing unlimited AI prompts, larger palettes, the full accessibility lens, shade scales and Tailwind export, priced at 5 dollars a month.

Business model

Free forever, no card to start. Pro at $9/mo or $79/yr, a 27% saving on the annual plan. Cost to serve is close to zero: static hosting on Vercel, a thin Supabase backend, and Claude Haiku for the AI at a low cost per generation.

Margins are strong, and the pricing is aimed at the individual designer, not gated behind enterprise sales, because the wedge is the solo designer who brings a team along later.

The three-layer CSS variable source on the left beside the running app and its exported Tailwind config on a phone, showing tokens moving from definition to production.

Design system

Paletta runs on a 3-layer CSS variable architecture. Variables are the single source of truth, Tailwind maps them to utilities, components only consume tokens. Change one variable and every surface updates. No hardcoded hex anywhere.

Radii run at five levels (24, 16, 12, 8, 6px) with an inner-radius formula, R_inner equals R_outer minus padding. The same tokens sync to a Figma file so design and code stay in one language. I documented all of it as a canonical spec that every change has to comply with. Same systems thinking I bring to a design org, turned on my own product.

A Finder window listing the eight agent definition files, from design system architect through to micro-interactions designer, alongside the manifesto that governs them.

Team of agents

I build Paletta with a virtual product team: 8 specialized Claude Code agents, each with a defined jurisdiction and a relationship to the others. Writing a UI component triggers the design-system agent for token compliance and the frontend agent for architecture review. It is organizational design applied to a solo build. One person, structured like a team.

The WebAIM accessibility site beside Paletta’s own contrast validation, showing the check that previously required a second tool now running inside the product.

How I built it

React 19, TypeScript, Vite, Tailwind, shadcn/ui, Zustand for state, Supabase, Stripe, Vercel, chroma-js for the color math, Vike for SSG. AI features run on the Claude API (Haiku). I write it with Claude Code as my engineering partner, which is how one designer ships and maintains a full product without a team.

What shipped

Everything below is shipped and running at usepaletta.io:

  • AI palette generation from a single color
  • Full 50 to 950 shade scales in OKLCH
  • WCAG 2.2 contrast validation
  • Color-vision simulation
  • Export to Tailwind, CSS, and design tokens
  • Live preview on real UI mockups
  • A saved library of systems
  • A live, bidirectional Figma plugin
  • Free tier and Pro billing on Stripe
  • PostHog analytics running end to end

Distribution runs through the Figma plugin as top-of-funnel, a build-in-public series on dev.to, and Reddit and X. The product is fully built and functional. Pre-launch only in the sense of the public push, not in what exists.

Paletta open on a laptop on a wooden desk beside a plant, showing a generated palette as full-height colour columns.

Someone using Paletta on a laptop in a lounge chair, with the palette view and an open panel on screen.

Paletta running on an iPhone against wood slats, the palette rendered as vertical colour bars on the small screen.

Paletta on a phone lying on a desk beside a photography book, a film camera and an orange notebook.

Try itA simplified version of what Paletta does: one colour in, a perceptual scale out, every step checked for contrast. The real thing handles vision simulation, exports and Figma sync.
  1.  50
  2.  100
  3.  200
  4.  300
  5.  400
  6.  500
  7.  600
  8.  700
  9.  800
  10.  900
  11.  950

Ratio shown is against this site's page background. Steps that clear WCAG AA for body text are marked.Open the real thing

More work this way

01

Lab

Popshot

View project
The Popshot editor with a screenshot loaded on the canvas, mockup presets down the left and background, style and layout controls on the right.
02

Lab

Jarvis

View project
The Jarvis desktop app in standby: a reticle orb at centre, a left rail with model and effort controls, usage gauges and the day's schedule, and a conversation pane on the right.