Skip to content
PN Scripts

Design assets

Pliantkit by PN Scripts

A token-driven UI kit: light and dark design tokens, 12 SVG sheets per theme with every component state, one canvas for Figma, Penpot or Inkscape, and a matching CSS implementation.

  • Design Tokens (W3C draft JSON)
  • Tokens Studio file layout
  • SVG
  • CSS custom properties
  • HTML
  • Coming soon

Coming soon

Not published on its store yet, so there is no buy or download link. PN Scripts does not take payment for it here.

Design assets
Button and card sheets of the kit in the light and the dark theme

What it solves

The gap

Most UI kits live inside one design tool, drift away from the code that implements them and offer dark mode as an afterthought, so designers and developers end up maintaining two versions of the same decisions.

What it is

Pliantkit keeps one source, the token files, and generates the design sheets, the CSS and the reference pages from it, in light and dark, with contrast checked on every build.

How you use it

Change one token and get matching design sheets, CSS and documentation in both themes in seconds, with the accessibility checks rerun for you.

For small product teams and solo developers who want a clean, accessible component set without a design-tool subscription, Pliantkit is a token-first kit that works as SVG in any editor and as CSS in any web project.

Who it is for

Use it when

  • Starting the interface of a SaaS dashboard or internal tool
  • Giving a designer and a developer one shared set of tokens and components
  • Building a branded kit by changing the ramps and rebuilding

Built for

  • Solo developers and small product teams
  • Designers who work in Figma, Penpot or Inkscape and hand off to code

What is inside

Tokens first

Core primitives (six colour ramps, type, spacing, radii, sizes, durations) and two theme files that map semantic names such as text.secondary or accent.hover onto them. The files follow the W3C Design Tokens draft syntax and the Tokens Studio multi-file layout with Light and Dark themes.

Every state, drawn

Buttons in four variants and five states and three sizes; inputs with hover, focus ring, error and disabled; an open select menu; checkboxes, radios and toggles; tabs; three card types; dialogs over a scrim; four toast tones; a data table; navbars and pagination. Each instance is a named SVG group.

Design tool and code agree

The same token build writes the SVG sheets, the big canvas and pliantkit.css. The HTML reference shows each component with native elements, keyboard focus and a theme switch, and the token table lists every value with its CSS variable.

Checked, not assumed

Tests validate every token and alias, compute contrast for 24 text pairs and 6 component boundaries in both themes, parse all 25 SVG files, confirm that every colour in a sheet is a token colour and that every expected layer exists, and check the CSS variables and HTML links.

Specs

Availability
Coming soon
Vendor
PN Scripts
Type
Game asset
Pricing
One-time purchase Price to be announced.
License
PN Scripts Template Licence 1.0
Deployment
Download (ZIP with tokens, SVG sheets, CSS, HTML reference and the generator)
Maturity
v2.0.0

Compatibility

Platform or runtime Supported versions Tested up to
Python (to rebuild) 3.10 or newer 3.12
Google Chrome (HTML reference) 120 or newer current stable, headless

Stack

  • Design Tokens (W3C draft JSON)
  • Tokens Studio file layout
  • SVG
  • CSS custom properties
  • HTML
  • Python 3 (generator)

Pliantkit by PN Scripts is coming soon

It is finished and tested. It is not on sale yet; this page will say where to get it when it is.

Coming soon

Not published on its store yet, so there is no buy or download link. PN Scripts does not take payment for it here.

Questions

A UI kit made of design tokens, SVG sheets of 11 components in light and dark, a canvas SVG for design tools, a CSS file with matching component classes and an HTML reference, all generated from the tokens by an included script.

Any SVG-capable design tool for the sheets, any modern browser for the CSS and HTML, and the free Noto Sans font for matching text. To rebuild after editing the tokens you need Python 3.10 or newer; it was tested with Python 3.12.

There is no .fig file and no Figma components or variants: the SVG imports as named vector and text layers. Figma, Penpot, Inkscape and the Tokens Studio plugin were not opened during testing. There are no JavaScript framework components and no icon set beyond the few icons the components use.

The tokens, generator, components, CSS and HTML were written for this kit, and 18 automated tests run on every build. Created with AI assistance; the tokens, contrast, SVG files, CSS and HTML were checked by PN Scripts with automated tests and headless Google Chrome renders of every sheet in both themes.

It is not on sale yet. When it is, this page will link to the store; PN Scripts does not take payment on this site.