Tinte - Design System Infrastructure

Generate, compile, install, and preview design systems from one source of truth.

Tinte maintains a theme graph of 13 semantic OKLCH color tokens that compiles to shadcn/ui presets, VS Code themes, terminal configs, and 19+ other formats.

Preset API (shadcn v4 compatible)

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

Install a theme

npx shadcn@latest add https://tinte.dev/api/preset/{slug}

Install theme fonts

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

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

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

Response:

{
  "base": { "$schema": "...", "name": "...", "type": "registry:base", "cssVars": { "light": {...}, "dark": {...} } },
  "fonts": [{ "$schema": "...", "name": "font-inter", "type": "registry:font", "font": {...} }],
  "slug": "theme-slug",
  "install": {
    "base": "npx shadcn@latest add https://tinte.dev/api/preset/{slug}",
    "fonts": ["npx shadcn@latest add https://tinte.dev/r/font/inter?variable=sans"]
  }
}

Browse Themes

GET https://tinte.dev/api/themes/public?search={query}&limit=20&page=1

Optional filters: ?vendor=tinte|tweakcn|rayso

Response includes themes[] with slug, name, concept, and color tokens.

Get Theme Details

GET https://tinte.dev/api/themes/slug/{slug}

Returns full theme data including light/dark color blocks and overrides.

Registry Routes (shadcn compatible)

These routes serve raw registry:base and registry:font items:

GET https://tinte.dev/r/{slug}                    # registry:base or registry:theme
GET https://tinte.dev/r/{slug}?type=registry:base  # explicit base type
GET https://tinte.dev/r/font/{family}?variable=sans # registry:font

Extract Theme from Image