Design Tokens

Every visual decision is a CSS custom property prefixed --as-. Toggle the theme (top right) to watch every swatch adapt.

Surfaces

background / foreground

card / card-foreground

popover / popover-foreground

muted / muted-foreground

Brand

primary / primary-foreground

secondary / secondary-foreground

accent / accent-foreground

Feedback

destructive

success

warning

info

Data visualization

chart-1

chart-2

chart-3

chart-4

chart-5

Shape & typography

rounded-sm

rounded-md

rounded-lg

rounded-xl

All radii derive from one --as-radius value — change it once to reshape the entire system.

Using tokens outside Tailwind

Charts, canvas, or non-React surfaces can read tokens directly:

import { cssVar, readToken } from "@aspyn-io/tokens";

cssVar("primary");        // "var(--as-primary)" — for CSS-in-JS
readToken("primary");     // computed value at runtime — for canvas/charts

Brand themes

The Aspyn theme is the default. Brand-specific themes layer on top by overriding tokens — components never change. The Aptive Environmental theme ships in the box:

@import "tailwindcss";
@import "@aspyn-io/tokens/theme";
@import "@aspyn-io/tokens/themes/aptive"; /* forest green, cream, pill radius */

Overriding for a product

Products can re-skin the system by overriding variables after the theme import:

@import "tailwindcss";
@import "@aspyn-io/tokens/theme";

:root {
  --as-primary: oklch(0.55 0.2 150); /* product-specific brand */
  --as-radius: 1rem;
}