Overview · Kition Tessera

InstallAdd the packages and draw a first component.ComponentsEvery component, running, with a playground.IconsSearch by name or meaning; copy React, SVG, canvas or Rust.Tokens and skinsMake a skin and take it as the theme a host sends.With an AI assistantGive it the docs as Markdown, and check what it wrote.

Three packages

@kition/tessera-tokens: the Kit Harness Protocol theme tokens (--kit-*), component tokens, and skins (Paper, Graphite) as CSS variables, TypeScript, and Rust.

@kition/tessera-icons: every icon as SVG path data on a 24 grid, as React components (LayersIcon), canvas drawing (drawIcon), SVG markup (toSvg), and the Rust crate tessera-icons for engines.

@kition/tessera-ui: the components on these pages. They draw only through the theme tokens, so a host restyles all of them by sending one theme.

TSX

import '@kition/tessera-ui/styles.css'
import { Button, ColorPicker } from '@kition/tessera-ui'
import { LayersIcon } from '@kition/tessera-icons/react'

Principles

Built for professional software: ribbons, docks, colour wheels, curves, timelines and meters sit beside buttons and fields.

Styled only by tokens: no component hard-codes a colour, radius or shadow; skins and hosts change them all.

One icon family: a 24 grid, a 1.5 stroke, round caps; tool icons carry accents in the skin colour.

Accessible by default: labels, keyboard use, focus rings, and every skin held to WCAG AA contrast.