UI kitsOpen source

Tokenbench Starter

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

About this resource

Tokenbench Starter is a small repository for teams that already have a design language but no reliable way to move it into code. It includes a three-tier token structure (primitive, semantic, component), a build script that writes CSS variables, Swift and Kotlin constants, and a Figma file with variable collections named to match.

It's best for design-systems engineers who want a working example rather than a blog post about token naming. The code is Apache 2.0 licensed. The caveat: it is a pipeline, not a component library, so you get zero buttons or cards, and the Figma sync is a manual export step rather than a live plugin.

Highlights

  • 01Primitive, semantic and component tiers set up for you
  • 02Outputs CSS, Swift and Kotlin from one source
  • 03Figma variable names match the code names exactly

Tags

Related resources

More in UI kits
  • A design-system starter with tokens, a Figma library and matching React components

    • design system
    • tokens
    • react
    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 →