github.com/Railly/tinte @main

Tinte  

Agent-native design system infrastructure. Generate, compile, install, and preview design systems from one source of truth.

Quick Start

Install a Tinte design system into any shadcn/ui project:

npx shadcn@latest add https://tinte.dev/api/preset/one-hunter

Install the Tinte skill for Claude Code, Cursor, or any coding agent:

npx skills add Railly/tinte

How It Works

Tinte maintains a theme graph of 13 semantic OKLCH color tokens that compiles to:

• shadcn/ui presets — registry:base + registry:font items, compatible with shadcn/cli v4
• VS Code themes — Full editor themes with syntax highlighting
• Terminal configs — Alacritty, Kitty, Warp, Windows Terminal
• Design tools — GIMP, Slack, design system tokens
• 19+ formats from the same source of truth

Preset API (shadcn v4)

Every public Tinte theme is installable as a shadcn registry:base item:

npx shadcn@latest add https://tinte.dev/api/preset/{slug}
npx shadcn@latest add https://tinte.dev/api/preset/{slug}/font?variable=sans

Get the full preset pack (base + fonts + install commands):

GET https://tinte.dev/api/preset/{slug}?type=pack

Browse themes:

GET https://tinte.dev/api/themes/public?search=minimal

Ray by Tinte

ray.tinte.dev — code screenshots + theme extraction.

• 500+ syntax themes, 16 languages, PNG/SVG export
• Free REST API (60 req/min, no auth)
• Extract color themes from images: POST ray.tinte.dev/api/v1/extract-theme
• Screenshot with any Tinte theme: POST ray.tinte.dev/api/v1/screenshot

curl -X POST https://ray.tinte.dev/api/v1/screenshot \
  -H "Content-Type: application/json" \
  -d '{"code": "const x = 42;", "language": "typescript", "theme": "one-hunter"}' \
  --output screenshot.png

Ecosystem

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

Packages

• @tinte/core — Theme primitives, OKLCH color model, type definitions
• @tinte/providers — 19+ format converters (shadcn, VS Code, terminals, design tools)
• @tinte/cli — CLI for theme installation

Development

bun install      # Install dependencies
bun dev          # Start development server
bun build        # Production build

Links

• Tinte: tinte.dev
• Ray: ray.tinte.dev
• Elements: tryelements.dev
• Skill API: tinte.dev/api/skill
• API Docs: ray.tinte.dev/docs

License

MIT License - see LICENSE for details.