Show HN: Visual Source, local design token manager

5 hours ago 2

Visual Source is an opionated GUI for managing your projects design tokens locally.

It supports definings color palettes, color tokens, spacing tokens and more. Please note this is alpha software! It is a proof-of-concept I have found useful for my own projects, but there is still a lot to be done. Feedback and contributions are welcome.

When getting started with a new project coming up with design tokens, and then updating them as your refine the look can be a slow process. Visual Source tries to solve this by giving you a design token GUI locally in your project. As you make changes, we regenerate CSS and you see the results in your app immediately! It gives you source of truth to document your tokens, and tools to do things quickly which are otherwise tedious in a text editor.

Download the latest version of Visual Source from the Releases page.

Launch the GUI by running visual-source in the root of your project
Follow the Getting Started prompt to set up some example tokens
Visual Source will start generating CSS files for you to reference. To load in your tokens simply import the generated .visual-source/visual-source.css

Visual Source has been built flexibly and aims to accomodate the majority of use cases, but does have some assumptions built in.

Visual Source supports two layers of color tokens, palettes and tokens.

Palettes are variants of a single color (usually shades from light to dark) which can be referenced by other tokens. Tokens directly correspond with the common CSS variables you may have in your app (e.g. --primary-hover or --background). Tokens are able to reference colors in your palettes, so if you make changes to one they are instantly reflected in the other.

Spacing support is currently very rudimentary. We allow you to define one scale of spacing tokens to be used, and these tokens are generated directly into the CSS. There is a lot more we could do here still!