Tessina UI is one system for every surface: 120 accessible React components that ship in light and dark, left to right and right to left, on every screen size.
- Client
- Own product
- Services
- Design system
- brand
- development
It is my own product. I designed the system and its brand, then built the library, its documentation and the theme editor that goes with it.
The challenge
A component library is usually drawn on a desktop, in light mode, for a mouse. The phone, the dark theme, the keyboard, the screen reader and the right-to-left language are left for every team to work out again on every project.
Tessina had to answer all of that once: each component correct on every surface before it ships, and plain enough to use that the documentation can say when not to.
The system
Everything is a token. Colour, type, radius and motion are named by the job they do, so one change to a theme retunes every component that shares the role, and light and dark are the same structure lit two ways.
The Theme Creator makes a tool of it: choose a base and a brand colour, a typeface, an icon set and a corner radius, watch a real app change on a phone, a tablet and a desktop in both themes with its contrast checked as you go, then export the CSS.
The details
Controls keep a 44 pixel touch target on phones and tablets and return to their compact size where there is a pointer. A loading button keeps its width, its name and its focus. Focus rings hold three to one against the page in both themes.
Sheets follow the finger frame for frame and leave at the speed they were flicked. Where less motion is asked for, the movement stops and the change still happens.
The documentation
Every component has a live preview at desktop and phone width, the code behind it, when to use it and when not to, its props, and what a keyboard and a screen reader get from it, with what was tested and what was not.
The same pages are written for machines too: an index for AI coding agents, a Markdown twin of every page and the source of every example, so an agent building with Tessina reads the rules instead of guessing them.
The direction
From here the primary goal is an AI-driven library: optimised for the command line and for coding agents, so that building with an agent is the main way of working with Tessina, not an afterthought.
The machine-readable documentation is the first step. What follows is the same care for the agent as for the person: components, tokens and rules it can find, apply and check by itself.
This site is built with it.
