Tinte
v4Agent-Native Design Systems

Design your
s
h
a
d
c
n
/
u
i
preset
Generate, compile, and install complete design systems from one source of truth. 500+ presets, 19 export formats.

shadcn CLI v4OKLCH color spaceAgent-ready API

Ecosystem

Tinte generates the system. Elements installs it. Ray shows it.

Tinte

Generate & Compile

13 semantic OKLCH tokens compile to 30+ CSS variables, fonts, radius, and shadows. One source of truth for 19 export formats.

AI-powered generationOKLCH color model19 export targets
npx shadcn@latest add https://tinte.dev/api/preset/{slug}
tinte.dev
Elements Logo

Elements

Install & Compose

227+ full-stack shadcn components that inherit your Tinte design tokens. Install presets, then add components.

227+ componentsFull-stack readyToken inheritance
npx shadcn@latest add https://tryelements.dev/r/{component}
tryelements.dev

Ray

Preview & Extract

Code screenshots with any Tinte theme applied. Extract color themes from images. Visual proof for your design system.

500+ syntax themesImage extractionREST API
POST ray.tinte.dev/api/v1/screenshot
ray.tinte.dev
npx skills add Railly/tinteAgent skill for Claude Code, Cursor, Windsurf

Tinte Presets

Design system presets by the Tinte team.

Browse All Tinte Presets

Roadmap

Follow here what we are doing now in this project and what we will do in the future.

Follow us on X to stay up to date with updates.

Being Worked On

Preset Gallery

Core

Browse and discover 500+ design system presets with live preview and one-command install

AI Preset Generation

Core

Describe your brand or aesthetic in natural language and get a complete design system preset

Brand-to-Preset

Integration

Upload your logo or brand assets to automatically extract colors and generate a matching preset

Planned

Tinte CLI

Core

bunx tinte init wrapping shadcn CLI for preset management, publishing, and browsing

Preset Analytics

Social

Track installs, views, and forks for your published presets

Team Design Systems

Social

Shared presets with version control, branching, and collaborative editing

Website-to-Preset

Integration

Scrape any website's CSS variables and convert them into a Tinte preset

Completed

Agent Skill

Integration

npx skills add Railly/tinte — AI agents can browse, install, and preview Tinte presets

Preset Pack API

Core

GET /api/preset/{slug}?type=pack returns base + fonts + install commands in one payload

Registry Font API

Export

Distribute fonts as registry:font items via /api/preset/{slug}/font

Preset Distribution API

Core

Serve presets as registry:base items via /api/preset/{slug} for shadcn CLI v4

AI Theme Generator

Core

Generate presets using AI prompts with advanced color theory and OKLCH color space

Multi-Format Export

Export

Export to shadcn/ui, VS Code, Shiki, terminals, and design systems (19 formats)

Live Preview System

Editor

Real-time preview across multiple providers with Monaco Editor and Shiki

Community Marketplace

Social

Browse, share, and discover 500+ community presets with search and filtering

Professional Workbench

Editor

Advanced preset editor with canonical editing, provider overrides, and AI assistance

Frequently Asked Questions

Everything you need to know about Tinte and the design system ecosystem.

Tinte is agent-native design system infrastructure for shadcn/ui. It maintains a theme graph of 13 semantic OKLCH color tokens that compiles to shadcn presets, VS Code themes, terminal configs, and 19+ formats from one source of truth. Install with one command via shadcn CLI v4.