Verve

Framework-agnostic Material 3 Expressive design tokens — dynamic color, typography, shape, elevation, motion, and interaction states — as typed TypeScript constants and generated CSS custom properties.

This is the token foundation for a future React component library. It has no framework dependency of its own: plain TS + CSS, usable from anything.

Why

Material Design 3 Expressive (Google's 2025 evolution of M3 — spring-based motion, an expanded shape system, bolder typography) isn't well represented in existing component libraries. Verve implements the actual spec rather than approximating it:

• Color — wraps Google's own material-color-utilities for real HCT/CAM16 dynamic color, including Expressive's 2025 role set (primaryDim, *Fixed/*FixedDim, expanded surfaceContainer* tiers)
• Shape — the full 35-shape Expressive catalog (cookie, clover, burst, pill, heart, …) via shape-morph, a verified port of Google's RoundedPolygon algorithm
• Motion — all 12 spring tokens (standard/expressive × spatial/effects × fast/default/slow), values pulled directly from Google's AndroidX source, plus the two-segment "emphasized" easing curve
• Typography, elevation, state layers — the standard M3 type scale, elevation levels, and interaction-state opacities

Install

pnpm add verve-tokens

Usage

import { createTheme, applyTheme } from "verve-tokens";

const theme = createTheme({ seed: "#6750A4", variant: "expressive" });
applyTheme(theme); // sets --md-sys-* custom properties on :root at runtime

.button {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-level1);
  transition: transform var(--md-sys-motion-spring-expressive-spatial-fast-duration)
              var(--md-sys-motion-spring-expressive-spatial-fast-easing);
}

For SSR or static generation, use themeToCss(theme) instead of applyTheme. Zero-JS consumers can import the prebuilt CSS directly:

@import "verve-tokens/css/base.css";        /* typography, shape, elevation, motion, state */
@import "verve-tokens/css/theme-light.css"; /* default baseline color scheme */
@import "verve-tokens/css/theme-dark.css";

Each token category is also available as a subpath import (verve-tokens/color, verve-tokens/motion, etc.) if you only need part of it.

Development

pnpm install
pnpm test        # vitest
pnpm typecheck
pnpm build       # tsup + CSS generation
pnpm print-theme # CLI sanity check: resolves a theme, prints the role table

sandbox.html is a static, no-build-step page for manually eyeballing the generated tokens in a browser.

Roadmap

Verve is the token layer for a React component library that will consume it directly — components aren't implemented yet.

License

MIT