UI kitsOpen source

Tessellate DS

A design-system starter with tokens, a Figma library and matching React components

About this resource

Tessellate DS is a starting point for teams building their first design system. You get a Figma library of 96 components, a tokens file in JSON with color, spacing, radius and type scales, and a React package that reads the same tokens. A build script exports CSS custom properties and a Tailwind preset, so a token change lands in both design and code.

It suits small product teams with one designer and a few front-end developers who want shared names before they want a big library. Everything is MIT licensed on a public repository. The caveat: documentation is thin beyond the setup guide, and the components are intentionally plain, so it is a skeleton, not a finished brand.

Highlights

  • 01One tokens file feeds Figma, CSS variables and Tailwind
  • 02React components with typed props and stories
  • 03Contribution guide for growing the system in-house

Tags

Related resources

More in UI kits
  • A token pipeline template that turns one JSON file into CSS, iOS and Android values

    • design tokens
    • pipeline
    • open source
    Open sourceFree
  • Ledgerline UI

    NewFeatured

    A finance dashboard kit with 420 components and charts that use real numbers

    • fintech
    • dashboard
    • figma
    Paid$49
  • Admin panel templates in Figma and Tailwind HTML, with a usable free core

    • admin
    • tailwind
    • html
    FreemiumFree / $79
Live demo · Sourcefile Club— View template →