Every kit.
One design
language.
A tessera is one tile of a mosaic. Kition Tessera is the tiles every kit is built from: icons, tokens and editor components for professional software, so a photo editor, a spreadsheet and a timeline read as one suite, and any host can reskin them all at once.
- 0
- icons
- 0
- kits
- 0
- theme tokens
- 0+
- components
In a kit
Real components, not screenshots.
This photo editor is built only from Tessera: ribbon, tool rail, histogram, number field, colour picker. Move the pointer; the cards lean with it.
Harbor at dusk.psdSkins
One editor. Any skin.
Drag the line. The same kit, Paper on one side and Graphite on the other: the host sends one theme over the Kit Harness Protocol and every control follows.
Harbor at dusk.psdHarbor at dusk.psdTessera Icons
598 icons. One stroke.
A 24 grid, a 1.5 line, round caps, and accents that follow the skin: from Undo to a polar array, every kit draws the same family.
Components
Built for the work professional editors do.
General design systems stop at forms and tables. Tessera goes on: ribbons, docks, wheels, curves, timelines, meters, all styled only by theme tokens.
| A | B | C | D | |
|---|---|---|---|---|
| 1 | Design | 42,000 | 38,500 | −8% |
| 2 | Engineering | 180,000 | 171,200 | −5% |
| 3 | Marketing | 65,000 | 70,100 | +8% |
| 4 | Total | 287,000 | 279,800 | −3% |
A host sends one theme over the Kit Harness Protocol; every kit takes it, readable at WCAG AA.
Drag the puck to tint, the slider to lift. Grading controls are part of the system, not an add-on.
"theme": {
"colorScheme": "dark",
"tokens": {
"--kit-primary": "#8b7ff0",
"--kit-surface": "#1b1e23"
}
}Press play, or drag the timecode to scrub.
Three packages
Take one layer, or all three.
Tokens stand alone. Icons need nothing but a canvas or React. Components build on both, and a host that follows the theme contract can reskin any of it.
Tokens
@kition/tessera-tokensThe Kit Harness Protocol theme tokens, component tokens, and the Paper and Graphite skins, from one JSON source.
import '@kition/tessera-tokens/tokens.css'
import { skinTheme }
from '@kition/tessera-tokens'
const theme = skinTheme('graphite')Icons
@kition/tessera-iconsEvery icon as SVG path data on a 24 grid, so React, a canvas, and a Rust engine draw the same shape.
import { LayersIcon }
from '@kition/tessera-icons/react'
<LayersIcon size={16} />
drawIcon(ctx, Layers, 8, 8, { size: 16 })Components
@kition/tessera-uiBase controls through ribbons, docks, colour, curves and timelines. Every one draws only through the theme tokens.
import '@kition/tessera-ui/styles.css'
import { Button, ColorPicker }
from '@kition/tessera-ui'
<Button variant="primary">Save</Button>Docs
Written for people and for language models.
An assistant that writes a kit editor should get it right the first time. So the docs a person reads and the docs a model reads come from the same source.
- Props tables generated from the components’ TypeScript types, checked on every commit.
- Every example on the site is a file that runs; its source is shown under it.
- Every guide and component is also a Markdown file, in the repository’s docs/ and on this site under /markdown/.
- llms.txt indexes those files; llms-full.txt is the whole reference in one.
# Kition Tessera
> The design system for professional editors and Kition kits: design tokens (`@kition/tessera-tokens`), Tessera Icons (`@kition/tessera-icons`), and components (`@kition/tessera-ui`).
Each link is a Markdown file. The whole reference in one file: https://tessera.kition.ai/llms-full.txt
## Getting started
- [Overview](https://tessera.kition.ai/markdown/guides/overview.md): Kition Tessera is the design system for professional editors: design tokens, Tessera Icons, and the components kits are built from.
- [Installation](https://tessera.kition.ai/markdown/guides/installation.md): Add the packages, import one stylesheet, and draw a first component; then apply a skin and give the components your strings.
- [Building with an AI assistant](https://tessera.kition.ai/markdown/guides/ai.md): Give a coding assistant Tessera’s docs as Markdown, and it writes an editor’s interface with the right components, props and tokens.
- [Theming and skins](https://tessera.kition.ai/markdown/guides/theming.md): A host sends one theme over the Kit Harness Protocol; every kit, and every Tessera component in it, follows.
- [Icons](https://tessera.kition.ai/markdown/guides/icons-guide.md): Tessera Icons: one family for interface and tool icons, in React, canvas, SVG, and Rust.
- [Tokens and skins](https://tessera.kition.ai/markdown/tokens.md): Every theme and component token, with its value in each skin.
- [Every icon](https://tessera.kition.ai/markdown/icons.md): The name, React component, and family of each Tessera icon.
## General
- [Button](https://tessera.kition.ai/markdown/components/button.md): Starts an action. One primary button per view; the rest secondary or ghost.
Kition kits
Sixteen kits. One family.
'/%3e%3cpath%20d='M66%2088H118M66%20112H104'%20fill='none'%20stroke='%23fff'%20stroke-width='10'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='0.75'/%3e%3ccircle%20cx='176'%20cy='180'%20r='34'%20fill='%23f2b200'%20fill-opacity='.2'%20stroke='%23f2b200'%20stroke-width='9'/%3e%3cpath%20d='M108%20164Q112%20196%20138%20190'%20fill='none'%20stroke='%23f2b200'%20stroke-width='9'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='1'/%3e%3cpath%20d='M132%20176L146%20190L128%20200Z'%20fill='%23f2b200'/%3e%3c/svg%3e)
'/%3e%3crect%20x='40'%20y='184'%20width='24'%20height='24'%20rx='4'%20fill='none'%20stroke='%23fff'%20stroke-width='4'%20transform='rotate(45%2052%20196)'/%3e%3c/svg%3e)
Apache-2.0 · free for any kit, host, or product
Build your editor on Tessera.
Tokens, icons and components in three packages, for React, the canvas, and Rust engines.