01
One independent model
ThemeDefinition stores the color system. CSS, Tailwind, Material UI, Bootstrap and Figma remain output formats.
About Tintary
A production-ready color system from one color.
Tintary helps frontend and design system teams turn one source color into coherent scales, semantic roles, realistic previews and portable exports.
Why it exists
Choosing colors is only the first step.
Frontend work begins after color selection: accessible foregrounds, semantic roles, surface hierarchy, dark mode and framework output still need decisions.
Tintary keeps those decisions visible and testable without turning the workspace into a complex visual editor.
Product principles
What Tintary is designed to do.
02
Culori for color math
Culori handles parsing and conversion. OKLCH recipes generate scales and surface depth for light and dark modes.
03
Preview before export
Product patterns, gallery examples and quality audit show how colors work outside isolated swatches.
04
Local browser storage
No account, backend or database. Workspace state and saved themes stay in the browser.
Architecture
One color model, five export formats.
Color generation stays pure. UI and gallery state never become export data.
Source colors
Culori engine
Raw scales
Semantic roles
Preview + adapters
ThemeDefinition
Framework-agnostic product truth.
Zustand
Local editor state and persistence.
Pure adapters
Format output without regenerating colors.
Color-only MVP
What the MVP includes.
Included
- Raw 50–950 color scales
- Light and dark semantic tokens
- Preview and quality audit
- Local save, share and import
- Five export adapters
Not in MVP
- Typography and spacing scales
- Radius, shadow and motion tokens
- Authentication or cloud storage
- Backend, API or database
- Component code generation
Project
David Foliti
I built Tintary as an independent project. It uses Next.js, TypeScript, Tailwind CSS, shadcn/ui, Culori and Zustand, with Vitest, Playwright and axe-core for testing.
Next.jsTypeScriptTailwind CSSCuloriZustand
Source code and project updates are available on GitHub. You can also contact me through Twitter or LinkedIn.
Tintary
Keep color decisions visible and portable.
Build the palette, check it in context and export the formats your project uses.