Design tokens as data — colors, type, space, shadows, gradients, and contrast — rendered to CSS.
A library and command-line tool for turning a structured design-token specification (JSON, or any serde-compatible format) into a CSS custom-property sheet you can drop into any project.
Five sample themes, each rendered from a single JSON spec. Source specs and sample HTML are in
samples/.
Editorial light · Literata · blue + amber on warm neutrals
Sleek dark · Sora · violet + emerald
Vivid · Bricolage Grotesque · coral + teal
Sweet light · Caprasimo · pink + lime on cream
Deep space · Audiowide · magenta + cyan on ink
# Install (once published)
cargo install tangible
# Render a spec file to CSS on stdout
tangible tokens.json
# Or to a file
tangible tokens.json -o dist/tokens.cssuse tangible::{Renderer, Spec};
let spec: Spec = serde_json::from_str(json)?;
let css = Renderer::new().render(&spec)?;
std::fs::write("dist/tokens.css", css.to_string())?;From a single spec file, tangible emits CSS custom properties for:
- Palettes — explicit hex lists or interpolated gradients (linear / catmull-rom / basis, blended in rgb / linear-rgb / oklab / lab).
- Semantic aliases — name your roles (
bg,surface,interactive) and bind them to palette shades or raw values. - Ink (contrast) — for every semantic color,
tangiblepicks the higher-contrast ink (WCAG luminance) and emits both the ink color and a paired text-shadow. - Typography — font families, sizes, weights, line-heights, letter-spacings.
- Space and dimensions — scale-aligned spacing and sizing tokens.
- Borders — radii and widths.
- Shadows and glows — multi-layer drop shadows and elevation glows.
- Gradients — both var-reference and pre-resolved (color-space-interpolated) gradient strings.
- Transitions, z-index, opacity, overlay — the remaining variables.
The cli feature is enabled by default. To use tangible as a library only:
[dependencies]
tangible = { version = "0.0.1", default-features = false }Dual-licensed under either of
at your option.