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, measured checks and portable exports through four explicit stages.
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. A versioned contrast policy makes foreground generation explicit by role.
Tintary organizes those decisions as Build, Preview, Check and Export—clear product tasks instead of a collection of unrelated editor panels.
Product principles
What Tintary is designed to do.
02
Culori for color math
Culori handles parsing, conversion and WCAG measurement. OKLCH recipes generate scales and surface depth for light and dark modes.
03
Evidence before export
Build, Preview, Check and Export make every decision and handoff stage visible instead of hiding tools behind editor chrome.
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
Four-stage workspace
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
Make every color decision visible.
Build source roles, preview real contexts, check measurable quality and export the formats your project uses.