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
  • Open source

    A token pipeline template that turns one JSON file into CSS, iOS and Android values

    Free4.5
    • design tokens
    • pipeline
  • Paid

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

    $494.8
    • fintech
    • dashboard
  • Freemium

    Admin panel templates in Figma and Tailwind HTML, with a usable free core

    Free / $794.3
    • admin
    • tailwind
Live demo · Pixel Pantry— View template →