Structure beneath every interface A lattice is an invisible grid that gives things their shape — every crystal, every fabric, every well-built UI. Latty is that grid for your product: design tokens as the structure, Web Components as the surface. Change the lattice, everything moves with it.
Get started Browse components
Tokens first Design tokens are the single source of truth. They generate CSS custom properties, JSON exports, and TypeScript types — change once, update everywhere.
Framework agnostic Built on Web Components, Latty works natively in vanilla HTML, React, Angular, Vue, Svelte, or any other framework without wrappers.
Fully themeable Every visual decision is a CSS custom property. Override tokens globally or per-component to create a completely custom brand.
Quick start
bash 
pnpm add @latty-ds/tokens @latty-ds/web
js 
import '@latty-ds/tokens/dist/tokens.css';
import '@latty-ds/web';
html 
<lt-button variant="primary" icon-start="save">Save changes</lt-button>

<lt-textfield label="Email" type="email" required></lt-textfield>
Full installation guide →